AI销管
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

859 строки
21 KiB

  1. <template>
  2. <view class="box">
  3. <view class="boxtittabs">
  4. <view class="items" @tap="screenShow = true">{{ showTimeText }}
  5. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
  6. </view>
  7. <view class="items" @tap="showTemplate = true">{{ showBeText }}
  8. <u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
  9. </view>
  10. </view>
  11. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  12. <view class="boxzonglan" style="min-height: 400rpx;">
  13. <view class="zonglantit">简报</view>
  14. <view class="zonglanbox">
  15. <view class="grid" v-for="(item,index) in numlist" :key="index">
  16. <view class="audonum">
  17. <view class="circle"></view>
  18. {{item.name}}
  19. </view>
  20. <view class="num u-flex" v-if="item.name==='平均执行率'">
  21. {{item.num}}
  22. <!-- <image style="margin-left: 2rpx;width: 28rpx;height: 14rpx" src="../../../static/images/excute.png" mode="" /> -->
  23. </view>
  24. <view class="num" v-else-if="item.name==='有效接待'">{{item.num||'--'}}</view>
  25. <view class="num" v-else>{{item.num||0}}</view>
  26. </view>
  27. </view>
  28. </view>
  29. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  30. <view class="single">
  31. <view class="title">
  32. <view class="title1">接待趋势</view>
  33. </view>
  34. <view class="swiper-box">
  35. <u-tabs-swiper ref="tabs" font-size="26" :bold="true" swiper-width="600" :current="bocindex"
  36. @change="tapspagek2()" inactive-color="#505050" active-color="#2671E2" :list="newlistoj1"
  37. :is-scroll="true">
  38. </u-tabs-swiper>
  39. </view>
  40. <!-- <view class="hejibox">
  41. <view class="heji">合计:50</view>
  42. <view class="heji">均值:25</view>
  43. </view> -->
  44. <view class="danwei">{{danwei}} </view>
  45. <view class="uchaserbox">
  46. <template v-if="danwei == '单位(%)'">
  47. <qiun-data-charts type="line" :chartData="lineOptsect" :opts="lineOpts" background="none"
  48. :ontouch="true" canvasId="wangxiaohuaerlingilingwuyiba1" :canvas2d="true" />
  49. </template>
  50. <template v-else>
  51. <qiun-data-charts type="line" :opts="lineOpts1" :chartData="lineOptsect" background="none"
  52. :ontouch="true" canvasId="wangxiaohuaerlingilingwuyiba1" :canvas2d="true" />
  53. </template>
  54. </view>
  55. </view>
  56. <view v-if="teamFlag">
  57. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  58. <view class="single">
  59. <view class="title" @click="staffShow1=true">
  60. <view class="title1">团队接待趋势</view>
  61. <view class="title2">
  62. {{team.label}}
  63. <image class="righttochoose" src="../../../static/images/down.png" mode=""></image>
  64. </view>
  65. </view>
  66. <view class="danwei">单位(%)</view>
  67. <view class="uchaserbox">
  68. <qiun-data-charts :opts="lineOpts" type="line" :chartData="lineOptsect1" background="none"
  69. :ontouch="true" canvasId="wangxiaohuaerlineryiliwuyibao" :canvas2d="true" />
  70. </view>
  71. </view>
  72. </view>
  73. <view v-if="staffFlag">
  74. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  75. <view class="single">
  76. <view class="title">
  77. <view class="title1">员工接待趋势</view>
  78. <view class="title2" @click="staffShow=true">
  79. {{staff.label}}
  80. <image class="righttochoose" src="../../../static/images/down.png" mode=""></image>
  81. </view>
  82. </view>
  83. <!-- <view class="hejibox">
  84. <view class="heji">合计:{{allnum1||0}}</view>
  85. <view class="heji">均值:{{allavg1||0}}</view>
  86. </view> -->
  87. <view class="danwei">单位(%)</view>
  88. <view style="width: 100%;height: 300rpx;text-align: center;line-height: 300rpx;"
  89. v-if="lineOptsect2.series.length===0">暂无数据</view>
  90. <view class="uchaserbox">
  91. <qiun-data-charts :opts="lineOpts" type="line" :chartData="lineOptsect2" background="none"
  92. :ontouch="true" canvasId="wangxiaohuaerlingeryilingwuyibao" :canvas2d="true" />
  93. </view>
  94. </view>
  95. </view>
  96. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  97. <view class="single">
  98. <view class="title">
  99. <view class="title1">场景触达分析</view>
  100. <!-- <view class="title3">
  101. <view class="title3-box">
  102. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>
  103. </view>
  104. <view class="title3-box">
  105. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>
  106. </view>
  107. </view> -->
  108. </view>
  109. <!-- <view class="hejibox">
  110. <view class="heji">合计:50</view>
  111. <view class="heji">均值:25</view>
  112. </view> -->
  113. <view style="width: 100%;text-align: center;line-height: 300rpx;" v-if="newlisttabinfo.length==0">暂无数据
  114. </view>
  115. <view v-else class="jindu" style="margin-top: 20rpx;">
  116. <scroll-view scroll-y="true">
  117. <view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
  118. <view class="jindu-boxche">
  119. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  120. <view class="progress-cus">
  121. <view class="color" :style="'width:'+ getPercent(item.zxl) + '%'"></view>
  122. </view>
  123. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  124. </view>
  125. </view>
  126. </scroll-view>
  127. </view>
  128. </view>
  129. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  130. <view class="single">
  131. <view class="title">
  132. <view class="title1">销讲指标执行率</view>
  133. </view>
  134. <view class="swiper-box">
  135. <u-tabs-swiper ref="tabs" font-size="26" :bold="true" swiper-width="600" :current="bocindex1"
  136. @change="tapspagek3" inactive-color="#505050" active-color="#2671E2" :list="newlistoj"
  137. :is-scroll="true">
  138. </u-tabs-swiper>
  139. </view>
  140. <view style="width: 100%;height: 300rpx;text-align: center;line-height: 300rpx;"
  141. v-if="newlisttabinfo1.length==0">暂无数据</view>
  142. <view class="jindu" v-else>
  143. <scroll-view scroll-y="true">
  144. <view class="jindu-box" v-for="(item,index) in newlisttabinfo1" :key="index">
  145. <view class="jindu-boxche">
  146. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  147. <view class="progress-cus">
  148. <view class="color" :style="'width:'+ getPercent(item.zxl) + '%'"></view>
  149. </view>
  150. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  151. </view>
  152. </view>
  153. </scroll-view>
  154. </view>
  155. </view>
  156. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  157. <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback($event,0)"
  158. :default-value='selindex'></u-select>
  159. <u-select v-model="staffShow1" :list="teamList" @confirm="staffSelectCallback($event,1)"
  160. :default-value='selindex'></u-select>
  161. <!-- 加载组件 -->
  162. <u-loadings v-model="LOADING"></u-loadings>
  163. <!-- 更多筛选 -->
  164. <u-popup v-model="screenShow" mode="bottom" height="400">
  165. <view class="screen">
  166. <view class="boxtittab">
  167. <view class="tabbox">
  168. <view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4, '近七天')">近七天</view>
  169. </view>
  170. <view class="tabbox">
  171. <view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5, '近15天')">近15天</view>
  172. </view>
  173. <view class="tabbox">
  174. <view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6, '近30天')">近30天</view>
  175. </view>
  176. <view class="tabbox">
  177. <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3, '自定义')">自定义</view>
  178. </view>
  179. </view>
  180. </view>
  181. </u-popup>
  182. <!-- 销讲业务 -->
  183. <u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplate"
  184. mode="single-column" :list="templateList" @cancel="templateCancel" @confirm="templateConfirm"></u-select>
  185. </view>
  186. </template>
  187. <script>
  188. var app = getApp();
  189. var config = require("../../../config");
  190. export default {
  191. data() {
  192. return {
  193. activeTotal: 4,
  194. activeTotal2: 0,
  195. houseId: '',
  196. timeobj: {
  197. statDateStart: '',
  198. statDateEnd: ''
  199. },
  200. // 员工列表
  201. staffList: [],
  202. // 团队列表
  203. teamList: [],
  204. staffShow: false,
  205. staff: {
  206. value: '',
  207. label: ''
  208. },
  209. team: {
  210. value: '',
  211. label: ''
  212. },
  213. teamFlag: true,
  214. bocindex1: 0,
  215. staffFlag: true,
  216. staffShow1: false,
  217. lastStartDate: '',
  218. lastEndDate: '',
  219. allnum: '',
  220. allavg: '',
  221. allnum1: '',
  222. allavg1: '',
  223. danwei: '单位(次)',
  224. totalTimeShow: false,
  225. activeTab: 0,
  226. numlist: [{
  227. name: '平均执行率',
  228. num: '',
  229. setName: 'fraction',
  230. },
  231. {
  232. name: '平均接待时长',
  233. num: '',
  234. setName: 'avgDuration',
  235. },
  236. {
  237. name: '接待量',
  238. num: '',
  239. setName: 'receptionCount',
  240. },
  241. {
  242. name: '有效接待',
  243. num: '',
  244. setName: 'activeCustomer',
  245. },
  246. ],
  247. lineOptsect: {
  248. "categories": [],
  249. "series": []
  250. },
  251. lineOptsect1: {
  252. "categories": [],
  253. "series": []
  254. },
  255. lineOptsect2: {
  256. "categories": [],
  257. "series": []
  258. },
  259. newlistoj: [],
  260. newlistoj1: [{
  261. name: "平均执行率",
  262. id: 2,
  263. title: '单位(%)',
  264. setName: 'fraction'
  265. },
  266. {
  267. name: "平均接待时长",
  268. id: 5,
  269. title: '单位(min)',
  270. setName: 'sumDuration'
  271. },
  272. {
  273. name: "接待量",
  274. id: 3,
  275. title: '单位(个)',
  276. setName: 'sumCustomer'
  277. },
  278. {
  279. name: "有效接待",
  280. id: 1,
  281. title: '单位(次)',
  282. setName: 'receptionCount'
  283. },
  284. ],
  285. bocindex: 0,
  286. newlisttabinfo: [{
  287. name: '接待量',
  288. zxl: '10'
  289. },
  290. {
  291. name: '平均执行率',
  292. zxl: '50'
  293. },
  294. {
  295. name: '接待客户',
  296. zxl: '80'
  297. },
  298. ],
  299. newlisttabinfo1: [],
  300. Theteamcomparedisshow: false,
  301. Groupcontrastisshow: false,
  302. allechar: [],
  303. allList: [],
  304. optionsobj: {},
  305. permissions: {
  306. commonly2: false,
  307. commonly3: false,
  308. commonly4: false,
  309. commonly5: false,
  310. commonly6: false,
  311. },
  312. lineOpts: {
  313. xAxis: {
  314. disableGrid: true,
  315. scrollShow: true,
  316. itemCount: 8
  317. },
  318. yAxis: {
  319. data: [{
  320. max: 100,
  321. min: 0,
  322. }]
  323. }
  324. },
  325. lineOpts1: {
  326. xAxis: {
  327. disableGrid: true,
  328. scrollShow: true,
  329. itemCount: 8
  330. }
  331. },
  332. screenShow: false, // 时间筛选弹窗
  333. showTimeText: '近七天', // 展示文字
  334. showBeText: '全部业务', //
  335. templateList: [], // 销讲业务
  336. showTemplate: false, // 展示选择销讲业务弹窗
  337. marketingBusiness: '', // 选择的业务id
  338. showTemplates: false, // 展示选择销讲业务弹窗
  339. };
  340. },
  341. onShow() {
  342. this.LOADING = true
  343. let newmenulist = uni.getStorageSync('weapp_session_Menu_data');
  344. this.permissions.commonly2 = newmenulist.lpdb;
  345. this.permissions.commonly3 = newmenulist.xjqs;
  346. this.permissions.commonly4 = newmenulist.tddb;
  347. this.permissions.commonly5 = newmenulist.gwnl;
  348. this.permissions.commonly6 = newmenulist.yhhx;
  349. // 获取项目id
  350. this.houseId = uni.getStorageSync('buildingID').id;
  351. // 获取数据看板
  352. this.getMarketingBusiness()
  353. // 获取员工
  354. this.getStaffList()
  355. // 获取团队
  356. this.getSectionList()
  357. // 获取团队是否显示权限
  358. // 获取简报
  359. this.getReport()
  360. // 获取接待趋势
  361. this.getRtrent()
  362. // 获取维度
  363. this.getindexZxl()
  364. },
  365. onPullDownRefresh() {
  366. this.getMarketingBusiness()
  367. // 获取员工
  368. this.getStaffList()
  369. // 获取团队
  370. this.getSectionList()
  371. // 获取团队是否显示权限
  372. // 获取简报
  373. this.getReport()
  374. // 获取接待趋势
  375. this.getRtrent()
  376. // 获取维度
  377. this.getindexZxl()
  378. setTimeout(function() {
  379. uni.stopPullDownRefresh();
  380. }, 1000);
  381. },
  382. methods: {
  383. // 销讲业务方法
  384. templateCancel() {
  385. this.showTemplate = false;
  386. },
  387. // 确认选择销讲业务
  388. templateConfirm(e) {
  389. this.showTemplate = false;
  390. this.marketingBusiness = e[0].value
  391. this.showBeText = e[0].label
  392. this.getdata()
  393. },
  394. // 获取销讲业务
  395. getMarketingBusiness() {
  396. this.$u.get('/customer/marketingBusiness', {
  397. houseId: this.houseId,
  398. }).then(res => {
  399. this.templateList = res
  400. this.templateList.unshift({
  401. templateName: '全部业务',
  402. id: ''
  403. })
  404. })
  405. },
  406. getPercent(num) {
  407. return num || 0
  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. marketingBusiness: this.marketingBusiness,
  435. })
  436. .then(res => {
  437. // console.log(res)
  438. this.allechar = res
  439. this.tapspagek2(this.bocindex)
  440. })
  441. },
  442. // 销奖维度
  443. getindexZxl() {
  444. this.$u.post('/cusLvStatistics/indexZxl', {
  445. houseId: this.houseId,
  446. timeType: this.lastEndDate ? null : this.activeTotal,
  447. lastEndDate: this.lastEndDate,
  448. lastStartDate: this.lastStartDate,
  449. marketingBusiness: this.marketingBusiness,
  450. })
  451. .then(res => {
  452. this.LOADING = false
  453. // console.log(res)
  454. // 处理销奖维度执行率
  455. // this.newlisttabinfo
  456. let arr = []
  457. this.newlistoj = []
  458. res.list.map((item, index) => {
  459. arr.push({
  460. name: item.name,
  461. zxl: item.zxl
  462. })
  463. this.newlistoj.push({
  464. name: item.name,
  465. id: index
  466. })
  467. })
  468. this.newlisttabinfo = arr
  469. this.allList = res.list
  470. this.tapspagek3(this.bocindex1)
  471. }).catch(e => {
  472. this.LOADING = false
  473. })
  474. },
  475. // 获取简报
  476. getReport() {
  477. this.$u.post('/cusLvStatistics/xiaojiangAnalysis', {
  478. houseId: this.houseId,
  479. timeType: this.lastEndDate ? null : this.activeTotal,
  480. lastEndDate: this.lastEndDate,
  481. lastStartDate: this.lastStartDate,
  482. marketingBusiness: this.marketingBusiness,
  483. })
  484. .then(res => {
  485. res.fraction = (res.fraction || 0) + '%'
  486. this.numlist.map(item => {
  487. item.num = res[item.setName] || 0
  488. })
  489. })
  490. },
  491. // 获取团队列表
  492. getSectionList() {
  493. this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId', {
  494. houseId: this.houseId
  495. })
  496. .then(res => {
  497. this.teamList = []
  498. res.map(item => {
  499. let obj = {}
  500. obj.value = item.deptId
  501. obj.label = item.deptName
  502. this.teamList.push(obj)
  503. })
  504. this.team = this.teamList[0]
  505. this.receptionCountList()
  506. })
  507. },
  508. // 员工销奖趋势
  509. getAward() {
  510. if (this.staffList.length == 0) {
  511. this.staffFlag = false
  512. this.$forceUpdate()
  513. return
  514. }
  515. this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate', {
  516. userA: this.staff.value,
  517. userB: '',
  518. houseId: this.houseId,
  519. timeType: this.lastEndDate ? null : this.activeTotal + '',
  520. lastEndDate: this.lastEndDate,
  521. lastStartDate: this.lastStartDate,
  522. marketingBusiness: this.marketingBusiness,
  523. })
  524. .then(res => {
  525. this.allnum1 = res.avg[0]
  526. this.allavg1 = res.avg[1]
  527. // console.log(res)
  528. let first = res.first
  529. let second = res.second
  530. this.lineOptsect2.categories = []
  531. this.lineOptsect2.series = [{
  532. name: first[0].accountName,
  533. data: [],
  534. max: 100,
  535. }]
  536. first.map(item => {
  537. this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
  538. this.lineOptsect2.series[0].data.push(item.sumFraction)
  539. })
  540. })
  541. },
  542. // 团队接待趋势
  543. receptionCountList() {
  544. if (this.teamList.length == 0) {
  545. this.teamFlag = false
  546. this.$forceUpdate()
  547. return
  548. }
  549. this.$u.post('/cusLvStatistics/teamAnalysisExecutionRate', {
  550. deptIds: this.team.value,
  551. showRank: 1,
  552. houseId: this.houseId,
  553. timeType: this.lastEndDate ? null : this.activeTotal + '',
  554. lastEndDate: this.lastEndDate,
  555. lastStartDate: this.lastStartDate,
  556. marketingBusiness: this.marketingBusiness,
  557. })
  558. .then(res => {
  559. // console.log(res)
  560. let result = res.result
  561. this.allnum = res.avg[0]
  562. this.allavg = res.avg[1]
  563. // 当选择趋势时
  564. this.lineOptsect1 = {}
  565. let allobj = {
  566. categories: [],
  567. series: []
  568. }
  569. // 先处理时间
  570. // 当选择全部时
  571. // 当选择只有一个时
  572. let obj = {}
  573. obj.data = []
  574. obj.name = result[0][0].deptName
  575. result[0].map(item => {
  576. allobj.categories.push(item.statDate.slice(5, 10))
  577. obj.data.push(item.data)
  578. })
  579. allobj.series.push(obj)
  580. this.lineOptsect1 = allobj
  581. })
  582. },
  583. //时间切换
  584. tabtimetap(index, text) {
  585. this.activeTotal = index;
  586. if (index == 3) {
  587. this.totalTimeShow = true;
  588. this.screenShow = false
  589. } else {
  590. this.screenShow = false
  591. this.showTimeText = text
  592. this.activeTotal = index;
  593. this.lastEndDate = ''
  594. this.lastStartDate = ''
  595. this.getdata()
  596. }
  597. },
  598. // 获取数据
  599. getdata() {
  600. this.receptionCountList()
  601. this.getReport()
  602. this.getRtrent()
  603. this.getindexZxl()
  604. this.getAward()
  605. },
  606. staffSelectCallback(e, idx) {
  607. if (idx == 0) {
  608. this.staff = e[0]
  609. this.getAward()
  610. } else {
  611. this.team = e[0]
  612. this.receptionCountList()
  613. }
  614. // console.log(e,idx)
  615. },
  616. //自定义时间
  617. totalTimeChange(e) {
  618. console.log(e.startDate, e.endDate)
  619. this.screenShow = false
  620. this.showTimeText = `${e.startDate}-${e.endDate}`
  621. this.activeTotal = 3;
  622. this.lastEndDate = e.endDate
  623. this.lastStartDate = e.startDate
  624. this.getdata()
  625. },
  626. //指标执行率分析tab
  627. tapspagek2(index) {
  628. let allobj = {
  629. "categories": [],
  630. "series": [{
  631. name: '接待量',
  632. data: []
  633. }]
  634. }
  635. // 平均执行率
  636. this.danwei = this.newlistoj1[index].title
  637. allobj.series[0].name = this.newlistoj1[index].name
  638. this.allechar.map(item => {
  639. allobj.categories.push(item.statDate.slice(5, 10))
  640. allobj.series[0].data.push(item[this.newlistoj1[index].setName])
  641. console.log(this.newlistoj1[index], 'zheli ')
  642. })
  643. this.bocindex = index;
  644. this.$nextTick(() => {
  645. this.lineOptsect = allobj
  646. })
  647. console.log(this.lineOptsect, 'echarts数据')
  648. },
  649. tapspagek3(index) {
  650. this.newlisttabinfo1 = [];
  651. let arr = []
  652. this.allList[index].children.map(item => {
  653. arr.push({
  654. name: item.name,
  655. zxl: item.zxl
  656. })
  657. })
  658. this.newlisttabinfo1 = arr
  659. this.bocindex1 = index;
  660. },
  661. //集团对比
  662. Groupcontrast() {
  663. uni.navigateTo({
  664. url: '/pages/center/Piabodata/Groupcontrast'
  665. });
  666. },
  667. //团队对比
  668. Theteamcompared() {
  669. if (this.teamList.length == 0) {
  670. uni.showToast({
  671. title: '没有团队呢',
  672. icon: 'none'
  673. })
  674. return
  675. }
  676. uni.navigateTo({
  677. url: '/pages/center/Piabodata/Theteamcompared'
  678. });
  679. },
  680. //用户洞察
  681. toUserinsightinto() {
  682. uni.navigateTo({
  683. url: '/pages/center/Piabodata/Userinsightinto'
  684. });
  685. },
  686. //趋势分析
  687. toTrendAnalysis() {
  688. uni.navigateTo({
  689. url: '/pages/center/Piabodata/TrendAnalysis'
  690. });
  691. },
  692. //员工分析
  693. toStaffAnalysis() {
  694. if (this.staffList.length == 0) {
  695. uni.showToast({
  696. title: '没有团队呢',
  697. icon: 'none'
  698. })
  699. return
  700. }
  701. uni.navigateTo({
  702. url: '/pages/center/Piabodata/StaffAnalysis'
  703. });
  704. }
  705. }
  706. };
  707. </script>
  708. <style lang="scss" scoped>
  709. .boxtittabs {
  710. width: 100%;
  711. height: 92rpx;
  712. background: #FFFFFF;
  713. display: flex;
  714. align-items: center;
  715. position: sticky;
  716. top: var(--window-top);
  717. .items {
  718. padding: 0 24rpx;
  719. width: 50%;
  720. height: 100%;
  721. display: flex;
  722. align-items: center;
  723. justify-content: center;
  724. overflow: hidden;
  725. white-space: nowrap;
  726. text-overflow: ellipsis;
  727. }
  728. }
  729. .screen {
  730. width: 100%;
  731. height: 100%;
  732. display: flex;
  733. //时间切换的样式
  734. .boxtittab {
  735. width: 100%;
  736. height: 100%;
  737. background: #FFFFFF;
  738. display: flex;
  739. flex-direction: column;
  740. border: none;
  741. .tabbox {
  742. flex: 1;
  743. height: 100%;
  744. text-align: center;
  745. line-height: 92rpx;
  746. color: #666666;
  747. font-size: 28rpx;
  748. font-weight: 400;
  749. display: flex;
  750. justify-content: center;
  751. .activecllasscet {
  752. width: 96rpx;
  753. color: #2671E2;
  754. font-weight: 600;
  755. border-bottom: 4rpx solid #2671E2;
  756. }
  757. }
  758. }
  759. }
  760. .box {
  761. width: 100%;
  762. height: 100%;
  763. background: #FAFAFA;
  764. }
  765. .Piabodata-box {
  766. width: 100%;
  767. background: #FFFFFF;
  768. display: flex;
  769. flex-wrap: wrap;
  770. padding-bottom: 30rpx;
  771. .Piabodata {
  772. width: 33.3%;
  773. .Piabodata-img {
  774. width: 100%;
  775. text-align: center;
  776. .Piabodata-img1 {
  777. width: 134rpx;
  778. height: 134rpx;
  779. }
  780. }
  781. .Piabodata-text {
  782. width: 100%;
  783. text-align: center;
  784. font-size: 24rpx;
  785. font-weight: 400;
  786. color: #333333;
  787. margin-top: -10rpx;
  788. }
  789. }
  790. }
  791. .grid:nth-child(1) {
  792. border-right: 1rpx solid #E0E0E0;
  793. border-bottom: 1rpx solid #E0E0E0;
  794. }
  795. .grid:nth-child(2) {
  796. border-bottom: 1rpx solid #E0E0E0;
  797. }
  798. .grid:nth-child(3) {
  799. border-right: 1rpx solid #E0E0E0;
  800. }
  801. .tabbox {
  802. overflow: hidden;
  803. .activecllasscet {
  804. width: 100%;
  805. }
  806. }
  807. </style>