diff --git a/src/components/v-labelDiv/index.vue b/src/components/v-labelDiv/index.vue
index eb2df3f..079c98b 100644
--- a/src/components/v-labelDiv/index.vue
+++ b/src/components/v-labelDiv/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 16:01:05
- * @LastEditTime: 2021-11-02 13:05:06
+ * @LastEditTime: 2021-11-03 12:01:12
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/components/v-labelDiv/index.vue
@@ -53,6 +53,7 @@ export default {
 .v-label-container {
     position: relative;
     display: flex;
+    width: 100%;
     height: 48px;
     padding-left: 16px;
     padding-right: 16px;
diff --git a/src/router/index.js b/src/router/index.js
index 96a7cd5..b887f5d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 09:26:29
- * @LastEditTime: 2021-10-25 13:15:04
+ * @LastEditTime: 2021-11-03 11:48:10
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/router/index.js
@@ -31,6 +31,7 @@ import Login from "@/views/Login"
 import EventDEC from "@/views/EventDEC"
 import MarketingAnalysis from "@/views/MarketingAnalysis"
 import ModelInsight from "@/views/ModelInsight"
+import MarketingComparison from "@/views/MarketingComparison"
 const router = [
     {
         path: '/login',
@@ -127,6 +128,12 @@ const router = [
                 desc: "车型洞察",
                 component: ModelInsight
             },
+            {
+                path: '/marketingComparison',
+                name: "marketingComparison",
+                desc: "营销对比",
+                component: MarketingComparison
+            },
         ]
     },
    
diff --git a/src/views/EventDetails/hotOther/index.vue b/src/views/EventDetails/hotOther/index.vue
index 7e8ab1a..f33c6d1 100644
--- a/src/views/EventDetails/hotOther/index.vue
+++ b/src/views/EventDetails/hotOther/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-13 11:54:38
- * @LastEditTime: 2021-10-13 16:11:44
+ * @LastEditTime: 2021-11-03 11:32:04
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/EventDetails/hotOther/index.vue
@@ -10,7 +10,7 @@
     <div class="ho-outter">
         <v-label-div title="热点事件传播导向" />
         <div class="ho-bd">
-            <dv-scroll-board :config="config" :style="{ width: '100%', height: '432px' }" />
+            <dv-scroll-board :config="config" :style="{ width: '100%', height: '27rem' }" />
         </div>
         <div class="ho-footer">
             <span class="ho-f-s1">共 <span style="color: #2c66b5;">26785</span> 条</span>
@@ -26,10 +26,11 @@ export default {
         return {
             currentPage: 1,
             config: {
-                headerBGC: "#0F2A4D",
-                oddRowBGC: "rgba(69, 149, 244, 0);",
-                evenRowBGC: "#0F2A4D;",
-                columnWidth: [320],
+                headerBGC: "#0c203b",
+                oddRowBGC: "#173b6d",
+                evenRowBGC: "rgba(69, 149, 244, 0)",
+                rowNum: 10,
+                columnWidth: [224,'', 160],
                 header: ["事件列表", "影响力", "时间", "关联车型"],
                 data: [
                     [
diff --git a/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue b/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue
index 486faa8..f99864b 100644
--- a/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue
+++ b/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-25 11:03:30
- * @LastEditTime: 2021-10-26 10:45:27
+ * @LastEditTime: 2021-11-03 11:48:52
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/MarketingAnalysis/brandVolumeTOP10/index.vue
@@ -55,7 +55,7 @@ export default {
             });
         },
         goPath() {
-
+            this.$router.push({path: "/marketingComparison"})
         },
     },
 };
diff --git a/src/views/MarketingComparison/index.vue b/src/views/MarketingComparison/index.vue
new file mode 100644
index 0000000..8ce7be1
--- /dev/null
+++ b/src/views/MarketingComparison/index.vue
@@ -0,0 +1,50 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-03 11:45:09
+ * @LastEditTime: 2021-11-03 15:11:22
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/MarketingComparison/index.vue
+-->
+<template>
+    <div class="d-container">
+       <div class="mc-outter">
+          <mcChooseModel></mcChooseModel>
+          <div class="mc-d1">
+              <mcOSVC></mcOSVC>
+              <mcIVC></mcIVC>
+          </div>
+          <mcTOPMedia></mcTOPMedia>
+          <mcChannelDistribution></mcChannelDistribution>
+       </div>
+    </div>
+</template>
+
+<script>
+import mcChooseModel from "./mcChooseModel"
+import mcOSVC from "./mcOSVC"
+import mcIVC from "./mcIVC"
+import mcTOPMedia from "./mcTOPMedia"
+import mcChannelDistribution from "./mcChannelDistribution"
+export default {
+    name: "MarketingComparison",
+    components: {
+        mcChooseModel, // 选择车型
+        mcOSVC, // 整体声量对比
+        mcIVC, // 互动量对比
+        mcTOPMedia, // 车型传播TOP媒体
+        mcChannelDistribution // 渠道分布对比
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.mc-outter {
+    padding: 0px 16px 16px 16px;
+}
+.mc-d1 {
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 16px;
+}
+</style>
diff --git a/src/views/MarketingComparison/mcChannelDistribution/index.vue b/src/views/MarketingComparison/mcChannelDistribution/index.vue
new file mode 100644
index 0000000..765a58b
--- /dev/null
+++ b/src/views/MarketingComparison/mcChannelDistribution/index.vue
@@ -0,0 +1,41 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:08:13
+ * @LastEditTime: 2021-11-03 15:11:02
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
+-->
+<template>
+    <div class="cd-outter">
+        <v-label-div title="渠道分布">
+        </v-label-div>
+        <div class="cd-inner">
+           <v-echarts :opt="opt"></v-echarts> 
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from "./opt"
+export default {
+    name: "mcChannelDistribution",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.cd-outter {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    .cd-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
diff --git a/src/views/MarketingComparison/mcChannelDistribution/opt.js b/src/views/MarketingComparison/mcChannelDistribution/opt.js
new file mode 100644
index 0000000..87608fd
--- /dev/null
+++ b/src/views/MarketingComparison/mcChannelDistribution/opt.js
@@ -0,0 +1,188 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-15 15:15:27
+ * @LastEditTime: 2021-11-03 15:46:49
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
+ */
+import * as echarts from "echarts";
+let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#3373CC'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#63AECC'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#54BF93'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC9D12'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC7733'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+        offset: 0,
+        color: '#CC5B41'
+    },
+    {
+        offset: 1,
+        color: '#071a32'
+    }
+], false)]
+export default function createOpt() {
+    return {
+        grid: {
+            top: "56px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        color: colors,
+        legend: {
+            data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
+            textStyle: { //图例文字的样式
+                color: '#fff'
+            },
+            y: 12,
+            x: 16
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+        },
+        xAxis: [
+            {
+                type: 'category',
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#fff",
+                    },
+                },
+                data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#FFF",
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        type: "dashed", // y轴分割线类型
+                        color: "#012b4b",
+                    },
+                },
+            }
+        ],
+        series: [
+            {
+                name: '奥迪',
+                type: 'bar',
+                barGap: '9%',
+                barWidth: 16,
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [320, 332, 301, 334, 390, 400]
+            },
+            {
+                name: '宝马',
+                type: 'bar',
+                barWidth: 16,
+                barGap: '9%',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [220, 182, 191, 234, 290, 300]
+            },
+            {
+                name: '奔驰',
+                type: 'bar',
+                barWidth: 16,
+                barGap: '9%',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [150, 232, 201, 154, 190, 200]
+            },
+            {
+                name: '吉利',
+                type: 'bar',
+                barWidth: 16,
+                barGap: '9%',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [98, 77, 101, 99, 40, 44]
+            },
+            {
+                name: '大众',
+                type: 'bar',
+                barWidth: 16,
+                barGap: '9%',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [198, 177, 101, 199, 140, 145]
+            },
+            {
+                name: '别克',
+                type: 'bar',
+                barWidth: 16,
+                barGap: '9%',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [298, 277, 201, 299, 240, 250]
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/views/MarketingComparison/mcChooseModel/index.vue b/src/views/MarketingComparison/mcChooseModel/index.vue
new file mode 100644
index 0000000..339f635
--- /dev/null
+++ b/src/views/MarketingComparison/mcChooseModel/index.vue
@@ -0,0 +1,217 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-03 11:54:08
+ * @LastEditTime: 2021-11-03 14:40:05
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
+-->
+<template>
+    <div class="mccm-outter">
+        <v-label-div title="切换车型">
+            <v-btn @click="goback">返回营销分析</v-btn>
+        </v-label-div>
+        <div class="mccm-inner">
+            <div class="mccm-item" style="margin-left: 1rem">
+                <div class="mc-t">
+                    <div class="m-t-d1">奥迪</div>
+                    <span class="m-t-s1">A4</span>
+                </div>
+                <div>
+                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
+                        <a-form-model-item label="开始时间">
+                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
+                        </a-form-model-item>
+                        <a-form-model-item label="结束时间">
+                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
+                        </a-form-model-item>
+                    </a-form-model>
+                </div>
+                <div class="m-t-btn">切换车型</div>
+            </div>
+            <img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
+            <div class="mccm-item">
+                 <div class="mc-t">
+                    <div class="m-t-d1">奥迪</div>
+                    <span class="m-t-s1">A4</span>
+                </div>
+                <div>
+                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
+                        <a-form-model-item label="开始时间">
+                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
+                        </a-form-model-item>
+                        <a-form-model-item label="结束时间">
+                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
+                        </a-form-model-item>
+                    </a-form-model>
+                </div>
+                <div class="m-t-btn">切换车型</div>
+            </div>
+            <img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
+            <div class="mccm-item">
+                 <div class="mc-t">
+                    <div class="m-t-d1">奥迪</div>
+                    <span class="m-t-s1">A4</span>
+                </div>
+                <div>
+                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
+                        <a-form-model-item label="开始时间">
+                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
+                        </a-form-model-item>
+                        <a-form-model-item label="结束时间">
+                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
+                        </a-form-model-item>
+                    </a-form-model>
+                </div>
+                <div class="m-t-btn">切换车型</div>
+            </div>
+            <img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
+            <div class="mccm-item">
+                 <div class="mc-t">
+                    <div class="m-t-d1">奥迪</div>
+                    <span class="m-t-s1">A4</span>
+                </div>
+                <div>
+                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
+                        <a-form-model-item label="开始时间">
+                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
+                        </a-form-model-item>
+                        <a-form-model-item label="结束时间">
+                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
+                        </a-form-model-item>
+                    </a-form-model>
+                </div>
+                <div class="m-t-btn">切换车型</div>
+            </div>
+            <img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
+            <div class="mccm-item">
+                 <div class="mc-t">
+                    <div class="m-t-d1">奥迪</div>
+                    <span class="m-t-s1">A4</span>
+                </div>
+                <div>
+                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
+                        <a-form-model-item label="开始时间">
+                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
+                        </a-form-model-item>
+                        <a-form-model-item label="结束时间">
+                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
+                        </a-form-model-item>
+                    </a-form-model>
+                </div>
+                <div class="m-t-btn">切换车型</div>
+            </div>
+            <img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
+            <div class="mccm-item">
+                 <div class="mc-t">
+                    <div class="m-t-d1">奥迪</div>
+                    <span class="m-t-s1">A4</span>
+                </div>
+                <div>
+                    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
+                        <a-form-model-item label="开始时间">
+                            <a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
+                        </a-form-model-item>
+                        <a-form-model-item label="结束时间">
+                            <a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
+                        </a-form-model-item>
+                    </a-form-model>
+                </div>
+                <div class="m-t-btn">切换车型</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "mcChooseModel",
+    data() {
+        return {
+            labelCol: { span: 9 },
+            wrapperCol: { span: 14 },
+            form: {
+                startTime: "",
+                endTime: "",
+            },
+        };
+    },
+    methods: {
+        goback() {
+            this.$router.go(-1)
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.mccm-outter {
+    width: 1888px;
+    height: 276px;
+    border: 2px solid #0f2a4d;
+    .mccm-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .mccm-item {
+            width: 230px;
+            height: 200px;
+            background: linear-gradient(180deg, #003a62 0%, #001c43 100%);
+            border: 2px solid #0e5193;
+            margin-top: 13px;
+            border-radius: 2px;
+            position: relative;
+            .m-t-btn {
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                width: 95px;
+                height: 28px;
+                background-image: url("../../../assets/images/BrandInsight/img_xbut.png");
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+                text-align: center;
+                color: #63AECC;
+                line-height: 28px;
+            }
+            .mc-t {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                margin-top: 21px;
+                .m-t-d1 {
+                    width: 78px;
+                    height: 78px;
+                    background-image: url("../../../assets/images/BrandInsight/img_lq.png");
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                    line-height: 78px;
+                    text-align: center;
+                    font-size: 14px;
+                    color: #0090ff;
+                    margin-left: 17px;
+                }
+                .m-t-s1 {
+                    display: block;
+                    font-size: 20px;
+                    color: #fff;
+                    margin-left: 6px;
+                }
+            }
+        }
+        .mccm-vs {
+            width: 94px;
+            height: 94px;
+            margin-top: 22px;
+        }
+    }
+}
+/deep/ .ant-form-item {
+    margin-bottom: 10px;
+}
+/deep/ .ant-calendar-picker {
+    min-width: auto !important;
+}
+</style>
diff --git a/src/views/MarketingComparison/mcIVC/index.vue b/src/views/MarketingComparison/mcIVC/index.vue
new file mode 100644
index 0000000..bda8f44
--- /dev/null
+++ b/src/views/MarketingComparison/mcIVC/index.vue
@@ -0,0 +1,43 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-03 14:53:47
+ * @LastEditTime: 2021-11-03 14:58:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/MarketingComparison/mcIVC/index.vue
+-->
+<template>
+    <div class="mic-outter">
+        <v-label-div title="互动量对比">
+        </v-label-div>
+        <div class="mic-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "mcIVC",
+    data() {
+        return {
+            opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500], '#4fb58c')
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.mic-outter {
+    width: 936px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-left: 16px;
+    .mic-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+
+</style>
diff --git a/src/views/MarketingComparison/mcOSVC/index.vue b/src/views/MarketingComparison/mcOSVC/index.vue
new file mode 100644
index 0000000..74c5a4a
--- /dev/null
+++ b/src/views/MarketingComparison/mcOSVC/index.vue
@@ -0,0 +1,41 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-03 14:45:05
+ * @LastEditTime: 2021-11-03 14:58:11
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/MarketingComparison/mcOSVC/index.vue
+-->
+<template>
+    <div class="mos-outter">
+        <v-label-div title="整体声量对比">
+        </v-label-div>
+        <div class="mos-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {createSingleColumnar} from "@/utils/gol/singleColumnar"
+export default {
+    name: "mcOSVC",
+    data() {
+        return {
+            opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500])
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.mos-outter {
+    width: 936px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+}
+.mos-inner {
+    width: 100%;
+    height: calc(100% - 48px);
+}
+</style>
diff --git a/src/views/MarketingComparison/mcTOPMedia/index.vue b/src/views/MarketingComparison/mcTOPMedia/index.vue
new file mode 100644
index 0000000..265d1d1
--- /dev/null
+++ b/src/views/MarketingComparison/mcTOPMedia/index.vue
@@ -0,0 +1,242 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-15 15:58:57
+ * @LastEditTime: 2021-11-03 15:04:18
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
+-->
+<template>
+    <div class="bcm-outter">
+        <v-label-div title="品牌传播TOP媒体">
+        </v-label-div>
+        <div class="bcm-inner">
+            <div class="bcm-item" v-for="(item,index) in list" :key="index">
+                <span class="ss1" :style="{color: colors[index]}">{{item.name}}</span>
+                <v-ranking-bcm  v-for="(it,n) in item.medias" :key="n" :label="it.label" :num="it.num" :val="it.val"></v-ranking-bcm>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import vRankingBcm from "./v-ranking-bcm"
+export default {
+    name: "mcTOPMedia",
+    components: {
+       vRankingBcm 
+    },
+    data() {
+        return {
+            colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
+            list: [
+                {
+                    name: '奥迪A4',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                },
+                {
+                    name: '宝马525',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                },
+                {
+                    name: '奔驰S600',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                },
+                 {
+                    name: '吉利帝豪',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                },
+                 {
+                    name: '大众途观',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                },
+                {
+                    name: '别克君威',
+                    medias: [
+                        {
+                            num: 1,
+                            label: '微博',
+                            val: 1000
+                        },
+                        {
+                            num: 2,
+                            label: '字节跳动',
+                            val: 800
+                        },
+                        {
+                            num: 3,
+                            label: '搜狐汽车',
+                            val: 600
+                        },
+                        {
+                            num: 4,
+                            label: '汽车之家',
+                            val: 400
+                        },
+                        {
+                            num: 5,
+                            label: '企鹅网',
+                            val: 300
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.bcm-outter {
+    width: 100%;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .bcm-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+        display: flex;
+        justify-content: flex-start;
+        .bcm-item {
+            width: 282px;
+            margin-left: 27px;
+            .ss1 {
+                display: block;
+                font-size: 18px;
+                color: #fff;
+                font-weight: 500;
+                padding-top: 14px;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/MarketingComparison/mcTOPMedia/v-ranking-bcm/index.vue b/src/views/MarketingComparison/mcTOPMedia/v-ranking-bcm/index.vue
new file mode 100644
index 0000000..3760c07
--- /dev/null
+++ b/src/views/MarketingComparison/mcTOPMedia/v-ranking-bcm/index.vue
@@ -0,0 +1,232 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-10-15 16:51:59
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-ranking/index.vue
+-->
+<template>
+  <div class="v-r-container">
+    <div class="v-r-line" v-if="lineShow"></div>
+    <div class="v-r-inner">
+      <div :class="ls">
+        <span class="s1">{{ num|numStr }}</span>
+      </div>
+      <div :class="rs">
+          <span class="v-r-label">{{label}}</span>
+          <div class="v-r-res">
+              <span class="s1">传播量</span>
+              <span class="s2">{{val}}</span>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "v-ranking-bcm",
+  props: {
+    num: {
+      type: [String, Number],
+      default: 1,
+    },
+    val: {
+        type: [String, Number],
+        default: 0
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+    lineShow: {
+        type: Boolean,
+        default: true
+    },
+    
+  },
+  watch: {
+      num: {
+          handler(val) {
+              if(val == 1) {
+                  this.ls = "v-r-left-1"
+                  this.rs = "v-r-right-1"
+              } else if(val == 2) {
+                  this.ls = "v-r-left-2"
+                  this.rs = "v-r-right-2"
+              } else if(val == 3) {
+                  this.ls = "v-r-left-3"
+                  this.rs = "v-r-right-3"
+              } else {
+                  this.ls = "v-r-left"
+                  this.rs = "v-r-right"
+              }
+          },
+          immediate: true
+      }
+  },
+  data() {
+      return  {
+          ls: "v-r-left",
+          rs: "v-r-right"
+      }
+  },
+  filters: {
+        numStr(val) {
+            let str = ""
+            if(0<val && val<10) {
+                str = '0' + val
+            } else {
+                str = val + ''
+            }
+            return str
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.v-r-container {
+  width: 281px;
+  height: auto;
+  .v-r-line {
+    width: 100%;
+    height: 1px;
+    background:#0a1d3b;
+    margin-top: 14px;
+  }
+  .v-r-inner {
+    position: relative;
+    width: 100%;
+    height: 40px;
+    margin-top: 14px;
+    color: #fff;
+    background: #0a1d3b;
+    border-radius: 2px;
+  }
+  .v-r-label {
+      display: block;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin-left: 30px;
+      font-weight: bold;
+  }
+  .v-r-res {
+      margin-right: 16px;
+      display: flex;
+      justify-content: flex-start;
+      span {
+          display: block;
+          text-align: right;
+          font-size: 12px;
+      }
+      .s1 {
+          color: #9ba4af;
+      }
+      .s2 {
+          color: #fff;
+          font-family: Bebas;
+          margin-left: 10px;
+      }
+  }
+  .v-r-left {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 40px;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid transparent;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-1 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #cc9d12;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #cc9d12;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-1 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #CC9D12;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-2 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #3373CC;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #3373CC;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-2 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #3373CC;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-3 {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #54BF93;
+    border-radius: 40px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 36px;
+      text-shadow: 0px 0px 8px #54BF93;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-3 {
+      position: absolute;
+      width: 259px;
+      height: 40px;
+      border-top: 2px solid #54BF93;
+      top: 0px;
+      left: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+}
+</style>