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/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 Binary files /dev/null and "b/src/assets/img/\346\212\230\345\217\240\346\246\234\345\215\225@2x.png" differ 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 Binary files /dev/null and "b/src/assets/img/\350\277\224\345\233\236@2x.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 @@
- +
@@ -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 @@
- +
@@ -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 e5a50e7f4a4df58e1413e5e950823f5db4c8e545..1ee2ea3f6a3e5279f5b68c1ccf1445c3ed5b4b7f 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 = ` ${that.cityObj.nickname||that.cityObj.username}

${that.cityObj.city} 铁粉数 ${that.cityObj.score}

` - }else{ + }else if(params.seriesName == "totipgeo"){ str = `

地区

${obj.name} 铁粉数 ${obj.uv}

` + }else{ + return '' } return ( `
diff --git a/src/view/pc/mapForce.vue b/src/view/pc/mapForce.vue index 27b2841f8b3ec22356ca4243d09fc86bf707f469..00c7050c327c5af6727dad578d7e736a7431a49d 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 += `

${index+1}

${item.nickname || item.username}

${item.score}

` + demo += `

${item.nickname || item.username}

${item.score}

` } }); }else{ @@ -175,7 +175,7 @@ export default { } str = `
-

上榜用户

+

${that.dataArray[params.dataIndex].list[0].nickname || that.dataArray[params.dataIndex].list[0].username} 成为 ${params.name} 领军人物之首

${params.name} ${that.title} ${that.dataArray[params.dataIndex].score}

排名

用户

${that.title}

${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..e71893324812382a757849692cbf6220d19b310e 100644 --- a/src/view/pc/rankList.vue +++ b/src/view/pc/rankList.vue @@ -1,13 +1,29 @@ +