no message

src/components/element-ui/element.js

 import Vue from 'vue';
 import './element-variables.scss';
 import {
-  Popover
+  Popover,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem
 } from 'element-ui';
-
+Vue.use(DropdownItem)
+Vue.use(DropdownMenu)
+Vue.use(Dropdown)
 Vue.use(Popover)
\ No newline at end of file

src/components/vant-ui/index.js

@@ -23,9 +23,10 @@
    Empty,
    Uploader,
    Popup,
-   Rate
+   Rate,
+   Picker
  } from "vant";
-
+ Vue.use(Picker)
  Vue.use(Rate);
  Vue.use(Popup);
  Vue.use(Button);

src/view/pc/fans.vue

@@ -6,7 +6,7 @@
       <ForceMap v-else :mapStyle="mapStyle" :optionList="optionList" :cityObj="cityObj" @setrankList="setrankList" title="铁粉数"/>
     </div>
     <div class="user-rank-list" ref="user-rank-list">
-      <RankList title="铁粉榜" @clear="clear" :cityObj="cityObj" listTitle="铁粉数" :rankData="rankData" @rankFans="rankFans"/>
+      <RankList title="铁粉榜" @clear="clear" :cityObj="cityObj" :dropdownList="dropdownList" @dropdownFn="dropdownFn" listTitle="铁粉数" :city="city" :rankData="rankData" @rankFans="rankFans"/>
     </div>
   </div>
 </template>
@@ -23,6 +23,8 @@ export default {
       rankList:[],
       cityObj:'',
       dataList:[],
+      dropdownList:[],
+      rankList:[],
       city:'全国',
       mapStyle:{
         width:'1000',
@@ -33,6 +35,10 @@ export default {
     }
   },
   methods: {
+    dropdownFn (val){
+      this.city = val
+      this.rankData = this.optionList.find(it=>it.city == val).list
+    },
     setrankList(data){
       this.rankData = data.list
       this.city = data.city
@@ -44,6 +50,8 @@ export default {
           this.rankList = res.data.data.countryTop
           this.dataList = res.data.data.cityInfoList
           this.optionList = res.data.data.cityInfoList
+          this.rankList = res.data.data.countryTop
+          this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
         }
         
       }).catch(() => {
@@ -53,6 +61,7 @@ export default {
       this.cityObj = null
       this.optionList = this.dataList
       this.rankData = this.rankList
+      this.city = '全国'
     },
     rankFans(item) {
       getFanDistribution(item.username).then(re=>{

src/view/pc/force.vue

@@ -5,7 +5,7 @@
       <ForceMap :optionList="optionList" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/>
     </div>
     <div class="user-rank-list">
-      <RankList title="用户原力榜" listTitle="原力值" :city="city" :rankData="rankData"/>
+      <RankList title="用户原力月榜" @clear="clear" :dropdownList="dropdownList" listTitle="原力值" @dropdownFn="dropdownFn" :city="city" :rankData="rankData"/>
     </div>
   </div>
 </template>
@@ -18,7 +18,9 @@ export default {
     return {
       optionList: [],
       rankData: [],
+      rankList:[],
       city:'全国',
+      dropdownList:[],
       mapStyle:{
         width:'1000',
         height:'900',
@@ -28,11 +30,21 @@ export default {
     }
   },
   methods: {
+    dropdownFn (val){
+      this.city = val
+      this.rankData = this.optionList.find(it=>it.city == val).list
+    },
+    clear(){
+      this.rankData = this.rankList
+      this.city = '全国'
+    },
     getlist() {
       getForceInfo().then((res) => {
         if (res.status == 200) {
           this.optionList = res.data.data.cityInfoList
           this.rankData = res.data.data.countryTop
+          this.rankList = res.data.data.countryTop
+          this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
         }
       }).catch(() => {
 

src/view/pc/mapFans.vue

@@ -157,9 +157,9 @@ export default {
         },
         {
           type: 'effectScatter',
-          name: 'totip',
+          name: 'totipgeo',
           coordinateSystem: 'geo',
-          zlevel: 1,
+          zlevel: 100,
           rippleEffect: {
             //涟漪特效
             period: 4, //动画时间，值越小速度越快
@@ -214,7 +214,7 @@ export default {
         {
           type: 'effectScatter',
           coordinateSystem: 'geo',
-          zlevel: 15,
+          zlevel: 150,
           rippleEffect: {
             period: 4,
             brushType: 'fill',
@@ -296,15 +296,16 @@ export default {
           formatter: function (params) {
             var obj = that.optionList[params.dataIndex]
             var str = ''
-            console.log(params,9999)
             // if (params.seriesName==='totip'){
               if (params.name === that.cityObj.city){
               str = `<a class="popover-title" href="https://blog.csdn.net/${that.cityObj.username}" target="_blank">  <img src="${that.cityObj.avatar}" alt=""> <span>${that.cityObj.nickname||that.cityObj.username}</span></a>
               <p class="popover-city"><i></i><span class="city">${that.cityObj.city}</span> <span>铁粉数</span> <span class="num">${that.cityObj.score}</span></p>
               `
-              }else{
+              }else if(params.seriesName == "totipgeo"){
                 str = `<p class="popover-title">地区</p>
                     <p class="popover-city"><i></i><span class="city">${obj.name}</span> <span>铁粉数</span> <span class="num">${obj.uv}</span></p>`
+              }else{
+                return ''
               }
               return (
                 `<div class="popover-fans">

src/view/pc/mapForce.vue

@@ -164,7 +164,7 @@ export default {
               if (that.dataArray[params.dataIndex].list.length>0){
                 that.dataArray[params.dataIndex].list.forEach((item,index) => {
                   if (index<3){
-                    demo += `<a href="${`https://blog.csdn.net/`+item.username}" target="_blank" class="exhibition active"><p>${index+1}</p> <p class="img"> <img src="${item.avatar}" alt=""> <span>${item.nickname || item.username}</span></p> <p class="num">${item.score}</p></a>`
+                    demo += `<a href="${`https://blog.csdn.net/`+item.username}" target="_blank" class="exhibition active"><p class="back rank_${index+1}"></p> <p class="img"> <img src="${item.avatar}" alt=""> <span>${item.nickname || item.username}</span></p> <p class="num">${item.score}</p></a>`
                   }
                 });
               }else{
@@ -175,7 +175,7 @@ export default {
               }
               str = `<div class="popover">
                     <div class="popover-top">
-                      <p class="popover-title">上榜用户</p>
+                      <p class="popover-title">  <a href="${`https://blog.csdn.net/`+that.dataArray[params.dataIndex].list[0].username}" target="_blank"><img src="${that.dataArray[params.dataIndex].list[0].avatar}" alt=""> <span class="name"> ${that.dataArray[params.dataIndex].list[0].nickname || that.dataArray[params.dataIndex].list[0].username} </span></a> 成为 <span> ${params.name} </span> 领军人物之首 </p>
                       <p class="popover-city"><i class="force"></i><span class="city">${params.name}</span> <span>${that.title}</span> <span class="num">${that.dataArray[params.dataIndex].score}</span></p>
                       <div class="exhibition"><p>排名</p> <p class="img">用户</p> <p>${that.title}</p></div>
                       ${demo}
@@ -302,12 +302,57 @@ body {
     background-size: cover;
     padding-top: 10px;
     .popover-title {
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 500;
-      color: #77c0ff;
+      color: rgba(119,192,255,0.7);
       height: 36px;
       line-height: 36px;
       padding: 0 16px;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      img{
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+      span{
+        color: #77C0FF;
+        margin: 0 6px;
+        
+      }
+      a{
+        display: flex;
+        align-items: center;
+      }
+      span.name{
+          margin-left: 0px;
+          max-width: 78px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+        }
+    }
+    .back{
+      height: 26px;
+      width: 20px !important;
+      margin: 0 5px;
+      &.rank_1{
+        background-image: url('@/assets/img/rank_1.png');
+        background-size: cover;
+      }
+      &.rank_2{
+        background-image: url('@/assets/img/rank_2.png');
+        background-size: cover;
+      }
+      &.rank_3{
+        background-image: url('@/assets/img/rank_3.png');
+        background-size: cover;
+      }
+     
     }
     .popover-empty {
       height: 120px;

src/view/pc/rankList.vue

 <template>
-  <div class="rank-list" ref="rank-list">
-    <div class="force-slide"  v-if="userItem" @click="clear">
-      <img src="@/assets/img/fansleft.png" alt="">
-       返回 
-    </div>
+ <div class="rank-list-box">
+  <div class="force-slide"  v-if="userItem || ( title !== '铁粉榜' && city !=='全国')" @click="clear">
+      <img src="" alt="">
+      <div class="force-slide-open">
+        <img src="" alt="">
+        <span></span>
+      </div>
+  </div>
+   <div class="rank-list" :style="`height:${listHeight}px;`" ref="rank-list">
+   
     <div class="title">
       <span>{{ title }}</span>
       <!-- <span class="clear" @click="clear" v-if="cityObj">回退</span> -->
-      <p v-if="city&&!userItem"><img src="@/assets/img/place-pc.png" alt="" /><span style="font-size: 16px;">{{city}}</span></p>
+      <!-- <p v-if="city" @click="cityFlag=!cityFlag"><img src="@/assets/img/place-pc.png" alt="" /><span style="font-size: 16px;">{{city}}</span></p>
+      <div class="city-list" v-show="city&&cityFlag">
+        <p>全国</p>
+      </div> -->
+      <el-dropdown  v-if="city&&!userItem" trigger="click" class="dropdown" @visible-change="(val)=>{cityFlag = val}" @command="dropdownFn" :hide-on-click="true">
+        <p>地区：<span style="font-size: 16px;">{{city}}</span> <i :class="!cityFlag?'el-icon-arrow-down':'el-icon-arrow-up'"></i>  </p>
+        <el-dropdown-menu class="rank-dropdown" slot="dropdown" >
+            <el-dropdown-item :command="it" v-for="(it,index) in dropdownList" :key="index">{{it}}</el-dropdown-item>
+            
+          </el-dropdown-menu>
+      </el-dropdown>
+     
       <p v-if="userItem"><img src="@/assets/img/user.png" alt="" /><a target="_blank" :href="`https://blog.csdn.net/${userItem.username}`">{{userItem.nickname||userItem.username}}</a></p>
     </div>
     <div class="rank-list-nav border">
@@ -27,22 +43,29 @@
       </li>
     </ul>
   </div>
+ </div>
 </template>
 <script>
 
 export default {
   data() {
     return {
-      userItem:''
+      userItem:'',
+      listHeight:'',
+      cityFlag:false
     }
   },
   methods: {
+    dropdownFn(val) {
+      // console.log(val)
+      this.$emit('dropdownFn',val)
+    },
     clear () {
       this.$emit('clear')
       this.userItem = null
     },
     rankAdd(item){
-      if (this.title == '用户原力榜') {
+      if (this.title == '用户原力月榜') {
         window.open(`https://blog.csdn.net/`+item.username)
       }else{
         this.userItem = item
@@ -55,15 +78,58 @@ export default {
       this.$refs['user-list'].scrollTop = 0
     },
   },
-  props: ['title','rankData','city','listTitle','cityObj']
+  props: ['title','rankData','city','listTitle','cityObj','dropdownList'],
+  mounted(){
+    this.listHeight = document.documentElement.clientHeight - 120
+    window.addEventListener("resize", () => {
+       this.listHeight = document.documentElement.clientHeight - 120
+    });
+    document.addEventListener("click",()=>{
+      this.cityFlag = false
+    })
+  },
+  beforeDestroy(){
+
+  }
 }
 </script>
+<style lang="scss">
+.rank-dropdown{
+  padding:4px 0;
+  width: 110px;
+  height:260px;
+  background: #1B2B4F;
+  box-shadow: 0px 2px 20px 0px rgba(17,27,51,0.7);
+  border: 1px solid #578AC5;
+  border-radius: 0px;
+  overflow: auto;
+  &::-webkit-scrollbar {
+      width: 4px;
+    }
+   &::-webkit-scrollbar-thumb {
+    background-color: #375a87;
+    border-radius: 3px;
+    transition: background-color 0.3s ease-in-out;
+  }
+  .popper__arrow{
+    display: none;
+  }
+  .el-dropdown-menu__item{
+    height: 36px;
+    text-align: center;
+    color: #77C0FF;
+    &:focus{
+      background: #2E4974;
+    } 
+    &:hover{
+      background: #2E4974;
+      opacity: 0.9;
+    }
+  }
+}
+</style>
 <style scoped lang="scss">
-.rank-list {
-  width: 400px;
-  height: 800px;
-  display: flex;
-  flex-direction: column;
+.rank-list-box{
   position: relative;
   .force-slide{
     // padding: 10px;
@@ -86,6 +152,14 @@ export default {
       height: 16px;
     }
   }
+}
+.rank-list {
+  width: 400px;
+  height: 800px;
+  min-height: 500px;
+  display: flex;
+  flex-direction: column;
+  
   .title {
     display: flex;
     justify-content: space-between;
@@ -94,6 +168,7 @@ export default {
     background-image: url("@/assets/img/rank-right.png");
     background-size: cover;
     padding: 8px 28px 0px 24px;
+    
     span {
       font-size: 20px;
       font-weight: 500;
@@ -102,10 +177,17 @@ export default {
     .clear{
       cursor: pointer;
     }
+    .iconfont{
+      background-image: url("@/assets/img/rank-right.png");
+      background-size: cover;
+    }
     p {
       display: flex;
       align-items: center;
       max-width: 200px;
+      font-size: 16px;
+      color:#77C0FF ;
+      cursor: pointer;
       img {
         width: 18px;
         height: 18px;

src/view/wap/fans.vue

@@ -10,9 +10,9 @@
     </div>
     
     <div class="user-rank-list" ref="user-rank-list">
-        <RankList title="铁粉榜"  :cityObj="cityObj" :city="city" listTitle="铁粉数" @listOpen="listOpen" :rankData="rankData" @rankFans="rankFans"/>
+        <RankList title="铁粉榜" :city="city"  :cityObj="cityObj" listTitle="铁粉数" @onConfirm="onConfirm" :dropdownList="dropdownList" @listOpen="listOpen" :rankData="rankData" @rankFans="rankFans"/>
     </div>
-    <van-popup v-model="Popup" 
+    <!-- <van-popup v-model="Popup" 
    >
       <div class="popover-fans">
         <div class="popover-top">
@@ -22,13 +22,14 @@
         </div>
       </div>
       <div class="close" @click="Popup = false"><img src="@/assets/img/close-circle.png" alt=""></div>
-    </van-popup>
+    </van-popup> -->
   </div>
 </template>
 <script>
 import ForceMap from '../pc/mapForce.vue'
 import FansceMap from '../pc/mapFans.vue'
 import RankList from "./rankList.vue";
+import Bus from "@/common/bus"
 import { getHardcoreFanInfo,getFanDistribution } from '@/server/screen-data'
 export default {
   data() {
@@ -39,6 +40,8 @@ export default {
       Popup:false,
       cityObj:'',
       dataList:[],
+      rankList:[],
+      dropdownList:[],
       show:true,
       city:'全国',
       listFlag:false,
@@ -57,6 +60,10 @@ export default {
     }
   },
   methods: {
+    onConfirm (val) {
+      this.city = val
+      this.rankData = this.optionList.find(it=>it.city == val).list
+    },
     setrankList(data){
       this.rankData = data.list
       this.city = data.city
@@ -81,6 +88,8 @@ export default {
           this.rankList = res.data.data.countryTop
           this.dataList = res.data.data.cityInfoList
           this.optionList = res.data.data.cityInfoList
+          this.rankList = res.data.data.countryTop
+          this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
         }
         
       }).catch(() => {
@@ -88,8 +97,10 @@ export default {
     },
     clear() {
       this.cityObj = null
+      this.city = "全国"
       this.optionList = this.dataList
       this.rankData = this.rankList
+      Bus.$emit('clear')
     },
     rankFans(item) {
       getFanDistribution(item.username).then(re=>{

src/view/wap/force.vue

 <template>
   <!--  -->
   <div class="force ranklist">
+    <div class="go back" @click="clear" v-if="city !== '全国'">
+      <img src="@/assets/img/backoff.png" alt="">
+    </div>
     <div class="map">
       <ForceMap :optionList="optionList" type="wap" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/>
     </div>
     <div class="user-rank-list" ref="user-rank-list">
-      <RankList title="用户原力榜" listTitle="原力值" :city="city" @listOpen="listOpen" :rankData="rankData"/>
+      <RankList title="用户原力月榜" listTitle="原力值" :city="city" @onConfirm="onConfirm" :dropdownList="dropdownList" @listOpen="listOpen" :rankData="rankData"/>
     </div>
   </div>
 </template>
@@ -20,6 +23,8 @@ export default {
       rankData: [],
       Popup:false,
       city:'全国',
+      rankList:[],
+      dropdownList:[],
       mapStyle:{
         width:'',
         height:'',
@@ -29,6 +34,14 @@ export default {
     }
   },
   methods: {
+    clear(){
+      this.city= '全国'
+      this.rankData = this.rankList
+    },
+    onConfirm (val) {
+      this.city = val
+      this.rankData = this.optionList.find(it=>it.city == val).list
+    },
     listOpen (val) {
       var height = -(this.$refs['user-rank-list'].offsetHeight-300)
       if (val){
@@ -41,6 +54,8 @@ export default {
         if (res.status == 200) {
           this.optionList = res.data.data.cityInfoList
           this.rankData = res.data.data.countryTop
+          this.rankList = res.data.data.countryTop
+          this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
         }
       }).catch(() => {
 

src/view/wap/rankList.vue

@@ -6,7 +6,7 @@
     <div class="rank-list">
     <div class="title">
       <span>{{ title }}</span>
-      <p v-if="city&&!userItem"><img src="@/assets/img/place.png" alt="" /><span>{{city}}</span></p>
+      <p v-if="city&&!userItem" @click="show=true" class="text">地区：<span style="color: #fff;">{{city}}</span><img  src="@/assets/img/wap-down.png" alt="" /></p>
       <p v-if="userItem"><img src="@/assets/img/user-wap.png" alt="" /><a target="_blank" :href="`https://blog.csdn.net/${userItem.username}`">{{userItem.nickname||userItem.username}}</a></p>
     </div>
     <div class="rank-list-nav border">
@@ -30,19 +30,40 @@
         <span>{{item.city}}</span><span>{{item.score}}</span>
       </li>
     </ul>
+      <van-popup v-model="show"  position="bottom">
+      <van-picker
+        :columns="dropdownList"
+        :show-toolbar="true"
+        :default-index="0"
+        :visible-item-count="3"
+        @confirm="onConfirm"
+        @cancel="show = false"
+        />          
+      </van-popup>
+     <!-- @confirm="onConfirm"
+  @cancel="onCancel"
+  @change="onChange" -->
   </div>
   </div>
 </template>
 <script>
-
+import Bus from "@/common/bus"
 export default {
-  data() {
+  data(){
     return {
       listFlag:false,
-      userItem:''
+      userItem:'',
+      show:false,
     }
   },
   methods: {
+    onConfirm (val) {
+      this.$emit('onConfirm',val)
+      this.show = false
+    },
+    onCancel (){
+
+    },
     open (val) {
       this.listFlag = val
       this.$emit('listOpen', this.listFlag)
@@ -51,7 +72,7 @@ export default {
       this.$emit('clear')
     },
     rankAdd(item){
-      if (this.title == '用户原力榜') {
+      if (this.title == '用户原力月榜') {
         window.open(`https://blog.csdn.net/`+item.username)
       }else{
         this.userItem = item
@@ -60,9 +81,19 @@ export default {
       }
     }
   },
-  props: ['title','rankData','city','listTitle','cityObj']
+  mounted (){
+    Bus.$on('clear',()=>{
+      this.userItem = null
+    })
+  },
+  props: ['title','rankData','city','listTitle','cityObj','dropdownList','defaultIndex']
 }
 </script>
+<style >
+/* .van-picker__columns{
+  height: 200px !important;
+} */
+</style>
 <style scoped lang="scss">
 .rank-box{
   height: 100%;
@@ -113,6 +144,8 @@ export default {
     align-items: center;
     padding: 0px 16px 0px 16px;
     padding-right: 26px;
+    font-size: 14px;
+    color: #b2bccf;
     &>span:nth-child(1){
       color: #fff;
     }
@@ -128,6 +161,11 @@ export default {
       display: flex;
       align-items: center;
       max-width: 150px;
+      &.text img{
+        width: 14px;
+        height: 14px;
+        margin-left: 3px;
+      }
       img {
         width: 18px;
         height: 18px;