選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 

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