Skip to content

C
csdn-datav

wux_labs / csdn-datav
与 Fork 源项目一致

Fork自 CSDN 技术社区 / csdn-datav

通知 1
Star 0
Fork 0
C
csdn-datav
提交 8c918cc6 编写于 作者: ！阳仔's avatar ！阳仔
浏览文件
操作

Merge branch 'datav-map' into 'master' 

优化地图

See merge request csdn/csdn-datav!11
上级 190d94b6 cdc9ac9d
隐藏空白更改
内联 并排
Showing with 303 addition and 50 deletion
src/components/element-ui/element.js
浏览文件 @ 8c918cc6
import Vue from 'vue'; import Vue from 'vue';
import './element-variables.scss'; import './element-variables.scss';
import { import {
Popover Popover,
Dropdown,
DropdownMenu,
DropdownItem
} from 'element-ui'; } from 'element-ui';
Vue.use(DropdownItem)
Vue.use(DropdownMenu)
Vue.use(Dropdown)
Vue.use(Popover) Vue.use(Popover)
\ No newline at end of file
src/components/vant-ui/index.js
浏览文件 @ 8c918cc6
...@@ -23,9 +23,10 @@ ...@@ -23,9 +23,10 @@
Empty, Empty,
Uploader, Uploader,
Popup, Popup,
Rate Rate,
Picker
} from "vant"; } from "vant";
Vue.use(Picker)
Vue.use(Rate); Vue.use(Rate);
Vue.use(Popup); Vue.use(Popup);
Vue.use(Button); Vue.use(Button);
......
src/view/pc/fans.vue
浏览文件 @ 8c918cc6
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<ForceMap v-else :mapStyle="mapStyle" :optionList="optionList" :cityObj="cityObj" @setrankList="setrankList" title="铁粉数"/> <ForceMap v-else :mapStyle="mapStyle" :optionList="optionList" :cityObj="cityObj" @setrankList="setrankList" title="铁粉数"/>
</div> </div>
<div class="user-rank-list" ref="user-rank-list"> <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>
</div> </div>
</template> </template>
...@@ -23,6 +23,8 @@ export default { ...@@ -23,6 +23,8 @@ export default {
rankList:[], rankList:[],
cityObj:'', cityObj:'',
dataList:[], dataList:[],
dropdownList:[],
rankList:[],
city:'全国', city:'全国',
mapStyle:{ mapStyle:{
width:'1000', width:'1000',
...@@ -33,6 +35,10 @@ export default { ...@@ -33,6 +35,10 @@ export default {
} }
}, },
methods: { methods: {
dropdownFn (val){
this.city = val
this.rankData = this.optionList.find(it=>it.city == val).list
},
setrankList(data){ setrankList(data){
this.rankData = data.list this.rankData = data.list
this.city = data.city this.city = data.city
...@@ -44,6 +50,8 @@ export default { ...@@ -44,6 +50,8 @@ export default {
this.rankList = res.data.data.countryTop this.rankList = res.data.data.countryTop
this.dataList = res.data.data.cityInfoList this.dataList = res.data.data.cityInfoList
this.optionList = 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(() => { }).catch(() => {
...@@ -53,6 +61,7 @@ export default { ...@@ -53,6 +61,7 @@ export default {
this.cityObj = null this.cityObj = null
this.optionList = this.dataList this.optionList = this.dataList
this.rankData = this.rankList this.rankData = this.rankList
this.city = '全国'
}, },
rankFans(item) { rankFans(item) {
getFanDistribution(item.username).then(re=>{ getFanDistribution(item.username).then(re=>{
......
src/view/pc/force.vue
浏览文件 @ 8c918cc6
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<ForceMap :optionList="optionList" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/> <ForceMap :optionList="optionList" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/>
</div> </div>
<div class="user-rank-list"> <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>
</div> </div>
</template> </template>
...@@ -18,7 +18,9 @@ export default { ...@@ -18,7 +18,9 @@ export default {
return { return {
optionList: [], optionList: [],
rankData: [], rankData: [],
rankList:[],
city:'全国', city:'全国',
dropdownList:[],
mapStyle:{ mapStyle:{
width:'1000', width:'1000',
height:'900', height:'900',
...@@ -28,11 +30,21 @@ export default { ...@@ -28,11 +30,21 @@ export default {
} }
}, },
methods: { methods: {
dropdownFn (val){
this.city = val
this.rankData = this.optionList.find(it=>it.city == val).list
},
clear(){
this.rankData = this.rankList
this.city = '全国'
},
getlist() { getlist() {
getForceInfo().then((res) => { getForceInfo().then((res) => {
if (res.status == 200) { if (res.status == 200) {
this.optionList = res.data.data.cityInfoList this.optionList = res.data.data.cityInfoList
this.rankData = res.data.data.countryTop this.rankData = res.data.data.countryTop
this.rankList = res.data.data.countryTop
this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
} }
}).catch(() => { }).catch(() => {
......
src/view/pc/mapFans.vue
浏览文件 @ 8c918cc6
...@@ -157,9 +157,9 @@ export default { ...@@ -157,9 +157,9 @@ export default {
}, },
{ {
type: 'effectScatter', type: 'effectScatter',
name: 'totip', name: 'totipgeo',
coordinateSystem: 'geo', coordinateSystem: 'geo',
zlevel: 1, zlevel: 100,
rippleEffect: { rippleEffect: {
//涟漪特效 //涟漪特效
period: 4, //动画时间，值越小速度越快 period: 4, //动画时间，值越小速度越快
...@@ -214,7 +214,7 @@ export default { ...@@ -214,7 +214,7 @@ export default {
{ {
type: 'effectScatter', type: 'effectScatter',
coordinateSystem: 'geo', coordinateSystem: 'geo',
zlevel: 15, zlevel: 150,
rippleEffect: { rippleEffect: {
period: 4, period: 4,
brushType: 'fill', brushType: 'fill',
...@@ -296,15 +296,16 @@ export default { ...@@ -296,15 +296,16 @@ export default {
formatter: function (params) { formatter: function (params) {
var obj = that.optionList[params.dataIndex] var obj = that.optionList[params.dataIndex]
var str = '' var str = ''
console.log(params,9999)
// if (params.seriesName==='totip'){ // if (params.seriesName==='totip'){
if (params.name === that.cityObj.city){ 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> 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> <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> 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>` <p class="popover-city"><i></i><span class="city">${obj.name}</span> <span>铁粉数</span> <span class="num">${obj.uv}</span></p>`
}else{
return ''
} }
return ( return (
`<div class="popover-fans"> `<div class="popover-fans">
......
src/view/pc/mapForce.vue
浏览文件 @ 8c918cc6
...@@ -164,7 +164,7 @@ export default { ...@@ -164,7 +164,7 @@ export default {
if (that.dataArray[params.dataIndex].list.length>0){ if (that.dataArray[params.dataIndex].list.length>0){
that.dataArray[params.dataIndex].list.forEach((item,index) => { that.dataArray[params.dataIndex].list.forEach((item,index) => {
if (index<3){ 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{ }else{
...@@ -175,7 +175,7 @@ export default { ...@@ -175,7 +175,7 @@ export default {
} }
str = `<div class="popover"> str = `<div class="popover">
<div class="popover-top"> <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> <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> <div class="exhibition"><p>排名</p> <p class="img">用户</p> <p>${that.title}</p></div>
${demo} ${demo}
...@@ -302,12 +302,57 @@ body { ...@@ -302,12 +302,57 @@ body {
background-size: cover; background-size: cover;
padding-top: 10px; padding-top: 10px;
.popover-title { .popover-title {
font-size: 16px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #77c0ff; color: rgba(119,192,255,0.7);
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
padding: 0 16px; 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 { .popover-empty {
height: 120px; height: 120px;
......
src/view/pc/rankList.vue
浏览文件 @ 8c918cc6
<template> <template>
<div class="rank-list" ref="rank-list"> <div class="rank-list-box">
<div class="force-slide" v-if="userItem" @click="clear"> <div class="force-slide" :style="!slideopen?'right:-10px':''" >
<img src="@/assets/img/fansleft.png" alt=""> <!-- <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> <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"> <div class="title">
<span>{{ title }}</span> <span>{{ title }}</span>
<!-- <span class="clear" @click="clear" v-if="cityObj">回退</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> <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>
<div class="rank-list-nav border"> <div class="rank-list-nav border">
...@@ -27,22 +44,30 @@ ...@@ -27,22 +44,30 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
userItem:'' userItem:'',
listHeight:'',
cityFlag:false,
slideopen:true
} }
}, },
methods: { methods: {
dropdownFn(val) {
this.$emit('dropdownFn',val)
},
clear () { clear () {
this.$emit('clear') this.$emit('clear')
this.userItem = null this.userItem = null
}, },
rankAdd(item){ rankAdd(item){
if (this.title == '用户原力榜') { if (this.title == '用户原力月榜') {
window.open(`https://blog.csdn.net/`+item.username) window.open(`https://blog.csdn.net/`+item.username)
}else{ }else{
this.userItem = item this.userItem = item
...@@ -55,37 +80,99 @@ export default { ...@@ -55,37 +80,99 @@ export default {
this.$refs['user-list'].scrollTop = 0 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> </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"> <style scoped lang="scss">
.rank-list { .rank-list-box{
width: 400px;
height: 800px;
display: flex;
flex-direction: column;
position: relative; position: relative;
.force-slide{ .force-slide{
// padding: 10px; // padding: 10px;
width: 64px;
height: 40px;
background: #364366;
color:#78C1FF;
display: flex;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 410px; right: 410px;
// left: 20px; // left: 20px;
font-size: 14px; font-size: 14px;
border: 2px solid #5f97d5;
cursor: pointer;
img{ img{
width: 12px; width: 28px;
height: 16px; 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 { .title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -94,6 +181,7 @@ export default { ...@@ -94,6 +181,7 @@ export default {
background-image: url("@/assets/img/rank-right.png"); background-image: url("@/assets/img/rank-right.png");
background-size: cover; background-size: cover;
padding: 8px 28px 0px 24px; padding: 8px 28px 0px 24px;
span { span {
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
...@@ -102,10 +190,28 @@ export default { ...@@ -102,10 +190,28 @@ export default {
.clear{ .clear{
cursor: pointer; cursor: pointer;
} }
.iconfont{
background-image: url("@/assets/img/rank-right.png");
background-size: cover;
}
p { p {
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 200px; 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 { img {
width: 18px; width: 18px;
height: 18px; height: 18px;
......
src/view/wap/fans.vue
浏览文件 @ 8c918cc6
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
</div> </div>
<div class="user-rank-list" ref="user-rank-list"> <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> </div>
<van-popup v-model="Popup" <!-- <van-popup v-model="Popup"
> >
<div class="popover-fans"> <div class="popover-fans">
<div class="popover-top"> <div class="popover-top">
...@@ -22,13 +22,14 @@ ...@@ -22,13 +22,14 @@
</div> </div>
</div> </div>
<div class="close" @click="Popup = false"><img src="@/assets/img/close-circle.png" alt=""></div> <div class="close" @click="Popup = false"><img src="@/assets/img/close-circle.png" alt=""></div>
</van-popup> </van-popup> -->
</div> </div>
</template> </template>
<script> <script>
import ForceMap from '../pc/mapForce.vue' import ForceMap from '../pc/mapForce.vue'
import FansceMap from '../pc/mapFans.vue' import FansceMap from '../pc/mapFans.vue'
import RankList from "./rankList.vue"; import RankList from "./rankList.vue";
import Bus from "@/common/bus"
import { getHardcoreFanInfo,getFanDistribution } from '@/server/screen-data' import { getHardcoreFanInfo,getFanDistribution } from '@/server/screen-data'
export default { export default {
data() { data() {
...@@ -39,6 +40,8 @@ export default { ...@@ -39,6 +40,8 @@ export default {
Popup:false, Popup:false,
cityObj:'', cityObj:'',
dataList:[], dataList:[],
rankList:[],
dropdownList:[],
show:true, show:true,
city:'全国', city:'全国',
listFlag:false, listFlag:false,
...@@ -57,6 +60,10 @@ export default { ...@@ -57,6 +60,10 @@ export default {
} }
}, },
methods: { methods: {
onConfirm (val) {
this.city = val
this.rankData = this.optionList.find(it=>it.city == val).list
},
setrankList(data){ setrankList(data){
this.rankData = data.list this.rankData = data.list
this.city = data.city this.city = data.city
...@@ -81,6 +88,8 @@ export default { ...@@ -81,6 +88,8 @@ export default {
this.rankList = res.data.data.countryTop this.rankList = res.data.data.countryTop
this.dataList = res.data.data.cityInfoList this.dataList = res.data.data.cityInfoList
this.optionList = 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(() => { }).catch(() => {
...@@ -88,8 +97,10 @@ export default { ...@@ -88,8 +97,10 @@ export default {
}, },
clear() { clear() {
this.cityObj = null this.cityObj = null
this.city = "全国"
this.optionList = this.dataList this.optionList = this.dataList
this.rankData = this.rankList this.rankData = this.rankList
Bus.$emit('clear')
}, },
rankFans(item) { rankFans(item) {
getFanDistribution(item.username).then(re=>{ getFanDistribution(item.username).then(re=>{
......
src/view/wap/force.vue
浏览文件 @ 8c918cc6
<template> <template>
<!-- --> <!-- -->
<div class="force ranklist"> <div class="force ranklist">
<div class="go back" @click="clear" v-if="city !== '全国'">
<img src="@/assets/img/backoff.png" alt="">
</div>
<div class="map"> <div class="map">
<ForceMap :optionList="optionList" type="wap" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/> <ForceMap :optionList="optionList" type="wap" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/>
</div> </div>
<div class="user-rank-list" ref="user-rank-list"> <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>
</div> </div>
</template> </template>
...@@ -20,6 +23,8 @@ export default { ...@@ -20,6 +23,8 @@ export default {
rankData: [], rankData: [],
Popup:false, Popup:false,
city:'全国', city:'全国',
rankList:[],
dropdownList:[],
mapStyle:{ mapStyle:{
width:'', width:'',
height:'', height:'',
...@@ -29,6 +34,14 @@ export default { ...@@ -29,6 +34,14 @@ export default {
} }
}, },
methods: { 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) { listOpen (val) {
var height = -(this.$refs['user-rank-list'].offsetHeight-300) var height = -(this.$refs['user-rank-list'].offsetHeight-300)
if (val){ if (val){
...@@ -41,6 +54,8 @@ export default { ...@@ -41,6 +54,8 @@ export default {
if (res.status == 200) { if (res.status == 200) {
this.optionList = res.data.data.cityInfoList this.optionList = res.data.data.cityInfoList
this.rankData = res.data.data.countryTop this.rankData = res.data.data.countryTop
this.rankList = res.data.data.countryTop
this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
} }
}).catch(() => { }).catch(() => {
......
src/view/wap/rankList.vue
浏览文件 @ 8c918cc6
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="rank-list"> <div class="rank-list">
<div class="title"> <div class="title">
<span>{{ title }}</span> <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> <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>
<div class="rank-list-nav border"> <div class="rank-list-nav border">
...@@ -30,19 +30,40 @@ ...@@ -30,19 +30,40 @@
<span>{{item.city}}</span><span>{{item.score}}</span> <span>{{item.city}}</span><span>{{item.score}}</span>
</li> </li>
</ul> </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>
</div> </div>
</template> </template>
<script> <script>
import Bus from "@/common/bus"
export default { export default {
data() { data(){
return { return {
listFlag:false, listFlag:false,
userItem:'' userItem:'',
show:false,
} }
}, },
methods: { methods: {
onConfirm (val) {
this.$emit('onConfirm',val)
this.show = false
},
onCancel (){
},
open (val) { open (val) {
this.listFlag = val this.listFlag = val
this.$emit('listOpen', this.listFlag) this.$emit('listOpen', this.listFlag)
...@@ -51,7 +72,7 @@ export default { ...@@ -51,7 +72,7 @@ export default {
this.$emit('clear') this.$emit('clear')
}, },
rankAdd(item){ rankAdd(item){
if (this.title == '用户原力榜') { if (this.title == '用户原力月榜') {
window.open(`https://blog.csdn.net/`+item.username) window.open(`https://blog.csdn.net/`+item.username)
}else{ }else{
this.userItem = item this.userItem = item
...@@ -60,9 +81,19 @@ export default { ...@@ -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> </script>
<style >
/* .van-picker__columns{
height: 200px !important;
} */
</style>
<style scoped lang="scss"> <style scoped lang="scss">
.rank-box{ .rank-box{
height: 100%; height: 100%;
...@@ -113,6 +144,8 @@ export default { ...@@ -113,6 +144,8 @@ export default {
align-items: center; align-items: center;
padding: 0px 16px 0px 16px; padding: 0px 16px 0px 16px;
padding-right: 26px; padding-right: 26px;
font-size: 14px;
color: #b2bccf;
&>span:nth-child(1){ &>span:nth-child(1){
color: #fff; color: #fff;
} }
...@@ -120,14 +153,29 @@ export default { ...@@ -120,14 +153,29 @@ export default {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #b2bccf; color: #b2bccf;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
} }
.clear{ .clear{
cursor: pointer; cursor: pointer;
} }
p { p {
// flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 150px; max-width: 150px;
&>span:nth-child(1){
width: 50px;
}
&.text img{
width: 14px;
height: 14px;
margin-left: 3px;
}
img { img {
width: 18px; width: 18px;
height: 18px; height: 18px;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或