AI销管
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

777 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()" v-if="permissions.commonly3">
  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()" v-if="permissions.commonly5">
  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()" v-if="permissions.commonly6">
  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="permissions.commonly4">
  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="permissions.commonly2">
  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 :opts="lineOpts" type="line" :chartData="lineOptsect1" background="none"
  101. :ontouch="true" canvasId="wangxiaohuaerlineryiliwuyibao" :canvas2d="true" />
  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 :opts="lineOpts" type="line" :chartData="lineOptsect2" background="none"
  126. :ontouch="true" canvasId="wangxiaohuaerlingeryilingwuyibao" :canvas2d="true" />
  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. name: '平均执行率',
  241. num: ''
  242. },
  243. {
  244. name: '平均接待时长',
  245. num: ''
  246. },
  247. {
  248. name: '接待量',
  249. num: ''
  250. },
  251. {
  252. name: '有效接待',
  253. num: ''
  254. },
  255. ],
  256. lineOptsect: {
  257. "categories": [],
  258. "series": []
  259. },
  260. lineOptsect1: {
  261. "categories": [],
  262. "series": []
  263. },
  264. lineOptsect2: {
  265. "categories": [],
  266. "series": []
  267. },
  268. newlistoj: [],
  269. newlistoj1: [{
  270. name: "平均执行率",
  271. id: 2
  272. },
  273. {
  274. name: "平均接待时长",
  275. id: 5
  276. },
  277. {
  278. name: "接待量",
  279. id: 3
  280. },
  281. {
  282. name: "有效接待",
  283. id: 1
  284. },
  285. ],
  286. bocindex: 0,
  287. newlisttabinfo: [{
  288. name: '接待量',
  289. zxl: '10'
  290. },
  291. {
  292. name: '平均执行率',
  293. zxl: '50'
  294. },
  295. {
  296. name: '接待客户',
  297. zxl: '80'
  298. },
  299. ],
  300. newlisttabinfo1: [],
  301. Theteamcomparedisshow: false,
  302. Groupcontrastisshow: false,
  303. allechar: [],
  304. allList: [],
  305. optionsobj: {},
  306. permissions: {
  307. commonly2: false,
  308. commonly3: false,
  309. commonly4: false,
  310. commonly5: false,
  311. commonly6: false,
  312. },
  313. lineOpts: {
  314. yAxis: {
  315. data: [{
  316. max: 100,
  317. min: 0,
  318. }]
  319. }
  320. },
  321. opts: {
  322. yAxis: {
  323. data: [{
  324. max: 100
  325. }]
  326. }
  327. }
  328. };
  329. },
  330. onShow() {
  331. let newmenulist = uni.getStorageSync('weapp_session_Menu_data');
  332. this.permissions.commonly2 = newmenulist.lpdb;
  333. this.permissions.commonly3 = newmenulist.xjqs;
  334. this.permissions.commonly4 = newmenulist.tddb;
  335. this.permissions.commonly5 = newmenulist.gwnl;
  336. this.permissions.commonly6 = newmenulist.yhhx;
  337. // 获取项目id
  338. this.houseId = uni.getStorageSync('buildingID').id;
  339. // 获取数据看板
  340. // 获取员工
  341. this.getStaffList()
  342. // 获取团队
  343. this.getSectionList()
  344. // 获取团队是否显示权限
  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. // 获取员工列表
  370. getStaffList() {
  371. this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId', {
  372. houseId: this.houseId
  373. })
  374. .then(res => {
  375. // console.log(res,'123')
  376. this.staffList = []
  377. res.map(item => {
  378. let obj = {}
  379. obj.value = item.accountId
  380. obj.label = item.name
  381. this.staffList.push(obj)
  382. })
  383. this.staff = this.staffList[0]
  384. this.getAward()
  385. })
  386. },
  387. // 获取接待趋势
  388. getRtrent() {
  389. this.$u.post('/cusLvStatistics/receptionTrend', {
  390. houseId: this.houseId,
  391. timeType: this.lastEndDate ? null : this.activeTotal,
  392. lastEndDate: this.lastEndDate,
  393. lastStartDate: this.lastStartDate
  394. })
  395. .then(res => {
  396. // console.log(res)
  397. this.allechar = res
  398. this.tapspagek2(this.bocindex)
  399. })
  400. },
  401. // 销奖维度
  402. getindexZxl() {
  403. this.$u.post('/cusLvStatistics/indexZxl', {
  404. houseId: this.houseId,
  405. timeType: this.lastEndDate ? null : this.activeTotal,
  406. lastEndDate: this.lastEndDate,
  407. lastStartDate: this.lastStartDate
  408. })
  409. .then(res => {
  410. // console.log(res)
  411. // 处理销奖维度执行率
  412. // this.newlisttabinfo
  413. let arr = []
  414. this.newlistoj = []
  415. res.list.map((item, index) => {
  416. arr.push({
  417. name: item.name,
  418. zxl: item.zxl
  419. })
  420. this.newlistoj.push({
  421. name: item.name,
  422. id: index
  423. })
  424. })
  425. this.newlisttabinfo = arr
  426. this.allList = res.list
  427. this.tapspagek3(this.bocindex1)
  428. })
  429. },
  430. // 获取简报
  431. getReport() {
  432. this.$u.post('/cusLvStatistics/xiaojiangAnalysis', {
  433. houseId: this.houseId,
  434. timeType: this.lastEndDate ? null : this.activeTotal,
  435. lastEndDate: this.lastEndDate,
  436. lastStartDate: this.lastStartDate
  437. })
  438. .then(res => {
  439. // 执行率
  440. this.numlist[0].num = (res.fraction || 0) + '%'
  441. // 平均接待时长
  442. this.numlist[1].num = res.avgDuration || 0
  443. // 接待量
  444. this.numlist[2].num = res.receptionCount || 0
  445. // 有效接待
  446. this.numlist[3].num = res.activeCustomer || 0
  447. })
  448. },
  449. // 获取团队列表
  450. getSectionList() {
  451. this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId', {
  452. houseId: this.houseId
  453. })
  454. .then(res => {
  455. this.teamList = []
  456. res.map(item => {
  457. let obj = {}
  458. obj.value = item.deptId
  459. obj.label = item.deptName
  460. this.teamList.push(obj)
  461. })
  462. this.team = this.teamList[0]
  463. this.receptionCountList()
  464. })
  465. },
  466. // 员工销奖趋势
  467. getAward() {
  468. if (this.staffList.length == 0) {
  469. this.staffFlag = false
  470. this.$forceUpdate()
  471. return
  472. }
  473. this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate', {
  474. userA: this.staff.value,
  475. userB: '',
  476. houseId: this.houseId,
  477. timeType: this.lastEndDate ? null : this.activeTotal + '',
  478. lastEndDate: this.lastEndDate,
  479. lastStartDate: this.lastStartDate
  480. })
  481. .then(res => {
  482. this.allnum1 = res.avg[0]
  483. this.allavg1 = res.avg[1]
  484. // console.log(res)
  485. let first = res.first
  486. let second = res.second
  487. this.lineOptsect2.categories = []
  488. this.lineOptsect2.series = [{
  489. name: first[0].accountName,
  490. data: [],
  491. max: 100,
  492. }]
  493. first.map(item => {
  494. this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
  495. this.lineOptsect2.series[0].data.push(item.sumFraction)
  496. })
  497. })
  498. },
  499. // 团队接待趋势
  500. receptionCountList() {
  501. if (this.teamList.length == 0) {
  502. this.teamFlag = false
  503. this.$forceUpdate()
  504. return
  505. }
  506. this.$u.post('/cusLvStatistics/teamAnalysisExecutionRate', {
  507. deptIds: this.team.value,
  508. showRank: 1,
  509. houseId: this.houseId,
  510. timeType: this.lastEndDate ? null : this.activeTotal + '',
  511. lastEndDate: this.lastEndDate,
  512. lastStartDate: this.lastStartDate
  513. })
  514. .then(res => {
  515. // console.log(res)
  516. let result = res.result
  517. this.allnum = res.avg[0]
  518. this.allavg = res.avg[1]
  519. // 当选择趋势时
  520. this.lineOptsect1 = {}
  521. let allobj = {
  522. categories: [],
  523. series: []
  524. }
  525. // 先处理时间
  526. // 当选择全部时
  527. // 当选择只有一个时
  528. let obj = {}
  529. obj.data = []
  530. obj.name = result[0][0].deptName
  531. result[0].map(item => {
  532. allobj.categories.push(item.statDate.slice(5, 10))
  533. obj.data.push(item.data)
  534. })
  535. allobj.series.push(obj)
  536. this.lineOptsect1 = allobj
  537. })
  538. },
  539. //时间切换
  540. tabtimetap(index) {
  541. if (index == 3) {
  542. this.totalTimeShow = true;
  543. } else {
  544. this.activeTotal = index;
  545. this.lastEndDate = ''
  546. this.lastStartDate = ''
  547. this.getdata()
  548. }
  549. },
  550. // 获取数据
  551. getdata() {
  552. this.receptionCountList()
  553. this.getReport()
  554. this.getRtrent()
  555. this.getindexZxl()
  556. this.getAward()
  557. },
  558. staffSelectCallback(e, idx) {
  559. if (idx == 0) {
  560. this.staff = e[0]
  561. this.getAward()
  562. } else {
  563. this.team = e[0]
  564. this.receptionCountList()
  565. }
  566. // console.log(e,idx)
  567. },
  568. //自定义时间
  569. totalTimeChange(e) {
  570. console.log(e.startDate, e.endDate)
  571. this.activeTotal = 3;
  572. this.lastEndDate = e.endDate
  573. this.lastStartDate = e.startDate
  574. this.getdata()
  575. },
  576. //指标执行率分析tab
  577. tapspagek2(index) {
  578. // console.log(index)
  579. // 对数据进行分析和处理
  580. // 先处理日期
  581. let allobj = {
  582. "categories": [],
  583. "series": [{
  584. name: '接待量',
  585. data: []
  586. }]
  587. }
  588. if (index == 0) {
  589. // 平均执行率
  590. this.danwei = '单位(%)'
  591. allobj.series[0].name = '平均执行率'
  592. this.allechar.map(item => {
  593. allobj.categories.push(item.statDate.slice(5, 10))
  594. allobj.series[0].data.push(item.fraction)
  595. })
  596. } else if (index == 1) {
  597. // 平均接待时长
  598. this.danwei = '单位(min)'
  599. allobj.series[0].name = '录音时长'
  600. this.allechar.map(item => {
  601. allobj.categories.push(item.statDate.slice(5, 10))
  602. allobj.series[0].data.push(item.sumDuration)
  603. })
  604. } else if (index == 2) {
  605. // 接待客户
  606. this.danwei = '单位(个)'
  607. allobj.series[0].name = '接待量'
  608. this.allechar.map(item => {
  609. allobj.categories.push(item.statDate.slice(5, 10))
  610. allobj.series[0].data.push(item.sumCustomer)
  611. })
  612. } else {
  613. // 接待量
  614. this.danwei = '单位(次)'
  615. allobj.series[0].name = '有效接待'
  616. this.allechar.map(item => {
  617. allobj.categories.push(item.statDate.slice(5, 10))
  618. allobj.series[0].data.push(item.receptionCount)
  619. })
  620. }
  621. this.bocindex = index;
  622. this.lineOptsect = allobj
  623. },
  624. tapspagek3(index) {
  625. this.newlisttabinfo1 = [];
  626. let arr = []
  627. this.allList[index].children.map(item => {
  628. arr.push({
  629. name: item.name,
  630. zxl: item.zxl
  631. })
  632. })
  633. this.newlisttabinfo1 = arr
  634. this.bocindex1 = index;
  635. },
  636. //集团对比
  637. Groupcontrast() {
  638. uni.navigateTo({
  639. url: '/pages/center/Piabodata/Groupcontrast'
  640. });
  641. },
  642. //团队对比
  643. Theteamcompared() {
  644. if (this.teamList.length == 0) {
  645. uni.showToast({
  646. title: '没有团队呢',
  647. icon: 'none'
  648. })
  649. return
  650. }
  651. uni.navigateTo({
  652. url: '/pages/center/Piabodata/Theteamcompared'
  653. });
  654. },
  655. //用户洞察
  656. toUserinsightinto() {
  657. uni.navigateTo({
  658. url: '/pages/center/Piabodata/Userinsightinto'
  659. });
  660. },
  661. //趋势分析
  662. toTrendAnalysis() {
  663. uni.navigateTo({
  664. url: '/pages/center/Piabodata/TrendAnalysis'
  665. });
  666. },
  667. //员工分析
  668. toStaffAnalysis() {
  669. if (this.staffList.length == 0) {
  670. uni.showToast({
  671. title: '没有团队呢',
  672. icon: 'none'
  673. })
  674. return
  675. }
  676. uni.navigateTo({
  677. url: '/pages/center/Piabodata/StaffAnalysis'
  678. });
  679. }
  680. }
  681. };
  682. </script>
  683. <style lang="scss" scoped>
  684. .box {
  685. width: 100%;
  686. height: 100%;
  687. background: #FAFAFA;
  688. padding-bottom: 60rpx;
  689. }
  690. .boxtittab {
  691. position: sticky;
  692. top: var(--window-top);
  693. z-index: 999;
  694. }
  695. .Piabodata-box {
  696. width: 100%;
  697. background: #FFFFFF;
  698. display: flex;
  699. flex-wrap: wrap;
  700. padding-bottom: 30rpx;
  701. .Piabodata {
  702. width: 33.3%;
  703. .Piabodata-img {
  704. width: 100%;
  705. text-align: center;
  706. .Piabodata-img1 {
  707. width: 134rpx;
  708. height: 134rpx;
  709. }
  710. }
  711. .Piabodata-text {
  712. width: 100%;
  713. text-align: center;
  714. font-size: 24rpx;
  715. font-weight: 400;
  716. color: #333333;
  717. margin-top: -10rpx;
  718. }
  719. }
  720. }
  721. .grid:nth-child(1) {
  722. border-right: none;
  723. border-bottom: none;
  724. }
  725. .grid:nth-child(2) {
  726. border-bottom: none;
  727. }
  728. .grid:nth-child(3) {
  729. border-right: none;
  730. }
  731. </style>