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.
 
 
 

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