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.
 
 
 

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