property/user_ui/news/components/box/list.vue

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<!-- 社区资讯 -->
		<block v-if="type=='newssq'">
			<view class="walists" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.communityId)">
				<view class="watop">
					<view class="watit">
						<view class="tit">{{ite.communityTitle}}<text class="cir" v-if="ite.isInteraction=='Y'"></text></view>
					</view>
					<view class="wacoma overtwo"><rich-text v-if="ite.communityContent" :nodes="ite.communityContent"></rich-text></view>
					<view class="wacomb">{{ite.publishTime}}</view>
				</view>
				<view class="wabtn">
					<view>查看详情</view>
					<image :src="rimg"></image>
				</view>
			</view>
		</block>
		<!-- 新版投诉建议  @click="getDetail(ite.suggestionId)"-->
		<block v-if="type=='complaint'">
			<!-- @click.stop="getDetail(ite.repairId)" -->
			<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="walist"><view class="tit">提交时间</view>：{{ite.createTime}}</view>
					<view class="btns">
						<view class="btn btna" v-if="checkPermi(['wuYe:suggestion:remove'])"  @click.stop="getDelFn(ite.suggestionId)">删除</view>
						<!-- <view class="btn btnb" v-if="checkPermi(['wuYe:suggestion:edit'])&&ite.status==1">回复</view> -->
					</view>
				</view>
				<view class="bxsteps">
					<uni-collapse ref="collapse" v-model="value">
						<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>回复时间</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.createTime}}</text></view>
											<view class="hfstxt">您的投诉建议已提交，请耐心等待</view>
										</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
				</view>
			</view>
		</block>
		<block v-if="type=='bylcomplaint'">
			<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="wacoma overtwo">{{ite.content}}</view>
					<view class="wacomb">{{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>
		<!-- 党建资讯 -->
		<block v-if="type=='newsdj'">
			<view class="newlists" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.partyId)" 
			>
				<view class="tit">{{ite.partyTitle}}</view>
				<view class="txt overtwo"><rich-text v-if="ite.partyContent" :nodes="ite.partyContent"></rich-text></view>
				<view class="stabox flexc">
					<view class="time flex1">{{ite.publishTime}}</view>
					<view class="btns flexc" @click.stop="getScFn(ite,idx)">
						<image :src="star" class="imga" v-if="ite.isStars=='Y'"></image>
						<image :src="stara" class="imga" v-else></image>{{ite.starsCount||0}}
					</view>
					<view class="btns flexc">
						<image :src="eye" class="imgb"></image>{{ite.viewCount||0}}
					</view>
				</view>
		
			</view>
			<!-- checkPermi(['system:menuFood:remove'])&& -->
		</block>
		<!-- 评论信息 -->
		<block v-if="type=='comment'">
			<view class="pllist flex" v-for="(ite,idx) in datainfo" :key="`yj${idx}`">
				<image :src="ite.commentUser.avatar?baseUrl+ite.commentUser.avatar:head" class="head"></image>
				<view class="flex1 overh">
					<view class="flexat mb9 ">
						<view class="plname flex1 over">{{ite.commentUser.nickName}}</view>
						<view class="plrbtn flexc flex0" @click="getDzFn(ite.id,'2',ite.content,idx)">
							<image :src="nicond" v-if="ite.isLike=='Y'"></image>
							<image :src="niconb" class="imga" v-else></image>{{ite.likeCount}}
							<!-- <view>点赞</view> -->
						</view>
						<!-- <view class="plrbtn flexc flex0" @touchend.prevent="getHfFn('yjhf',ite,ite.id)">
							<image :src="niconf" class="imgd"></image>
							<image :src="niconb" class="imge"></image>2
						</view> -->
						<!-- <view class="plrbtn flexc flex0" @touchend.prevent="getHfFn('yjhf',ite,ite.id)">
							<image :src="nicone" class="imgb"></image>
							<view>回复</view>
						</view> -->
						<view class="plrbtn flexc flex0" @click="getDelFn(ite.id)" v-if="checkPermi(['wuYe:commentIndex:remove'])&&ite.isMyself=='Y'">
							<image :src="del" class="imgc"></image>
							<view class="cof4">删除</view>
						</view>
					</view>
					<view class="infotxt">
						<rich-text v-if="ite.content" :nodes="analyzeEmoji(ite.content)"></rich-text>
						<view class="flexc mt10">
							<view class="inforeply"  @touchend.prevent="getHfFn('yjhf',ite,ite.id)">回复</view>
							<view class="infotime">{{formatTimeDiff(ite.createTime)}}</view></view>
						</view>
						
					<!-- <view class="infotime">{{ite.createDate}}</view></view> -->
					<!-- 新二级回复 -->
					<view class="pllista" v-if="ite.childrenList&&ite.childrenList.length">
						<view class="flexat ptb3" v-for="(aite,aidx) in ite.childrenList" :key="`ej${aidx}`">
							<view class="plnamea flexcw flex1" @touchend.prevent="getHfFn('ejhf',aite,ite.id)">
								<view class="over namea">{{aite.commentUser.nickName}}</view>
								<block v-if="aite.toRoot=='Y'">
									<view class="plrep">回复</view>
									<view class="over namea">{{aite.targetUser.nickName}}</view>
								</block>：
								<rich-text v-if="aite.content" :nodes="analyzeEmoji(aite.content)"></rich-text>
							</view>
							<view class="plrbtn flexc flex0" @click="getDelFn(aite.id)" v-if="checkPermi(['wuYe:commentIndex:remove'])&&aite.isMyself=='Y'">
								<image :src="del" class="imgc"></image>
								<view class="cof4">删除</view>
							</view>
						</view>
					</view>
					<!-- 二级回复 -->
					<!-- <view class="pllist flex" v-for="(aite,aidx) in ite.childrenList" :key="`ej${aidx}`">
						<image :src="aite.commentUser.avatar?baseUrl+aite.commentUser.avatar:head" class="head"></image>
						<view class="flex1 overh">
							<view class="flexat mb14 ">
								<view class="plname flex1 over flexc">
									<view class="over">{{aite.commentUser.nickName}}</view>
									<block v-if="aite.toRoot=='Y'">
										<image :src="rimg" class="rimg"></image>
										<view class="over">{{aite.targetUser.nickName}}</view>
									</block>
								</view>
								<view class="plrbtn flexc flex0" @click="getDzFn(aite.id,'2',aite.content,idx,aidx,'ejdz')">
									<image :src="nicond" v-if="aite.isLike=='Y'"></image>
									<image :src="niconb" class="imga" v-else></image>
									<view>点赞</view>
								</view>
								<view class="plrbtn flexc flex0" @touchend.prevent="getHfFn('ejhf',aite,ite.id)">
									<image :src="nicone" class="imgb"></image>
									<view>回复</view>
								</view>
								<view class="plrbtn flexc flex0" @click="getDelFn(aite.id)" v-if="checkPermi(['wuYe:commentIndex:remove'])&&aite.isMyself=='Y'">
									<image :src="del" class="imgc"></image>
									<view class="cof4">删除</view>
								</view>
							</view>
							<view class="infotxt">
								<rich-text v-if="aite.content" :nodes="analyzeEmoji(aite.content)"></rich-text>
								<view class="infotime">{{aite.createDate}}</view></view>
						</view>
					</view> -->
					<view class="flexc" v-if="ite.childrenListCount>0">
						<view class="zhanbox flexc" v-if="ite.reachflag" @click.stop="getZhanFn(ite,idx)">
							<block v-if="ite.childrenList&&ite.childrenList.length">展开更多</block>
							<block v-else>展开{{ite.childrenListCount}}条回复</block>
							<image :src="upimg" class="zhan"></image>
						</view>
						<view v-if="ite.childrenList&&ite.childrenList.length" class="zhanbox flexc ml10" @click.stop="getShouFn(idx)">收起<image :src="upimg"></view>
					</view>
					<!-- <view style="height: 16rpx;" v-else></view>	 -->
				</view>
			</view>
		</block>
		<view class="shax" v-if="wtdt">{{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
				}
			},
			tsjyList:{
				type:Array,
				default () {
					return []
				}
			}
		},
		data(){
			return{
				noiconpimg:require("@/static/images/nodata.png"),
				rimg:require('@/static/images/rimg.png'),
				stara:require('@/news/static/news/stara.png'),
				star:require('@/news/static/news/starb.png'),
				eye:require('@/news/static/news/eye.png'),
				nicona:require('@/news/static/news/nicona.png'),
				niconb:require('@/news/static/news/niconb.png'),
				niconc:require('@/news/static/news/niconc.png'),
				nicond:require('@/news/static/news/nicond.png'),
				nicone:require('@/news/static/news/nicone.png'),
				niconf:require('@/news/static/news/niconf.png'),
				cira:require('@/news/static/complaint/cira.png'),
				cirb:require('@/news/static/complaint/cirb.png'),
				del:require('@/news/static/news/delb.png'),
				head:require('@/news/static/news/head.png'),
				upimg:require('@/mine/static/house/up.png'),
				filico:require('@/news/static/complaint/filico.png'),
				baseUrl:config.baseUrl,
				delBtnWidth:66,//左滑默认宽度
				userId:this.$store.state.user.userId,
				value:[],
				autoplay:false,
				incolorh:'#C0C3C3',
				activecolorh:'#FFFFFF',
				indicatorDotsh: true,
				OwOlist: [
				        //表情包和表情路径
				        { title: "微笑", url: "weixiao.gif" },
				        { title: "嘻嘻", url: "xixi.gif" },
				        { title: "哈哈", url: "haha.gif" },
				        { title: "可爱", url: "keai.gif" },
				        { title: "可怜", url: "kelian.gif" },
				        { title: "挖鼻", url: "wabi.gif" },
				        { title: "吃惊", url: "chijing.gif" },
				        { title: "害羞", url: "haixiu.gif" },
				        { title: "挤眼", url: "jiyan.gif" },
				        { title: "闭嘴", url: "bizui.gif" },
				        { title: "鄙视", url: "bishi.gif" },
				        { title: "爱你", url: "aini.gif" },
				        { title: "泪", url: "lei.gif" },
				        { title: "偷笑", url: "touxiao.gif" },
				        { title: "亲亲", url: "qinqin.gif" },
				        { title: "生病", url: "shengbing.gif" },
				        { title: "太开心", url: "taikaixin.gif" },
				        { title: "白眼", url: "baiyan.gif" },
				        { title: "右哼哼", url: "youhengheng.gif" },
				        { title: "左哼哼", url: "zuohengheng.gif" },
				        { title: "嘘", url: "xu.gif" },
				        { title: "衰", url: "shuai.gif" },
				        { title: "吐", url: "tu.gif" },
				        { title: "哈欠", url: "haqian.gif" },
				        { title: "抱抱", url: "baobao.gif" },
				        { title: "怒", url: "nu.gif" },
				        { title: "疑问", url: "yiwen.gif" },
				        { title: "馋嘴", url: "chanzui.gif" },
				        { title: "拜拜", url: "baibai.gif" },
				        { title: "思考", url: "sikao.gif" },
				        { title: "汗", url: "han.gif" },
				        { title: "困", url: "kun.gif" },
				        { title: "睡", url: "shui.gif" },
				        { title: "钱", url: "qian.gif" },
				        { title: "失望", url: "shiwang.gif" },
				        { title: "酷", url: "ku.gif" },
				        { title: "色", url: "se.gif" },
				        { title: "哼", url: "heng.gif" },
				        { title: "鼓掌", url: "guzhang.gif" },
				        { title: "晕", url: "yun.gif" },
				        { title: "悲伤", url: "beishang.gif" },
				        { title: "抓狂", url: "zhuakuang.gif" },
				        { title: "黑线", url: "heixian.gif" },
				        { title: "阴险", url: "yinxian.gif" },
				        { title: "怒骂", url: "numa.gif" },
				        { title: "互粉", url: "hufen.gif" },
				        { title: "书呆子", url: "shudaizi.gif" },
				        { title: "愤怒", url: "fennu.gif" },
				        { title: "感冒", url: "ganmao.gif" },
				        { title: "心", url: "xin.gif" },
				        { title: "伤心", url: "shangxin.gif" },
				        { title: "猪", url: "zhu.gif" },
				        { title: "熊猫", url: "xiongmao.gif" },
				        { title: "兔子", url: "tuzi.gif" },
				        { title: "喔克", url: "ok.gif" },
				        { title: "耶", url: "ye.gif" },
				        { title: "棒棒", url: "good.gif" },
				        { title: "不", url: "no.gif" },
				        { title: "赞", url: "zan.gif" },
				        { title: "来", url: "lai.gif" },
				        { title: "弱", url: "ruo.gif" },
				        { title: "草泥马", url: "caonima.gif" },
				        { title: "神马", url: "shenma.gif" },
				        { title: "囧", url: "jiong.gif" },
				        { title: "浮云", url: "fuyun.gif" },
				        { title: "给力", url: "geili.gif" },
				        { title: "围观", url: "weiguan.gif" },
				        { title: "威武", url: "weiwu.gif" },
				        { title: "话筒", url: "huatong.gif" },
				        { title: "蜡烛", url: "lazhu.gif" },
				        { title: "蛋糕", url: "dangao.gif" },
				        { title: "发红包", url: "fahongbao.gif" },
				      ],
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			kaType(data, list) {
				return selectDictValue(list, data);
			},
			getDetail(e){
				this.$emit('getDetail',e)
			},
			// 格式时间
			formatTimeDiff(targetStr) {
			    const targetDate = new Date(targetStr);
			    const now = new Date();
			    const diffInSeconds = Math.floor((now - targetDate) / 1000);
			    
			    if (diffInSeconds < 60) {
			        return "刚刚";
			    } else if (diffInSeconds < 3600) {
			        const minutes = Math.floor(diffInSeconds / 60);
			        return `${minutes}分钟前`;
			    } else if (diffInSeconds < 86400) {
			        const hours = Math.floor(diffInSeconds / 3600);
			        return `${hours}小时前`;
			    } else {
			        return targetDate.toISOString().slice(0, 16).replace("T", " ");
			    }
			},
			analyzeEmoji(cont){
			      //编译表情替换成图片展示出来
			      var pattern1 = /\[[\u4e00-\u9fa5]+\]/g;
			      var pattern2 = /\[[\u4e00-\u9fa5]+\]/;
			      var content = cont.match(pattern1);
			      var str = cont;
			      if (content) {
			        for (var i = 0; i < content.length; i++) {
			          for (var j = 0; j < this.OwOlist.length; j++) {
			            if ("[" + this.OwOlist[j].title + "]" == content[i]) {
			              var src = this.OwOlist[j].url;
			              break;
			            }
			          }
			          var s = require("./img/face/" + src);
			          var imoj = "<img src='" + s + "'/>";
			
			          str = str.replace(pattern2, imoj);
			        }
			      }
			      return str;
			    },
			getZhanFn(ite,idx){
				var obj={
					ite:ite,
					idx:idx
				}
				this.$emit("getZhanFn",obj)
			},
			getDzFn(id,type,content,idx,aidx,atype){
				var obj={
					id:id,
					type:type,
					content:content,
					idx:idx,
					aidx:aidx,
					atype:atype
				}
				this.$emit("getDzFn",obj)
			},
			getScFn(ite,idx){
				var obj={
					ite:ite,
					idx:idx
				}
				this.$emit("getScFn",obj)
			},
			getHfFn(type,ite,id){
				var cuser=JSON.parse(JSON.stringify(ite.commentUser))
				var obj={
					parentId:id,
					toUserId:cuser.id,
					toNickName:cuser.nickName,
					toAvatar:cuser.avatar,
					type:type||""
				}
				this.$emit("getHfFn",obj)
			},
			getShouFn(idx){
				this.$emit("getShouFn",idx)
			},
			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) {
						}
					}
				});
			},
			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) {
						
					}
				});
			},
			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;}
// 社区
.walists{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;    position: relative;
	.watop{
		padding: 0 36rpx 30rpx 38rpx;
		.watit{padding: 24rpx 0;margin-bottom: 4rpx;display: flex;
			.tit{font-weight: bold;font-size: 28rpx;color: #272727;flex: 1;
				.cir{width: 14rpx;margin-left: 8rpx;margin-bottom: 10rpx;height: 14rpx;display: inline-block;background: #FF6969;border-radius: 8rpx;}
			}
			.txt{font-weight: bold;font-size: 26rpx;flex: 0 0 auto;
			}
		}
		.wacoma{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 24rpx;}
		.wacomb{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
	}
	.watopcom{background-color: #ffffff;border-radius: 20rpx;position: relative;z-index: 1;}
	.wabtn{display: flex;align-items: center;justify-content: space-between;border-top: 2rpx solid #E5E5E5;height: 80rpx;padding: 0 38rpx;
		view{font-weight: 500;font-size: 24rpx;color: #666666;}
		image{width: 16rpx;height: 28rpx;}
	}
}
.rimg{width: 16rpx;height: 28rpx;margin: 0 10rpx;flex: 0 0 auto;}
.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;}
//资讯
.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;}
		.imgc{width: 26rpx;height: 26rpx;margin-right: 10rpx;}
		}	
	}
}
//评论
.pllist{margin-bottom: 40rpx;
	&:last-child{margin-bottom: 0;}
	.head{width: 40rpx;height: 40rpx;margin-right: 18rpx;flex: 0 0 auto;border-radius: 50%;}
	.plname{font-size: 30rpx;color: #161616;font-weight: bold;
	}
	.plrbtn{margin-left: 36rpx;
		image{width: 26rpx;height: 24rpx;margin-right: 16rpx;
			&.imga{width: 26rpx;height: 26rpx;}
			&.imgb{width: 26rpx;height: 22rpx;}
			&.imgd{width: 26rpx;height: 24rpx;margin-right: 10rpx;}
			&.imge{width: 26rpx;height: 26rpx;transform: rotate(180deg);}
		}
		view{font-weight: bold;font-size: 24rpx;color: #314081;}
	}
	// margin-bottom: 30rpx;
	.infotxt{font-weight: 500;font-size: 26rpx;color: #161616;line-height: 40rpx;
		&:before {content: "";float: right;width: 0;height: calc(100% - 16px);background: red;}
		.inforeply{min-width: 86rpx;height: 42rpx;background: #F8F8F8;border-radius: 20rpx; margin-right: 22rpx;font-weight: 500;
font-size: 24rpx;text-align: center;padding: 0 8rpx;box-sizing: border-box;line-height: 42rpx;display: inline-block;
color: #161616;}
		.infotime{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
		// .infotime{font-weight: 500;font-size: 24rpx;color: #666666; float: right;clear: both;}	
		image{width: 44rpx;height: 44rpx;}
	}
	.pllista{background: #F8F8F8;padding:12rpx 24rpx;border-radius: 10rpx;margin-top: 40rpx;
		.plnamea{font-size: 26rpx;color: #161616;line-height: 40rpx;
			.namea{font-weight: bold;max-width: 160rpx;}
			.plrep{color: #AAAAAA;margin: 0 10rpx;}
		}
	}
	.zhanbox{font-weight: 500;font-size: 24rpx;color: #AAAAAA;padding-bottom: 16rpx;margin-top: 16rpx;
		image{width: 20rpx;height: 12rpx;margin-left: 18rpx;transition: all 0.3s;
			&.zhan{transform: rotate(-180deg);}
		}
	}
}
//投诉建议
.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{position: absolute;right: 26rpx;bottom: 20rpx;}
		.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;
			&.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;}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>