Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 

753 righe
20 KiB

  1. <template>
  2. <view class="box">
  3. <view class="boxtittab">
  4. <view class="tabbox">
  5. <view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4)">近七天</view>
  6. </view>
  7. <view class="tabbox">
  8. <view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5)">近15天</view>
  9. </view>
  10. <view class="tabbox">
  11. <view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6)">近30天</view>
  12. </view>
  13. <view class="tabbox">
  14. <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>
  15. </view>
  16. </view>
  17. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  18. <view class="Piabodata-box">
  19. <view class="Piabodata" @click="toTrendAnalysis()">
  20. <view class="Piabodata-img">
  21. <image class="Piabodata-img1" src="../../../static/images/qushi.png" mode=""></image>
  22. </view>
  23. <view class="Piabodata-text">趋势分析</view>
  24. </view>
  25. <view class="Piabodata" @click="toStaffAnalysis()">
  26. <view class="Piabodata-img">
  27. <image class="Piabodata-img1" src="../../../static/images/yuangong.png" mode=""></image>
  28. </view>
  29. <view class="Piabodata-text">员工分析</view>
  30. </view>
  31. <view class="Piabodata" @click="toUserinsightinto()">
  32. <view class="Piabodata-img">
  33. <image class="Piabodata-img1" src="../../../static/images/yinghu.png" mode=""></image>
  34. </view>
  35. <view class="Piabodata-text">用户洞察</view>
  36. </view>
  37. <view class="Piabodata" @click="Theteamcompared()" v-if="Theteamcomparedisshow">
  38. <view class="Piabodata-img">
  39. <image class="Piabodata-img1" src="../../../static/images/tuandui.png" mode=""></image>
  40. </view>
  41. <view class="Piabodata-text">团队对比</view>
  42. </view>
  43. <view class="Piabodata" @click="Groupcontrast()" v-if="Groupcontrastisshow">
  44. <view class="Piabodata-img">
  45. <image class="Piabodata-img1" src="../../../static/images/jituan.png" mode=""></image>
  46. </view>
  47. <view class="Piabodata-text">集团对比</view>
  48. </view>
  49. </view>
  50. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  51. <view class="boxzonglan" style="min-height: 400rpx;">
  52. <view class="zonglantit">简报</view>
  53. <view class="zonglanbox">
  54. <view class="grid" v-for="(item,index) in numlist" :key="index">
  55. <view class="audonum">{{item.name}}</text></view>
  56. <view class="num">{{item.num}}</view>
  57. </view>
  58. </view>
  59. </view>
  60. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  61. <view class="single">
  62. <view class="title">
  63. <view class="title1">接待趋势</view>
  64. </view>
  65. <view class="swiper-box">
  66. <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex"
  67. @change="tapspagek2()" inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj1"
  68. :is-scroll="true">
  69. </u-tabs-swiper>
  70. </view>
  71. <!-- <view class="hejibox">
  72. <view class="heji">合计:50</view>
  73. <view class="heji">均值:25</view>
  74. </view> -->
  75. <view class="danwei">{{danwei}} </view>
  76. <view class="uchaserbox">
  77. <template v-if="danwei == '单位(%)'">
  78. <qiun-data-charts type="line" :chartData="lineOptsect" :opts="lineOpts" background="none"
  79. :ontouch="true" canvasId="wangxiaohuaerlingilingwuyiba1" :canvas2d="true" />
  80. </template>
  81. <template v-else>
  82. <qiun-data-charts type="line" :chartData="lineOptsect" background="none" :ontouch="true"
  83. canvasId="wangxiaohuaerlingilingwuyiba1" :canvas2d="true" />
  84. </template>
  85. </view>
  86. </view>
  87. <view class="" v-if="teamFlag">
  88. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  89. <view class="single">
  90. <view class="title" @click="staffShow1=true">
  91. <view class="title1">团队接待趋势</view>
  92. <view class="title2">
  93. <view class="title2-che" style="width: 220rpx;display: flex;align-items: center;">
  94. <text style="flex-grow: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{team.label}}</text>
  95. <image style="flex-shrink: 0;" class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  96. </view>
  97. </view>
  98. </view>
  99. <view class="danwei">单位(%)</view>
  100. <view class="uchaserbox">
  101. <qiun-data-charts type="line" :chartData="lineOptsect1" background="none" :ontouch="true"
  102. canvasId="wangxiaohuaerlineryiliwuyibao" :canvas2d="true" :opts="lineOpts" />
  103. </view>
  104. </view>
  105. </view>
  106. <view class="" v-if="staffFlag">
  107. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  108. <view class="single">
  109. <view class="title">
  110. <view class="title1">员工接待趋势</view>
  111. <view class="title2" @click="staffShow=true">
  112. <view class="title2-che" style="width: 220rpx;">{{staff.label}}
  113. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  114. </view>
  115. <!-- <view class="title2-che">执行率
  116. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  117. </view> -->
  118. </view>
  119. </view>
  120. <!-- <view class="hejibox">
  121. <view class="heji">合计:{{allnum1||0}}</view>
  122. <view class="heji">均值:{{allavg1||0}}</view>
  123. </view> -->
  124. <view class="danwei">单位(%)</view>
  125. <view class="uchaserbox">
  126. <qiun-data-charts type="line" :chartData="lineOptsect2" background="none" :ontouch="true"
  127. canvasId="wangxiaohuaerlingeryilingwuyibao" :canvas2d="true" :opts="lineOpts" />
  128. </view>
  129. </view>
  130. </view>
  131. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  132. <view class="single">
  133. <view class="title">
  134. <view class="title1">场景触达分析</view>
  135. <!-- <view class="title3">
  136. <view class="title3-box">
  137. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>
  138. </view>
  139. <view class="title3-box">
  140. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>
  141. </view>
  142. </view> -->
  143. </view>
  144. <!-- <view class="hejibox">
  145. <view class="heji">合计:50</view>
  146. <view class="heji">均值:25</view>
  147. </view> -->
  148. <view style="width: 100%;height: 300rpx;text-align: center;line-height: 300rpx;"
  149. v-if="newlisttabinfo.length==0">暂无数据</view>
  150. <view v-else class="jindu" style="margin-top: 20rpx;">
  151. <scroll-view style="height: 300rpx;" scroll-y="true">
  152. <view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
  153. <view class="jindu-boxche">
  154. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  155. <view style="width: 440rpx;margin-left: 10rpx;">
  156. <u-line-progress height="24" :show-percent="false" active-color="#4FC78F"
  157. :percent="item.zxl"></u-line-progress>
  158. </view>
  159. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  160. </view>
  161. </view>
  162. </scroll-view>
  163. </view>
  164. </view>
  165. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  166. <view class="single">
  167. <view class="title">
  168. <view class="title1">销讲指标执行率</view>
  169. </view>
  170. <view class="swiper-box">
  171. <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex1"
  172. @change="tapspagek3" inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj"
  173. :is-scroll="true">
  174. </u-tabs-swiper>
  175. </view>
  176. <view style="width: 100%;height: 300rpx;text-align: center;line-height: 300rpx;"
  177. v-if="newlisttabinfo1.length==0">暂无数据</view>
  178. <view class="jindu" v-else>
  179. <scroll-view style="height: 300rpx;" scroll-y="true">
  180. <view class="jindu-box" v-for="(item,index) in newlisttabinfo1" :key="index">
  181. <view class="jindu-boxche">
  182. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  183. <view style="width: 440rpx;margin-left: 10rpx;">
  184. <u-line-progress height="24" :show-percent="false" active-color="#4FC78F"
  185. :percent="item.zxl"></u-line-progress>
  186. </view>
  187. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  188. </view>
  189. </view>
  190. </scroll-view>
  191. </view>
  192. </view>
  193. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  194. <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback($event,0)"
  195. :default-value='selindex'></u-select>
  196. <u-select v-model="staffShow1" :list="teamList" @confirm="staffSelectCallback($event,1)"
  197. :default-value='selindex'></u-select>
  198. </view>
  199. </template>
  200. <script>
  201. var app = getApp();
  202. // var util = require("../../../utils/util.js");
  203. var config = require("../../../config");
  204. export default {
  205. data() {
  206. return {
  207. activeTotal: 4,
  208. activeTotal2: 0,
  209. houseId: '',
  210. timeobj: {
  211. statDateStart: '',
  212. statDateEnd: ''
  213. },
  214. // 员工列表
  215. staffList: [],
  216. // 团队列表
  217. teamList: [],
  218. staffShow: false,
  219. staff: {
  220. value: '',
  221. label: ''
  222. },
  223. team: {
  224. value: '',
  225. label: ''
  226. },
  227. teamFlag: true,
  228. bocindex1: 0,
  229. staffFlag: true,
  230. staffShow1: false,
  231. lastStartDate: '',
  232. lastEndDate: '',
  233. allnum: '',
  234. allavg: '',
  235. allnum1: '',
  236. allavg1: '',
  237. danwei: '单位(次)',
  238. totalTimeShow: false,
  239. activeTab: 0,
  240. numlist: [
  241. {
  242. name: '接待量',
  243. num: '',
  244. setName: 'sumCustomer'
  245. },{
  246. name: '有效接待',
  247. num: '',
  248. setName: 'receptionCount'
  249. },
  250. {
  251. name: '平均执行率',
  252. num: '',
  253. setName: 'fraction'
  254. },
  255. {
  256. name: '平均接待时长',
  257. num: '',
  258. setName: 'sumDuration'
  259. },
  260. ],
  261. lineOptsect: {
  262. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  263. "series": [{
  264. "name": "成交量",
  265. "data": [35, 8, 25, 37, 4, 20]
  266. }]
  267. },
  268. lineOptsect1: {
  269. "categories": [],
  270. "series": []
  271. },
  272. lineOptsect2: {
  273. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  274. "series": [{
  275. "name": "成交量",
  276. "data": [35, 8, 25, 37, 4, 20]
  277. }]
  278. },
  279. newlistoj: [],
  280. newlistoj1: [
  281. {
  282. name: "接待量",
  283. id: 3,
  284. title: '单位(个)',
  285. setName: 'sumCustomer'
  286. },
  287. {
  288. name: "有效接待",
  289. id: 1,
  290. title: '单位(次)',
  291. setName: 'receptionCount'
  292. },
  293. {
  294. name: "平均执行率",
  295. id: 2,
  296. title: '单位(%)',
  297. setName: 'fraction'
  298. },
  299. {
  300. name: "平均接待时长",
  301. id: 5,
  302. title: '单位(min)',
  303. setName: 'sumDuration'
  304. },
  305. ],
  306. bocindex: 0,
  307. newlisttabinfo: [{
  308. name: '接待量',
  309. zxl: '10'
  310. },
  311. {
  312. name: '平均执行率',
  313. zxl: '50'
  314. },
  315. {
  316. name: '接待客户',
  317. zxl: '80'
  318. },
  319. ],
  320. newlisttabinfo1: [],
  321. Theteamcomparedisshow: false,
  322. Groupcontrastisshow: false,
  323. allechar: [],
  324. allList: [],
  325. lineOpts: {
  326. yAxis: {
  327. data: [{
  328. max: 100,
  329. min: 0,
  330. }]
  331. }
  332. },
  333. };
  334. },
  335. onShow() {
  336. // 获取项目id
  337. this.houseId = uni.getStorageSync('buildingID').id;
  338. // 获取数据看板
  339. // 获取员工
  340. this.getStaffList()
  341. // 获取团队
  342. this.getSectionList()
  343. // 获取团队是否显示权限
  344. this.queryHaveDept()
  345. // 获取简报
  346. this.getReport()
  347. // 获取接待趋势
  348. this.getRtrent()
  349. // 获取维度
  350. this.getindexZxl()
  351. },
  352. onPullDownRefresh() {
  353. // 获取员工
  354. this.getStaffList()
  355. // 获取团队
  356. this.getSectionList()
  357. // 获取团队是否显示权限
  358. // 获取简报
  359. this.getReport()
  360. // 获取接待趋势
  361. this.getRtrent()
  362. // 获取维度
  363. this.getindexZxl()
  364. setTimeout(function() {
  365. uni.stopPullDownRefresh();
  366. }, 1000);
  367. },
  368. methods: {
  369. queryHaveDept() {
  370. return new Promise((resolve, reject) => {
  371. this.$u.get("/user/queryHaveDept?houseId=" + this.houseId).then(res => {
  372. this.permissions(res)
  373. })
  374. })
  375. },
  376. permissions(res) {
  377. if (res == 1) {
  378. this.Theteamcomparedisshow = false;
  379. this.Groupcontrastisshow = false;
  380. return
  381. }
  382. let totle = uni.getStorageSync('weapp_session_userInfo_data').total;
  383. if (totle == 1) {
  384. this.Theteamcomparedisshow = true;
  385. this.Groupcontrastisshow = false;
  386. } else {
  387. this.Theteamcomparedisshow = true;
  388. this.Groupcontrastisshow = true;
  389. }
  390. },
  391. // 获取员工列表
  392. getStaffList() {
  393. this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId', {
  394. houseId: this.houseId
  395. })
  396. .then(res => {
  397. // console.log(res,'123')
  398. this.staffList = []
  399. res.map(item => {
  400. let obj = {}
  401. obj.value = item.accountId
  402. obj.label = item.name
  403. this.staffList.push(obj)
  404. })
  405. this.staff = this.staffList[0]
  406. this.getAward()
  407. })
  408. },
  409. // 获取接待趋势
  410. getRtrent() {
  411. this.$u.post('/cusLvStatistics/receptionTrend', {
  412. houseId: this.houseId,
  413. timeType: this.lastEndDate ? null : this.activeTotal,
  414. lastEndDate: this.lastEndDate,
  415. lastStartDate: this.lastStartDate
  416. })
  417. .then(res => {
  418. // console.log(res)
  419. this.allechar = res
  420. this.tapspagek2(this.bocindex)
  421. })
  422. },
  423. // 销奖维度
  424. getindexZxl() {
  425. this.$u.post('/cusLvStatistics/indexZxl', {
  426. houseId: this.houseId,
  427. timeType: this.lastEndDate ? null : this.activeTotal,
  428. lastEndDate: this.lastEndDate,
  429. lastStartDate: this.lastStartDate
  430. })
  431. .then(res => {
  432. // console.log(res)
  433. // 处理销奖维度执行率
  434. // this.newlisttabinfo
  435. let arr = []
  436. this.newlistoj = []
  437. res.list.map((item, index) => {
  438. arr.push({
  439. name: item.name,
  440. zxl: item.zxl
  441. })
  442. this.newlistoj.push({
  443. name: item.name,
  444. id: index
  445. })
  446. })
  447. this.newlisttabinfo = arr
  448. this.allList = res.list
  449. this.tapspagek3(this.bocindex1)
  450. })
  451. },
  452. // 获取简报
  453. getReport() {
  454. this.$u.post('/cusLvStatistics/xiaojiangAnalysis', {
  455. houseId: this.houseId,
  456. timeType: this.lastEndDate ? null : this.activeTotal,
  457. lastEndDate: this.lastEndDate,
  458. lastStartDate: this.lastStartDate
  459. })
  460. .then(res => {
  461. res.sumDuration = Math.floor(res.sumDuration / 60) || 0
  462. res.fraction = (res.fraction || 0) + '%'
  463. this.numlist.map(item => {
  464. item.num = res[item.setName]
  465. })
  466. })
  467. },
  468. // 获取团队列表
  469. getSectionList() {
  470. this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId', {
  471. houseId: this.houseId
  472. })
  473. .then(res => {
  474. this.teamList = []
  475. res.map(item => {
  476. let obj = {}
  477. obj.value = item.deptId
  478. obj.label = item.deptName
  479. this.teamList.push(obj)
  480. })
  481. this.team = this.teamList[0]
  482. this.receptionCountList()
  483. })
  484. },
  485. // 员工销奖趋势
  486. getAward() {
  487. if (this.staffList.length == 0) {
  488. this.staffFlag = false
  489. this.$forceUpdate()
  490. return
  491. }
  492. this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate', {
  493. userA: this.staff.value,
  494. userB: '',
  495. houseId: this.houseId,
  496. timeType: this.lastEndDate ? null : this.activeTotal + '',
  497. lastEndDate: this.lastEndDate,
  498. lastStartDate: this.lastStartDate
  499. })
  500. .then(res => {
  501. this.allnum1 = res.avg[0]
  502. this.allavg1 = res.avg[1]
  503. // console.log(res)
  504. let first = res.first
  505. let second = res.second
  506. this.lineOptsect2.categories = []
  507. this.lineOptsect2.series = [{
  508. name: first[0].accountName,
  509. data: []
  510. }]
  511. first.map(item => {
  512. this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
  513. this.lineOptsect2.series[0].data.push(item.sumFraction)
  514. })
  515. })
  516. },
  517. // 团队接待趋势
  518. receptionCountList() {
  519. if (this.teamList.length == 0) {
  520. this.teamFlag = false
  521. this.$forceUpdate()
  522. return
  523. }
  524. this.$u.post('/cusLvStatistics/teamAnalysisExecutionRate', {
  525. deptIds: this.team.value,
  526. showRank: 1,
  527. houseId: this.houseId,
  528. timeType: this.lastEndDate ? null : this.activeTotal + '',
  529. lastEndDate: this.lastEndDate,
  530. lastStartDate: this.lastStartDate
  531. })
  532. .then(res => {
  533. // console.log(res)
  534. let result = res.result
  535. this.allnum = res.avg[0]
  536. this.allavg = res.avg[1]
  537. // 当选择趋势时
  538. this.lineOptsect1 = {}
  539. let allobj = {
  540. categories: [],
  541. series: []
  542. }
  543. // 先处理时间
  544. // 当选择全部时
  545. // 当选择只有一个时
  546. let obj = {}
  547. obj.data = []
  548. obj.name = result[0][0].deptName
  549. result[0].map(item => {
  550. allobj.categories.push(item.statDate.slice(5, 10))
  551. obj.data.push(item.data)
  552. })
  553. allobj.series.push(obj)
  554. this.lineOptsect1 = allobj
  555. })
  556. },
  557. //时间切换
  558. tabtimetap(index) {
  559. if (index == 3) {
  560. this.totalTimeShow = true;
  561. } else {
  562. this.activeTotal = index;
  563. this.lastEndDate = ''
  564. this.lastStartDate = ''
  565. this.getdata()
  566. }
  567. },
  568. // 获取数据
  569. getdata() {
  570. this.receptionCountList()
  571. this.getReport()
  572. this.getRtrent()
  573. this.getindexZxl()
  574. this.getAward()
  575. },
  576. staffSelectCallback(e, idx) {
  577. if (idx == 0) {
  578. this.staff = e[0]
  579. this.getAward()
  580. } else {
  581. this.team = e[0]
  582. this.receptionCountList()
  583. }
  584. // console.log(e,idx)
  585. },
  586. //自定义时间
  587. totalTimeChange(e) {
  588. console.log(e.startDate, e.endDate)
  589. this.activeTotal = 3;
  590. this.lastEndDate = e.endDate
  591. this.lastStartDate = e.startDate
  592. this.getdata()
  593. },
  594. //指标执行率分析tab
  595. tapspagek2(index) {
  596. console.log(index)
  597. // 对数据进行分析和处理
  598. // 先处理日期
  599. let allobj = {
  600. "categories": [],
  601. "series": [{
  602. name: '接待量',
  603. data: []
  604. }]
  605. }
  606. this.danwei = this.newlistoj1[index].title
  607. allobj.series[0].name = this.newlistoj1[index].name
  608. this.allechar.map(item => {
  609. allobj.categories.push(item.statDate.slice(5, 10))
  610. allobj.series[0].data.push(item[this.newlistoj1[index].setName])
  611. })
  612. this.bocindex = index;
  613. this.lineOptsect = allobj
  614. this.$forceUpdate()
  615. },
  616. tapspagek3(index) {
  617. let arr = []
  618. // return
  619. // console.log(index,this.allList[index])
  620. this.allList[index].children.map(item => {
  621. arr.push({
  622. name: item.name,
  623. zxl: item.zxl
  624. })
  625. })
  626. this.newlisttabinfo1 = arr
  627. this.bocindex1 = index;
  628. },
  629. //集团对比
  630. Groupcontrast() {
  631. uni.navigateTo({
  632. url: '/pages/center/Piabodata/Groupcontrast'
  633. });
  634. },
  635. //团队对比
  636. Theteamcompared() {
  637. if (this.teamList.length == 0) {
  638. uni.showToast({
  639. title: '没有团队呢',
  640. icon: 'none'
  641. })
  642. return
  643. }
  644. uni.navigateTo({
  645. url: '/pages/center/Piabodata/Theteamcompared'
  646. });
  647. },
  648. //用户洞察
  649. toUserinsightinto() {
  650. uni.navigateTo({
  651. url: '/pages/center/Piabodata/Userinsightinto'
  652. });
  653. },
  654. //趋势分析
  655. toTrendAnalysis() {
  656. uni.navigateTo({
  657. url: '/pages/center/Piabodata/TrendAnalysis'
  658. });
  659. },
  660. //员工分析
  661. toStaffAnalysis() {
  662. if (this.staffList.length == 0) {
  663. uni.showToast({
  664. title: '没有团队呢',
  665. icon: 'none'
  666. })
  667. return
  668. }
  669. uni.navigateTo({
  670. url: '/pages/center/Piabodata/StaffAnalysis'
  671. });
  672. }
  673. }
  674. };
  675. </script>
  676. <style lang="scss" scoped>
  677. .box {
  678. width: 100%;
  679. height: 100%;
  680. background: #FAFAFA;
  681. padding-bottom: 60rpx;
  682. }
  683. .Piabodata-box {
  684. width: 100%;
  685. background: #FFFFFF;
  686. display: flex;
  687. flex-wrap: wrap;
  688. padding-bottom: 30rpx;
  689. .Piabodata {
  690. width: 33.3%;
  691. .Piabodata-img {
  692. width: 100%;
  693. text-align: center;
  694. .Piabodata-img1 {
  695. width: 134rpx;
  696. height: 134rpx;
  697. }
  698. }
  699. .Piabodata-text {
  700. width: 100%;
  701. text-align: center;
  702. font-size: 24rpx;
  703. font-weight: 400;
  704. color: #333333;
  705. margin-top: -10rpx;
  706. }
  707. }
  708. }
  709. .grid:nth-child(1) {
  710. border-right: none;
  711. border-bottom: none;
  712. }
  713. .grid:nth-child(2) {
  714. border-bottom: none;
  715. }
  716. .grid:nth-child(3) {
  717. border-right: none;
  718. }
  719. </style>