list.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584
  1. <template>
  2. <view>
  3. <!-- 第一种样式 人员管理-->
  4. <block v-if="datainfo.length>0">
  5. <!-- 房屋管理 -->
  6. <block v-if="type=='comehouse'">
  7. <view class="carlist houselist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.houseId)">
  8. <view class="ctop flexc">
  9. <image :src="house" class="imgs" v-if="ite.houseStatus==1"></image>
  10. <image :src="housea" class="imgs" v-if="ite.houseStatus==2"></image>
  11. <image :src="houseb" class="imgs" v-if="ite.houseStatus==3"></image>
  12. <image :src="housec" class="imgs" v-if="ite.houseStatus==4"></image>
  13. <view class="tit">{{ite.communityName}}{{ite.detailedAddress}}</view>
  14. <!-- view class="btn btnbga">预约</view>
  15. <view class="btn btnbgb">已来访</view>
  16. <view class="btn btnbgc">待来访</view> -->
  17. <view class="flex1"></view>
  18. <view class="txt ca" v-if="ite.houseStatus==1">自住</view>
  19. <view class="txt cb" v-if="ite.houseStatus==2">出租</view>
  20. <view class="txt cc" v-if="ite.houseStatus==3">空闲</view>
  21. <view class="txt co6" v-if="ite.houseStatus==4">代售</view>
  22. </view>
  23. <view class="clists">
  24. <view class="clist"><view class="tit">房屋坐落</view>{{ite.location}}</view>
  25. <view class="clist"><view class="tit">建筑面积</view>{{ite.area}}m²</view>
  26. <!-- <view class="w50 flexc">
  27. <view class="clist"><view class="tit">房屋所属</view>袁玥</view>
  28. <view class="clist"><view class="tit">建筑面积</view>121.3m²</view>
  29. </view>
  30. <view class="w50 flexc">
  31. <view class="clist"><view class="tit">房型</view>3室1厅</view>
  32. <view class="clist"><view class="tit">居住人口</view>3口人</view>
  33. </view>
  34. <view class="w50 flexc">
  35. <view class="clist"><view class="tit">有无车位 </view>有</view>
  36. </view> -->
  37. <!-- <view class="clist"><view class="tit">手机号码</view>13656788668</view> -->
  38. </view>
  39. <view class="btns flexc">
  40. <view class="bga" v-if="checkPermi(['wuYe:houseInfo:edit'])" @click.stop="getPut(ite.houseId)">编辑信息</view>
  41. <view class="bgb" v-if="checkPermi(['wuYe:residentInfo:list'])" @click.stop="getJuzhu(ite.houseId)">居住信息</view>
  42. <view class="bgc" v-if="checkPermi(['wuYe:car:list'])" @click.stop="getCar(ite.houseId)"> 车辆信息</view>
  43. </view>
  44. </view>
  45. </block>
  46. <block v-if="type=='mycar'">
  47. <view class="carlist pr" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.carId)"
  48. :data-idx="idx"
  49. @touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'"
  50. >
  51. <view class="delleft" style="padding: 0 24rpx;">
  52. <view class="carltop flexc">
  53. <view class="flex1">
  54. <view class="tit mb6" :class="ite.vehicleType==1?'co01':'co16'">{{ite.plateNumber}}</view>
  55. <view class="txt flexc">
  56. <!-- {{ite.plateNumber}} -->
  57. <view class="txtbtn flexcc">{{kaType(ite.vehicleBrand,clcxList)}}</view>
  58. <!-- <view class="txtbtn flexcc" v-if="ite.vehicleType==2">新能源</view> -->
  59. </view>
  60. </view>
  61. <image :src="cara" class="cara" v-if="ite.vehicleType==1"></image>
  62. <image :src="carb" class="carb" v-if="ite.vehicleType==2"></image>
  63. </view>
  64. <view class="carlf">
  65. <view class="clflist">发动机号码 :{{ite.engineNumber}}</view>
  66. <view class="clflist">车辆识别代号:{{ite.identificationNumber}}</view>
  67. <view class="flexc">
  68. <view class="clflist w50">注册日期:{{ite.registrationDate}}</view>
  69. <view class="clflist w50">发证日期:{{ite.issueDate}}</view>
  70. </view>
  71. </view>
  72. </view>
  73. <view class="spdel" v-if="ite.right>0&&checkPermi(['wuYe:car:remove'])" @click.stop="getDelFn(ite.carId)">删除</view>
  74. </view>
  75. </block>
  76. <!-- 物业费管理 -->
  77. <block v-if="type=='money'">
  78. <view class="carlist peolist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
  79. <view class="ctop flexc" style="padding: 26rpx 24rpx 24rpx;">
  80. <image :src="hicoa" class="imgs"></image>
  81. <view class="tit">幸福小区12#301</view>
  82. <view class="flex1"></view>
  83. <view class="txta">2024/01 -2024/12</view>
  84. </view>
  85. <view class="clists flexc">
  86. <view class="mlistl">
  87. <view class="mltit">应缴总额 /元</view>
  88. <view class="mltxt">4307.20</view>
  89. </view>
  90. <view class="mlistr">
  91. <view class="clist"><view class="tit">物业费用:</view>3247.20元</view>
  92. <view class="clist"><view class="tit">车位费用:</view>960.00元</view>
  93. <view class="clist"><view class="tit">能耗费用:</view>100.00元</view>
  94. </view>
  95. </view>
  96. </view>
  97. </block>
  98. <!-- 历史账单 -->
  99. <block v-if="type=='moneybill'">
  100. <view class="carlist peolist" v-for="(ite,idx) in datainfo" :key="idx">
  101. <view class="ctop flexc" style="padding: 26rpx 24rpx 24rpx;">
  102. <image :src="time" class="imgs"></image>
  103. <view class="tit">2024/01 -2024/12</view>
  104. <view class="btn btnbgb" v-if="ite.type==1">已缴费</view>
  105. <view class="btn btnbgc" v-else>未缴费</view>
  106. <view class="flex1"></view>
  107. <view class="txta">1号楼3单元1102</view>
  108. </view>
  109. <view class="clists flexc">
  110. <view class="mlistl">
  111. <view class="mltit">应缴总额 /元</view>
  112. <view class="mltxt">4307.20</view>
  113. </view>
  114. <view class="mlistr">
  115. <view class="clist"><view class="tit">物业费用:</view>3247.20元</view>
  116. <view class="clist"><view class="tit">车位费用:</view>960.00元</view>
  117. <view class="clist"><view class="tit">能耗费用:</view>100.00元</view>
  118. </view>
  119. </view>
  120. </view>
  121. </block>
  122. <!-- 党建资讯 -->
  123. <block v-if="type=='newsdj'">
  124. <view class="newlists" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail"
  125. >
  126. <view class="tit">潜山:多举措建优非公党建工作指导员队伍</view>
  127. <view class="txt overtwo">如何不断激发非公企业和社会组织党建工作新活力?潜山市委社 会工作部发挥考核的指挥棒作用,“三点发力”推动党建工作部…</view>
  128. <view class="stabox flexc">
  129. <view class="time flex1">2024-11-18 08:16:54</view>
  130. <view class="btns">
  131. <!-- <image :src="star" class="imga"></image>42 -->
  132. <image :src="stara" class="imga"></image>42
  133. </view>
  134. <view class="btns">
  135. <image :src="eye" class="imgb"></image>1361
  136. </view>
  137. </view>
  138. </view>
  139. <!-- checkPermi(['system:menuFood:remove'])&& -->
  140. </block>
  141. <!-- 社区资讯 -->
  142. <block v-if="type=='newssq'">
  143. <view class="walists" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
  144. <view class="watop watopcom">
  145. <view class="watit">
  146. <view class="tit">物业服务费缴费公告<text class="cir"></text></view>
  147. </view>
  148. <view class="watopcoma overtwo">尊敬的各位业主:为更好地提供优质小区环境,保障小区 公共区域设施设备正常的运行,现收取2024年度物业…</view>
  149. <view class="watopcomb">2024-11-18 08:16:54</view>
  150. </view>
  151. <view class="wabtn">
  152. <view>查看详情</view>
  153. <image :src="rimg"></image>
  154. </view>
  155. </view>
  156. </block>
  157. <!-- 员工图文 -->
  158. <block v-if="type=='ystv'">
  159. <view class="walists" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
  160. <view class="watop watopcom" style="padding-bottom: 22rpx !important;">
  161. <view class="watit">
  162. <view class="tit">1.3 业务流程与工作规范</view>
  163. </view>
  164. <view class="watopcoma overtwo">业主入住与退房流程、维修报修流程、安全防范措施与应
  165. 急处理、公共区域维护与清洁、物业费收缴与开支管理…</view>
  166. <view class="flexcj">
  167. <view class="watopcomb">2024-11-18 08:16:54</view>
  168. <!-- 管理员 -->
  169. <view class="f12 cofe fw5" @click="getReadlist">已读名单</view>
  170. <!-- 员工 -->
  171. <view class="f12 co27 fw5" >进度:100%</view>
  172. </view>
  173. </view>
  174. </view>
  175. </block>
  176. <!-- 员工视频 -->
  177. <block v-if="type=='ygsp'">
  178. <view class="videolists flex" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
  179. <view class="flex0 mr12">
  180. <video class="videos" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
  181. @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
  182. </view>
  183. <view class="flex1 over titbox">
  184. <view class="tit over">1.3 业务流程与工作规范</view>
  185. <view class="flexcj">
  186. <view class="num">03:41</view>
  187. <!-- 管理员 -->
  188. <view class="f12 cofe fw5" @click="getReadlist">已读名单</view>
  189. <!-- 员工 -->
  190. <view class="f12 co27 fw5" >进度:100%</view>
  191. </view>
  192. <view class="time">2024-11-18 08:16:54</view>
  193. </view>
  194. </view>
  195. </block>
  196. <!-- 阅读名单 -->
  197. <block v-if="type=='readlist'" >
  198. <view class="readlist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
  199. <image class="head" :src="man" v-if="ite.sex==0"></image>
  200. <image class="head" :src="woman" v-else></image>
  201. <view class="flex1">
  202. <view class="tit">袁玥</view>
  203. <view class="time"><text>阅读时间 |</text> 2024-12-01 18:37:56</view>
  204. </view>
  205. </view>
  206. </block>
  207. <block v-if="type=='readcount'" >
  208. <view class="readlist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
  209. <image class="head" :src="man" v-if="ite.sex==0"></image>
  210. <image class="head" :src="woman" v-else></image>
  211. <view class="flex1">
  212. <view class="tit">袁玥</view>
  213. <view class="time"><text>阅读总时长 |</text> 8小时54分31秒</view>
  214. </view>
  215. </view>
  216. </block>
  217. <view class="shax">{{wtdt}}</view>
  218. </block>
  219. <!-- 无数据 -->
  220. <view class="nodata" v-else>
  221. <image :src="noiconpimg"></image>
  222. <view>
  223. 暂无数据
  224. </view>
  225. </view>
  226. </view>
  227. </template>
  228. <script>
  229. import {selectDictValue} from "@/utils/common.js"
  230. import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  231. import config from '@/config'
  232. export default{
  233. props:{
  234. datainfo: {
  235. type: Array,
  236. default () {
  237. return []
  238. }
  239. },
  240. wtdt:{
  241. type:String,
  242. default () {
  243. return ''
  244. }
  245. },
  246. type:{
  247. type:String,
  248. default () {
  249. return 0
  250. }
  251. },
  252. topval:{
  253. type:String,
  254. default () {
  255. return ''
  256. }
  257. },
  258. clcxList:{
  259. type:Array,
  260. default () {
  261. return []
  262. }
  263. }
  264. },
  265. data(){
  266. return{
  267. noiconpimg:require("@/static/nodata.png"),
  268. car:require("@/car/static/car/car.png"),
  269. cara:require("@/car/static/car/cara.png"),
  270. carb:require("@/car/static/car/carb.png"),
  271. hicoa:require("@/people/static/people/hicoa.png"),
  272. hicob:require("@/people/static/people/hicob.png"),
  273. man:require("@/people/static/people/man.png"),
  274. woman:require("@/people/static/people/woman.png"),
  275. rimg:require("@/people/static/people/rimg.png"),
  276. pdel:require("@/people/static/people/pdel.png"),
  277. gzlx:require("@/people/static/people/gzlx.png"),
  278. mphone:require("@/people/static/people/mphone.png"),
  279. time:require("@/work/static/manage/time.png"),
  280. house:require("@/work/static/manage/house.png"),
  281. housea:require("@/work/static/manage/housea.png"),
  282. houseb:require("@/work/static/manage/houseb.png"),
  283. housec:require("@/work/static/manage/housec.png"),
  284. home:require("@/service/static/service/home.png"),
  285. upimg:require("@/static/images/home/up.png"),
  286. star:require('@/manage/static/community/star.png'),
  287. stara:require('@/manage/static/community/stara.png'),
  288. eye:require('@/manage/static/community/eye.png'),
  289. baseUrl:config.baseUrl,
  290. delBtnWidth:66,//左滑默认宽度
  291. }
  292. },
  293. mounted() {
  294. },
  295. methods:{
  296. checkPermi, checkRole,
  297. kaType(data, list) {
  298. return selectDictValue(list, data);
  299. },
  300. getDetail(e){
  301. this.$emit('getDetail',e)
  302. },
  303. getPut(e){
  304. this.$emit('getPut',e)
  305. },
  306. getJuzhu(e){
  307. this.$emit('getJuzhu',e)
  308. },
  309. getCar(e){
  310. this.$emit('getCar',e)
  311. },
  312. getAddFn(e){
  313. this.$emit('getAddFn',e)
  314. },
  315. getReadlist(e){
  316. this.$emit('getReadlist',e)
  317. },
  318. getZhan(idx){
  319. // var obj=JSON.parse(JSON.stringify(this.datainfo))[idx]
  320. // obj.zhanflag=!obj.zhanflag;
  321. // this.datainfo.splice(idx,1,obj);
  322. this.datainfo[idx].zhanflag=!this.datainfo[idx].zhanflag
  323. },
  324. getPreview(idx,arr) {
  325. var newArr=[];
  326. arr.forEach(ite=>{
  327. var ds=this.baseUrl+ite
  328. newArr.push(ds)
  329. })
  330. uni.previewImage({
  331. urls: newArr,
  332. current:idx,
  333. success: function(data) {},
  334. fail: function(err) {}
  335. });
  336. },
  337. //开始触摸滑动
  338. drawStart(e) {
  339. // console.log("开始触发");
  340. var touch = e.touches[0];
  341. this.startX = touch.clientX;
  342. },
  343. //触摸滑动
  344. drawMove(e) {
  345. // console.log("滑动");
  346. for (var index in this.datainfo) {
  347. // this.csListArrl[index].right=0
  348. this.$set(this.datainfo[index],'right',0);
  349. }
  350. var idx=e.currentTarget.dataset.idx
  351. var touch = e.touches[0];
  352. var item = this.datainfo[idx];
  353. var disX = this.startX - touch.clientX;
  354. if (disX >= 20) {
  355. if (disX > this.delBtnWidth) {
  356. disX = this.delBtnWidth;
  357. }
  358. // this.csListArrl[idx].right=disX
  359. this.$set(this.datainfo[idx],'right',disX);
  360. } else {
  361. // this.csListArrl[idx].right=0
  362. this.$set(this.datainfo[idx],'right',0);
  363. }
  364. },
  365. //触摸滑动结束
  366. drawEnd(e) {
  367. // console.log("滑动结束");
  368. var idx=e.currentTarget.dataset.idx
  369. var item = this.datainfo[idx];
  370. if (item.right >= this.delBtnWidth / 2) {
  371. // this.datainfo[idx].right=this.delBtnWidth
  372. this.$set(this.datainfo[idx],'right',this.delBtnWidth);
  373. } else {
  374. this.datainfo[idx].right=0
  375. }
  376. },
  377. }
  378. }
  379. </script>
  380. <style lang="scss" scoped>
  381. .flex{display: flex;}
  382. .flexc{display: flex;align-items: center;}
  383. .mb10{margin-bottom: 20rpx;}
  384. .carlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;
  385. .carltop{min-height: 154rpx;border-bottom: 2rpx solid #E5E5E5;
  386. .tit{font-weight: bold;font-size: 32rpx;}
  387. .txt{font-weight: 500;font-size: 26rpx;color: #272727;}
  388. .txtbtn{min-width: 82rpx;
  389. height: 32rpx;font-weight: 500;font-size: 20rpx;color: #45CB99;
  390. border-radius: 16rpx;border: 1px solid #45CB99;margin-left: 12rpx;}
  391. .cara{flex: 0 0 auto;width: 232rpx;height: 74rpx;margin-right: 40rpx;}
  392. .carb{flex: 0 0 auto;width: 278rpx;height: 130rpx;}
  393. }
  394. .carlf{padding:26rpx 0 10rpx;
  395. .clflist{font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 16rpx;}
  396. }
  397. .ctop{border-bottom: 2rpx solid #E5E5E5;padding:26rpx 24rpx;
  398. .imgs{width: 40rpx;height: 42rpx;margin-right: 30rpx;}
  399. .tit{font-size: 32rpx;color: #272727;font-weight: bold;margin-right: 14rpx;}
  400. .txt{font-weight: 500;font-size: 26rpx;
  401. &.ca{color: #3565ED;}
  402. &.cb{color: #FE5A0E;}
  403. &.cc{color: #28C529;}
  404. }
  405. .txta{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
  406. .num{font-size: 24rpx;color: #AAAAAA;}
  407. }
  408. .btn{height: 34rpx;border-radius: 18rpx;display: flex;align-items: center;justify-content: center;padding: 0 10rpx;font-size: 22rpx;margin-right: 24rpx;
  409. &.btna{border: 2rpx solid #06C770;color: #06C770;}
  410. &.btnb{border: 2rpx solid #3565ED;color: #3565ED;}
  411. &.btnc{border: 2rpx solid #FE5A0E;color: #FE5A0E;}
  412. &.btnbga{border: 1px solid #0156FE;color: #3565ED;background: #DFEAFF;height: 36rpx;}
  413. &.btnbgb{border: 1px solid #C1C1C1;color: #666666;background: #F1F1F1;height: 36rpx;}
  414. &.btnbgc{border: 1px solid #FE5A0E;color:#FE5A0E;background:#FFEEE6;height: 36rpx;}
  415. }
  416. .clists{padding: 24rpx 24rpx 8rpx;
  417. .clist{font-weight: 500;margin-bottom: 16rpx;
  418. font-size: 26rpx;color: #272727;display: flex;line-height: 34rpx;
  419. .tit{font-size: 26rpx;color: #AAAAAA;flex: 0 0 auto;margin-right: 16rpx;min-width: 108rpx;text-align-last: justify;}
  420. .imgas{display: flex;align-items: center;flex-wrap: wrap;
  421. image{width: 142rpx;height: 142rpx;margin-right: 30rpx;margin-top: 8rpx;}
  422. }
  423. }
  424. .w50{
  425. .clist{width: 50%;}
  426. }
  427. }
  428. }
  429. // 人员
  430. .peolist{
  431. .ctop{padding: 24rpx 24rpx 22rpx;}
  432. .imgs{margin-right: 16rpx !important;}
  433. .tit{font-size: 28rpx !important;}
  434. .plists{padding: 30rpx 24rpx 6rpx;
  435. .plist{background: linear-gradient(-90deg, #F2F5FF 0%, #FBFDFF 100%);border-radius: 20rpx;border: 2rpx solid #E6E6E6;margin-bottom: 24rpx;padding: 18rpx 26rpx 4rpx;
  436. .head{width: 96rpx;height: 98rpx;margin-right: 32rpx;flex: 0 0 auto;}
  437. .ptit{font-weight: bold;font-size: 30rpx;color: #272727;display: flex;align-items: center;margin-bottom: 14rpx;}
  438. .ptxt{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 14rpx;min-width: 176rpx;}
  439. }
  440. }
  441. .upimg{width: 26rpx;height: 22rpx;display: block;transform: rotate(180deg);transition: all 0.3s;margin: 0 auto 18rpx;
  442. &.act{transform: rotate(0deg);}
  443. }
  444. }
  445. // 物业费
  446. .mlistl{width: 40%;display: flex;flex-direction: column;align-items: center;flex: 0 0 auto;
  447. .mltit{font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 18rpx;}
  448. .mltxt{font-weight: bold;font-size: 32rpx;color: #0156FE;}
  449. }
  450. .houselist{
  451. .clists{padding-bottom: 2rpx !important;}
  452. .clist{margin-bottom: 22rpx !important;}
  453. .btns{justify-content: flex-end;
  454. view{min-width: 156rpx;font-weight: 500;font-size: 26rpx;margin-right: 24rpx;border-radius: 20rpx;padding: 6rpx 8rpx;box-sizing: border-box;text-align: center;margin-bottom: 26rpx;
  455. &.bga{border: 2rpx solid #FE5A0E;background: #FFF8F5;color: #FE5A0E;}
  456. &.bgb{border: 2rpx solid #0256FD;background: #F1F5FC;color: #0256FD;}
  457. &.bgc{border: 2rpx solid #06C770;background: #EEF8F4;color: #06C770;}
  458. }
  459. }
  460. }
  461. // 巡更地点
  462. .patlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;padding: 0 24rpx 30rpx;
  463. .pattop{padding:22rpx 30rpx;margin-bottom: 2rpx;
  464. .imgs{width: 28rpx;height: 28rpx;margin-right: 12rpx;}
  465. .tit{font-size: 30rpx;color: #272727;font-weight: bold;margin-right: 14rpx;}
  466. .txt{font-weight: 500;font-size:24rpx;
  467. &.ca{color: #3565ED;}
  468. &.cb{color: #FE5A0E;}
  469. &.cc{color: #28C529;}
  470. &.cd{color: #FF6969;}
  471. }
  472. }
  473. .patlistr{background: #EFF4FF;border-radius: 20rpx;padding: 20rpx 32rpx;
  474. .clist{font-weight: 500;font-size: 26rpx;color: #272727;display: flex;line-height: 50rpx;
  475. .tit{font-size: 26rpx;flex: 0 0 auto;min-width: 108rpx;text-align-last: justify;font-weight: bold;}
  476. }
  477. }
  478. .patbtns{display: flex;justify-content: flex-end;align-items: center;flex-wrap: wrap;
  479. view{min-width: 156rpx;height: 52rpx;font-weight: 500;font-size: 26rpx;background: #FFFFFF;border-radius: 20rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: center;padding: 0 10rpx;margin-left: 24rpx;margin-top: 24rpx;
  480. &.btna{border: 2rpx solid #0256FD;color: #0256FD;}
  481. &.btnb{background: #0256FD;color: #ffffff;}
  482. }
  483. }
  484. }
  485. // 报修
  486. .walists{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx; position: relative;
  487. .watop{
  488. padding: 0 36rpx 8rpx 38rpx;
  489. .watit{padding: 24rpx 0;margin-bottom: 4rpx;display: flex;
  490. .tit{font-weight: bold;font-size: 28rpx;color: #272727;flex: 1;
  491. .cir{width: 14rpx;margin-left: 8rpx;margin-bottom: 10rpx;height: 14rpx;display: inline-block;background: #FF6969;border-radius: 8rpx;}
  492. }
  493. .txt{font-weight: bold;font-size: 26rpx;flex: 0 0 auto;
  494. }
  495. }
  496. }
  497. .walist{display: flex;font-weight: 500;font-size: 24rpx;color: #666666;margin-bottom: 16rpx;
  498. .tit{min-width: 100rpx;text-align-last: justify}
  499. }
  500. .wabtn{display: flex;align-items: center;justify-content: space-between;border-top: 2rpx solid #E5E5E5;height: 80rpx;padding: 0 38rpx;
  501. view{font-weight: 500;font-size: 24rpx;color: #666666;}
  502. image{width: 16rpx;height: 28rpx;}
  503. }
  504. }
  505. // 维修人员
  506. .stafflist{width: 344rpx;min-height: 256rpx;background: #FFFFFF;border-radius: 20rpx;margin:0 12rpx 24rpx 12rpx;padding-bottom: 20rpx;box-sizing: border-box;
  507. // &:nth-of-type(2n){margin-right: 0;}
  508. .statop{border-bottom: 2rpx solid #E5E5E5;display: flex;padding: 24rpx 24rpx 22rpx;
  509. .head{width: 80rpx;height: 82rpx;margin-right: 24rpx;flex: 0 0 auto;}
  510. .stadel{width: 30rpx;height: 30rpx;flex: 0 0 auto;margin-left: 12rpx;}
  511. .statit{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 4rpx;}
  512. .statxt{font-weight: 500;font-size: 26rpx;
  513. .cir{width: 10rpx;height: 10rpx;border-radius: 50%;margin-right: 14rpx;display: inline-block;
  514. &.bga{background: #06C770;}
  515. &.bgb{background: #FF6969;}
  516. }
  517. }
  518. }
  519. .stalist{font-weight: 500;font-size: 26rpx;color: #272727;display: flex;align-items: center;padding: 20rpx 24rpx 0;
  520. .imgs{width: 24rpx;height: 30rpx;margin-right: 22rpx;flex: 0 0 auto;display: flex;align-items: center;justify-content: center;
  521. .gzlximg{width: 24rpx;height: 28rpx;}
  522. .mphone{width: 18rpx;height: 30rpx;}
  523. }
  524. }
  525. }
  526. .watopcom{background-color: #ffffff;border-radius: 20rpx;position: relative;z-index: 1;padding-bottom: 30rpx !important;
  527. .watopcoma{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 24rpx;}
  528. .watopcomb{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
  529. }
  530. //资讯
  531. .newlists{
  532. background: #FFFFFF;padding: 22rpx 24rpx;margin-bottom: 24rpx;
  533. border-radius: 20rpx;
  534. .tit{font-size: 32rpx;font-weight: bold;color: #272727;line-height: 48rpx;margin-bottom:16rpx;}
  535. .txt{font-size: 24rpx;color: #666666;line-height: 36rpx;margin-bottom: 32rpx;}
  536. .stabox{
  537. .time{font-weight: 500;font-size: 24rpx;color: #AAAAAA;line-height: 36rpx;}
  538. .btns{font-weight: 500;font-size: 22rpx;color: #666666;line-height: 36rpx;min-width: 100rpx;box-sizing: border-box;margin-left: 20rpx;
  539. .imga{width: 24rpx;height: 22rpx;margin-right: 8rpx;}
  540. .imgb{width: 24rpx;height: 18rpx;margin-right: 10rpx;}
  541. }
  542. }
  543. }
  544. // 视频
  545. .videolists{
  546. background: #FFFFFF;margin-bottom: 24rpx;border-radius: 20rpx;
  547. .titbox{padding-top: 16rpx;padding-right: 38rpx;}
  548. .videos{width: 260rpx;height: 180rpx;}
  549. .tit{font-weight: bold;font-size: 14px;color: #272727;text-align: left;margin-bottom: 10rpx;}
  550. .num{font-weight: 500;font-size: 20rpx;color: #666666;min-width: 68rpx;padding: 0 8rpx;box-sizing: border-box;
  551. height: 28rpx;background: #E6E6E6;border-radius: 14rpx;line-height: 28rpx;text-align: center;}
  552. .time{font-weight: 500;font-size: 24rpx;color: #AAAAAA;margin-top: 44rpx;}
  553. }
  554. // 名单
  555. .readlist{background: #FFFFFF;border-radius: 20rpx;border: 2rpx solid #E6E6E6;margin-bottom: 24rpx;padding: 24rpx;display: flex;align-items: center;box-sizing: border-box;
  556. .head{width: 96rpx;height: 96rpx;margin-right: 28rpx;flex: 0 0 auto;}
  557. .tit{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 12rpx;}
  558. .time{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;
  559. text{margin-right: 12rpx;display: inline-block;}
  560. }
  561. }
  562. .spdel{width: 164rpx;background: #EA2D2D;font-weight: bold;font-size: 26rpx;color: #FFFFFF;display: flex;align-items: center;justify-content: center;position: absolute;right: -146rpx;top: 0;bottom: 0;padding-left: 14rpx;}
  563. // 无数据
  564. .nodata{display: flex;flex-direction: column;align-items: center;
  565. image{width: 440rpx;height: 440rpx;}
  566. view{font-size: 30rpx;color: #666666;font-weight: bold;}
  567. }
  568. </style>