property/property_ui/service/components/car/list.vue

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<!-- 巡更地点patrol -->
		<block v-if="type=='patrollist'">
			<view class="patlist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.checkPointManageId)">
				<view class="pattop flexc">
					<image :src="home" class="imgs"></image>
					<view class="tit">{{ite.checkAddress}}</view>
					<view class="flex1"></view>
				</view>
				<view class="patlistr">
					<view class="clist"><view class="tit">巡检类型</view>：{{kaType(ite.checkType,xglxlist)}}</view>
					<view class="clist"><view class="tit">巡检时间</view>：{{ite.checkTime}}</view>
				</view>
				<view class="patbtns">
					<view class="btna" v-if="checkPermi(['wuYe:checkPointManage:edit'])" @click.stop="getDetail(ite.checkPointManageId)">修改</view>
					<view  class="btnc" v-if="checkPermi(['wuYe:checkPointManage:remove'])" @click.stop="getDelFn(ite.checkPointManageId)">删除</view>
				</view>
			</view>
		</block>
		<!-- 巡更记录patrol -->
		<block v-if="type=='patrol'">
			<view class="patlist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.checkPointRecordId)">
				<view class="pattop flexc">
					<image :src="home" class="imgs"></image>
					<view class="tit">{{ite.checkAddress}}</view>
					<view class="flex1"></view>
					<view class="txt cc" v-if="ite.checkStatus==2">已巡更</view>
					<view class="txt cd" v-else>未巡更</view>
				</view>
				<view class="patlistr">
					<view class="clist"><view class="tit">巡检类型</view>：{{kaType(ite.checkType,xglxlist)}}</view>
					<view class="clist"><view class="tit">巡检时间</view>：{{ite.checkTime}}</view>
					<!-- <view class="clist"><view class="tit">巡检人</view>：刘兵琦</view> -->
				</view>
				<view class="patbtns">
					<!-- v-if="ite.checkStatus==2" -->
					<!-- v-else -->
					<block v-if="checkPermi(['wuYe:checkPointRecord:query'])">
						<view class="btna" @click.stop="getDetail(ite.checkPointRecordId)" v-if="ite.checkStatus==2">查看</view>
						<view  class="btnb" @click.stop="getAddFn(ite.checkPointRecordId)" v-else>去巡更</view>
					</block>
					
					<view  class="btnc" v-if="checkPermi(['wuYe:checkPointRecord:remove'])" @click.stop="getDelFn(ite.checkPointRecordId)">删除</view>
				</view>
			</view>
		</block>
		<!-- 报修管理 -->
		<block v-if="type=='warranty'">
			<view class="bxlists" v-for="(ite,idx) in datainfo" :key="ite.repairId" >
				<view class="bxtop">
					<swiper v-if="ite.repairImages"  class="swiper" circular :indicator-color="incolorh" :indicator-active-color="activecolorh" :indicator-dots="indicatorDotsh" :autoplay="autoplay">
						<swiper-item v-for="(aite,aidx) in ite.repairImages" :key="aidx">
							<image :src="baseUrl+aite" @click="getPreviewImage(ite.repairImages,aidx)"></image>
						</swiper-item>
					</swiper>
					<view class="toptit mb10">{{ite.repairDetails}}</view>
					<view class="walist"><view class="tit">项目</view>：{{kaType(ite.maintenanceCategory,bxlbList)}}</view>
					<view class="walist"><view class="tit">报修门户</view>：{{ite.houseAddress}}</view>
					<view class="flexcw">
						<view class="walist"><view class="tit">报修时间</view>：{{ite.repairTime}}</view>
						<!-- <view class="walist" v-if="ite.type==3"><view class="tit" >完成时间</view>：{{ite.completionTime}}</view> -->
						<view class="btns">
							<view class="btn btna" v-if="checkPermi(['wuYe:repair:remove'])&&ite.repairStatus<2" @click.stop="getDelFn(ite.repairId)">删除</view>
							<view class="btn btnb" v-if="checkPermi(['wuYe:repair:assign'])&&ite.repairStatus==1" @click.stop="getAssignFn(ite)">指派</view>
							<block v-if="checkPermi(['wuYe:repair:edit'])&&userId==ite.staffUserId">
								<view class="btn btnc" v-if="ite.repairStatus==2" @click.stop="getCheckFn(ite)">我已上门</view>
								<view class="btn btnc" v-if="ite.repairStatus==3" @click.stop="getCheckFn(ite)">我已完成</view>
							</block>
							
						</view>
					</view>
				</view>
				<view class="bxsteps">
					<uni-collapse ref="collapse" >
						<uni-collapse-item title-border="none">
								<template v-slot:title>
									<view class="chtop flexc" >
										<view class="line"></view>
										<view>流程记录</view>
										<view class="flex1"></view>
										<!-- <image :src="upimg" class="upimg"></image> -->
									</view>
								</template>
								<view class="hfstep">
									<view class="hfslist flex" v-if="ite.repairStatus>3">
										<view class="limg flexccc">
											<image :src="cira" class="imga"></image>
										</view>
										<view class="flex1">
											<view class="hfstit co01">已完成 <text>{{ite.completionTime}}</text></view>
											<view class="hfstxt"><text @click.stop="getPhoneFn(ite.staffPhone)">【{{ite.staffName}} {{ite.staffPhone}}】</text>已完成报修业务</view>
											<view class="hfimgs flexcw" v-if="ite.completionPhoto&&ite.completionPhoto.length">
												<image :src="baseUrl+aite" @click="getPreviewImage(ite.completionPhoto,aidx)" v-for="(aite,aidx) in ite.completionPhoto" :key="aidx"></image>
											</view>
										</view>
									</view>
									<view class="hfslist flex" v-if="ite.repairStatus>2">
										<view class="limg flexccc">
											<image :src="cira" class="imga" v-if="ite.repairStatus==3"></image>
											<image :src="cirb" class="imgb" v-else></image>
										</view>
										<view class="flex1">
											<view class="hfstit">处理中 <text>{{ite.visitTime}}</text></view>
											<view class="hfstxt"><text @click.stop="getPhoneFn(ite.staffPhone)">【{{ite.staffName}} {{ite.staffPhone}}】</text>已上门处理中</view>
											<view class="hfimgs flexcw" v-if="ite.visitPhoto&&ite.visitPhoto.length">
												<image :src="baseUrl+aite" @click="getPreviewImage(ite.visitPhoto,aidx)" v-for="(aite,aidx) in ite.visitPhoto" :key="aidx"></image>
											</view>
										</view>
									</view>
									<view class="hfslist flex" v-if="ite.repairStatus>1">
										<view class="limg flexccc">
											<image :src="cira" class="imga" v-if="ite.repairStatus==2"></image>
											<image :src="cirb" class="imgb" v-else></image>
										</view>
										<view class="flex1">
											<view class="hfstit">待上门 <text>{{ite.assignTime}}</text></view>
											<view class="hfstxt">您的报修申请已派于<text @click.stop="getPhoneFn(ite.staffPhone)">【{{ite.staffName}} {{ite.staffPhone}}】</text>处理</view>
										</view>
									</view>
									<view class="hfslist flex" >
										<view class="limg flexccc">
											<image :src="cira" class="imga" v-if="ite.repairStatus==1"></image>
											<image :src="cirb" class="imgb" v-else></image>
										</view>
										<view class="flex1">
											<view class="hfstit">待指派 <text>{{ite.repairTime}}</text></view>
											<view class="hfstxt">您的报修申请已提交，请耐心等待</view>
										</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
				</view>
			</view>
		</block>
		<!-- 投诉建议 -->
		<block v-if="type=='complaint'">
			<view class="bxlists" v-for="(ite,idx) in datainfo" :key="ite.suggestionId">
				<view class="bxtop">
					<swiper v-if="ite.images"  class="swiper" circular :indicator-color="incolorh" :indicator-active-color="activecolorh" :indicator-dots="indicatorDotsh" :autoplay="autoplay">
						<!-- datainfo.images -->
						<swiper-item v-for="(aite,aidx) in ite.images" :key="aidx">
							<image :src="baseUrl+aite" @click="getPreviewImage(ite.images,aidx)"></image>
						</swiper-item>
					</swiper>
					<view class="toptit mb10">{{ite.content}}</view>
					<view class="fleccw">
						<view class="walist flex0"><view class="tit">提交时间</view>：{{ite.pushTime}}</view>
						<view class="btns">
							<view class="btn btna" v-if="checkPermi(['wuYe:suggestion:remove'])"  @click.stop="getDelFn(ite.suggestionId)">删除</view>
							<block v-if="checkPermi(['wuYe:suggestion:edit'])">
								<view class="btn btnd" v-if="ite.isPublic=='Y'"  @click.stop="getCloseFn(ite.suggestionId,'N')">不予公开</view>
								<view class="btn btnc" v-else  @click.stop="getCloseFn(ite.suggestionId,'Y')">公开</view>
								<view class="btn btnb" v-if="checkPermi(['wuYe:suggestion:edit'])&&ite.status==1" @click="getReplyFn(ite.suggestionId)">回复</view>
							</block>
							
						</view>
					</view>
				</view>
				<view class="bxsteps">
					<uni-collapse ref="collapse">
						<uni-collapse-item title-border="none">
								<template v-slot:title>
									<view class="chtop flexc" >
										<view class="line"></view>
										<view>交流记录</view>
										<view class="flex1"></view>
									</view>
								</template>
								<view class="hfstep">
									<view class="hfslist flex" v-if="ite.status==2">
										<view class="limg flexccc">
											<image :src="cira" class="imga"></image>
										</view>
										<view class="flex1">
											<view class="hfstit co01">已回复 <text>{{ite.replyTime}}</text></view>
											<view class="hfstxt">{{ite.replyContent}}</view>
											<!-- 附件 -->
											<block v-if="ite.suggestionFjList">
												<view class="fjlists"  v-for="(fite,fidx) in ite.suggestionFjList" :key='fidx'>
													<view class="flext" @click="getDownloader(fite.url)">
														<view class="imgl"><image :src="filico" ></image></view>
														<view class="tit">{{fite.name}}</view>
													</view>
												</view>
											</block>
											<!-- <view class="hfimgs flexcw">
												<image :src="cira"></image>
											</view> -->
										</view>
									</view>
									<view class="hfslist flex" >
										<view class="limg flexccc">
											<image :src="cira" class="imga" v-if="ite.status==1"></image>
											<image :src="cirb" class="imgb" v-else></image>
										</view>
										<view class="flex1">
											<view class="hfstit">已提交 <text>{{ite.pushTime}}</text></view>
											<view class="hfstxt">您的投诉建议已提交，请耐心等待</view>
										</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
				</view>
			</view>
			<!-- <view class="walists" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.suggestionId)"
				:data-idx="idx"
				@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'"
			>
				<view class="watop watopcom">
					<view class="watit">
						<view class="tit">{{ite.title}}</view>
						<view class="txt" :class="ite.status==1?'co01':'coa'">{{kaType(ite.status,tsjyList)}}</view>
					</view>
					<view class="watopcoma overtwo">{{ite.content}}</view>
					<view class="watopcomb">{{ite.createTime}}</view>
				</view>
				<view class="spdel" v-if="ite.right>0&&checkPermi(['wuYe:suggestion:remove'])" @click.stop="getDelFn(ite.suggestionId)">删除</view>
			</view> -->
			<!-- checkPermi(['system:menuFood:remove'])&& -->
			
		</block>
		<view class="shax">{{wtdt}}</view>
	</block>
	
	<!-- 无数据 -->
	<view class="nodata" v-else>
		<image :src="noiconpimg"></image>
		<view>
			暂无数据
		</view>
	</view>
</view>
</template>

<script>
	import {selectDictValue} from "@/utils/common.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import config from '@/config'
	export default{
		props:{
			datainfo: {
				type: Array,
				default () {
					return []
				}
			},
			wtdt:{
				type:String,
				default () {
					return ''
				}
			},
			type:{
				type:String,
				default () {
					return 0
				}
			},
			xglxlist:{
				type:Array,
				default () {
					return []
				}
			},
			tsjyList:{
				type:Array,
				default () {
					return []
				}
			},
			bxztList:{
				type:Array,
				default () {
					return []
				}
			},
			bxlbList:{
				type:Array,
				default () {
					return []
				}
			}
		},
		data(){
			return{
				noiconpimg:require("@/static/nodata.png"),
				car:require("@/car/static/car/car.png"),
				cara:require("@/car/static/car/cara.png"),
				carb:require("@/car/static/car/carb.png"),
				hicoa:require("@/people/static/people/hicoa.png"),
				hicob:require("@/people/static/people/hicob.png"),
				man:require("@/people/static/people/man.png"),
				woman:require("@/people/static/people/woman.png"),
				rimg:require("@/people/static/people/rimg.png"),
				pdel:require("@/people/static/people/pdel.png"),
				gzlx:require("@/people/static/people/gzlx.png"),
				mphone:require("@/people/static/people/mphone.png"),
				sfz:require("@/people/static/people/sfz.png"),
				eye:require("@/people/static/people/eye.png"),
				neye:require("@/people/static/people/neye.png"),
				time:require("@/work/static/manage/time.png"),
				house:require("@/work/static/manage/house.png"),
				housea:require("@/work/static/manage/housea.png"),
				home:require("@/service/static/service/home.png"),
				upimg:require("@/static/images/home/up.png"),
				star:require('@/manage/static/community/star.png'),
				stara:require('@/manage/static/community/stara.png'),
				cira:require('@/service/static/service/cira.png'),
				cirb:require('@/service/static/service/cirb.png'),
				filico:require('@/work/static/filico.png'),
				userId:this.$store.state.user.userId,
				autoplay:false,
				incolorh:'#C0C3C3',
				activecolorh:'#FFFFFF',
				indicatorDotsh: true,
				baseUrl:config.baseUrl,
				delBtnWidth:66,//左滑默认宽度
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			kaType(data, list) {
				return selectDictValue(list, data);
			},
			getDetail(e){
				this.$emit('getDetail',e)
			},
			getAddFn(e){
				this.$emit('getAddFn',e)
			},
			getReadlist(e){
				this.$emit('getReadlist',e)
			},
			getZhan(idx){
				// var obj=JSON.parse(JSON.stringify(this.datainfo))[idx]
				// obj.zhanflag=!obj.zhanflag;
				// this.datainfo.splice(idx,1,obj);
				this.datainfo[idx].zhanflag=!this.datainfo[idx].zhanflag
			},
			getHideFn(idx){
				this.datainfo[idx].hideflag=!this.datainfo[idx].hideflag
			},
			getPreview(idx,arr) {
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {},
					fail: function(err) {}
				});
			},
			getDelFn(id){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.$emit('getDelFn',id)
						} else if (res.cancel) {
						}
					}
				});
			},
			getAssignFn(ite){
				this.$emit('getAssignFn',ite)
			},
			getCheckFn(ite){
				this.$emit('getCheckFn',ite)
			},
			getReplyFn(id){
				this.$emit('getReplyFn',id)
			},
			getPhoneFn(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			getPreviewImage(arr,idx){
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {
						
					},
					fail: function(err) {
						
					}
				});
			},
			getCloseFn(id,type){
				var that=this;
				var str="不予公开"
				if(type=='Y'){
					str='公开'
				}
				uni.showModal({
					title: str,
					content: "是否确认"+str,
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							var param={}
							param.isPublic=type;
							param.suggestionId=id;
							that.$emit('getCloseFn',param)
							// suggestionlPut(param).then(res=>{
							// 	if(res.code==200){
							// 		uni.$emit("refSuggestion")
							// 		that.$toast(str+'成功')
							// 		setTimeout(function(){
							// 			that.getDetail()
							// 		},1200)
							// 	}
							// })
						} else if (res.cancel) {
						}
					}
				});
			},
			getDownloader(e){
				uni.showLoading({
					title: '加载中'
				});
				var url=this.baseUrl+e;
				let index1 = e.lastIndexOf("."); // 得到一个索引值
				let index2 = e.length;
				let type = e.substring(index1, index2);
				if ((type.indexOf('jpg') > -1 || type.indexOf('jpeg') > -1 || type.indexOf('png') > -1)) {
					uni.previewImage({
						current: 0,
						urls: [url],
						// background: '#ffffff'
					});
					uni.hideLoading();
				} else {
				uni.downloadFile({
					url: url,//文件的下载路径
					success(result) {
							uni.hideLoading()
						var filePath = result.tempFilePath;
						   uni.openDocument({
						     filePath: filePath,
						     showMenu: true,
						     success: function (res) {
						       // console.log('打开文档成功');
						     }
						   });
					},
					fail(res) {uni.hideLoading()}
				})
				}
			},
			//开始触摸滑动
			drawStart(e) {
				// console.log("开始触发");
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				// console.log("滑动");
				for (var index in this.datainfo) {
					// this.csListArrl[index].right=0
					this.$set(this.datainfo[index],'right',0);
				}
				var idx=e.currentTarget.dataset.idx
				var touch = e.touches[0];
				var item = this.datainfo[idx];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
				        if (disX > this.delBtnWidth) {
					    disX = this.delBtnWidth;
				        }
						// this.csListArrl[idx].right=disX
				        this.$set(this.datainfo[idx],'right',disX);
				} else {
					// this.csListArrl[idx].right=0
					this.$set(this.datainfo[idx],'right',0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				// console.log("滑动结束");
				var idx=e.currentTarget.dataset.idx
				var item = this.datainfo[idx];
				if (item.right >= this.delBtnWidth / 2) {
					// this.datainfo[idx].right=this.delBtnWidth
					this.$set(this.datainfo[idx],'right',this.delBtnWidth);
				} else {
					this.datainfo[idx].right=0
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.flex{display: flex;}
.flexc{display: flex;align-items: center;}
.mb10{margin-bottom: 20rpx;}
.carlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;
	.ctop{border-bottom: 2rpx solid #E5E5E5;padding:26rpx 24rpx;
		.imgs{width: 40rpx;height: 42rpx;margin-right: 30rpx;}
		.tit{font-size: 32rpx;color: #272727;font-weight: bold;margin-right: 14rpx;}
		.txt{font-weight: 500;font-size: 26rpx;
			&.ca{color: #3565ED;}
			&.cb{color: #FE5A0E;}	
			&.cc{color: #28C529;}	
		}
		.txta{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
		.num{font-size: 24rpx;color: #AAAAAA;}
	}
	.btn{height: 34rpx;border-radius: 18rpx;display: flex;align-items: center;justify-content: center;padding: 0 10rpx;font-size: 22rpx;margin-right: 24rpx;
		&.btna{border: 2rpx solid #06C770;color: #06C770;}
		&.btnb{border: 2rpx solid #3565ED;color: #3565ED;}
		&.btnc{border: 2rpx solid #FE5A0E;color: #FE5A0E;}
		&.btnbga{border: 1px solid #0156FE;color: #3565ED;background: #DFEAFF;height: 36rpx;}
		&.btnbgb{border: 1px solid #C1C1C1;color: #666666;background: #F1F1F1;height: 36rpx;}
		&.btnbgc{border: 1px solid #FE5A0E;color:#FE5A0E;background:#FFEEE6;height: 36rpx;}
	}
	.clists{padding: 24rpx 24rpx 8rpx;
		.clist{font-weight: 500;margin-bottom: 16rpx;
font-size: 26rpx;color: #272727;display: flex;line-height: 34rpx;
			.tit{font-size: 26rpx;color: #AAAAAA;flex: 0 0 auto;margin-right: 16rpx;min-width: 108rpx;text-align-last: justify;}
			.imgas{display: flex;align-items: center;flex-wrap: wrap;
				image{width: 142rpx;height: 142rpx;margin-right: 30rpx;margin-top: 8rpx;}
			}	
		}
		.w50{
			.clist{width: 50%;}
		}
	}
}
// 人员
.peolist{
	.ctop{padding: 24rpx 24rpx 22rpx;}
	.imgs{margin-right: 16rpx !important;}
	.tit{font-size: 28rpx !important;}
	.plists{padding: 30rpx 24rpx 6rpx;
		.plist{background: linear-gradient(-90deg, #F2F5FF 0%, #FBFDFF 100%);border-radius: 20rpx;border: 2rpx solid #E6E6E6;margin-bottom: 24rpx;padding: 18rpx 26rpx 4rpx;
		.head{width: 96rpx;height: 98rpx;margin-right: 32rpx;flex: 0 0 auto;}
		.ptit{font-weight: bold;font-size: 30rpx;color: #272727;display: flex;align-items: center;margin-bottom: 14rpx;}	
		.ptxt{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 14rpx;min-width: 176rpx;}
		}
	}
	.upimg{width: 26rpx;height: 22rpx;display: block;transform: rotate(180deg);transition: all 0.3s;margin: 0 auto 18rpx;
		&.act{transform: rotate(0deg);}
	}
}
// 物业费
.mlistl{width: 40%;display: flex;flex-direction: column;align-items: center;flex: 0 0 auto;
	.mltit{font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 18rpx;}
	.mltxt{font-weight: bold;font-size: 32rpx;color: #0156FE;}
}
.houselist{
	.clists{padding-bottom: 2rpx !important;}
	.clist{margin-bottom: 22rpx !important;}
}
// 巡更地点
.patlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;padding: 0 24rpx 30rpx;
	.pattop{padding:22rpx 30rpx;margin-bottom: 2rpx;
		.imgs{width: 28rpx;height: 28rpx;margin-right: 12rpx;flex: 0 0 auto;}
		.tit{font-size: 30rpx;color: #272727;font-weight: bold;margin-right: 14rpx;}
		.txt{font-weight: 500;font-size:24rpx;
			&.ca{color: #3565ED;}
			&.cb{color: #FE5A0E;}	
			&.cc{color: #28C529;}	
			&.cd{color: #FF6969;}	
		}
	}
	.patlistr{background: #EFF4FF;border-radius: 20rpx;padding: 20rpx 32rpx;
		.clist{font-weight: 500;font-size: 26rpx;color: #272727;display: flex;line-height: 50rpx;
			.tit{font-size: 26rpx;flex: 0 0 auto;min-width: 108rpx;text-align-last: justify;font-weight: bold;}
		}
	}
	.patbtns{display: flex;justify-content: flex-end;align-items: center;flex-wrap: wrap;
		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;
		&.btna{border: 2rpx solid #0256FD;color: #0256FD;}
		&.btnb{background: #0256FD;color: #ffffff;}
		&.btnc{border: 2rpx solid #FE5A0E;color: #FE5A0E;}
		
}
	}
}
// 报修
.bxlists{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;position: relative;
	.bxtop{padding: 30rpx 24rpx;position: relative;
		.swiper{width: 100%;height: 280rpx;border-radius: 20rpx;box-sizing: border-box;margin-bottom: 28rpx;overflow: hidden;
			image{width: 100%;height: 100%;}
		}
		.toptit{font-weight: bold;font-size: 28rpx;color: #161616;}
		.walist{display: flex;font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 16rpx;
			.tit{min-width: 100rpx;text-align-last: justify}
		}
		.btns{display: flex;flex-wrap: wrap;justify-content: flex-end;flex: 1 0 auto;}
		.btn{min-width: 120rpx;height: 54rpx;border-radius: 26rpx;font-weight: 500;font-size: 26rpx;text-align: center;line-height: 54rpx;padding: 0 10rpx;box-sizing: border-box; margin-bottom: 14rpx;margin-left: 12rpx;
			&.btna{border: 2rpx solid #FF6969;background: #FFF8F8;color: #FF6969;}
			&.btnb{background: #0256FD;color: #FFFFFF;}
		}
	}
	.bxsteps{border-top: 2rpx solid #E6E6E6;padding: 30rpx 0;
		.chtop{padding-right: 48rpx;
				.line{width: 14rpx;height: 48rpx;background: #0256FD;border-radius:0 12rpx 12rpx 0;margin-right: 18rpx;}
				view{font-weight: bold;font-size: 28rpx;color: #272727;}
				.upimg{width: 22rpx;height: 14rpx;flex: 0 0 auto;margin-left: 12rpx;transform: rotate(180deg);transition: all 0.3s;}
		}
		.fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 20rpx;
				&:last-child{margin-bottom: 0;}
				.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;flex: 0 0 auto;
					image{width: 26rpx;height: 24rpx;}
				}
				.tit{font-size: 26rpx;color: #222327;font-weight: 500;margin-top: 4rpx;word-break: break-all;}
			}
		.hfstep{padding: 0 32rpx 30rpx 36rpx;margin-top: 24rpx;
			.hfslist{padding-bottom: 20rpx;position: relative;
				&:first-child{
					.hfstit{color: #0156FE;}
				}
				&::before{content: '';position: absolute;left: 14rpx;top:14rpx;height: 100%;width: 2rpx;background: #E6E6E6;}
				.limg{width: 30rpx;height: 30rpx;margin-right: 22rpx;flex: 0 0 auto;margin-top:3rpx;
					.imga{width: 30rpx;height: 30rpx;}
					.imgb{width: 18rpx;height: 18rpx;}
				}
				.hfstit{font-weight: bold;font-size: 30rpx;color: #666666;line-height: 36rpx;margin-bottom: 20rpx;
					text{font-size: 26rpx;margin-left: 12rpx;}
				}
				.hfstxt{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 20rpx;}
				.hfimgs{padding-top: 2rpx;
					image{width: 84rpx;height: 84rpx;border-radius: 20rpx;margin-right: 40rpx;margin-bottom: 10rpx;}
				}
			}
		}
	}
}
.bxlists /deep/ .uni-swiper-dots-horizontal{left: 26rpx;transform: translate(0);}
.bxlists /deep/ .uni-swiper-dot{width: 10rpx;height: 10rpx;}
.bxlists /deep/ .uni-swiper-dot-active{width: 24rpx;height: 10rpx;}
// 维修人员
.stafflist{width: 344rpx;min-height: 256rpx;background: #FFFFFF;border-radius: 20rpx;margin:0 12rpx 24rpx 12rpx;padding-bottom: 20rpx;box-sizing: border-box;
	// &:nth-of-type(2n){margin-right: 0;}
	.statop{border-bottom: 2rpx solid #E5E5E5;display: flex;padding: 24rpx 24rpx 22rpx;
		.head{width: 80rpx;height: 82rpx;margin-right: 24rpx;flex: 0 0 auto;}
		.stadel{width: 30rpx;height: 30rpx;flex: 0 0 auto;margin-left: 12rpx;}
		.statit{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 4rpx;}
		.statxt{font-weight: 500;font-size: 26rpx;
			.cir{width: 10rpx;height: 10rpx;border-radius: 50%;margin-right: 14rpx;display: inline-block;
				&.bga{background: #06C770;}
				&.bgb{background: #FF6969;}
			}
		}
	}
	.stalist{font-weight: 500;font-size: 26rpx;color: #272727;display: flex;align-items: center;padding: 20rpx 24rpx 0;
		.imgs{width: 24rpx;height: 30rpx;margin-right: 22rpx;flex: 0 0 auto;display: flex;align-items: center;justify-content: center;
			.gzlximg{width: 24rpx;height: 28rpx;}
			.mphone{width: 18rpx;height: 30rpx;}
			.sfz{width: 20rpx;height: 18rpx;}
		}
		.eyes{width: 34rpx;height: 34rpx;
			.eye{width: 22rpx;height: 15rpx;}
			.neye{width: 24rpx;height: 24rpx;}
		}
	}
}
.watopcom{background-color: #ffffff;border-radius: 20rpx;position: relative;z-index: 1;padding-bottom: 30rpx !important;
	.watopcoma{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 24rpx;}
	.watopcomb{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
	
}
//资讯
.newlists{
	background: #FFFFFF;padding: 22rpx 24rpx;margin-bottom: 24rpx;
	border-radius: 20rpx;
	.tit{font-size: 32rpx;font-weight: bold;color: #272727;line-height: 48rpx;margin-bottom:16rpx;}
	.txt{font-size: 24rpx;color: #666666;line-height: 36rpx;margin-bottom: 32rpx;}
	.stabox{
		.time{font-weight: 500;font-size: 24rpx;color: #AAAAAA;line-height: 36rpx;}
		.btns{font-weight: 500;font-size: 22rpx;color: #666666;line-height: 36rpx;min-width: 100rpx;box-sizing: border-box;margin-left: 20rpx;
		.imga{width: 24rpx;height: 22rpx;margin-right: 8rpx;}
		.imgb{width: 24rpx;height: 18rpx;margin-right: 10rpx;}
		}
		
	}
}
// 视频
.videolists{
	background: #FFFFFF;margin-bottom: 24rpx;border-radius: 20rpx;
	.titbox{padding-top: 16rpx;padding-right: 38rpx;}
	.videos{width: 260rpx;height: 180rpx;}
	.tit{font-weight: bold;font-size: 14px;color: #272727;text-align: left;margin-bottom: 10rpx;}
	.num{font-weight: 500;font-size: 20rpx;color: #666666;min-width: 68rpx;padding: 0 8rpx;box-sizing: border-box;
height: 28rpx;background: #E6E6E6;border-radius: 14rpx;line-height: 28rpx;text-align: center;}
	.time{font-weight: 500;font-size: 24rpx;color: #AAAAAA;margin-top: 44rpx;}

}

// 名单
.readlist{background: #FFFFFF;border-radius: 20rpx;border: 2rpx solid #E6E6E6;margin-bottom: 24rpx;padding: 24rpx;display: flex;align-items: center;box-sizing: border-box;
	.head{width: 96rpx;height: 96rpx;margin-right: 28rpx;flex: 0 0 auto;}
	.tit{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 12rpx;}
	.time{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;
		text{margin-right: 12rpx;display: inline-block;}
	}
}
.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;}

//投诉建议
.bxlists{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;position: relative;
	.bxtop{padding: 30rpx 24rpx;position: relative;
		.swiper{width: 100%;height: 280rpx;border-radius: 20rpx;box-sizing: border-box;margin-bottom: 28rpx;overflow: hidden;
			image{width: 100%;height: 100%;}
		}
		.toptit{font-weight: bold;font-size: 28rpx;color: #161616;}
		.walist{display: flex;font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 16rpx;
			.tit{min-width: 100rpx;text-align-last: justify}
		}
		.btns{display: flex;flex-wrap: wrap;justify-content: flex-end;flex: 1 0 auto;}
		.btn{min-width: 120rpx;height: 54rpx;border-radius: 26rpx;font-weight: 500;font-size: 26rpx;text-align: center;line-height: 54rpx;padding: 0 10rpx;box-sizing: border-box; margin-bottom: 14rpx;margin-left: 12rpx;
			&.btna{border: 2rpx solid #FF6969;background: #FFF8F8;color: #FF6969;}
			&.btnb{background: #0256FD;color: #FFFFFF;}
			&.btnc{border: 2rpx solid #0156FE;background: #DFEAFF;color: #0156FE;}
			&.btnd{border: 2rpx solid #C1C1C1;background: #F1F1F1;color: #C1C1C1;}
		}
	}
	.bxsteps{border-top: 2rpx solid #E6E6E6;padding: 30rpx 0;
		.chtop{padding-right: 48rpx;
				.line{width: 14rpx;height: 48rpx;background: #0256FD;border-radius:0 12rpx 12rpx 0;margin-right: 18rpx;}
				view{font-weight: bold;font-size: 28rpx;color: #272727;}
				.upimg{width: 22rpx;height: 14rpx;flex: 0 0 auto;margin-left: 12rpx;transform: rotate(180deg);transition: all 0.3s;}
		}
		.fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 20rpx;
				&:last-child{margin-bottom: 0;}
				.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;flex: 0 0 auto;
					image{width: 26rpx;height: 24rpx;}
				}
				.tit{font-size: 26rpx;color: #222327;font-weight: 500;margin-top: 4rpx;word-break: break-all;}
			}
		.hfstep{padding: 0 32rpx 30rpx 36rpx;margin-top: 24rpx;
			.hfslist{padding-bottom: 20rpx;position: relative;
				&:first-child{
					.hfstit{color: #0156FE;}
				}
				&::before{content: '';position: absolute;left: 14rpx;top:14rpx;height: 100%;width: 2rpx;background: #E6E6E6;}
				.limg{width: 30rpx;height: 30rpx;margin-right: 22rpx;flex: 0 0 auto;margin-top:3rpx;
					.imga{width: 30rpx;height: 30rpx;}
					.imgb{width: 18rpx;height: 18rpx;}
				}
				.hfstit{font-weight: bold;font-size: 30rpx;color: #666666;line-height: 36rpx;margin-bottom: 20rpx;
					text{font-size: 26rpx;margin-left: 12rpx;}
				}
				.hfstxt{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 20rpx;}
				.hfimgs{padding-top: 2rpx;
					image{width: 84rpx;height: 84rpx;border-radius: 20rpx;margin-right: 40rpx;margin-bottom: 10rpx;}
				}
			}
		}
	}
}
.bxlists /deep/ .uni-swiper-dots-horizontal{left: 26rpx;transform: translate(0);}
.bxlists /deep/ .uni-swiper-dot{width: 10rpx;height: 10rpx;}
.bxlists /deep/ .uni-swiper-dot-active{width: 24rpx;height: 10rpx;}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>