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.
 
 
 

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