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.
 
 
 

849 lines
23 KiB

  1. <template>
  2. <view class="cented-box">
  3. 111
  4. <view class="Switchingbox">
  5. <view class="Switching1">
  6. <image class="Switching1-img" src="../../static/images/building.png" mode=""></image>
  7. </view>
  8. <view class="Switching2">楼盘:</view>
  9. <view class="Switching3">{{buildingname}}</view>
  10. <view class="Switching4" v-if="buildingishow" @click="piskbuilding()">切换楼盘</view>
  11. </view>
  12. <view class="title" style="margin-top: 30rpx;" v-if="Myworkcard">我的工牌</view>
  13. <view v-if="Myworkcard">
  14. <view class="Workcard" v-if="Whetheroffline==true">
  15. <view class="Workcard-box">
  16. <view class="Workcardimg">
  17. <view class="Workcardimg1">
  18. <view v-if="percentage>20" class="bar" :style="{width : percentage + '%' }"></view>
  19. <view v-if="percentage<20" class="bar1" :style="{width : percentage + '%' }"></view>
  20. </view>
  21. </view>
  22. <view class="Workcardtext">电量:{{percentage}}%</view>
  23. </view>
  24. <view class="Workcard-box">
  25. <view class="Workcardimg">
  26. <image v-if="signalDevice==''" class="Workcardimg2" src="../../static/images/signal0.png"
  27. mode=""></image>
  28. <image v-else-if="signalDevice<20 && signalDevice>0" class="Workcardimg2"
  29. src="../../static/images/signal1.png" mode=""></image>
  30. <image v-else-if="signalDevice<50 && signalDevice>20" class="Workcardimg2"
  31. src="../../static/images/signal2.png" mode=""></image>
  32. <image v-else-if="signalDevice<70 && signalDevice>50" class="Workcardimg2"
  33. src="../../static/images/signal3.png" mode=""></image>
  34. <image v-else-if="signalDevice<90 && signalDevice>70" class="Workcardimg2"
  35. src="../../static/images/signal4.png" mode=""></image>
  36. <image v-else-if="signalDevice<=100 && signalDevice>90" class="Workcardimg2"
  37. src="../../static/images/signal5.png" mode=""></image>
  38. </view>
  39. <view class="Workcardtext">信号:{{signalDevicetext}}</view>
  40. </view>
  41. <view class="Workcard-box">
  42. <view class="Workcardimg">
  43. <image v-if="audioStatus=='true'" class="Workcardimg3"
  44. src="../../static/images/Thtapedrive1.png" mode=""></image>
  45. <image v-if="audioStatus=='false'" class="Workcardimg3"
  46. src="../../static/images/Thtapedrive2.png" mode=""></image>
  47. </view>
  48. <view v-if="audioStatus=='true'" class="Workcardtext">录音:已开启</view>
  49. <view v-if="audioStatus=='false'" class="Workcardtext">录音:未开启</view>
  50. </view>
  51. </view>
  52. <view class="Workcard" v-if="Whetheroffline==false">
  53. <view class="Workcard-box">
  54. <view class="Workcardimg">
  55. <image class="Workcardimg4" src="../../static/images/offline.png" mode=""></image>
  56. </view>
  57. <view class="Workcardtext">设备离线</view>
  58. </view>
  59. </view>
  60. </view>
  61. <view class="title" v-if="equipmentisshow">设备</view>
  62. <view class="shebenbox" v-if="equipmentisshow" >
  63. <view class="shebenche" @click="tapjumpequipment(0)">
  64. <view class="shebenchenum">{{equipmentobj.totalNum || 0}}</view>
  65. <view class="shebenchetext">设备总数</view>
  66. </view>
  67. <view class="shebenche" @click="tapjumpequipment(1)">
  68. <view class="shebenchenum">{{equipmentobj.onlineNum || 0}}</view>
  69. <view class="shebenchetext">在线</view>
  70. </view>
  71. <view class="shebenche" @click="tapjumpequipment(3)">
  72. <view class="shebenchenum">{{equipmentobj.activeNum || 0}}</view>
  73. <view class="shebenchetext">活跃</view>
  74. </view>
  75. <view class="shebenche" @click="tapjumpequipment(2)">
  76. <view class="shebenchenum" style="color: red;">{{equipmentobj.lowPowerNum || 0}}</view>
  77. <view class="shebenchetext">急需充电</view>
  78. </view>
  79. </view>
  80. <view class="title">实时统计</view>
  81. <!-- <view class="real-timebox">
  82. <view class="timebox">
  83. </view>
  84. <view class="timebox">
  85. </view>
  86. </view> -->
  87. <view class="real-timebox">
  88. <view class="timebox">
  89. <view class="real" @click="tapjumpreception('1')">
  90. <view class="realnum">{{realtimeobj.receptionCount || 0}}</view>
  91. <view class="realtext">接待量</view>
  92. </view>
  93. <view class="real" @click="tapjumpreception('6')">
  94. <view class="realnum">{{realtimeobj.activeCustomer|| 0}}</view>
  95. <view class="realtext">有效接待</view>
  96. </view>
  97. <view class="real" @click="tapjumpreception('2')">
  98. <view class="realnum">{{realtimeobj.receivingCustomer || 0}}</view>
  99. <view class="realtext">正在接待</view>
  100. </view>
  101. <view class="real" @click="tapjumpreception('4')">
  102. <view class="realnum">{{realtimeobj.tagCustomer || 0}}</view>
  103. <view class="realtext">未标顾问</view>
  104. </view>
  105. </view>
  106. <view class="timebox">
  107. <view class="real" @click="tapjumpreception('1')">
  108. <view class="realnum">{{realtimeobj.avgDuration|| 0}}</view>
  109. <view class="realtext">平均接待时长</view>
  110. </view>
  111. <view class="real" @click="tapjumpreception('1')">
  112. <view class="realnum">{{realtimeobj.fraction || 0}}%</view>
  113. <view class="realtext">平均执行率</view>
  114. </view>
  115. <view class="real" >
  116. <view @click="prohibitedtap(1)" v-if="methodsisshow==true" class="realnum" style="color: red;" >{{realtimeobj.prohibitedCustomer || 0}}</view>
  117. <view @click="prohibitedtap(1)" v-if="methodsisshow==true" class="realtext">违禁预警</view>
  118. </view>
  119. <view class="real">
  120. <view class="realnum"></view>
  121. <view class="realtext"></view>
  122. </view>
  123. </view>
  124. </view>
  125. <view class="title" style="display: flex;">
  126. <view style="width: 55%;">概览</view>
  127. <view class="cet" style="display: flex;">
  128. <view class="cetview" :class="{ activecllasscet: zhixingcenterindex == 2 }" @click="tabtimeclick(2)">近7天</view>
  129. <view class="cetview" :class="{ activecllasscet: zhixingcenterindex == 6 }" @click="tabtimeclick(6)">近30天</view>
  130. <view class="cetview" :class="{ activecllasscet: zhixingcenterindex == 7 }" @click="tabtimeclick(7)">自定义</view>
  131. </view>
  132. </view>
  133. <view class="real-timebox">
  134. <view class="timebox">
  135. <view class="real" @click="tapjumpreception('3')">
  136. <view class="realnum">{{Thisweekobj.receptionCount || 0}}</view>
  137. <view class="realtext">接待量</view>
  138. </view>
  139. <view class="real" @click="tapjumpreception('7')">
  140. <view class="realnum">{{Thisweekobj.activeCustomer|| 0}}</view>
  141. <view class="realtext">有效接待</view>
  142. </view>
  143. <view class="real" @click="tapjumpreception('3')">
  144. <view class="realnum">{{Thisweekobj.fraction || 0}}%</view>
  145. <view class="realtext">平均执行率</view>
  146. </view>
  147. </view>
  148. <view class="timebox">
  149. <view class="real" @click="tapjumpreception('3')">
  150. <view class="realnum">{{Thisweekobj.avgDuration|| 0}}</view>
  151. <view class="realtext">平均接待时长</view>
  152. </view>
  153. <view class="real" @click="prohibitedtap(2)" v-if="methodsisshow==true">
  154. <view class="realnum" style="color: red;" >{{Thisweekobj.prohibitedCustomer || 0}}</view>
  155. <view class="realtext">违禁预警</view>
  156. </view>
  157. <view class="real" v-else>
  158. <view class="realnum"></view>
  159. <view class="realtext"></view>
  160. </view>
  161. <view class="real">
  162. <view class="realnum"></view>
  163. <view class="realtext"></view>
  164. </view>
  165. </view>
  166. </view>
  167. <!-- <view class="real-timebox">
  168. <view class="timebox">
  169. </view>
  170. </view> -->
  171. <view class="title">常用功能</view>
  172. <view class="commonly-box">
  173. <view class="commonly" @click="Piabodata(item.name)" v-for="(item,index) in Menulist" :key='index'>
  174. <view class="commonly-img">
  175. <image v-if="item.name=='客户管理'" class="commonly-img1" src="../../static/images/function1.png"
  176. mode=""></image>
  177. <image v-if="item.name=='接待记录'" class="commonly-img1" src="../../static/images/function2.png"
  178. mode=""></image>
  179. <image v-if="item.name=='销讲数据'" class="commonly-img1" src="../../static/images/function4.png"
  180. mode=""></image>
  181. <image v-if="item.name=='设备管理'" class="commonly-img1" src="../../static/images/function5.png"
  182. mode=""></image>
  183. <image v-if="item.name=='值班顾问'" class="commonly-img1" src="../../static/images/function6.png"
  184. mode=""></image>
  185. <image v-if="item.name=='顾问排名'" class="commonly-img1" src="../../static/images/rankingguwen.png"
  186. mode=""></image>
  187. <image v-if="item.name=='违禁记录'" class="commonly-img1" src="../../static/images/prohibited.png"
  188. mode=""></image>
  189. </view>
  190. <view v-if="item.name=='标记有效无效接待'" class="commonly-text"></view>
  191. <view v-else class="commonly-text">{{item.name}}</view>
  192. </view>
  193. </view>
  194. <!-- 楼盘切换 -->
  195. <view v-if="Showhiddenunits">
  196. <u-select :mask-close-able="false" v-model="Showhiddenunits" mode="single-column" :list="lpanlist"
  197. @cancel="cancel" @confirm="confirm"></u-select>
  198. </view>
  199. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  200. </view>
  201. </template>
  202. <script>
  203. var config = require("../../config");
  204. export default {
  205. data() {
  206. return {
  207. userInfo: {},
  208. Showhiddenunits: false,
  209. lpanlist: [], //楼盘列表
  210. buildingname: '', //楼盘名
  211. buildingID: '', //楼盘id
  212. buildingishow: false, //是否选择楼盘
  213. Myworkcard: false,
  214. percentage: '', //设备电量
  215. Whetheroffline: false, //是否离线
  216. signalDevice: 0, //信号
  217. signalDevicetext: "",
  218. audioStatus: false,
  219. equipmentisshow: false,
  220. equipmentobj: {
  221. totalNum: '',
  222. onlineNum: '',
  223. activeNum: '',
  224. lowPowerNum: '',
  225. },
  226. Menulist: [],
  227. realtimeobj: {
  228. sumCustomer: '',
  229. receivingCustomer: '',
  230. activeCustomer: '',
  231. prohibitedCustomer: '',
  232. tagCustomer: '',
  233. fraction: '',
  234. receptionCount:''
  235. },
  236. Thisweekobj: {
  237. sumCustomer: '',
  238. receivingCustomer: '',
  239. activeCustomer: '',
  240. prohibitedCustomer: '',
  241. tagCustomer: '',
  242. fraction: '',
  243. receptionCount:''
  244. },
  245. methodsisshow:false,
  246. zhixingcenterindex:2,
  247. totalTimeShow: false,
  248. statDateStart:'',
  249. statDateEnd:'',
  250. };
  251. },
  252. components: {},
  253. onShow() {
  254. this.getMenu()
  255. this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
  256. if(this.userInfo.dataCode==6 || this.userInfo.dataCode==3){
  257. this.methodsisshow=false;
  258. }else{
  259. this.methodsisshow=true;
  260. }
  261. if (this.userInfo.zkProperties.length == 1) {
  262. this.buildingID = uni.getStorageSync('buildingID').id;
  263. this.buildingname = uni.getStorageSync('buildingID').name;
  264. this.buildingishow = false;
  265. } else {
  266. this.buildingishow = true;
  267. this.buildingname = uni.getStorageSync('buildingID').name;
  268. this.buildingID = uni.getStorageSync('buildingID').id;
  269. this.userInfo.zkProperties.forEach(item => {
  270. item.label = item.propertyName;
  271. item.value = item.id
  272. })
  273. this.lpanlist = this.userInfo.zkProperties
  274. }
  275. if (this.userInfo.dataCode == 6) {
  276. this.Myworkcard = true;
  277. this.equipmentisshow = false;
  278. this.iniodianloang()
  279. } else {
  280. this.equipmentisshow = true;
  281. this.Myworkcard = false;
  282. this.initequipment()
  283. }
  284. this.initworkThisWeek()
  285. this.initrealTimeStatistics()
  286. },
  287. methods: {
  288. //获取权限
  289. getMenu(){
  290. console.log("11111")
  291. this.$u.get("/user/getMenu").then(data => {
  292. uni.setStorageSync("weapp_session_Menu_data", data)
  293. this.Menulist = uni.getStorageSync('weapp_session_Menu_data');
  294. })
  295. },
  296. //自定义时间
  297. totalTimeChange(e) {
  298. this.statDateStart=e.startDate;
  299. this.statDateEnd=e.endDate;
  300. this.zhixingcenterindex=7;
  301. this.initworkThisWeek()
  302. },
  303. tabtimeclick(i){
  304. if(i==7){
  305. this.totalTimeShow = true;
  306. }else{
  307. this.zhixingcenterindex=i;
  308. this.initworkThisWeek()
  309. }
  310. },
  311. initworkThisWeek() {
  312. uni.request({
  313. url: config.service.workThisWeek,
  314. method: "POST",
  315. header: {
  316. 'content-type': 'application/json',
  317. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  318. },
  319. data: {
  320. houseId: this.buildingID,
  321. dateType:this.zhixingcenterindex==7?null:this.zhixingcenterindex,
  322. statDateStart:this.statDateStart,
  323. statDateEnd:this.statDateEnd
  324. },
  325. success: (data) => {
  326. if (data.data.data == null) {
  327. return
  328. } else {
  329. this.Thisweekobj = {
  330. sumCustomer: data.data.data.sumCustomer,
  331. receivingCustomer: data.data.data.receivingCustomer,
  332. activeCustomer: data.data.data.activeCustomer,
  333. prohibitedCustomer: data.data.data.prohibitedCustomer,
  334. avgDuration: Math.floor(data.data.data.avgDuration/60) ||0,
  335. tagCustomer: data.data.data.tagCustomer,
  336. fraction: data.data.data.fraction,
  337. receptionCount:data.data.data.receptionCount
  338. }
  339. }
  340. }
  341. })
  342. },
  343. //实时统计
  344. initrealTimeStatistics() {
  345. uni.request({
  346. url: config.service.realTimeStatistics,
  347. method: "POST",
  348. header: {
  349. 'content-type': 'application/json',
  350. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  351. },
  352. data: {
  353. houseId: this.buildingID
  354. },
  355. success: (data) => {
  356. if (data.data.data == null) {
  357. return
  358. } else {
  359. this.realtimeobj = {
  360. sumCustomer: data.data.data.sumCustomer,
  361. receivingCustomer: data.data.data.receivingCustomer,
  362. activeCustomer: data.data.data.activeCustomer,
  363. prohibitedCustomer: data.data.data.prohibitedCustomer,
  364. avgDuration: Math.floor(data.data.data.avgDuration/60) ||0,
  365. tagCustomer: data.data.data.tagCustomer,
  366. fraction: data.data.data.fraction,
  367. receptionCount:data.data.data.receptionCount
  368. }
  369. }
  370. }
  371. })
  372. },
  373. //设备
  374. initequipment() {
  375. uni.request({
  376. url: config.service.findEquipmentState,
  377. method: "POST",
  378. header: {
  379. 'content-type': 'application/json',
  380. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  381. },
  382. data: {
  383. propertyId: this.buildingID
  384. },
  385. success: (data) => {
  386. if (data.data.data == null) {
  387. return
  388. } else {
  389. this.equipmentobj = {
  390. totalNum: data.data.data.totalNum,
  391. onlineNum: data.data.data.onlineNum,
  392. activeNum: data.data.data.activeNum,
  393. lowPowerNum: data.data.data.lowPowerNum,
  394. }
  395. }
  396. }
  397. })
  398. },
  399. //我的工牌
  400. iniodianloang() {
  401. uni.request({
  402. url: config.service.findElectricity,
  403. method: "POST",
  404. header: {
  405. 'content-type': 'application/json',
  406. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  407. },
  408. data: {},
  409. success: (data) => {
  410. if (data.data.data == null) {
  411. return
  412. } else {
  413. if (data.data.data > 100) {
  414. this.percentage = 100;
  415. } else {
  416. if (data.data.data.onLine == 0) {
  417. this.Whetheroffline = false;
  418. } else {
  419. this.Whetheroffline = true;
  420. this.percentage = data.data.data.electricity;
  421. this.signalDevice = data.data.data.signalDevice / 1;
  422. console.log(this.signalDevice)
  423. this.audioStatus = data.data.data.audioStatus;
  424. if (this.signalDevice > 80) {
  425. this.signalDevicetext = '高';
  426. } else {
  427. if (this.signalDevice == 0) {
  428. this.signalDevicetext = '无';
  429. } else {
  430. this.signalDevicetext = '低';
  431. }
  432. }
  433. }
  434. }
  435. }
  436. }
  437. })
  438. },
  439. //选择楼盘弹框
  440. piskbuilding() {
  441. this.Showhiddenunits = true;
  442. },
  443. // 楼盘选择确认
  444. confirm(e) {
  445. this.buildingname = e[0].label;
  446. this.buildingID = e[0].value;
  447. let lopan = {
  448. id: e[0].value,
  449. name: e[0].label
  450. }
  451. uni.setStorageSync("buildingID", lopan); //楼盘id写入缓存
  452. this.initworkThisWeek()
  453. this.initrealTimeStatistics()
  454. this.initequipment()
  455. this.iniodianloang()
  456. },
  457. // 楼盘选择取消
  458. cancel() {
  459. this.Showhiddenunits = false;
  460. },
  461. tapjumpequipment(i){
  462. this.Menulist.forEach(item=>{
  463. if(item.name=='设备管理'){
  464. uni.navigateTo({
  465. url: '/pages/mine/equipment/index?active='+i
  466. });
  467. }
  468. })
  469. },
  470. prohibitedtap(i){
  471. if(i==1){
  472. uni.navigateTo({
  473. url: '/pages/center/prohibited/index?refresh='+'refresh'+'&activeTotal='+'0'
  474. });
  475. }else{
  476. if(this.zhixingcenterindex==2){
  477. uni.navigateTo({
  478. url: '/pages/center/prohibited/index?refresh='+'refresh'+'&activeTotal='+'2'
  479. });
  480. }else if(this.zhixingcenterindex==6){
  481. uni.navigateTo({
  482. url: '/pages/center/prohibited/index?refresh='+'refresh'+'&activeTotal='+'3'
  483. });
  484. }else{
  485. uni.navigateTo({
  486. url: '/pages/center/prohibited/index?refresh='+'refresh'+'&activeTotal='+'4'+'&staTime='+this.statDateStart+'&endtime='+this.statDateEnd
  487. });
  488. }
  489. }
  490. },
  491. tapjumpreception(i){
  492. this.Menulist.forEach(item=>{
  493. if(item.name=='接待记录'){
  494. if(i==1){
  495. uni.navigateTo({
  496. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'0'
  497. });
  498. }else if(i==2){
  499. uni.switchTab({
  500. url: '/pages/index/customer'
  501. });
  502. }else if(i==3){
  503. if(this.zhixingcenterindex==2){
  504. uni.navigateTo({
  505. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'2'
  506. });
  507. }else if(this.zhixingcenterindex==6){
  508. uni.navigateTo({
  509. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'3'
  510. });
  511. }else{
  512. uni.navigateTo({
  513. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'4'+'&staTime='+this.statDateStart+'&endtime='+this.statDateEnd
  514. });
  515. }
  516. }else if(i==6){
  517. uni.navigateTo({
  518. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'0'+'&validInvalid=0'
  519. });
  520. }else if(i==7){
  521. if(this.zhixingcenterindex==2){
  522. uni.navigateTo({
  523. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'2'+'&validInvalid=0'
  524. });
  525. }else if(this.zhixingcenterindex==6){
  526. uni.navigateTo({
  527. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'3'+'&validInvalid=0'
  528. });
  529. }else{
  530. uni.navigateTo({
  531. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'4'+'&staTime='+this.statDateStart+'&endtime='+this.statDateEnd+'&validInvalid=0'
  532. });
  533. }
  534. }else{
  535. uni.navigateTo({
  536. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal=0'+'&markAdvisor=0'
  537. });
  538. }
  539. }
  540. })
  541. },
  542. Piabodata(item) {
  543. if (item == '销讲数据') {
  544. uni.navigateTo({
  545. url: '/pages/center/Piabodata/index'
  546. });
  547. } else if (item == '接待记录') {
  548. uni.navigateTo({
  549. url: '/pages/center/records/index?refresh='+'refresh'
  550. });
  551. } else if (item == '值班顾问') {
  552. uni.navigateTo({
  553. url: '/pages/mine/consultanonduty/index'
  554. });
  555. } else if (item == '设备管理') {
  556. uni.navigateTo({
  557. url: '/pages/mine/equipment/index'
  558. });
  559. } else if(item == '顾问排名') {
  560. uni.navigateTo({
  561. url: '/pages/center/Piabodata/Employeesstatistics'
  562. });
  563. }else if(item == '违禁记录'){
  564. uni.navigateTo({
  565. url: '/pages/center/prohibited/index?refresh='+'refresh'
  566. });
  567. }else{
  568. uni.navigateTo({
  569. url: '/pages/center/consumer/index?refresh='+'refresh'
  570. });
  571. }
  572. },
  573. },
  574. };
  575. </script>
  576. <style lang="scss" scoped>
  577. .activecllasscet{
  578. font-size: 28rpx;
  579. font-weight: 400;
  580. color: #008ef2;
  581. }
  582. .cet{
  583. font-size: 28rpx;
  584. font-weight: 400;
  585. color: #333333;
  586. .cetview{
  587. margin-left: 20rpx;
  588. }
  589. }
  590. .cented-box {
  591. padding: 30rpx;
  592. background: #F8F8F8;
  593. width: 100%;
  594. height: 100%;
  595. }
  596. .Switchingbox {
  597. width: 100%;
  598. height: 44rpx;
  599. display: flex;
  600. align-items: center;
  601. .Switching1 {
  602. width: 44rpx;
  603. height: 44rpx;
  604. .Switching1-img {
  605. width: 44rpx;
  606. height: 44rpx;
  607. }
  608. }
  609. .Switching2 {
  610. margin-left: 12rpx;
  611. font-size: 32rpx;
  612. color: #303030;
  613. font-weight: 500;
  614. }
  615. .Switching3 {
  616. width: calc(100% - 280rpx);
  617. font-size: 32rpx;
  618. color: #303030;
  619. font-weight: 500;
  620. }
  621. .Switching4 {
  622. width: 112rpx;
  623. font-size: 28rpx;
  624. color: #303030;
  625. font-weight: 400;
  626. text-align: right;
  627. text-decoration: underline
  628. }
  629. }
  630. .Workcard {
  631. width: 100%;
  632. background: #FFFFFF;
  633. height: 154rpx;
  634. box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
  635. border-radius: 12rpx;
  636. display: flex;
  637. .Workcard-box {
  638. flex: 1;
  639. height: 100%;
  640. .Workcardimg {
  641. width: 100%;
  642. display: flex;
  643. justify-content: center;
  644. margin-top: 42rpx;
  645. .Workcardimg1 {
  646. width: 64rpx;
  647. height: 36rpx;
  648. background-image: url(../../static/images/battery.png);
  649. background-size: 100% 100%;
  650. padding: 8rpx;
  651. .bar {
  652. background-color: #43CD80;
  653. height: 100%;
  654. border-radius: 4rpx;
  655. }
  656. .bar1 {
  657. background-color: red;
  658. height: 100%;
  659. border-radius: 4rpx;
  660. }
  661. }
  662. .Workcardimg2 {
  663. width: 56rpx;
  664. height: 36rpx;
  665. }
  666. .Workcardimg3 {
  667. width: 34rpx;
  668. height: 36rpx;
  669. }
  670. .Workcardimg4 {
  671. width: 50rpx;
  672. height: 40rpx;
  673. }
  674. }
  675. .Workcardtext {
  676. width: 100%;
  677. text-align: center;
  678. font-size: 24rpx;
  679. font-weight: 400;
  680. color: #666666;
  681. margin-top: 20rpx;
  682. }
  683. }
  684. }
  685. .title {
  686. width: 100%;
  687. height: 30rpx;
  688. font-size: 30rpx;
  689. font-weight: 600;
  690. color: #333333;
  691. margin-top: 40rpx;
  692. margin-bottom: 24rpx;
  693. }
  694. .shebenbox {
  695. width: 100%;
  696. height: 156rpx;
  697. background: #FFFFFF;
  698. box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
  699. border-radius: 12rpx;
  700. display: flex;
  701. .shebenche {
  702. width: 25%;
  703. height: 100%;
  704. .shebenchenum {
  705. width: 100%;
  706. font-size: 36rpx;
  707. font-weight: 600;
  708. color: #333333;
  709. text-align: center;
  710. margin-top: 28rpx;
  711. }
  712. .shebenchetext {
  713. width: 100%;
  714. font-size: 24rpx;
  715. font-weight: 400;
  716. color: #666666;
  717. text-align: center;
  718. margin-top: 24rpx;
  719. }
  720. }
  721. }
  722. .real-timebox {
  723. width: 100%;
  724. background: #FFFFFF;
  725. box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
  726. border-radius: 12rpx;
  727. padding-bottom: 36rpx;
  728. .timebox {
  729. width: 100%;
  730. display: flex;
  731. .real {
  732. flex: 1;
  733. height: 100%;
  734. .realnum {
  735. width: 100%;
  736. font-size: 36rpx;
  737. font-weight: 600;
  738. color: #333333;
  739. text-align: center;
  740. margin-top: 36rpx;
  741. }
  742. .realtext {
  743. width: 100%;
  744. font-size: 24rpx;
  745. font-weight: 400;
  746. color: #666666;
  747. text-align: center;
  748. margin-top: 24rpx;
  749. }
  750. }
  751. }
  752. }
  753. .commonly-box {
  754. width: 100%;
  755. background: #FFFFFF;
  756. box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
  757. border-radius: 12rpx;
  758. display: flex;
  759. flex-wrap: wrap;
  760. padding-bottom: 36rpx;
  761. .commonly {
  762. width: 25%;
  763. margin-top: 36rpx;
  764. .commonly-img {
  765. width: 100%;
  766. height: 68rpx;
  767. text-align: center;
  768. .commonly-img1 {
  769. width: 68rpx;
  770. height: 68rpx;
  771. border-radius: 50%;
  772. }
  773. }
  774. .commonly-text {
  775. width: 100%;
  776. text-align: center;
  777. font-size: 24rpx;
  778. font-weight: 400;
  779. color: #333333;
  780. margin-top: 16rpx;
  781. }
  782. }
  783. }
  784. </style>