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