|
|
|
@@ -0,0 +1,744 @@ |
|
|
|
<template> |
|
|
|
<view class="box"> |
|
|
|
<!-- 选择器 --> |
|
|
|
<view class="boxtittab"> |
|
|
|
<view class="tabbox" @click="timeshow=true" style="color:#409eff"> |
|
|
|
{{ time }} |
|
|
|
<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon> |
|
|
|
</view> |
|
|
|
<view class="tabbox" @click="deptshow=true" :style="dept=='部门'?'color:#666':'color:#409eff'"> |
|
|
|
{{ dept}} |
|
|
|
<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon> |
|
|
|
</view> |
|
|
|
<view class="tabbox" @click="guwenshow=true" :style="guwen=='顾问'?'color:#666':'color:#409eff'"> |
|
|
|
{{ guwen}} |
|
|
|
<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view> |
|
|
|
<view class="boxzonglan" style="min-height: 400rpx;"> |
|
|
|
<view class="zonglantitle">简报 <text @click="showDesc=true">统计说明</text></view> |
|
|
|
<view class="zonglanbox"> |
|
|
|
<view class="grid" style="height: auto;" v-for="(item,index) in numlist" :key="index"> |
|
|
|
<view class="audonum">{{item.name}}</view> |
|
|
|
<view class="num">{{item.firstnum||0}}</view> |
|
|
|
<view class="bottom"> |
|
|
|
<view class="leftnum">对比：{{item.endnum||0}}</view> |
|
|
|
<view class="rightnum" :class="item.duibinum>0?'red':'green'">{{item.duibinum||0}} |
|
|
|
<image v-if="item.duibinum>0" src="https://static.quhouse.com/c4145f84cc3c49769ee2ec11465c085b.png" mode="" /> |
|
|
|
<image v-else src="https://static.quhouse.com/c5dbf780e09a4da0b0bab2d7fa58accd.png" mode="" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 统计说明 --> |
|
|
|
<view class="black-bg" v-if="showDesc" > |
|
|
|
<view class="tongjiDesc"> |
|
|
|
<view class="tongji-title">统计说明</view> |
|
|
|
<view class="text"> |
|
|
|
<view><text class="bold">平均挖掘执行率：</text>筛选时间内，有效接待中已标记顾问的挖掘执行率的平均值；</view> |
|
|
|
<view><text class="bold">未标记：</text>筛选时间内，有效接待中未标记顾问的接待数；</view> |
|
|
|
<view><text class="bold">有效接待：</text>筛选时间内，标记为有效的接待数，不包含待接单；</view> |
|
|
|
<view><text class="bold">未挖掘数：</text>筛选时间内，挖掘平均执行率为0的接待数；</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="close" @click="showDesc=false">X</view> |
|
|
|
</view> |
|
|
|
<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view> |
|
|
|
<view class="single"> |
|
|
|
<view class="title"> |
|
|
|
<view class="title1">平均挖掘执行率趋势</view> |
|
|
|
</view> |
|
|
|
<view class="uchaserbox"> |
|
|
|
<qiun-data-charts type="line" :chartData="lineOptsect" :opts="lineOpts" background="none" |
|
|
|
:ontouch="true" canvasId="wangxiaohuaerlingilingwuyiba2" :canvas2d="true" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view> |
|
|
|
<view class="single"> |
|
|
|
<view class="title"> |
|
|
|
<view class="title1">需求挖掘分布</view> |
|
|
|
</view> |
|
|
|
<view class="uchaserbox"> |
|
|
|
<qiun-data-charts |
|
|
|
type="ring" |
|
|
|
:chartData="ringChartData" |
|
|
|
:canvas2d="true" |
|
|
|
canvasId="ChartBoxIdwangxiaohuaerlingilingwuyiba1" |
|
|
|
:opts='opts' |
|
|
|
background="none" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view> |
|
|
|
<view class="single"> |
|
|
|
<view class="title"> |
|
|
|
<view class="title1">需求挖掘排名</view> |
|
|
|
</view> |
|
|
|
<view class="tabdada"> |
|
|
|
<view class="tabth"> |
|
|
|
<view>排名</view> |
|
|
|
<view>需求类型/挖掘执行接待数</view> |
|
|
|
<view>执行率</view> |
|
|
|
<view>操作</view> |
|
|
|
</view> |
|
|
|
<view v-if="total==0" style="color: #999999;width: 100%;height: 500rpx;line-height: 500rpx;text-align: center;" >暂无数据</view> |
|
|
|
<view class="tabtd" v-for="(item,i) in rankList" :key="i"> |
|
|
|
<view> |
|
|
|
<image v-if="i==0" class="ranking" src="../../../static/images/ranking1.png" mode=""></image> |
|
|
|
<image v-else-if="i==1" class="ranking" src="../../../static/images/ranking2.png" mode=""></image> |
|
|
|
<image v-else-if="i==2" class="ranking" src="../../../static/images/ranking3.png" mode=""></image> |
|
|
|
<view class="ranking1" v-else>{{i+1}}</view> |
|
|
|
</view> |
|
|
|
<view class="u-line-1">{{item.name}}({{item.selected}})</view> |
|
|
|
<view>{{max100(item.fraction)}}%</view> |
|
|
|
<view @click="Toview(item,i)">查看</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<u-popup v-model="timeshow" mode="bottom"> |
|
|
|
<view class="timeview" :style="{ color: activeTotal == 2 ? '#2B6EFF' : '#333333' }" |
|
|
|
@click="tabtimetap(2, '近7天')"> |
|
|
|
近7天</view> |
|
|
|
<view class="timeview" :style="{ color: activeTotal == 5 ? '#2B6EFF' : '#333333' }" |
|
|
|
@click="tabtimetap(5, '近15天')"> |
|
|
|
近15天</view> |
|
|
|
<view class="timeview" :style="{ color: activeTotal == 6 ? '#2B6EFF' : '#333333' }" |
|
|
|
@click="tabtimetap(6, '近30天')"> |
|
|
|
近30天</view> |
|
|
|
<view class="timeview" :style="{ color: activeTotal == 4 ? '#2B6EFF' : '#333333' }" |
|
|
|
@click="tabtimetap(4,'自定义')"> |
|
|
|
自定义</view> |
|
|
|
</u-popup> |
|
|
|
<u-calendar v-model="calendarShow" mode="range" @change="calendarTimeChange"></u-calendar> |
|
|
|
<u-select v-model="guwenshow" :list="staffList" @confirm="guwenCallback" |
|
|
|
:default-value='selindex'></u-select> |
|
|
|
<u-select v-model="deptshow" :list="teamList" @confirm="deptCallback" |
|
|
|
:default-value='selindex'></u-select> |
|
|
|
<!-- 加载组件 --> |
|
|
|
<!-- <loading v-model="LOADING"></loading> --> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
var app = getApp(); |
|
|
|
// var config = require("../../../config"); |
|
|
|
// import loading from "@/components/loading/index.vue" |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
// loading |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
selindex: '', |
|
|
|
guwenshow: false, |
|
|
|
timeshow: false, |
|
|
|
selectshow: false, |
|
|
|
deptshow: false, |
|
|
|
deptVal: '', |
|
|
|
huashuVal: '', |
|
|
|
guwenVal: '', |
|
|
|
// 筛选文字展示 |
|
|
|
time: '近7天', |
|
|
|
dept: '部门', |
|
|
|
guwen: '顾问', |
|
|
|
showDesc: false, |
|
|
|
rankList: [],//排名列表 |
|
|
|
ringChartData: { |
|
|
|
}, |
|
|
|
// ring图 分布图 |
|
|
|
opts: { |
|
|
|
rotate: false, |
|
|
|
rotateLock: false, |
|
|
|
color: ['#F8A12B','#07B79D','#E7483C','#2671E1'], |
|
|
|
padding: [5,5,5,5], |
|
|
|
dataLabel: true, |
|
|
|
legend: { |
|
|
|
show: true, |
|
|
|
position: "right", |
|
|
|
lineHeight: 25 |
|
|
|
}, |
|
|
|
title: { |
|
|
|
name: "", |
|
|
|
fontSize: 15, |
|
|
|
color: "#666666" |
|
|
|
}, |
|
|
|
subtitle: { |
|
|
|
name: "", |
|
|
|
fontSize: 25, |
|
|
|
color: "#7cb5ec" |
|
|
|
}, |
|
|
|
extra: { |
|
|
|
ring: { |
|
|
|
ringWidth: 60, |
|
|
|
activeOpacity: 0.5, |
|
|
|
activeRadius: 10, |
|
|
|
offsetAngle: 0, |
|
|
|
labelWidth: 15, |
|
|
|
border: false, |
|
|
|
borderWidth: 3, |
|
|
|
borderColor: "#FFFFFF" |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
activeTotal: 2, |
|
|
|
houseId: '', |
|
|
|
// hushuList: [],// 业务话术 |
|
|
|
staffList: [],// 员工列表 |
|
|
|
teamList: [],// 团队列表 |
|
|
|
team: { |
|
|
|
value: '', |
|
|
|
label: '' |
|
|
|
}, |
|
|
|
startDate: '', |
|
|
|
endDate: '', |
|
|
|
calendarShow: false, |
|
|
|
numlist: [{ |
|
|
|
name: '平均挖掘执行率', |
|
|
|
firstnum: '', |
|
|
|
endnum: '', |
|
|
|
duibinum: '', |
|
|
|
setName: 'wordFraction' |
|
|
|
}, { |
|
|
|
name: '未挖掘需求', |
|
|
|
firstnum: '', |
|
|
|
endnum: '', |
|
|
|
duibinum: '', |
|
|
|
setName: 'noFinishWord' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '有效接待', |
|
|
|
firstnum: '', |
|
|
|
endnum: '', |
|
|
|
duibinum: '', |
|
|
|
setName: 'activeCustomer' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '未标记', |
|
|
|
firstnum: '', |
|
|
|
endnum: '', |
|
|
|
duibinum: '', |
|
|
|
setName: 'markAdvisor' |
|
|
|
}, |
|
|
|
], |
|
|
|
lineOptsect: { |
|
|
|
"categories": [], |
|
|
|
"series": [{ |
|
|
|
"name": "起始时间", |
|
|
|
"data": [] |
|
|
|
},{ |
|
|
|
"name": "对比时间", |
|
|
|
"data": [] |
|
|
|
}] |
|
|
|
}, |
|
|
|
lineOpts: { |
|
|
|
// xAxis: { |
|
|
|
// rotateLabel: true |
|
|
|
// }, |
|
|
|
yAxis: { |
|
|
|
data: [{ |
|
|
|
max: 100, |
|
|
|
min: 0, |
|
|
|
}] |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
// 获取项目id |
|
|
|
this.houseId = uni.getStorageSync('buildingID').id; |
|
|
|
// 获取员工 |
|
|
|
// this.getStaffList() |
|
|
|
// // 获取团队 |
|
|
|
// this.getSectionList() |
|
|
|
// this.getdata() |
|
|
|
}, |
|
|
|
onReady: function(){ |
|
|
|
// 获取项目id |
|
|
|
this.houseId = uni.getStorageSync('buildingID').id; |
|
|
|
// 获取员工 |
|
|
|
// this.getStaffList() |
|
|
|
// // 获取团队 |
|
|
|
// this.getSectionList() |
|
|
|
// this.getdata() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
max100(num) { |
|
|
|
if(num>100){ |
|
|
|
return 100 |
|
|
|
} else if(!num){ |
|
|
|
return 0; |
|
|
|
}else{ |
|
|
|
return num; |
|
|
|
} |
|
|
|
}, |
|
|
|
getdata(){ |
|
|
|
// 挖掘分析-简报 |
|
|
|
this.wordMiningAnalyze() |
|
|
|
//挖掘排行 |
|
|
|
this.getwordMiningRank() |
|
|
|
// 挖掘趋势图 |
|
|
|
this.getwordMiningAnalyzePercentage() |
|
|
|
// 挖掘f分布图 |
|
|
|
this.getRingData() |
|
|
|
}, |
|
|
|
// 挖掘排行 |
|
|
|
getwordMiningRank(){ |
|
|
|
let dateType = 0; |
|
|
|
if (this.activeTotal == 4) {// 选择全部和自定义 |
|
|
|
dateType = null; |
|
|
|
}else { |
|
|
|
dateType = this.activeTotal; |
|
|
|
this.startDate = '' |
|
|
|
this.endDate = '' |
|
|
|
} |
|
|
|
this.$u.post('/cusLvStatistics/wordMiningRank', { |
|
|
|
"houseId": this.houseId, |
|
|
|
"deptId": this.deptVal, |
|
|
|
"createUser": this.guwenVal, |
|
|
|
"dateType":dateType, |
|
|
|
"firstStartDate":this.startDate, |
|
|
|
"firstEndDate":this.endDate |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
// console.log(res) |
|
|
|
if(res.length){ |
|
|
|
this.rankList = res.map(item=>{ |
|
|
|
return { |
|
|
|
name: item.name, |
|
|
|
id: item.id, |
|
|
|
fraction: item.fraction, |
|
|
|
selected: item.selected, |
|
|
|
keywordsId: item.keywordsId |
|
|
|
} |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
this.rankList = [] |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 挖掘分布图 |
|
|
|
getRingData(){ |
|
|
|
let dateType = 0; |
|
|
|
if (this.activeTotal == 4) {// 选择自定义 |
|
|
|
dateType = null; |
|
|
|
}else { |
|
|
|
dateType = this.activeTotal; |
|
|
|
this.startDate = '' |
|
|
|
this.endDate = '' |
|
|
|
} |
|
|
|
this.$u.post('/cusLvStatistics/wordMiningAnalyzeFenbu', { |
|
|
|
"houseId": this.houseId, |
|
|
|
"deptId": this.deptVal, |
|
|
|
"createUser": this.guwenVal, |
|
|
|
"dateType":dateType, |
|
|
|
"firstStartDate":this.startDate, |
|
|
|
"firstEndDate":this.endDate |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
// console.log(res) |
|
|
|
this.ringChartData = { series: [ |
|
|
|
{ |
|
|
|
data: [ |
|
|
|
{"name":"30%及以下","value":res.a}, |
|
|
|
{"name":"31%～50%","value":res.b}, |
|
|
|
{"name":"51%～70%","value":res.c}, |
|
|
|
{"name":"71%及以上","value":res.d}, |
|
|
|
] |
|
|
|
} |
|
|
|
]} |
|
|
|
}) |
|
|
|
}, |
|
|
|
//跳转到接待记录 |
|
|
|
Toview(item,i){ |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages/center/records/index?refresh=refresh&activeTotal='+this.activeTotal+'&staTime='+ this.startDate + '&endTime='+this.endDate+'&validInvalid=0'+'&keywordsId='+item.keywordsId+'&source=wajue' |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 挖掘分析-简报 |
|
|
|
wordMiningAnalyze() { |
|
|
|
let dateType = 0; |
|
|
|
if (this.activeTotal == 4) {// 选择全部和自定义 |
|
|
|
dateType = null; |
|
|
|
}else { |
|
|
|
dateType = this.activeTotal; |
|
|
|
this.startDate = '' |
|
|
|
this.endDate = '' |
|
|
|
} |
|
|
|
let params = { |
|
|
|
"houseId": this.houseId, |
|
|
|
"deptId": this.deptVal, |
|
|
|
"createUser": this.guwenVal, |
|
|
|
"dateType":dateType, |
|
|
|
"firstStartDate":this.startDate, |
|
|
|
"firstEndDate":this.endDate |
|
|
|
} |
|
|
|
this.$u.post("/cusLvStatistics/wordMiningAnalyze",params).then(res => { |
|
|
|
// console.log(res.contrast) |
|
|
|
res.contrast.wordFraction = (res.contrast.wordFraction||0) + '%' |
|
|
|
res.first.wordFraction = this.max100(res.first.wordFraction) + '%' |
|
|
|
res.end.wordFraction = this.max100(res.end.wordFraction) + '%' |
|
|
|
this.numlist.forEach(item => { |
|
|
|
item.duibinum = res.contrast[item.setName] |
|
|
|
item.endnum = res.end[item.setName] |
|
|
|
item.firstnum = res.first[item.setName] |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 获取员工列表 |
|
|
|
getStaffList() { |
|
|
|
this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId', { |
|
|
|
houseId: this.houseId |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
// console.log(res) |
|
|
|
if(res.length){ |
|
|
|
this.staffList = res.map(item => { |
|
|
|
return { |
|
|
|
label: item.name, |
|
|
|
value: item.accountId |
|
|
|
} |
|
|
|
}) |
|
|
|
this.staffList.unshift({ |
|
|
|
label: '全部', |
|
|
|
value: '' |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 挖掘率趋势图 |
|
|
|
getwordMiningAnalyzePercentage() { |
|
|
|
let categories1 = [] |
|
|
|
let categories2 = [] |
|
|
|
let categories3 = [] |
|
|
|
let dateType = 0; |
|
|
|
if (this.activeTotal == 4) {// 选择全部和自定义 |
|
|
|
dateType = null; |
|
|
|
}else { |
|
|
|
dateType = this.activeTotal; |
|
|
|
this.startDate = '' |
|
|
|
this.endDate = '' |
|
|
|
} |
|
|
|
this.$u.post('/cusLvStatistics/wordMiningAnalyzePercentage', { |
|
|
|
"houseId": this.houseId, |
|
|
|
"deptId": this.deptVal, |
|
|
|
"createUser": this.guwenVal, |
|
|
|
"dateType":dateType, |
|
|
|
"firstStartDate":this.startDate, |
|
|
|
"firstEndDate":this.endDate |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
if(res.first&&res.first.length){ |
|
|
|
categories1 = res.first.map(item=> item.statDate.substring(5,10)) |
|
|
|
this.lineOptsect.series[0].data=res.first.map(item=> item.wordFraction) |
|
|
|
}else{ |
|
|
|
categories1= [] |
|
|
|
this.lineOptsect.series[0].data = [] |
|
|
|
} |
|
|
|
if(res.end&&res.end.length){ |
|
|
|
this.lineOptsect.series[1].data=res.end.map(item=> item.wordFraction) |
|
|
|
categories2 = res.end.map(item => item.statDate.substring(5,10)) |
|
|
|
}else{ |
|
|
|
categories2 = [] |
|
|
|
this.lineOptsect.series[1].data = [] |
|
|
|
} |
|
|
|
|
|
|
|
for(let i=0;i<categories1.length;i++){ |
|
|
|
categories3.push(categories1[i]+'/'+categories2[i]) |
|
|
|
} |
|
|
|
// console.log(categories3) |
|
|
|
this.lineOptsect.categories = categories3 |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 获取团队列表 |
|
|
|
getSectionList() { |
|
|
|
this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId', { |
|
|
|
houseId: this.houseId |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
this.teamList = [] |
|
|
|
if(res.length){ |
|
|
|
this.teamList = res.map(item=> { |
|
|
|
return { |
|
|
|
label: item.deptName, |
|
|
|
value: item.deptId |
|
|
|
} |
|
|
|
}) |
|
|
|
this.teamList.unshift({ |
|
|
|
label: '全部', |
|
|
|
value: '' |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
//时间切换 |
|
|
|
tabtimetap(index, text) { |
|
|
|
this.activeTotal = index; |
|
|
|
if (index == 4) { |
|
|
|
this.calendarShow = true; |
|
|
|
} else { |
|
|
|
this.endDate = '' |
|
|
|
this.startDate = '' |
|
|
|
this.time = text |
|
|
|
this.getdata() |
|
|
|
} |
|
|
|
this.timeshow = false |
|
|
|
}, |
|
|
|
// 顾问选择 |
|
|
|
guwenCallback(e){ |
|
|
|
// console.log(e) |
|
|
|
this.guwenVal = e[0].value |
|
|
|
this.guwen = e[0].label |
|
|
|
this.getdata() |
|
|
|
}, |
|
|
|
// 部门选择 |
|
|
|
deptCallback(e){ |
|
|
|
// console.log(e) |
|
|
|
this.deptVal = e[0].value |
|
|
|
this.dept = e[0].label |
|
|
|
this.getdata() |
|
|
|
}, |
|
|
|
//自定义时间 |
|
|
|
calendarTimeChange(e) { |
|
|
|
this.endDate = e.endDate |
|
|
|
this.startDate = e.startDate |
|
|
|
this.time = '自定义' |
|
|
|
this.getdata() |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.box { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: #FAFAFA; |
|
|
|
} |
|
|
|
//时间切换的样式 |
|
|
|
.boxtittab { |
|
|
|
position: sticky; |
|
|
|
top: var(--window-top); |
|
|
|
z-index: 999; |
|
|
|
width: 100; |
|
|
|
height: 92rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border: 1px solid #E0E0E0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.tabbox { |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
text-align: center; |
|
|
|
line-height: 92rpx; |
|
|
|
color: #666666; |
|
|
|
font-size: 28rpx; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
display: -webkit-box; |
|
|
|
/* 将对象作为弹性伸缩盒子模型显示 */ |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
/* 控制最多显示几行 */ |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
/* 设置或检索伸缩盒对象的子元素的排列方式 */ |
|
|
|
} |
|
|
|
} |
|
|
|
.timeview { |
|
|
|
height: 80rpx; |
|
|
|
line-height: 80rpx; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
border-bottom: 1px solid #F8F8F8; |
|
|
|
} |
|
|
|
.black-bg{ |
|
|
|
position: fixed; |
|
|
|
background: rgba(0,0,0,0.6); |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
top: 0; |
|
|
|
bottom: 0; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
z-index: 9999; |
|
|
|
.tongjiDesc{ |
|
|
|
width: 80%; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 12rpx; |
|
|
|
padding: 30rpx; |
|
|
|
} |
|
|
|
.close{ |
|
|
|
background: #fff; |
|
|
|
border-radius: 50%; |
|
|
|
width: 80rpx; |
|
|
|
height: 80rpx; |
|
|
|
margin-top: 30rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.tongji-title{ |
|
|
|
text-align: center; |
|
|
|
font-size: 30rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
.text view{ |
|
|
|
margin-bottom: 24rpx; |
|
|
|
} |
|
|
|
.bold{ |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.grid:nth-child(1) { |
|
|
|
border-right: none; |
|
|
|
border-bottom: none; |
|
|
|
} |
|
|
|
|
|
|
|
.grid:nth-child(2) { |
|
|
|
border-bottom: none; |
|
|
|
} |
|
|
|
|
|
|
|
.grid:nth-child(3) { |
|
|
|
border-right: none; |
|
|
|
} |
|
|
|
.grid .bottom{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding-left: 20rpx; |
|
|
|
margin: 10rpx 0 20rpx; |
|
|
|
.leftnum{ |
|
|
|
height: 36rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #666666; |
|
|
|
line-height: 36rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
} |
|
|
|
.rightnum{ |
|
|
|
height: 36rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
font-weight: 600; |
|
|
|
color: #666; |
|
|
|
line-height: 36rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
&.red{ |
|
|
|
color: #E6273A; |
|
|
|
} |
|
|
|
&.green{ |
|
|
|
color: #43CD80; |
|
|
|
} |
|
|
|
image{ |
|
|
|
width: 18rpx; |
|
|
|
height: 14rpx; |
|
|
|
margin-left: 6rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.zonglantitle{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
text{ |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.uchaserbox{ |
|
|
|
width: 100%; |
|
|
|
height: 500rpx; |
|
|
|
} |
|
|
|
.tabdada { |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
padding-bottom: 40rpx; |
|
|
|
.tabth { |
|
|
|
width: 100%; |
|
|
|
height: 28rpx; |
|
|
|
display: flex; |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 28rpx; |
|
|
|
color: #666666; |
|
|
|
margin-top: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tabth>view:nth-of-type(1) { |
|
|
|
width: 10%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.tabth>view:nth-of-type(2) { |
|
|
|
width: 46%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.tabth>view:nth-of-type(3) { |
|
|
|
width: 22%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.tabth>view:nth-of-type(4) { |
|
|
|
width: 22%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.tabtd { |
|
|
|
width: 100%; |
|
|
|
height: 30rpx; |
|
|
|
display: flex; |
|
|
|
font-size: 26rpx; |
|
|
|
line-height: 30rpx; |
|
|
|
margin-top: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tabtd>view:nth-of-type(1) { |
|
|
|
width: 10%; |
|
|
|
text-align: center; |
|
|
|
line-height: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tabtd>view:nth-of-type(2) { |
|
|
|
width: 46%; |
|
|
|
max-width: 400rpx; |
|
|
|
text-align: center; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
|
|
|
|
.tabtd>view:nth-of-type(3) { |
|
|
|
width: 22%; |
|
|
|
text-align: center; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
|
|
|
|
.tabtd>view:nth-of-type(4) { |
|
|
|
width: 22%; |
|
|
|
text-align: center; |
|
|
|
color: #2671E2; |
|
|
|
} |
|
|
|
|
|
|
|
.ranking { |
|
|
|
width: 34rpx; |
|
|
|
height: 34rpx; |
|
|
|
} |
|
|
|
.ranking1 { |
|
|
|
width: 30rpx; |
|
|
|
height: 30rpx; |
|
|
|
background: #ECF1FF; |
|
|
|
color: #424D64; |
|
|
|
font-size: 18rpx; |
|
|
|
text-align: center; |
|
|
|
line-height: 30rpx; |
|
|
|
border-radius: 50%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
|
|
|
|
.tabech { |
|
|
|
width: 100%; |
|
|
|
height: 600rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
