AI营销辅助 普强使用
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.
 
 
 

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