|
|
@@ -0,0 +1,745 @@ |
|
|
|
<template> |
|
|
|
<view class="pages"> |
|
|
|
<!-- 日报内容部分 --> |
|
|
|
<view class="container" ref="lists"> |
|
|
|
<!-- 头部日报卡 --> |
|
|
|
<view class="c-head-card"> |
|
|
|
<view class="c-title-text"> |
|
|
|
{{ projectName }}数智工牌日报 |
|
|
|
</view> |
|
|
|
<text class="date">{{ weekObj.createTime | fomatDate }}</text> |
|
|
|
<view class="creative-time"> |
|
|
|
生成时间:{{ weekObj.createTime || '--' }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 循环渲染的数据 --> |
|
|
|
<view class="dateList"> |
|
|
|
<!-- --> |
|
|
|
<view class="arrs"> |
|
|
|
<view class="arrs-items index1"> |
|
|
|
<view class="left"> |
|
|
|
1 |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="r-title"> |
|
|
|
<text>接待量:</text> |
|
|
|
</view> |
|
|
|
<view class="r-box"> |
|
|
|
<view class="r-box-item"> |
|
|
|
<text>接待量</text><text class="value">{{ weekObj.receptionCount || 0 }}</text> |
|
|
|
</view> |
|
|
|
<view class="r-box-item"> |
|
|
|
<text>有效接待</text><text class="value">{{ weekObj.activeCustomer || 0 }}</text> |
|
|
|
</view> |
|
|
|
<view class="r-box-item-lang"> |
|
|
|
<view>有效接待率<text class="value">{{ weekObj.validReceptionRate || 0 }}%</text></view> |
|
|
|
<view class="contrast">对比昨天<text class="value" |
|
|
|
:class="{down: weekObj.validReceptionRatePK < 0, up: weekObj.validReceptionRatePK > 0}">{{ weekObj.validReceptionRatePK > 0 ? '+' : '' }}{{ weekObj.validReceptionRatePK || 0 }}%</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="arrs-items index2"> |
|
|
|
<view class="left"> |
|
|
|
2 |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="r-title"> |
|
|
|
<text>平均执行率:</text> |
|
|
|
</view> |
|
|
|
<view class="r-box"> |
|
|
|
<view class="r-box-item-lang"> |
|
|
|
<view>平均执行率<text class="value">{{ weekObj.fraction || 0 }}%</text></view> |
|
|
|
<view class="contrast">对比昨天<text class="value" |
|
|
|
:class="{down: weekObj.fractionPK < 0, up: weekObj.fractionPK > 0}">{{ weekObj.fractionPK > 0 ? '+' : '' }}{{ weekObj.fractionPK || 0 }}%</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="arrs-items index3"> |
|
|
|
<view class="left"> |
|
|
|
3 |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="r-title"> |
|
|
|
<text>平均接待时长:</text> |
|
|
|
</view> |
|
|
|
<view class="r-box"> |
|
|
|
<view class="r-box-item-lang"> |
|
|
|
<view>平均接待时长<text class="value">{{ weekObj.avgDuration || 0 }}min</text></view> |
|
|
|
<view class="contrast">对比昨天<text class="value" |
|
|
|
:class="{down: weekObj.avgDurationPK < 0, up: weekObj.avgDurationPK > 0}">{{ weekObj.avgDurationPK > 0 ? '+' : '' }}{{ weekObj.avgDurationPK || 0 }}min</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="arrs-items index4"> |
|
|
|
<view class="left"> |
|
|
|
4 |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="r-title"> |
|
|
|
<text>销讲维度执行前三:</text> |
|
|
|
</view> |
|
|
|
<view class="ranking"> |
|
|
|
<block v-for="(rank, rankIndex) in carryOutTop" :key="rankIndex"> |
|
|
|
<view class="ranking-item"> |
|
|
|
<view class="serial"> |
|
|
|
{{ rankIndex+1 }} |
|
|
|
</view> |
|
|
|
<view class="lside"> |
|
|
|
{{ rank.title || '--' }} |
|
|
|
</view> |
|
|
|
<view class="rside"> |
|
|
|
({{ rank.value || 0 }}%) |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
<template v-if="carryOutTop.length == 0"> |
|
|
|
<view class="empty"> |
|
|
|
暂无数据 |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="arrs-items index5"> |
|
|
|
<view class="left"> |
|
|
|
5 |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="r-title"> |
|
|
|
<text>销讲维度执行弱项前三:</text> |
|
|
|
</view> |
|
|
|
<view class="ranking"> |
|
|
|
<block v-for="(rank, rankIndex) in carryOutLast" :key="rankIndex"> |
|
|
|
<view class="ranking-item"> |
|
|
|
<view class="serial"> |
|
|
|
{{ rankIndex+1 }} |
|
|
|
</view> |
|
|
|
<view class="lside"> |
|
|
|
{{ rank.title || '--' }} |
|
|
|
</view> |
|
|
|
<view class="rside"> |
|
|
|
({{ rank.value || 0 }}%) |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
<template v-if="carryOutLast.length == 0"> |
|
|
|
<view class="empty"> |
|
|
|
暂无数据 |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="arrs-items index6"> |
|
|
|
<view class="left"> |
|
|
|
6 |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="r-title"> |
|
|
|
<text>置业顾问平均执行率排名:</text> |
|
|
|
</view> |
|
|
|
<view class="ranking"> |
|
|
|
<block v-for="(rank, rankIndex) in consultant" :key="rankIndex"> |
|
|
|
<view class="ranking-item"> |
|
|
|
<view class="serial"> |
|
|
|
{{ rankIndex+1 }} |
|
|
|
</view> |
|
|
|
<view class="lside"> |
|
|
|
{{ rank.title || '--' }} |
|
|
|
</view> |
|
|
|
<view class="rside"> |
|
|
|
({{ rank.value || 0 }}%) |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
<template v-if="consultant.length == 0"> |
|
|
|
<view class="empty"> |
|
|
|
暂无数据 |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="arrs-items index7"> |
|
|
|
<view class="left"> |
|
|
|
7 |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="r-title"> |
|
|
|
<text>置业顾问平均接访时长排名:</text> |
|
|
|
</view> |
|
|
|
<view class="ranking"> |
|
|
|
<block v-for="(rank, rankIndex) in recording" :key="rankIndex"> |
|
|
|
<view class="ranking-item"> |
|
|
|
<view class="serial"> |
|
|
|
{{ rankIndex+1 }} |
|
|
|
</view> |
|
|
|
<view class="lside"> |
|
|
|
{{ rank.title || '--' }} |
|
|
|
</view> |
|
|
|
<view class="rside"> |
|
|
|
({{ rank.value || 0 }}min) |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
|
|
|
|
<template v-if="recording.length == 0"> |
|
|
|
<view class="empty"> |
|
|
|
暂无数据 |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="arrs-items index8"> |
|
|
|
<view class="left"> |
|
|
|
8 |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="r-title"> |
|
|
|
<text>平均执行率最低的顾问:</text> |
|
|
|
</view> |
|
|
|
<view class="ranking"> |
|
|
|
<block v-for="(rank, rankIndex) in lowest" :key="rankIndex"> |
|
|
|
<view class="ranking-item"> |
|
|
|
<view class="lside"> |
|
|
|
{{ rank.title || '--' }} |
|
|
|
</view> |
|
|
|
<view class="rside value"> |
|
|
|
{{ rank.value || 0 }}% |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
|
|
|
|
<template v-if="lowest.length == 0"> |
|
|
|
<view class="empty"> |
|
|
|
暂无数据 |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="arrs-items index9"> |
|
|
|
<view class="left"> |
|
|
|
9 |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="r-title"> |
|
|
|
<text>客户画像触达:</text> |
|
|
|
<text class="num value">{{ weekObj.reachSum || 0 }}次</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="arrs-items index10"> |
|
|
|
<view class="left"> |
|
|
|
10 |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="r-title"> |
|
|
|
<text>未标记接待数:</text> |
|
|
|
<text class="num value down" |
|
|
|
style="font-weight: 500;font-size: 34rpx;">{{ weekObj.unlabelledReceptionNum || 0 }}</text> |
|
|
|
<text class="down value">条</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="arrs-items index11"> |
|
|
|
<view class="left"> |
|
|
|
11 |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="r-title"> |
|
|
|
<text>设备情况:</text> |
|
|
|
</view> |
|
|
|
<view class="r-box"> |
|
|
|
<view class="r-box-item-lang"> |
|
|
|
<view>在线<text class="value">{{ weekObj.equipmentInfo.onlineNum || 0 }}</text></view> |
|
|
|
<view style="margin-left: 24rpx;"> |
|
|
|
离线<text class="value">{{ weekObj.equipmentInfo.offlineNum || 0 }}</text></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 底部按钮 --> |
|
|
|
<view class="nav-footer"> |
|
|
|
|
|
|
|
<view class="footer-item" @click="toHome"> |
|
|
|
回到管理端 |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="footer-item" @click="copy" style="margin-left: 24rpx;"> |
|
|
|
复制内容 |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="footer-item full" style="margin-left: 24rpx;"> |
|
|
|
<button open-type="share" class="fulls"> |
|
|
|
一键转发 |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
needList: ['XJTop', 'ZXLTop', 'avgJds'], // 需要转换数组的内容 |
|
|
|
carryOutTop: [], // |
|
|
|
carryOutLast: [], // |
|
|
|
consultant: [], // 置业顾问排名 |
|
|
|
recording: [], // 录音排名 |
|
|
|
lowest: [], // 执行率最低的顾问 |
|
|
|
building: uni.getStorageSync('buildingID'), |
|
|
|
id: '', // 消息id |
|
|
|
projectName: '', // 项目名称 |
|
|
|
weekObj: {}, // 日报详情 |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
onLoad(option) { |
|
|
|
if (option.id) this.id = option.id |
|
|
|
this.getMessage() |
|
|
|
}, |
|
|
|
|
|
|
|
onShareAppMessage() { |
|
|
|
return { |
|
|
|
title: `${this.projectName}数智工牌日报`, |
|
|
|
path: `/pages/reportExcel/dayReport?id=${this.id}` |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
// 跳转首页 |
|
|
|
toHome() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages/index/guide' |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 获取日报详情 |
|
|
|
getMessage() { |
|
|
|
this.$u.get('/zkMessage/findByProjectId', { |
|
|
|
id: this.id |
|
|
|
}).then(res => { |
|
|
|
console.log(res) |
|
|
|
let data = JSON.parse(res.zkMessage.content) |
|
|
|
this.weekObj = { |
|
|
|
...res.zkMessage, |
|
|
|
...data |
|
|
|
} |
|
|
|
this.projectName = res.projectName |
|
|
|
this.init() |
|
|
|
}).catch(e => { |
|
|
|
console.log(e) |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
copy() { |
|
|
|
let str = ` |
|
|
|
${this.projectName}数智工牌日报 |
|
|
|
|
|
|
|
生成时间:${this.weekObj.createTime || '--'} |
|
|
|
|
|
|
|
|
|
|
|
1、接待量:${this.weekObj.receptionCount || 0 } |
|
|
|
|
|
|
|
有效接待:${this.weekObj.activeCustomer || 0} |
|
|
|
|
|
|
|
有效接待率:${this.weekObj.validReceptionRate || 0}% |
|
|
|
对比昨天:${ this.weekObj.validReceptionRatePK > 0 ? '+' : '' }${ this.weekObj.validReceptionRatePK || 0 }% |
|
|
|
|
|
|
|
2、平均执行率:${ this.weekObj.fraction || 0 }% |
|
|
|
对比昨天:${ this.weekObj.fractionPK > 0 ? '+' : '' }${ this.weekObj.fractionPK || 0 }% |
|
|
|
|
|
|
|
3、平均接待时长:${ this.weekObj.avgDuration || 0 }min |
|
|
|
对比昨天:${this.weekObj.avgDurationPK > 0 ? '+' : '' }${ this.weekObj.avgDurationPK || 0 }min` |
|
|
|
if (this.carryOutTop.length > 0) { |
|
|
|
str += ` |
|
|
|
|
|
|
|
4、销讲维度执行前三:` |
|
|
|
this.carryOutTop.map((item, index) => { |
|
|
|
str += ` |
|
|
|
top${index+1}.${item.title || '--'}${item.value||'0'}%` |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
if (this.carryOutLast.length > 0) { |
|
|
|
str += ` |
|
|
|
|
|
|
|
5、销讲维度执行弱项前三:` |
|
|
|
this.carryOutLast.map((item, index) => { |
|
|
|
str += ` |
|
|
|
top${index+1}.${item.title || '--'}${item.value||'0'}%` |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
if (this.consultant.length > 0) { |
|
|
|
str += ` |
|
|
|
|
|
|
|
6、置业顾问平均执行率排名:` |
|
|
|
this.consultant.map((item, index) => { |
|
|
|
str += ` |
|
|
|
top${index+1}.${item.title || '--'}${item.value||'0'}%` |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
if (this.recording.length > 0) { |
|
|
|
str += ` |
|
|
|
|
|
|
|
7、置业顾问平均接访时长排名:` |
|
|
|
this.recording.map((item, index) => { |
|
|
|
str += ` |
|
|
|
top${index+1}.${item.title || '--'}${item.value||'0'}min` |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
if (this.lowest.length > 0) { |
|
|
|
str += ` |
|
|
|
|
|
|
|
8、平均执行率最低的顾问:` |
|
|
|
this.lowest.map((item, index) => { |
|
|
|
str += ` |
|
|
|
${item.title || '--'}${item.value||'0'}%` |
|
|
|
}) |
|
|
|
} |
|
|
|
str += ` |
|
|
|
|
|
|
|
9、客户画像触达:${this.weekObj.reachSum || 0}次 |
|
|
|
|
|
|
|
10、未标记接待数:${ this.weekObj.unlabelledReceptionNum || 0 }条 |
|
|
|
|
|
|
|
11、设备情况: |
|
|
|
在线:${this.weekObj.equipmentInfo.onlineNum || 0} |
|
|
|
离线:${this.weekObj.equipmentInfo.offlineNum || 0}` |
|
|
|
|
|
|
|
uni.setClipboardData({ |
|
|
|
data: str |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 分割数组排名前三,倒三 |
|
|
|
getTopThree() { |
|
|
|
if (this.weekObj.XJTopList && this.weekObj.XJTopList.length > 0) { |
|
|
|
let arr = this.weekObj.XJTopList.slice(0, 3) |
|
|
|
arr.forEach(item => { |
|
|
|
if (item.value != 100) { |
|
|
|
this.carryOutLast.push(item) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.carryOutTop = this.weekObj.XJTopList.reverse().slice(0, 3) |
|
|
|
console.log(this.weekObj.XJTopList) |
|
|
|
} |
|
|
|
if (this.weekObj.ZXLTopList && this.weekObj.ZXLTopList.length > 0) { |
|
|
|
this.consultant = this.weekObj.ZXLTopList.reverse().slice(0, 3) |
|
|
|
this.lowest.push(this.weekObj.ZXLTopList[this.weekObj.ZXLTopList.length - 1]) |
|
|
|
} |
|
|
|
if (this.weekObj.avgJdsList && this.weekObj.avgJdsList.length > 0) { |
|
|
|
this.recording = this.weekObj.avgJdsList.reverse().slice(0, 3) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
init() { |
|
|
|
// 把对象转成数组并在后续的步骤方便处理 |
|
|
|
this.needList.forEach(item => { |
|
|
|
if (this.weekObj[item] && Object.keys(this.weekObj[item]).length > 0) { |
|
|
|
this.weekObj[item + 'List'] = [] // 销讲执行 |
|
|
|
for (let i in this.weekObj[item]) { |
|
|
|
this.weekObj[item + 'List'].push({ |
|
|
|
title: i, |
|
|
|
value: this.weekObj[item][i] |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
this.sortInitArr() |
|
|
|
}, |
|
|
|
|
|
|
|
// 排序对象转换后的数组 |
|
|
|
sortInitArr() { |
|
|
|
this.needList.forEach(item => { |
|
|
|
if (this.weekObj[item + 'List']) { |
|
|
|
this.bubbleSort(this.weekObj[item + 'List']) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.getTopThree() |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 冒泡排序 |
|
|
|
bubbleSort(arr) { |
|
|
|
for (let i = 0; i < arr.length - 1; i += 1) { |
|
|
|
//通过 arr.length 次把第一位放到最后,完成排序 |
|
|
|
//-i是因为最后的位置是会动态改变的,当完成一次后,最后一位会变成倒数第二位 |
|
|
|
for (let j = 0; j < arr.length - 1 - i; j += 1) { |
|
|
|
if (arr[j].value > arr[j + 1].value) { |
|
|
|
const temp = arr[j]; |
|
|
|
arr[j] = arr[j + 1]; |
|
|
|
arr[j + 1] = temp; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
fomatDate(date) { |
|
|
|
if (!date) return '--' |
|
|
|
let arr = date.split(' ') |
|
|
|
let str = arr[0] |
|
|
|
let result = str.split('-') |
|
|
|
return `${result[1]}-${result[2]}` |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.pages { |
|
|
|
width: 100vw; |
|
|
|
min-height: 100vh; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.nav-header { |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.container { |
|
|
|
padding: 30rpx 30rpx 0; |
|
|
|
flex-grow: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.c-head-card { |
|
|
|
padding: 30rpx; |
|
|
|
width: 100%; |
|
|
|
min-height: 252rpx; |
|
|
|
border: 2rpx solid #000000; |
|
|
|
border-radius: 12rpx; |
|
|
|
box-shadow: 10rpx 10rpx #2671E2; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.c-title-text { |
|
|
|
// position: relative; |
|
|
|
flex-grow: 1; |
|
|
|
font-size: 48rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #303030; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.date { |
|
|
|
// position: absolute; |
|
|
|
// right: 0; |
|
|
|
// bottom: 6rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
color: #303030; |
|
|
|
} |
|
|
|
|
|
|
|
.creative-time { |
|
|
|
margin: 20rpx 0 0 0; |
|
|
|
flex-shrink: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.dateList { |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.arrs { |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.arrs-items { |
|
|
|
margin: 40rpx 0 0 0; |
|
|
|
display: flex; |
|
|
|
min-height: 100rpx; |
|
|
|
|
|
|
|
.left { |
|
|
|
flex-shrink: 0; |
|
|
|
margin-right: 12rpx; |
|
|
|
width: 48rpx; |
|
|
|
height: 44rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
border-radius: 8rpx; |
|
|
|
border: 1rpx solid #999999; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
flex-grow: 1; |
|
|
|
|
|
|
|
.r-title { |
|
|
|
font-size: 32rpx; |
|
|
|
height: 44rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.num { |
|
|
|
font-size: 34rpx; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.r-box { |
|
|
|
padding: 21rpx 0 0 0; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
.r-box-item { |
|
|
|
margin-right: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.r-box-item-lang { |
|
|
|
margin-top: 19rpx; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.contrast { |
|
|
|
margin: 0 0 0 24rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.down { |
|
|
|
color: #43CD80; |
|
|
|
font-size: 34rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.up { |
|
|
|
font-size: 34rpx; |
|
|
|
color: #E7483C; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.ranking { |
|
|
|
padding: 21rpx 0 0 0; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.ranking-item { |
|
|
|
margin-bottom: 22rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 30rpx; |
|
|
|
|
|
|
|
.serial { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 42rpx; |
|
|
|
height: 42rpx; |
|
|
|
background: #2671E2; |
|
|
|
border-radius: 50%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.lside { |
|
|
|
margin: 0 20rpx; |
|
|
|
color: #505050; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.rside { |
|
|
|
flex-shrink: 0; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.nav-footer { |
|
|
|
position: sticky; |
|
|
|
bottom: 0; |
|
|
|
padding: 32rpx; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
background: #fff; |
|
|
|
|
|
|
|
.footer-item { |
|
|
|
flex: 1; |
|
|
|
height: 88rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
color: #2671E2; |
|
|
|
border: 2rpx solid #2671E2; |
|
|
|
border-radius: 8rpx; |
|
|
|
overflow: hidden; |
|
|
|
font-size: 32rpx; |
|
|
|
|
|
|
|
&.full { |
|
|
|
background: #2671E2; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
.fulls { |
|
|
|
box-sizing: border-box; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: transparent; |
|
|
|
color: #fff; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: normal; |
|
|
|
line-height: 88rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.up { |
|
|
|
color: #43CD80 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.down { |
|
|
|
color: #E6273A !important; |
|
|
|
} |
|
|
|
|
|
|
|
.empty { |
|
|
|
width: 100%; |
|
|
|
line-height: 48rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.value { |
|
|
|
margin-left: 5rpx; |
|
|
|
font-size: 30rpx !important; |
|
|
|
font-weight: bold !important; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |