diff --git a/src/assets/img/go-back.png b/src/assets/img/go-back.png
new file mode 100644
index 0000000000000000000000000000000000000000..ceb1df05fdac49f157fbeded4ef775294fd79bd1
Binary files /dev/null and b/src/assets/img/go-back.png differ
diff --git a/src/assets/img/rank-open.png b/src/assets/img/rank-open.png
new file mode 100644
index 0000000000000000000000000000000000000000..84670dfc7ea55a10f60026acbde7677f7639e754
Binary files /dev/null and b/src/assets/img/rank-open.png differ
diff --git a/src/assets/img/rank_1.png b/src/assets/img/rank_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0904ac6e67a6de9b8809b2fee7aaf5e2f250857
Binary files /dev/null and b/src/assets/img/rank_1.png differ
diff --git a/src/assets/img/rank_2.png b/src/assets/img/rank_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..553c89ac770752a95231c1a8a7e004916b9aacb7
Binary files /dev/null and b/src/assets/img/rank_2.png differ
diff --git a/src/assets/img/rank_3.png b/src/assets/img/rank_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..bff7d76be1604190c3a7914c5d9660ef9479376c
Binary files /dev/null and b/src/assets/img/rank_3.png differ
diff --git a/src/assets/img/wap-down.png b/src/assets/img/wap-down.png
new file mode 100644
index 0000000000000000000000000000000000000000..242c53a92b545a7060efe983bc019e988873ff57
Binary files /dev/null and b/src/assets/img/wap-down.png differ
diff --git a/src/components/element-ui/element.js b/src/components/element-ui/element.js
index 52b7c7fafeb75b1a900b76d1f79fd2caa2029c78..fbf1c6ea9d181f25e3de6da6dff17a7908dcb014 100644
--- a/src/components/element-ui/element.js
+++ b/src/components/element-ui/element.js
@@ -1,7 +1,12 @@
 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
diff --git a/src/components/vant-ui/index.js b/src/components/vant-ui/index.js
index 34694f54f8bdea35cfad8dc68b628a08d580269c..65d44348fa0d70ad80604082b0bd8152fa1939ef 100644
--- a/src/components/vant-ui/index.js
+++ b/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);
diff --git a/src/view/pc/fans.vue b/src/view/pc/fans.vue
index 97d5055d940010634dcfec19d26f334ae6fba714..71ab62f92320f853eaa9a99004385808ecf93acf 100644
--- a/src/view/pc/fans.vue
+++ b/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=>{
diff --git a/src/view/pc/force.vue b/src/view/pc/force.vue
index 90ff89f37fa23d590a3ddf2b5c651a96ba683e18..7ae9bc2e176820ee850dae480edddfdb112176df 100644
--- a/src/view/pc/force.vue
+++ b/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(() => {
 
diff --git a/src/view/pc/mapFans.vue b/src/view/pc/mapFans.vue
index dc03de9a33cf5076ea5bf4e286dccf2b5a98f838..eada3c381f0c0b2df6b75acb3b3a826202782ff2 100644
--- a/src/view/pc/mapFans.vue
+++ b/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">
diff --git a/src/view/pc/mapForce.vue b/src/view/pc/mapForce.vue
index efb228fd6b194c7d61022cb521385961b80f3492..39f85cd43381acc89c3b8876b5e25fe1f33054b3 100644
--- a/src/view/pc/mapForce.vue
+++ b/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;
diff --git a/src/view/pc/rankList.vue b/src/view/pc/rankList.vue
index b04cb1f8f24a8a504f491ea54de6c5fb6c45bbeb..b9ce36faef52b21b474c7e16492426d0ab575597 100644
--- a/src/view/pc/rankList.vue
+++ b/src/view/pc/rankList.vue
@@ -1,13 +1,30 @@
 <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" :style="!slideopen?'right:-10px':''" >
+  <!-- <div class="force-slide"  v-if="userItem || ( title !== '铁粉榜' && city !=='全国')" @click="clear"> -->
+      <img src="@/assets/img/go-back.png" style="margin-bottom:16px;" v-if="userItem || ( title !== '铁粉榜' && city !=='全国')" @click="clear" alt="">
+      <div class="force-slide-open" @click="slideopen = !slideopen">
+        <img src="@/assets/img/rank-open.png" alt="">
+        <span>{{slideopen?'折叠榜单':'展开榜单'}}</span>
+      </div>
+  </div>
+   <div class="rank-list" v-if="slideopen" :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>地区：</span><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 +44,30 @@
       </li>
     </ul>
   </div>
+ </div>
 </template>
 <script>
 
 export default {
   data() {
     return {
-      userItem:''
+      userItem:'',
+      listHeight:'',
+      cityFlag:false,
+      slideopen:true
     }
   },
   methods: {
+    dropdownFn(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,37 +80,99 @@ 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;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
+    &: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;
-    width: 64px;
-    height: 40px;
-    background: #364366;
-    color:#78C1FF;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: absolute;
     top: 10px;
     right: 410px;
     // left: 20px;
     font-size: 14px;
-    border: 2px solid #5f97d5;
-    cursor: pointer;
+    
     img{
-      width: 12px;
-      height: 16px;
+      width: 28px;
+      height: 28px;
+      cursor: pointer;
+    }
+    .force-slide-open{
+      cursor: pointer;
+      
+      font-size: 14px;
+      font-weight: 500;
+      color: #97ADC6;
+      display: flex;
+      flex-direction: column;
+      span{
+        margin-top: 8px;
+      }
     }
   }
+}
+.rank-list {
+  width: 400px;
+  height: 800px;
+  min-height: 500px;
+  display: flex;
+  flex-direction: column;
+  
   .title {
     display: flex;
     justify-content: space-between;
@@ -94,6 +181,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 +190,28 @@ 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 ;
+      span{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+      }
+      &>span:nth-child(1){
+        width: 70px;
+      }
+      cursor: pointer;
       img {
         width: 18px;
         height: 18px;
diff --git a/src/view/wap/fans.vue b/src/view/wap/fans.vue
index 599b48622f3705c8177dd2d0a5e3a6a3d2f8179f..914d2ea91d0a50addb0dab19dd9d4056a7fd31df 100644
--- a/src/view/wap/fans.vue
+++ b/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=>{
diff --git a/src/view/wap/force.vue b/src/view/wap/force.vue
index 5404791f52da79658bf0a7a041e8521896348f16..7f292a71dc2ca8ecf493fb6cc1e6624d59d882a1 100644
--- a/src/view/wap/force.vue
+++ b/src/view/wap/force.vue
@@ -1,11 +1,14 @@
 <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(() => {
 
diff --git a/src/view/wap/rankList.vue b/src/view/wap/rankList.vue
index 3f36d42915409b085cbac8187357b4ff1419c84e..13990ecd26f1986cf6b2fe1d0dc92166bc8e17d8 100644
--- a/src/view/wap/rankList.vue
+++ b/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>地区：</span><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;
     }
@@ -120,14 +153,29 @@ export default {
       font-size: 14px;
       font-weight: 500;
       color: #b2bccf;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      word-break: break-all;
     }
     .clear{
       cursor: pointer;
     }
     p {
+      // flex: 1;
       display: flex;
       align-items: center;
       max-width: 150px;
+      &>span:nth-child(1){
+        width: 50px;
+      }
+      &.text img{
+        width: 14px;
+        height: 14px;
+        margin-left: 3px;
+      }
       img {
         width: 18px;
         height: 18px;