You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

983 lines
24 KiB

  1. <template>
  2. <view class="pages">
  3. <!-- 日报内容部分 -->
  4. <view class="container" ref="lists">
  5. <!-- 头部日报卡 -->
  6. <view class="c-head-card">
  7. <view class="c-title-text">
  8. {{ projectName }}数智工牌日报
  9. </view>
  10. <text class="date">{{ weekObj.createTime | fomatDate }}</text>
  11. <view class="creative-time">
  12. 生成时间:{{ weekObj.createTime || '--' }}
  13. </view>
  14. </view>
  15. <view class="nodata-box" v-if="nodata">
  16. <image class="img" src="/static/images/nodata.png" mode="" />
  17. <view class="text">此项目今日还没有接待量哦~</view>
  18. </view>
  19. <view v-if="!nodata">
  20. <!-- 循环渲染的数据 -->
  21. <view class="dateList">
  22. <view class="arrs">
  23. <view class="arrs-items index1">
  24. <view class="left">
  25. 1
  26. </view>
  27. <view class="right">
  28. <view class="r-title">
  29. <text>接待量:</text>
  30. </view>
  31. <view class="r-box">
  32. <view class="r-box-item">
  33. <text>接待量</text><text class="value">{{ weekObj.receptionCount || 0 }}</text>
  34. </view>
  35. <view class="r-box-item">
  36. <text>有效接待</text><text class="value">{{ weekObj.activeCustomer || 0 }}</text>
  37. </view>
  38. <view class="r-box-item-lang">
  39. <view>有效接待率<text class="value">{{ weekObj.validReceptionRate || 0 }}%</text>
  40. </view>
  41. <view class="contrast">对比昨天<text class="value"
  42. :class="{down: weekObj.validReceptionRatePK < 0, up: weekObj.validReceptionRatePK > 0}">{{ weekObj.validReceptionRatePK > 0 ? '+' : '' }}{{ weekObj.validReceptionRatePK || 0 }}%</text>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. <view class="arrs-items index2">
  49. <view class="left">
  50. 2
  51. </view>
  52. <view class="right">
  53. <view class="r-title">
  54. <text v-if="!weekObj.orgCode">平均执行率:</text>
  55. <text v-else>销讲执行率:</text>
  56. </view>
  57. <view class="r-box">
  58. <view class="r-box-item-lang">
  59. <view>
  60. <text v-if="!weekObj.orgCode">平均执行率:</text>
  61. <text v-else>销讲执行率:</text>
  62. <text class="value">{{ weekObj.fraction || 0 }}%</text>
  63. </view>
  64. <view class="contrast">对比昨天<text class="value"
  65. :class="{down: weekObj.fractionPK < 0, up: weekObj.fractionPK > 0}">{{ weekObj.fractionPK > 0 ? '+' : '' }}{{ weekObj.fractionPK || 0 }}%</text>
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. <view class="arrs-items index3">
  72. <view class="left">
  73. 3
  74. </view>
  75. <view class="right">
  76. <view class="r-title">
  77. <text>平均接待时长:</text>
  78. </view>
  79. <view class="r-box">
  80. <view class="r-box-item-lang">
  81. <view>平均接待时长<text class="value">{{ weekObj.avgDuration || 0 }}min</text></view>
  82. <view class="contrast">对比昨天<text class="value"
  83. :class="{down: weekObj.avgDurationPK < 0, up: weekObj.avgDurationPK > 0}">{{ weekObj.avgDurationPK > 0 ? '+' : '' }}{{ weekObj.avgDurationPK || 0 }}min</text>
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. </view>
  89. <view class="arrs-items index4">
  90. <view class="left">
  91. 4
  92. </view>
  93. <view class="right">
  94. <view class="r-title">
  95. <text v-if="!weekObj.orgCode">销讲维度执行前三:</text>
  96. <text v-else>项目平均执行率排名:</text>
  97. </view>
  98. <view class="ranking">
  99. <block v-for="(rank, rankIndex) in carryOutTop" :key="rankIndex">
  100. <view class="ranking-item">
  101. <view class="serial">
  102. {{ rankIndex+1 }}
  103. </view>
  104. <view class="lside">
  105. {{ rank.title || '--' }}
  106. </view>
  107. <view class="rside">
  108. ({{ rank.value || 0 }}%)
  109. </view>
  110. </view>
  111. </block>
  112. <template v-if="carryOutTop.length == 0">
  113. <view class="empty">
  114. 暂无数据
  115. </view>
  116. </template>
  117. </view>
  118. </view>
  119. </view>
  120. <view class="arrs-items index5">
  121. <view class="left">
  122. 5
  123. </view>
  124. <view class="right">
  125. <view class="r-title">
  126. <text v-if="!weekObj.orgCode">销讲维度执行弱项前三:</text>
  127. <text v-else>项目平均接访时长排名:</text>
  128. </view>
  129. <view class="ranking">
  130. <block v-for="(rank, rankIndex) in carryOutLast" :key="rankIndex">
  131. <view class="ranking-item">
  132. <view class="serial">
  133. {{ rankIndex+1 }}
  134. </view>
  135. <view class="lside">
  136. {{ rank.title || '--' }}
  137. </view>
  138. <view class="rside">
  139. ({{ rank.value || 0 }}%)
  140. </view>
  141. </view>
  142. </block>
  143. <template v-if="carryOutLast.length == 0">
  144. <view class="empty">
  145. 暂无数据
  146. </view>
  147. </template>
  148. </view>
  149. </view>
  150. </view>
  151. <view class="arrs-items index6" v-if="!weekObj.orgCode">
  152. <view class="left">
  153. 6
  154. </view>
  155. <view class="right">
  156. <view class="r-title">
  157. <text>置业顾问平均执行率排名:</text>
  158. </view>
  159. <view class="ranking">
  160. <block v-for="(rank, rankIndex) in consultant" :key="rankIndex">
  161. <view class="ranking-item">
  162. <view class="serial">
  163. {{ rankIndex+1 }}
  164. </view>
  165. <view class="lside">
  166. {{ rank.title || '--' }}
  167. </view>
  168. <view class="rside">
  169. ({{ rank.value || 0 }}%)
  170. </view>
  171. </view>
  172. </block>
  173. <template v-if="consultant.length == 0">
  174. <view class="empty">
  175. 暂无数据
  176. </view>
  177. </template>
  178. </view>
  179. </view>
  180. </view>
  181. <view class="arrs-items index7" v-if="!weekObj.orgCode">
  182. <view class="left">
  183. 7
  184. </view>
  185. <view class="right">
  186. <view class="r-title">
  187. <text>置业顾问平均接访时长排名:</text>
  188. </view>
  189. <view class="ranking">
  190. <block v-for="(rank, rankIndex) in recording" :key="rankIndex">
  191. <view class="ranking-item">
  192. <view class="serial">
  193. {{ rankIndex+1 }}
  194. </view>
  195. <view class="lside">
  196. {{ rank.title || '--' }}
  197. </view>
  198. <view class="rside">
  199. ({{ rank.value || 0 }}min)
  200. </view>
  201. </view>
  202. </block>
  203. <template v-if="recording.length == 0">
  204. <view class="empty">
  205. 暂无数据
  206. </view>
  207. </template>
  208. </view>
  209. </view>
  210. </view>
  211. <view class="arrs-items index8">
  212. <view class="left">
  213. <template v-if="!weekObj.orgCode">
  214. 8
  215. </template>
  216. <template v-else>
  217. 6
  218. </template>
  219. </view>
  220. <view class="right">
  221. <view class="r-title">
  222. <text v-if="!weekObj.orgCode">平均执行率最低的顾问:</text>
  223. <text v-else>执行率最低的项目:</text>
  224. </view>
  225. <view class="ranking">
  226. <block v-for="(rank, rankIndex) in lowest" :key="rankIndex">
  227. <view class="ranking-item">
  228. <view class="lside">
  229. {{ rank.title || '--' }}
  230. </view>
  231. <view class="rside value">
  232. {{ rank.value || 0 }}%
  233. </view>
  234. </view>
  235. </block>
  236. <template v-if="lowest.length == 0">
  237. <view class="empty">
  238. 暂无数据
  239. </view>
  240. </template>
  241. </view>
  242. </view>
  243. </view>
  244. <view class="arrs-items index9">
  245. <view class="left">
  246. <template v-if="!weekObj.orgCode">
  247. 9
  248. </template>
  249. <template v-else>
  250. 7
  251. </template>
  252. </view>
  253. <view class="right">
  254. <view class="r-title">
  255. <text>客户画像触达:</text>
  256. <text class="num value">{{ weekObj.reachSum || 0 }}次</text>
  257. </view>
  258. </view>
  259. </view>
  260. <view class="arrs-items index8" v-if="weekObj.orgCode">
  261. <view class="left">
  262. 8
  263. </view>
  264. <view class="right">
  265. <view class="r-title">
  266. <text>画像一级触达接待前三:</text>
  267. </view>
  268. <view class="ranking">
  269. <block v-for="(rank, rankIndex) in weekObj.level1List" :key="rankIndex">
  270. <view class="ranking-item">
  271. <view class="lside">
  272. {{ rank.name || '--' }}
  273. </view>
  274. <view class="rside value">
  275. ({{ rank.total || 0 }})
  276. </view>
  277. </view>
  278. </block>
  279. <template v-if="!weekObj.level1List || weekObj.level1List.length == 0">
  280. <view class="empty">
  281. 暂无数据
  282. </view>
  283. </template>
  284. </view>
  285. </view>
  286. </view>
  287. <view class="arrs-items index8" v-if="weekObj.orgCode">
  288. <view class="left">
  289. 9
  290. </view>
  291. <view class="right">
  292. <view class="r-title">
  293. <text>画像关键词触达接待前三:</text>
  294. </view>
  295. <view class="ranking">
  296. <block v-for="(rank, rankIndex) in weekObj.level2List" :key="rankIndex">
  297. <view class="ranking-item">
  298. <view class="lside">
  299. {{ rank.name || '--' }}
  300. </view>
  301. <view class="rside value">
  302. ({{ rank.total || 0 }})
  303. </view>
  304. </view>
  305. </block>
  306. <template v-if="!weekObj.level2List || weekObj.level2List.length == 0">
  307. <view class="empty">
  308. 暂无数据
  309. </view>
  310. </template>
  311. </view>
  312. </view>
  313. </view>
  314. <view class="arrs-items index10">
  315. <view class="left">
  316. <template v-if="!weekObj.orgCode">
  317. 12
  318. </template>
  319. <template v-else>
  320. 10
  321. </template>
  322. </view>
  323. <view class="right">
  324. <view class="r-title">
  325. <text>未标记接待数:</text>
  326. <text class="num value down"
  327. style="font-weight: 500;font-size: 34rpx;">{{ weekObj.unlabelledReceptionNum || 0 }}</text>
  328. <text class="down value">条</text>
  329. </view>
  330. </view>
  331. </view>
  332. <view class="arrs-items index11">
  333. <view class="left">
  334. <template v-if="!weekObj.orgCode">
  335. 13
  336. </template>
  337. <template v-else>
  338. 11
  339. </template>
  340. </view>
  341. <view class="right">
  342. <view class="r-title">
  343. <text>设备情况:</text>
  344. </view>
  345. <view class="r-box">
  346. <view class="r-box-item-lang">
  347. <view>在线<text class="value">{{ weekObj.equipmentInfo.onlineNum || 0 }}</text>
  348. </view>
  349. <view style="margin-left: 24rpx;">
  350. 离线<text class="value">{{ weekObj.equipmentInfo.offlineNum || 0 }}</text>
  351. </view>
  352. </view>
  353. </view>
  354. </view>
  355. </view>
  356. </view>
  357. </view>
  358. </view>
  359. </view>
  360. <!-- 底部按钮 -->
  361. <view class="nav-footer" v-if="!nodata">
  362. <view class="footer-item" @click="toHome">
  363. 回到管理端
  364. </view>
  365. <view class="footer-item" @click="copy" style="margin-left: 24rpx;">
  366. 复制内容
  367. </view>
  368. <view class="footer-item full" style="margin-left: 24rpx;" @tap="forShare">
  369. <button open-type="share" class="fulls">
  370. 一键转发
  371. </button>
  372. </view>
  373. </view>
  374. </view>
  375. </template>
  376. <script>
  377. export default {
  378. data() {
  379. return {
  380. needList: ['XJTop', 'ZXLTop', 'avgJds'], // 需要转换数组的内容
  381. carryOutTop: [], //
  382. carryOutLast: [], //
  383. consultant: [], // 置业顾问排名
  384. recording: [], // 录音排名
  385. lowest: [], // 执行率最低的顾问
  386. building: uni.getStorageSync('buildingID'),
  387. id: '', // 消息id
  388. projectName: '', // 项目名称
  389. weekObj: {}, // 日报详情
  390. nodata: false //有无数据
  391. }
  392. },
  393. onLoad(option) {
  394. if (option.id) this.id = option.id
  395. this.getMessage()
  396. },
  397. onShareAppMessage() {
  398. return {
  399. title: `${this.projectName}数智工牌日报`,
  400. path: `/pages/reportExcel/dayReport?id=${this.id}`
  401. }
  402. },
  403. methods: {
  404. // 项目拷贝
  405. copys() {
  406. let str = `
  407. ${this.projectName}数智工牌日报
  408. 生成时间:${this.weekObj.createTime || '--'}
  409. 1、接待量:${this.weekObj.receptionCount || 0 }
  410. 有效接待:${this.weekObj.activeCustomer || 0}
  411. 有效接待率:${this.weekObj.validReceptionRate || 0}%
  412. 对比昨天:${ this.weekObj.validReceptionRatePK > 0 ? '+' : '' }${ this.weekObj.validReceptionRatePK || 0 }%
  413. 2、平均执行率:${ this.weekObj.fraction || 0 }%
  414. 销讲执行率:${ this.weekObj.fractionPK > 0 ? '+' : '' }${ this.weekObj.fractionPK || 0 }%
  415. 3、平均接待时长:${ this.weekObj.avgDuration || 0 }min
  416. 对比昨天:${this.weekObj.avgDurationPK > 0 ? '+' : '' }${ this.weekObj.avgDurationPK || 0 }min`
  417. if (this.carryOutTop.length > 0) {
  418. str += `
  419. 4、项目平均执行率排名:`
  420. this.carryOutTop.map((item, index) => {
  421. str += `
  422. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  423. })
  424. }
  425. if (this.carryOutLast.length > 0) {
  426. str += `
  427. 5、项目平均接访时长排名:`
  428. this.carryOutLast.map((item, index) => {
  429. str += `
  430. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  431. })
  432. }
  433. if (this.consultant.length > 0) {
  434. str += `
  435. 6、置业顾问平均执行率排名:`
  436. this.consultant.map((item, index) => {
  437. str += `
  438. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  439. })
  440. }
  441. if (this.lowest.length > 0) {
  442. str += `
  443. 6、执行率最低的项目:`
  444. this.lowest.map((item, index) => {
  445. str += `
  446. ${item.title || '--'}${item.value||'0'}%`
  447. })
  448. }
  449. str += `
  450. 7、客户画像触达:${this.weekObj.reachSum || 0}次`
  451. if (this.weekObj.level1List.length > 0) {
  452. str += `
  453. 8、画像一级触达接待前三
  454. `
  455. this.weekObj.level1List.map((item, index) => {
  456. str += `
  457. top${index+1}.${item.name || '--'}${item.total||'0'}%`
  458. })
  459. }
  460. if (this.weekObj.level1List.length > 0) {
  461. str += `
  462. 9、画像关键词触达接待前三
  463. `
  464. this.weekObj.level1List.map((item, index) => {
  465. str += `
  466. top${index+1}.${item.name || '--'}${item.total||'0'}%`
  467. })
  468. }
  469. str += `
  470. 10、未标记接待数:${ this.weekObj.unlabelledReceptionNum || 0 }条
  471. 11、设备情况:
  472. 在线:${this.weekObj.equipmentInfo.onlineNum || 0}
  473. 离线:${this.weekObj.equipmentInfo.offlineNum || 0}`
  474. uni.setClipboardData({
  475. data: str
  476. })
  477. },
  478. forShare() {
  479. this.$u.get("/zkMessage/shareMessage", {
  480. id: this.id
  481. })
  482. },
  483. // 跳转首页
  484. toHome() {
  485. uni.navigateTo({
  486. url: '/pages/index/guide'
  487. })
  488. },
  489. // 获取日报详情
  490. getMessage() {
  491. this.$u.get('/zkMessage/findByProjectId', {
  492. id: this.id
  493. }).then(res => {
  494. let data = {}
  495. if (res.zkMessage.content) {
  496. data = JSON.parse(res.zkMessage.content)
  497. this.weekObj = {
  498. ...res.zkMessage,
  499. ...data
  500. }
  501. this.nodata = false
  502. } else {
  503. this.nodata = true
  504. this.weekObj = {
  505. ...res.zkMessage
  506. }
  507. }
  508. this.projectName = res.projectName
  509. console.log(this.weekObj)
  510. this.init()
  511. }).catch(e => {
  512. console.log(e)
  513. })
  514. },
  515. copy() {
  516. if (this.weekObj.orgCode) return this.copys()
  517. let str = `
  518. ${this.projectName}数智工牌日报
  519. 生成时间:${this.weekObj.createTime || '--'}
  520. 1、接待量:${this.weekObj.receptionCount || 0 }
  521. 有效接待:${this.weekObj.activeCustomer || 0}
  522. 有效接待率:${this.weekObj.validReceptionRate || 0}%
  523. 对比昨天:${ this.weekObj.validReceptionRatePK > 0 ? '+' : '' }${ this.weekObj.validReceptionRatePK || 0 }%
  524. 2、平均执行率:${ this.weekObj.fraction || 0 }%
  525. 对比昨天:${ this.weekObj.fractionPK > 0 ? '+' : '' }${ this.weekObj.fractionPK || 0 }%
  526. 3、平均接待时长:${ this.weekObj.avgDuration || 0 }min
  527. 对比昨天:${this.weekObj.avgDurationPK > 0 ? '+' : '' }${ this.weekObj.avgDurationPK || 0 }min`
  528. if (this.carryOutTop.length > 0) {
  529. str += `
  530. 4、销讲维度执行前三:`
  531. this.carryOutTop.map((item, index) => {
  532. str += `
  533. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  534. })
  535. }
  536. if (this.carryOutLast.length > 0) {
  537. str += `
  538. 5、销讲维度执行弱项前三:`
  539. this.carryOutLast.map((item, index) => {
  540. str += `
  541. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  542. })
  543. }
  544. if (this.consultant.length > 0) {
  545. str += `
  546. 6、置业顾问平均执行率排名:`
  547. this.consultant.map((item, index) => {
  548. str += `
  549. top${index+1}.${item.title || '--'}${item.value||'0'}%`
  550. })
  551. }
  552. if (this.recording.length > 0) {
  553. str += `
  554. 7、置业顾问平均接访时长排名:`
  555. this.recording.map((item, index) => {
  556. str += `
  557. top${index+1}.${item.title || '--'}${item.value||'0'}min`
  558. })
  559. }
  560. if (this.lowest.length > 0) {
  561. str += `
  562. 8、平均执行率最低的顾问:`
  563. this.lowest.map((item, index) => {
  564. str += `
  565. ${item.title || '--'}${item.value||'0'}%`
  566. })
  567. }
  568. str += `
  569. 9、客户画像触达:${this.weekObj.reachSum || 0}次
  570. 10、未标记接待数:${ this.weekObj.unlabelledReceptionNum || 0 }条
  571. 11、设备情况:
  572. 在线:${this.weekObj.equipmentInfo.onlineNum || 0}
  573. 离线:${this.weekObj.equipmentInfo.offlineNum || 0}`
  574. uni.setClipboardData({
  575. data: str
  576. })
  577. },
  578. // 分割数组排名前三,倒三
  579. getTopThree() {
  580. if (this.weekObj.XJTopList && this.weekObj.XJTopList.length > 0) {
  581. let arr = this.weekObj.XJTopList.slice(0, 3)
  582. arr.forEach(item => {
  583. if (item.value != 100) {
  584. this.carryOutLast.push(item)
  585. }
  586. })
  587. this.carryOutTop = this.weekObj.XJTopList.reverse().slice(0, 3)
  588. console.log(this.weekObj.XJTopList)
  589. }
  590. if (this.weekObj.ZXLTopList && this.weekObj.ZXLTopList.length > 0) {
  591. this.consultant = this.weekObj.ZXLTopList.reverse().slice(0, 3)
  592. if (this.weekObj.ZXLTopList[this.weekObj.ZXLTopList.length - 1].value != 100) {
  593. this.lowest.push(this.weekObj.ZXLTopList[this.weekObj.ZXLTopList.length - 1])
  594. }
  595. }
  596. if (this.weekObj.avgJdsList && this.weekObj.avgJdsList.length > 0) {
  597. this.recording = this.weekObj.avgJdsList.reverse().slice(0, 3)
  598. }
  599. },
  600. init() {
  601. // 把对象转成数组并在后续的步骤方便处理
  602. this.needList.forEach(item => {
  603. if (this.weekObj[item] && Object.keys(this.weekObj[item]).length > 0) {
  604. this.weekObj[item + 'List'] = [] // 销讲执行
  605. for (let i in this.weekObj[item]) {
  606. this.weekObj[item + 'List'].push({
  607. title: i,
  608. value: this.weekObj[item][i]
  609. })
  610. }
  611. }
  612. })
  613. this.sortInitArr()
  614. },
  615. // 排序对象转换后的数组
  616. sortInitArr() {
  617. this.needList.forEach(item => {
  618. if (this.weekObj[item + 'List']) {
  619. this.bubbleSort(this.weekObj[item + 'List'])
  620. }
  621. })
  622. this.getTopThree()
  623. },
  624. // 冒泡排序
  625. bubbleSort(arr) {
  626. for (let i = 0; i < arr.length - 1; i += 1) {
  627. //通过 arr.length 次把第一位放到最后,完成排序
  628. //-i是因为最后的位置是会动态改变的,当完成一次后,最后一位会变成倒数第二位
  629. for (let j = 0; j < arr.length - 1 - i; j += 1) {
  630. if (arr[j].value > arr[j + 1].value) {
  631. const temp = arr[j];
  632. arr[j] = arr[j + 1];
  633. arr[j + 1] = temp;
  634. }
  635. }
  636. }
  637. },
  638. },
  639. filters: {
  640. fomatDate(date) {
  641. if (!date) return '--'
  642. let arr = date.split(' ')
  643. let str = arr[0]
  644. let result = str.split('-')
  645. return `${result[1]}-${result[2]}`
  646. }
  647. }
  648. }
  649. </script>
  650. <style lang="scss" scoped>
  651. .pages {
  652. width: 100vw;
  653. min-height: 100vh;
  654. display: flex;
  655. flex-direction: column;
  656. .nav-header {
  657. flex-shrink: 0;
  658. }
  659. .container {
  660. padding: 30rpx 30rpx 0;
  661. flex-grow: 1;
  662. display: flex;
  663. flex-direction: column;
  664. .c-head-card {
  665. padding: 30rpx;
  666. width: 100%;
  667. min-height: 252rpx;
  668. border: 2rpx solid #000000;
  669. border-radius: 12rpx;
  670. box-shadow: 10rpx 10rpx #2671E2;
  671. display: flex;
  672. flex-direction: column;
  673. .c-title-text {
  674. // position: relative;
  675. flex-grow: 1;
  676. font-size: 48rpx;
  677. font-weight: bold;
  678. color: #303030;
  679. }
  680. .date {
  681. // position: absolute;
  682. // right: 0;
  683. // bottom: 6rpx;
  684. font-size: 30rpx;
  685. color: #303030;
  686. }
  687. .creative-time {
  688. margin: 20rpx 0 0 0;
  689. flex-shrink: 0;
  690. }
  691. }
  692. .dateList {
  693. width: 100%;
  694. .arrs {
  695. width: 100%;
  696. .arrs-items {
  697. margin: 40rpx 0 0 0;
  698. display: flex;
  699. min-height: 100rpx;
  700. .left {
  701. flex-shrink: 0;
  702. margin-right: 12rpx;
  703. width: 48rpx;
  704. height: 44rpx;
  705. display: flex;
  706. justify-content: center;
  707. align-items: center;
  708. border-radius: 8rpx;
  709. border: 1rpx solid #999999;
  710. font-size: 32rpx;
  711. }
  712. .right {
  713. flex-grow: 1;
  714. .r-title {
  715. font-size: 32rpx;
  716. height: 44rpx;
  717. display: flex;
  718. align-items: center;
  719. .num {
  720. font-size: 34rpx;
  721. }
  722. }
  723. .r-box {
  724. padding: 21rpx 0 0 0;
  725. display: flex;
  726. flex-wrap: wrap;
  727. .r-box-item {
  728. margin-right: 24rpx;
  729. }
  730. .r-box-item-lang {
  731. margin-top: 19rpx;
  732. width: 100%;
  733. display: flex;
  734. align-items: center;
  735. .contrast {
  736. margin: 0 0 0 24rpx;
  737. display: flex;
  738. align-items: center;
  739. }
  740. .down {
  741. color: #E7483C;
  742. font-size: 34rpx;
  743. }
  744. .up {
  745. font-size: 34rpx;
  746. color: #43CD80;
  747. }
  748. }
  749. }
  750. .ranking {
  751. padding: 21rpx 0 0 0;
  752. display: flex;
  753. flex-direction: column;
  754. .ranking-item {
  755. margin-bottom: 22rpx;
  756. display: flex;
  757. align-items: center;
  758. font-size: 30rpx;
  759. .serial {
  760. flex-shrink: 0;
  761. width: 42rpx;
  762. height: 42rpx;
  763. background: #2671E2;
  764. border-radius: 50%;
  765. display: flex;
  766. justify-content: center;
  767. align-items: center;
  768. color: #fff;
  769. }
  770. .lside {
  771. margin: 0 20rpx;
  772. color: #505050;
  773. }
  774. .rside {
  775. flex-shrink: 0;
  776. font-size: 32rpx;
  777. }
  778. }
  779. }
  780. }
  781. }
  782. }
  783. }
  784. }
  785. .nav-footer {
  786. position: sticky;
  787. bottom: 0;
  788. padding: 32rpx;
  789. width: 100%;
  790. display: flex;
  791. justify-content: center;
  792. background: #fff;
  793. .footer-item {
  794. flex: 1;
  795. height: 88rpx;
  796. display: flex;
  797. justify-content: center;
  798. align-items: center;
  799. color: #2671E2;
  800. border: 2rpx solid #2671E2;
  801. border-radius: 8rpx;
  802. overflow: hidden;
  803. font-size: 32rpx;
  804. &.full {
  805. background: #2671E2;
  806. color: #fff;
  807. .fulls {
  808. box-sizing: border-box;
  809. width: 100%;
  810. height: 100%;
  811. background: transparent;
  812. color: #fff;
  813. font-size: 32rpx;
  814. font-weight: normal;
  815. line-height: 88rpx;
  816. }
  817. }
  818. }
  819. }
  820. .up {
  821. color: #43CD80 !important;
  822. }
  823. .down {
  824. color: #E6273A !important;
  825. }
  826. .empty {
  827. width: 100%;
  828. line-height: 48rpx;
  829. }
  830. .value {
  831. margin-left: 5rpx;
  832. font-size: 30rpx !important;
  833. font-weight: bold !important;
  834. }
  835. .nodata-box {
  836. width: 750rpx;
  837. margin: 20rpx auto 0;
  838. display: flex;
  839. justify-content: center;
  840. align-items: center;
  841. flex-direction: column;
  842. background-color: #fff;
  843. .img {
  844. width: 400rpx;
  845. height: 400rpx;
  846. }
  847. .text {
  848. text-align: center;
  849. font-size: 28rpx;
  850. font-family: PingFangSC-Regular, PingFang SC;
  851. font-weight: 400;
  852. color: #666666;
  853. line-height: 40rpx;
  854. // margin-top: -40rpx;
  855. }
  856. }
  857. }
  858. </style>