Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

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