diff --git a/src/components/v-echars/index.vue b/src/components/v-echars/index.vue
index 912c79c..ccf6a10 100644
--- a/src/components/v-echars/index.vue
+++ b/src/components/v-echars/index.vue
@@ -120,7 +120,6 @@ export default {
         },
         // 针对圆特定图形加个默认被选择
         roundDefaultSelect(myChart) {
-            console.log(myChart)
             if (!myChart.getOption().series[0] || myChart.getOption().series[0].type != "pie") {
                 return;
             }
diff --git a/src/store/getters.js b/src/store/getters.js
index 2c08864..fcbc6cb 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -21,7 +21,9 @@ const getters = {
     },
     getAccount(state) {
         //这里写解密算法
-        state.account.sPwd = window.atob(state.account.sPwd);
+        if(state.account.sPwd) {
+            state.account.sPwd = window.atob(state.account.sPwd);
+        }
         return state.account
     },
     getCommTime(state) {
diff --git a/src/store/mutations.js b/src/store/mutations.js
index e31b945..48ed246 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -27,7 +27,9 @@ const mutations = {
     },
     setAccount: (state, log) => {
         state.account = log;
-        state.account.sPwd = window.btoa(state.account.sPwd);
+        if(state.account.sPwd) {
+            state.account.sPwd = window.btoa(state.account.sPwd);
+        }
         let str = JSON.stringify(log);
         localStorage.setItem('account', str);
     },
diff --git a/src/views/KeyMediaBrand/index.vue b/src/views/KeyMediaBrand/index.vue
index c21867e..958cd8e 100644
--- a/src/views/KeyMediaBrand/index.vue
+++ b/src/views/KeyMediaBrand/index.vue
@@ -66,26 +66,28 @@
           </div>
         </div>
       </div>
-      <div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
+      <div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
         <vue-lazy-component>
-        <weibo-communication-trend-long></weibo-communication-trend-long>
-        <weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
+        <weibo-communication-trend></weibo-communication-trend>
+        <weiboCommunicationTrendStoken slot="skeleton"></weiboCommunicationTrendStoken>
         </vue-lazy-component>
+        <spreadTOPmodels></spreadTOPmodels>
       </div>
       <div class="wd-d2" v-else>
         <vue-lazy-component>
-        <weibo-communication-trend></weibo-communication-trend>
-        <weiboCommunicationTrendStoken slot="skeleton"></weiboCommunicationTrendStoken>
+        <weibo-communication-trend-long></weibo-communication-trend-long>
+        <weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
         </vue-lazy-component>
+      </div>
+      <div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)"></div>
+      <div class="wd-d3" v-else>
+        <!-- <subscribeSeries></subscribeSeries> -->
+        <spreadTOPmodels></spreadTOPmodels>
         <vue-lazy-component>
         <weiboContentTOPVolume></weiboContentTOPVolume>
         <weiboContentTOPVolumeStoken slot="skeleton"></weiboContentTOPVolumeStoken>
         </vue-lazy-component>
       </div>
-      <div class="wd-d3">
-        <subscribeSeries></subscribeSeries>
-        <spreadTOPmodels></spreadTOPmodels>
-      </div>
       <div class="wd-d4">
         <vue-lazy-component>
         <weiboContentType></weiboContentType>
@@ -100,8 +102,8 @@
         <weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
         </vue-lazy-component>
       </div>
-      <div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
-        <vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1)">
+      <div class="wd-d3" v-if="form.sSource == '新浪微博' || form.sSource == '汽车之家' || (form.sSource == '懂车帝' && getCarCircle == 1)">
+        <vue-lazy-component v-if="form.sSource == '新浪微博' || form.sSource == '汽车之家'">
         <weiboUserActiveArea></weiboUserActiveArea>
         <weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
         </vue-lazy-component>
diff --git a/src/views/KeyMediaBrand/spreadTOPmodels/index.vue b/src/views/KeyMediaBrand/spreadTOPmodels/index.vue
index a406e90..68fb3dd 100644
--- a/src/views/KeyMediaBrand/spreadTOPmodels/index.vue
+++ b/src/views/KeyMediaBrand/spreadTOPmodels/index.vue
@@ -8,7 +8,7 @@
 -->
 <template>
     <div class="stm-outter" v-loading="load">
-        <v-label-div title="传播声量TOP车型" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+        <v-label-div title="传播声量TOP车型" :eStyle="{'border-style': 'none'}"></v-label-div>
         <div class="stm-inner">
             <v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
         </div>
@@ -71,7 +71,7 @@ export default {
 <style lang="less" scoped>
 .stm-outter {
     width: 936px;
-    height: 412px;
+    height: 460px;
     border: 2px solid #0f2a4d;
     margin-left: 16px;
     .stm-inner {
diff --git a/src/views/KeyMediaBrand/weiboContentTOPVolume/index.vue b/src/views/KeyMediaBrand/weiboContentTOPVolume/index.vue
index 13ddf6f..61c9031 100644
--- a/src/views/KeyMediaBrand/weiboContentTOPVolume/index.vue
+++ b/src/views/KeyMediaBrand/weiboContentTOPVolume/index.vue
@@ -7,14 +7,45 @@
  * @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/index.vue
 -->
 <template>
-  <div class="wct-outter" v-loading="load">
-    <v-label-div title="内容TOP声量"> </v-label-div>
-    <div class="wct-inner">
-      <div class="wct-d1" v-for="(item,index) in list" :key="index">
-        <v-echarts :opt="item.opt"></v-echarts>
-        <div class="wct-d1-dd1">
-          <span>排名：<span class="ss1">0{{index+1}}</span></span>
-          <span>声量：<span class="ss1">{{item.value}}</span></span>
+  <div>
+    <div class="d22" v-if="(form.sSource == '汽车之家') || (form.sSource == '懂车帝')">
+      <div class="wct-small-outter">
+        <v-label-div title="内容TOP声量"> </v-label-div>
+        <div class="wct-inner">
+          <vue-scroll>
+                <div class="d-rank" style="margin-left: 16px">
+                    <div class="rank1">
+                        <v-ranking-kmd v-for="(item,index) in d4" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
+                    </div>
+                </div>
+          </vue-scroll>
+        </div>
+      </div>
+      <div class="wct-small-outter">
+        <v-label-div title="关注TOP车型"> </v-label-div>
+        <div class="wct-inner">
+            <vue-scroll>
+              <div class="d-rank" style="margin-left: 16px">
+                  <div class="rank1">
+                      <v-ranking-kmd v-for="(item,index) in d3" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
+                  </div>
+              </div>
+            </vue-scroll>
+        </div>
+      </div>
+    </div>
+    <div class="wct-outter" v-loading="load" v-else>
+      <v-label-div title="内容TOP声量"> </v-label-div>
+      <div class="wct-inner">
+          <div class="dd2">
+              <div class="d-rank" style="margin-left: 16px">
+                  <div class="rank1">
+                      <v-ranking-kmd v-for="(item,index) in d1" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
+                  </div>
+                  <div class="rank1" style="margin-left: 14px">
+                      <v-ranking-kmd v-for="(item,index) in d2" :key="index" :lineShow="index === 0 ? false : true" :num="index + 6" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
+                  </div>
+            </div>
         </div>
       </div>
     </div>
@@ -23,10 +54,14 @@
 
 <script>
 import {comparePig} from "@/utils/gol/dataTool"
-import createOpt from "./opt"
+import {getGuanZhuSeriesname} from "@/api/KeyMediaBrand/index.js"
+import vRankingKmd from "./v-ranking-kmd"
 import {getDirectWeiBo0528} from "@/api/KeyMediaBrand/index.js"
 export default {
     name: "weiboContentTOPVolume",
+    components: {
+        vRankingKmd
+    },
     data() {
         return {
             load: false, 
@@ -36,6 +71,10 @@ export default {
                 sSource: '',
                 ilimitType: 0,
             },
+            d1: [],
+            d2: [],
+            d3: [],
+            d4: [],
             list: [],
             colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#3373CC', '#63AECC', '#54BF93', '#CC9D12']
         };
@@ -57,31 +96,63 @@ export default {
             let obj = Object.assign({}, this.getCtime2, this.form);
             getDirectWeiBo0528(obj).then(res => {
                 let data = res.data || [];
-                let arr = [];
                 data.sort(comparePig('value'));
-                let maxVal = data[0].value
-                data.forEach((ele,index) => {
-                    let obj = {
-                        value: ele.value,
-                        opt: createOpt(ele.key,this.colors[index],ele.value, maxVal)
-                    }
-                    arr.push(obj)
+                let mediaList = [];
+                data.forEach(ele => {
+                  let obj = { label: ele.key, val: ele.value};
+                  mediaList.push(obj);
                 })
-                this.list = arr;
+                this.d1 = mediaList.slice(0, 5);
+                this.d2 = mediaList.slice(5, 10);
+                this.d4 = mediaList;
+                // let arr = [];
+                // data.sort(comparePig('value'));
+                // let maxVal = data[0].value
+                // data.forEach((ele,index) => {
+                //     let obj = {
+                //         value: ele.value,
+                //         opt: createOpt(ele.key,this.colors[index],ele.value, maxVal)
+                //     }
+                //     arr.push(obj)
+                // })
+                // this.list = arr;
                 this.load = false;
             });
+            getGuanZhuSeriesname(obj).then(res => {
+                let data = res.data || [];
+                let arr = [];
+                for(let key in data) {
+                  let obj = {label: key, val: data[key]};
+                  arr.push(obj)
+                }
+                this.d3 = arr
+            })
         }
     }
 }
 </script>
 
 <style lang="less" scoped>
+.d22 {
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-start;
+}
 .wct-outter {
   width: 936px;
-  height: 412px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  overflow: hidden;
+}
+.wct-small-outter {
+  width: 460px;
+  height: 460px;
   border: 2px solid #0f2a4d;
   margin-left: 16px;
   overflow: hidden;
+  padding-bottom: 24px;
 }
 .wct-inner {
   width: 100%;
diff --git a/src/views/KeyMediaBrand/weiboContentTOPVolume/opt.js b/src/views/KeyMediaBrand/weiboContentTOPVolume/opt.js
deleted file mode 100644
index 6d88a66..0000000
--- a/src/views/KeyMediaBrand/weiboContentTOPVolume/opt.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * @Author: your name
- * @Date: 2021-10-14 16:05:12
- * @LastEditTime: 2021-11-04 17:05:41
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/opt.js
- * startAngle: 180,
- */
-import * as echarts from "echarts";
-export default function createOpt(name, color, num, maxVal) {
-    return {
-        tooltip: {
-            backgroundColor: "#08182F",
-            color: "#fff",
-            borderColor: "#3373CC",
-            textStyle: {
-                color: "#fff", //设置文字颜色
-            },
-            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
-            formatter: function(param) {
-                let value = param.data.value;
-                let name = param.data.name;
-                return `<span>${name}</span><br><span>声量：${value}</span>`
-            }
-        },
-        series: [
-            {
-                name: name,
-                type: 'gauge',
-                startAngle: 180,
-                endAngle: 0,
-                min: 0,
-                max: maxVal * 5,
-                splitNumber: 5,
-                detail: { show: false, formatter: '{value}%' },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        width: 7,
-                        color: [
-                            [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                                {
-                                    offset: 0,
-                                    color: "#020f1f"
-                                },
-                                {
-                                    offset: 1,
-                                    color: color
-                                }
-                            ])
-                            ]
-                        ]
-                    }
-                },
-                axisLabel: {
-                    distance: -30,
-                    color: "#d8d8d8",
-                },
-                splitLine: {
-                    distance: -6,
-                    length: 12,
-                    lineStyle: {
-                      color: '#d8d8d8',
-                      width: 2
-                    }
-                  },
-                // 刻度线
-                axisTick: {
-                    show: true,
-                    length: 15,
-                    lineStyle: {
-                        color: "auto",
-                        width: 5
-                    }
-                },
-                data: [{ value: num, name: name, title: {show: true, color: color,fontWeight: 'bold'},itemStyle:{color: color}}],
-            }
-        ]
-    };
-}
diff --git a/src/views/KeyMediaBrand/weiboContentTOPVolume/v-ranking-kmd/index.vue b/src/views/KeyMediaBrand/weiboContentTOPVolume/v-ranking-kmd/index.vue
new file mode 100644
index 0000000..c8aa254
--- /dev/null
+++ b/src/views/KeyMediaBrand/weiboContentTOPVolume/v-ranking-kmd/index.vue
@@ -0,0 +1,236 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-11-18 11:57:14
+ * @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 @click="goKeyMedia(label)" 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-kmd",
+  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
+        }
+    },
+  methods: {
+    goKeyMedia(obj) {
+      this.$emit('toMedia', obj)
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.v-r-container {
+  width: 430px;
+  height: auto;
+  .v-r-line {
+    width: 100%;
+    height: 1px;
+    background:#0a1d3b;
+    margin-top: 13px;
+    margin-bottom: 13px;
+  }
+  .v-r-inner {
+    position: relative;
+    width: 100%;
+    height: 48px;
+    margin-top: 6px;
+    color: #fff;
+    background: #0a1d3b;
+    border-radius: 2px;
+  }
+  .v-r-label {
+      display: block;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin-left: 40px;
+      font-weight: bold;
+      cursor: pointer;
+  }
+  .v-r-res {
+      margin-right: 16px;
+      span {
+          display: block;
+          text-align: right;
+          font-size: 12px;
+      }
+      .s1 {
+          color: #9ba4af;
+      }
+      .s2 {
+          color: #fff;
+          font-family: Bebas;
+      }
+  }
+  .v-r-left {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    .s1 {
+      color: #9099a6;
+      font-size: 16px;
+      line-height: 48px;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right {
+      position: absolute;
+      width: 404px;
+      height: 48px;
+      border-top: 2px solid transparent;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-1 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #cc9d12;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #cc9d12;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-1 {
+      position: absolute;
+      width: 404px;
+      height: 48px;
+      border-top: 2px solid #CC9D12;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-2 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #3373CC;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #3373CC;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-2 {
+      position: absolute;
+      width: 404px;
+      height: 48px;
+      border-top: 2px solid #3373CC;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-3 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #54BF93;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #54BF93;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-3 {
+      position: absolute;
+      width: 404px;
+      height: 48px;
+      border-top: 2px solid #54BF93;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+}
+</style>
diff --git a/src/views/KeyMediaEvent/index.vue b/src/views/KeyMediaEvent/index.vue
index f21a05d..846a17d 100644
--- a/src/views/KeyMediaEvent/index.vue
+++ b/src/views/KeyMediaEvent/index.vue
@@ -66,7 +66,7 @@
           </div>
         </div>
       </div>
-      <div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
+      <div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
         <vue-lazy-component>
         <weibo-communication-trend-long></weibo-communication-trend-long>
         <weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
@@ -96,8 +96,8 @@
         <weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
         </vue-lazy-component>
       </div>
-      <div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
-        <vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1)">
+      <div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
+        <vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家')">
         <weiboUserActiveArea></weiboUserActiveArea>
         <weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
         </vue-lazy-component>
diff --git a/src/views/KeyMediaHome/index.vue b/src/views/KeyMediaHome/index.vue
index fffd404..02de3c9 100644
--- a/src/views/KeyMediaHome/index.vue
+++ b/src/views/KeyMediaHome/index.vue
@@ -66,7 +66,7 @@
           </div>
         </div>
       </div>
-      <div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
+      <div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
         <vue-lazy-component>
         <weibo-communication-trend-long></weibo-communication-trend-long>
         <weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
@@ -101,8 +101,8 @@
         <weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
         </vue-lazy-component>
       </div>
-      <div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
-        <vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1)">
+      <div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
+        <vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家')">
         <weiboUserActiveArea></weiboUserActiveArea>
         <weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
         </vue-lazy-component>
diff --git a/src/views/KeyMediaHome/weiboContentTOPVolume/index.vue b/src/views/KeyMediaHome/weiboContentTOPVolume/index.vue
index 0e284fc..348449f 100644
--- a/src/views/KeyMediaHome/weiboContentTOPVolume/index.vue
+++ b/src/views/KeyMediaHome/weiboContentTOPVolume/index.vue
@@ -7,14 +7,45 @@
  * @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/index.vue
 -->
 <template>
-  <div class="wct-outter" v-loading="load">
-    <v-label-div title="内容TOP声量"> </v-label-div>
-    <div class="wct-inner">
-      <div class="wct-d1" v-for="(item, index) in list" :key="index">
-        <v-echarts :opt="item.opt"></v-echarts>
-        <div class="wct-d1-dd1">
-          <span>排名：<span class="ss1">0{{ index + 1 }}</span></span>
-          <span>声量：<span class="ss1">{{ item.value }}</span></span>
+  <div>
+    <div class="d22" v-if="(form.sSource == '汽车之家') || (form.sSource == '懂车帝')">
+      <div class="wct-small-outter">
+        <v-label-div title="内容TOP声量"> </v-label-div>
+        <div class="wct-inner">
+          <vue-scroll>
+                <div class="d-rank" style="margin-left: 16px">
+                    <div class="rank1">
+                        <v-ranking-kmd v-for="(item,index) in d4" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
+                    </div>
+                </div>
+          </vue-scroll>
+        </div>
+      </div>
+      <div class="wct-small-outter">
+        <v-label-div title="关注TOP车型"> </v-label-div>
+        <div class="wct-inner">
+            <vue-scroll>
+              <div class="d-rank" style="margin-left: 16px">
+                  <div class="rank1">
+                      <v-ranking-kmd v-for="(item,index) in d3" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
+                  </div>
+              </div>
+            </vue-scroll>
+        </div>
+      </div>
+    </div>
+    <div class="wct-outter" v-loading="load" v-else>
+      <v-label-div title="内容TOP声量"> </v-label-div>
+      <div class="wct-inner">
+          <div class="dd2">
+              <div class="d-rank" style="margin-left: 16px">
+                  <div class="rank1">
+                      <v-ranking-kmd v-for="(item,index) in d1" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
+                  </div>
+                  <div class="rank1" style="margin-left: 14px">
+                      <v-ranking-kmd v-for="(item,index) in d2" :key="index" :lineShow="index === 0 ? false : true" :num="index + 6" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
+                  </div>
+            </div>
         </div>
       </div>
     </div>
@@ -23,10 +54,14 @@
 
 <script>
 import { comparePig } from "@/utils/gol/dataTool"
-import createOpt from "./opt"
+import vRankingKmd from "./v-ranking-kmd"
 import { getHomeDirectWeiBo0528 } from "@/api/KeyMediaHome/index.js"
+import {getHomeGuanZhuSeriesname} from "@/api/KeyMediaHome/index.js"
 export default {
   name: "weiboContentTOPVolume",
+  components: {
+      vRankingKmd
+  },
   data() {
     return {
       load: false,
@@ -34,6 +69,10 @@ export default {
         sSource: '',
         ilimitType: 0,
       },
+      d1: [],
+      d2: [],
+      d3: [],
+      d4: [],
       list: [],
       colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#3373CC', '#63AECC', '#54BF93', '#CC9D12']
     };
@@ -53,25 +92,38 @@ export default {
       let obj = Object.assign({}, this.getCtime2, this.form);
       getHomeDirectWeiBo0528(obj).then(res => {
         let data = res.data || [];
-        let arr = [];
         data.sort(comparePig('value'));
-        let maxVal = data[0].value
-        data.forEach((ele, index) => {
-          let obj = {
-            value: ele.value,
-            opt: createOpt(ele.key, this.colors[index], ele.value, maxVal)
-          }
-          arr.push(obj)
+        let mediaList = [];
+        data.forEach(ele => {
+          let obj = { label: ele.key, val: ele.value};
+          mediaList.push(obj);
         })
-        this.list = arr;
+        this.d1 = mediaList.slice(0, 5);
+        this.d2 = mediaList.slice(5, 10);
+        this.d4 = mediaList;
         this.load = false;
       });
+      getHomeGuanZhuSeriesname(obj).then(res => {
+        let data = res.data || [];
+        let arr = [];
+        for(let key in data) {
+          let obj = {label: key, val: data[key]};
+          arr.push(obj)
+        }
+        this.d3 = arr
+      })
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
+.d22 {
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-start;
+}
 .wct-outter {
   width: 936px;
   height: 460px;
@@ -79,7 +131,14 @@ export default {
   margin-left: 16px;
   overflow: hidden;
 }
-
+.wct-small-outter {
+  width: 460px;
+  height: 460px;
+  border: 2px solid #0f2a4d;
+  margin-left: 16px;
+  overflow: hidden;
+  padding-bottom: 24px;
+}
 .wct-inner {
   width: 100%;
   margin-top: 16px;
diff --git a/src/views/KeyMediaHome/weiboContentTOPVolume/v-ranking-kmd/index.vue b/src/views/KeyMediaHome/weiboContentTOPVolume/v-ranking-kmd/index.vue
new file mode 100644
index 0000000..c8aa254
--- /dev/null
+++ b/src/views/KeyMediaHome/weiboContentTOPVolume/v-ranking-kmd/index.vue
@@ -0,0 +1,236 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-11-18 11:57:14
+ * @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 @click="goKeyMedia(label)" 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-kmd",
+  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
+        }
+    },
+  methods: {
+    goKeyMedia(obj) {
+      this.$emit('toMedia', obj)
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.v-r-container {
+  width: 430px;
+  height: auto;
+  .v-r-line {
+    width: 100%;
+    height: 1px;
+    background:#0a1d3b;
+    margin-top: 13px;
+    margin-bottom: 13px;
+  }
+  .v-r-inner {
+    position: relative;
+    width: 100%;
+    height: 48px;
+    margin-top: 6px;
+    color: #fff;
+    background: #0a1d3b;
+    border-radius: 2px;
+  }
+  .v-r-label {
+      display: block;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin-left: 40px;
+      font-weight: bold;
+      cursor: pointer;
+  }
+  .v-r-res {
+      margin-right: 16px;
+      span {
+          display: block;
+          text-align: right;
+          font-size: 12px;
+      }
+      .s1 {
+          color: #9ba4af;
+      }
+      .s2 {
+          color: #fff;
+          font-family: Bebas;
+      }
+  }
+  .v-r-left {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    .s1 {
+      color: #9099a6;
+      font-size: 16px;
+      line-height: 48px;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right {
+      position: absolute;
+      width: 404px;
+      height: 48px;
+      border-top: 2px solid transparent;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-1 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #cc9d12;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #cc9d12;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-1 {
+      position: absolute;
+      width: 404px;
+      height: 48px;
+      border-top: 2px solid #CC9D12;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-2 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #3373CC;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #3373CC;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-2 {
+      position: absolute;
+      width: 404px;
+      height: 48px;
+      border-top: 2px solid #3373CC;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-3 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #54BF93;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #54BF93;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-3 {
+      position: absolute;
+      width: 404px;
+      height: 48px;
+      border-top: 2px solid #54BF93;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+}
+</style>
diff --git a/src/views/KeyMediaSeries/index.vue b/src/views/KeyMediaSeries/index.vue
index 0e7902d..e9631f8 100644
--- a/src/views/KeyMediaSeries/index.vue
+++ b/src/views/KeyMediaSeries/index.vue
@@ -66,7 +66,7 @@
           </div>
         </div>
       </div>
-      <div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
+      <div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
         <vue-lazy-component>
         <weibo-communication-trend-long></weibo-communication-trend-long>
         <weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
@@ -96,8 +96,8 @@
         <weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
         </vue-lazy-component>
       </div>
-      <div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
-        <vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1)">
+      <div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
+        <vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家')">
         <weiboUserActiveArea></weiboUserActiveArea>
         <weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
         </vue-lazy-component>