From b247b9a2eb8099aac48695d6662954d870a73c68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EF=BC=81=E9=98=B3=E4=BB=94?= <15836909675@163.com>
Date: Fri, 2 Sep 2022 14:55:23 +0800
Subject: [PATCH] no message

---
 src/assets/img/rank_1.png                     | Bin 0 -> 1162 bytes
 src/assets/img/rank_2.png                     | Bin 0 -> 1535 bytes
 src/assets/img/rank_3.png                     | Bin 0 -> 1665 bytes
 src/assets/img/wap-down.png                   | Bin 0 -> 433 bytes
 ...45\217\240\346\246\234\345\215\225@2x.png" | Bin 0 -> 444 bytes
 .../img/\350\277\224\345\233\236@2x.png"      | Bin 0 -> 611 bytes
 src/components/element-ui/element.js          |   9 +-
 src/components/vant-ui/index.js               |   5 +-
 src/view/pc/fans.vue                          |  11 +-
 src/view/pc/force.vue                         |  14 ++-
 src/view/pc/mapFans.vue                       |  11 +-
 src/view/pc/mapForce.vue                      |  53 ++++++++-
 src/view/pc/rankList.vue                      | 110 +++++++++++++++---
 src/view/wap/fans.vue                         |  17 ++-
 src/view/wap/force.vue                        |  17 ++-
 src/view/wap/rankList.vue                     |  50 +++++++-
 16 files changed, 258 insertions(+), 39 deletions(-)
 create mode 100644 src/assets/img/rank_1.png
 create mode 100644 src/assets/img/rank_2.png
 create mode 100644 src/assets/img/rank_3.png
 create mode 100644 src/assets/img/wap-down.png
 create mode 100644 "src/assets/img/\346\212\230\345\217\240\346\246\234\345\215\225@2x.png"
 create mode 100644 "src/assets/img/\350\277\224\345\233\236@2x.png"

diff --git a/src/assets/img/rank_1.png b/src/assets/img/rank_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0904ac6e67a6de9b8809b2fee7aaf5e2f250857
GIT binary patch
literal 1162
zcmV;51a<p~P)<h;3K|Lk000e1NJLTq001Ze001-y1^@s6`09F%00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91D4+uX1ONa40RR91Gynhq0N?f;F8}}o^hrcPRA>e5SX)R`K^Xr3v#aZ7
zD7Kne4@D6@1PLM1&6b2N7`;glQBU<&iQ2`C$dJ5r6Ro!%f}{w#JamzwD9o&os0?}t
zUli#gx=EYY+&$AjOLN%uoIUA`nh)pr@X!1+|2N-!|D3bVk1+1(Z7!)8=bF)OhW}#B
z`r3@HF0q(HP(rkr5J$lnIV3ucf)b*|gg6Su$RW{j6qFDxCd3`nQ|K@R9|GITAsFCe
zWDrn*GeVUKqQ*Qr13#UWTn6Cc$QrPvIzpR<(9CokHCB^om<VD5-o!8~&~-?$!_$b7
z4!D{zmX83*M9z3PQSz;23|4`L&xr6l!n1t{FUVZjG=37{n4gZOgPznmiTQ{umqtx<
z5cS0jv~85k1?Ffg4}M3`A2FtNS&Y&ivF+#3?`O*kE}7IeEglWf`|{{Q2#0o%FN^yr
zWvO)5HWT8?=y?-uBjP7In@{LS{QMj94P5T~85_=ijfY`NkOwhVq4l)}{dDqAQYVjG
zrehHgJdQsEh%J<t%JlUq&4?AY$+!Iua_#$Cf9;}OHxju`Q$UV$c5^I_$+7twaW)ch
z#~ti@Rh$c9tS5jqb^xkll=e5^Vnyle>e{TZOauqtmS+tQ4OdeN_R?Eu8n*&b^&x#g
z>F=6%j`w(SPSv+)Jc9u1Xz&DjI!l<&%4x#f=t(o!9zYGNe3?rw;_^e0H`+LZfu64I
zM6ODe+~9B+x_d_;5FC@)*Idqla}mJ?LE%ub?>d4|aP$LgDR~dI*E?09j9ArAMg)kf
zcH`-HXt>i2p>XtXim{G#Lz!R=DRt|44-Adke$J!`DyR6ttG)<1Z=wd3`<6k1+j#G!
zNks=L6HHEW!Or|lxO*lW3jOn=v8SZ1oZ@@c+2A4drt48go=$Rn)5-*=OF4n-5EM$t
zT1P=y<wTsLpin~AItt1vC*o$kg37<eVyD7>ygIdatXZ$1LC}}E_#uLJf|M8#YWxQ~
zz&UU(Vr|oZmyv7d@JJ2S6!y&MwG*(>>rE<)d+ijAg`Kq*cR`R_UX}>7l<ubMdkwW0
zMUSbrsiN?OF6(8!ybIT<9rvbXO0m_#to?9uAgCXwl$R3iB&#_S_u&Xt5-#{sv}(*g
zKlrb>2@w<^{jbZGghQj}h-jhkO~w+j+b*}~NZQ((&WXlNil6}Pe^KlYA=c9w$QC|Z
zi`edFtSD_`U9;^xi$N)Z9OrM{a6dIF=`3YfVDs8+FVzB1QXTNhzv_UN@#K^yC;)%F
zJ(e0C`F)Cx`2k9O0{2rY$EfOe*_D)ddR|VgsHTdLNm*rrVl^rkuK+ey7wKa{F_m>c
ci!l}Z2ltai+ES7tg8%>k07*qoM6N<$f=QeVpa1{>

literal 0
HcmV?d00001

diff --git a/src/assets/img/rank_2.png b/src/assets/img/rank_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..553c89ac770752a95231c1a8a7e004916b9aacb7
GIT binary patch
literal 1535
zcmV<b1pxYqP)<h;3K|Lk000e1NJLTq001Ze001-y1^@s6`09F%00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91D4+uX1ONa40RR91Gynhq0N?f;F8}}qX-PyuRA>e5SZi!lMHD`B@9wsx
zwU59OYE=qS@sY4}>GpwWg=oa07!!VIP1PpyhnO}BM2e}^G!~@MDuM|RG-!Cl5HuL8
z#0G58zP8=A3bk6G)IOoLFROv>?j6tE&2IMYy?g1-){Q@UlI@*2a~@y6duHy;5D1W;
z8trcds3O{ZFw3UMFGMsuN3uD99Hc2+<``7a!O@vxkb^XZ%N&CWIygFW404dBa4{%)
zVRQ%x^8x7No)F{=1?kT)!uedo21p2rLSVT-X(mP$J(1~BLZAtN)KW@s`m%8}Q~-%c
zP7pWbNkHTE;t2wlF9j>wtfLfS18ha0BnQE-z~5OQ;E*IKz(m;<fJ{;ms+C&&7XuZn
zUtL`t6>m1LBN8xH)HZ}H7AUNz0E@Kz19cc+NFwkZvfL9mhJ8u}Xqp@zKAV@9r(#>3
z+%Lk94#(|+)BO|zNoHyy2nit3$FTW;pIIo)iy)BisU%G>Crmyl8O5*HSgixWg6INd
zPFO=iV@pdezQ$52!9%E0l|``NLG&&nz<I3E@~l;>YOw@#-@PtC1V<X|j(n`OcPY@6
zAPKqD1V}$p_<FX@dJIA0OVXC00PE~+nM87bh`_S7U1vv&KpUta7O%Fg#96Nv6~N}^
z=47V?yRbrDU<|5VW?$oBkbY(qpd=$BW6(c?4?tH}SJd#>#A~=b?8M58^EZlIn@j<r
z73QRb_tVnS<QeTN_>r;64OnXxY;g-!kZBkk8iDSfJ{TXLgyiIfuw-!xBqi!Dr5b6F
z7{q{Be#602%)kdw!+J)lj?OEv@4zwW>mO3si=qe{H>`zcH$4F{(fG09l(2R)oxgWO
zY586sxJ3&WK-#iYh>M*EZnqo0JY55Ost$8P^SE&{$N+qN=r}l?E=Y)vgPq$q!+p!|
zmZLJ=k)vP1>FOV#rL_ZU&NaZJYxx!fZU)cSIpAuK=L1lXztIPdAv78dP+0JcuLd1$
z9UeM3{&EAnbmb2@9WD{@$Qqj}HLJlCoGeUw`;_&mGS*RWzvBLZYrsI5=O=;5WYkPC
zaBW1^o6Sj@<1<lm11u}qq8q>2aS=vG$7P#)aN_U^_bb**c>Ve)?8gbjBr)+ecyj&2
zdgi)g+zbYbdg0egP+9c}jNyXK>T}D>&p}*V;C?okw^~1I0NIZDi&JOd#K~`gwWCZX
z*jn@wWM{5WXAMC!D*#!o?fKwS=;*vGr(Tkp0^5oT;m$i|wBgo;8#X}pHL0jP2;&of
z$%)wK?Zy13<+V^Z^9%>W0(iN*7v3!Y2yWb*hM1UW*j8K!HY@LGKpQbPK(>R~f8e+b
zE;`Bt@01n6vZZ%vX9+{g4Y1~1J$Sz+)|L0e*w_TvTYk}mVlWsX-Eyzy*sYY@0Dr#F
z<%?a{*aqwuOxV8g$U)p{atQZA-P7C8kuG!>ZU*;O;>jQa!p&d=u*oTW02d_1e?tWF
z2A<}oB9&a7hfFaH42yTncdGL$*s;^)hTW8qf=C`a38kMKMA#AZ*y#o6eg1C`?p}cG
z$rx<3JD$fidG~*D^?{q69a%Q(QLd{Gf1vH{?Xmw%yGp1;x1v7Ue~hDj1MBR)c_zay
zi^cNyt^8FrsOM1M+L}tI-IZvwNzYDa>?ARX+jG*>uj<$+hC%}9^{i`h<YG~?izSO!
zr}xAQqIR5g#j7)|wR(11V_X1PAgoWJzS*%EuPVy1W7Z0eTk2uFVk^zbupYuX)4d1O
z^hYH(KyN@?mJ*z9Qihj4ui#{ok9S!7PP~NLXB6q%xNOL`sb2d~pJ4;^CbZkzm%FH|
liuDb|@T$#bVHZGQ%fIDswub~f*7X1Y002ovPDHLkV1m!u!%6@E

literal 0
HcmV?d00001

diff --git a/src/assets/img/rank_3.png b/src/assets/img/rank_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..bff7d76be1604190c3a7914c5d9660ef9479376c
GIT binary patch
literal 1665
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
LNkvXXu0mjf{B!@Z

literal 0
HcmV?d00001

diff --git a/src/assets/img/wap-down.png b/src/assets/img/wap-down.png
new file mode 100644
index 0000000000000000000000000000000000000000..242c53a92b545a7060efe983bc019e988873ff57
GIT binary patch
literal 433
zcmeAS@N?(olHy`uVBq!ia0vp^Qa~)m!3HGnb@XfnQjEnx?oJHr&dIz4a$Hg)JkxxA
z8MJ_G4hF{dOa>N^5+DZYV_;xjz{tQ1q!~eC3z!hH3z*?-F_6Me%V=((GHFj2#}E(R
zw-a>p4+V&{-R{$gytLoJsNYFv=BybCGY?Gg@kvM%=vdh)d4?w~DXoK(W%7=bs(%E(
z@UU!TxTzj9k9oQ0?JZk;kNWt3dUB`w-0yvv>r+KT_Z-;2x54mOtD#5l1C7_m9~3@d
zU9v2o?@U4=&wGWhTuVI?&j|dTEV0sZ&XE&k$t<EX8m}<C*~=EYXty}?SJvm5He!c@
zBO0zGPvSg#HZ1du{N9O6_}>^_c@WKP)wuNip?#d$S7U#Nz3iW%pSV=<?S{#fvUR2P
z()ZGL317OT@bi`S`7=Lx>`JeHeYVpov0Unh^Zo{{nip>@!z*t1yl7_Ae<^Is|I#mF
z_G`ZdytN-*^&U=KcfrE=Ao~U8pTg#T;b*$VZ~SJG-toe?I?Lj{D=4@;UHx3vIVCg!
E0E~E|`v3p{

literal 0
HcmV?d00001

diff --git "a/src/assets/img/\346\212\230\345\217\240\346\246\234\345\215\225@2x.png" "b/src/assets/img/\346\212\230\345\217\240\346\246\234\345\215\225@2x.png"
new file mode 100644
index 0000000000000000000000000000000000000000..84670dfc7ea55a10f60026acbde7677f7639e754
GIT binary patch
literal 444
zcmV;t0Ym<YP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00001b5ch_0Itp)
z=>Px$c1c7*RA@u(n#&EsFbsxmia2s$2`(Iwcx(ZYSb=irJUn(_4H$(Tkf5jtB*d%1
zO&yb%GnW0uzhk>CF1NcJ0{)=_{&{xe%izL{@t>3STyifNR6ybB)eNdcRib`RKx^<*
z4N4p7Y~!@<gOUIdF;AzX#=Bx5OH>jd0G=0SlmrWi0H@T9n@$1!-i`L&$r819;rE{k
z811OG+V0k!ZabUxdPlz^{O+AB(ZUcB_L#TK-1HApAu9nEP>65<NK85%>?J~02E0N7
z9-)C*IvH-HK{^4vLm|LMT3tE?yh&D6T{;IWtIN7(SoUq=Q(Y<`;g(`wm%g=*dNRnk
zE=g<tPA{2Y+eFZfKIl<RTD>`aWD)$jL}*uDOvtyWmuLx26)@UoGWCpH1P$Iy*tZFK
zsJ~mX58J<oSk;1Y*sdBX#a`b{Je->K`$5V{`>@eI7;PW)AvcOom8eRTq8mn=Qi(Fg
m!s05vFMe5$mC;G?8N2`^90X5t(iK_&0000<MNUMnLSTZN+q}X6

literal 0
HcmV?d00001

diff --git "a/src/assets/img/\350\277\224\345\233\236@2x.png" "b/src/assets/img/\350\277\224\345\233\236@2x.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ceb1df05fdac49f157fbeded4ef775294fd79bd1
GIT binary patch
literal 611
zcmV-p0-XJcP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00001b5ch_0Itp)
z=>Px%9Z5t%RA@u(nmbFwP!z|{xvdX;4T|4F92_+1<|;y8>Y^Z88d3^{Lh+kaEkZ#M
zL9ikYb<n}7IQbb0ilR^iai|Wx5+#t<=0TI2H0jNJU%&kR=fDlYgG!A;fFI<5KDRq~
z1~bVB`dM0M$^A3P0sCApH^?K(BkJuN;5Eo=(Axx>?#?61BWfCw-UgJb53^s*W-*h9
zZ1lFm->kljXz8N1-l9+hfLXf<>MKCS+IO?LPbsXa)&c{lwWf`v?*Y46`vpX7Ac3qL
z6VH5GgL>8w;4%~@aylx!+JW<|$*3I?D6F>uAiN`zoE#TU?1HKDU2ih_*04Gh9!aO7
z3(ro$xoS|~8h(TT^HM@6I|=5hL0xNzH^U^9+KnwfvVdc5P}ds3Cjb;O$w-M67;}RL
z*6t|6P9`qaS;H|ks0Rpu2Q$-?dmGDhibduR(=MtPQADg00%<8G-m)fS3aB35Ag)If
zqgdEl5k6Rfx&o*i-oWM)L6D@lc+CRRH9#|)fOtGLJf7cNoqu-{)OA2(oA5#?%2HCi
zathKDK=ts4mHRact$pQU+YW@MV@Pt_iKT{JP)`AkYy!d?Qj(RE!nqwt&jHPB`u@VJ
zwbQNB1`4p7%|HTbYcr6a4ed0Q&bfWlWSoT3uEhcE7C9?3R@dbQxk0O0@n{^6D37Q|
x(X+ZOk7(c{YBdUe88>);{QAX=)pG{k;1B3DHBW29l_mfH002ovPDHLkV1iEO3^o7&

literal 0
HcmV?d00001

diff --git a/src/components/element-ui/element.js b/src/components/element-ui/element.js
index 52b7c7f..fbf1c6e 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 34694f5..65d4434 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 97d5055..71ab62f 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 90ff89f..7ae9bc2 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 e5a50e7..1ee2ea3 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 27b2841..00c7050 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 b04cb1f..e718933 100644
--- a/src/view/pc/rankList.vue
+++ b/src/view/pc/rankList.vue
@@ -1,13 +1,29 @@
 <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;
diff --git a/src/view/wap/fans.vue b/src/view/wap/fans.vue
index 599b486..914d2ea 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 5404791..7f292a7 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 3f36d42..d864a41 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 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;
-- 
GitLab