zhihuixiaoyuan2-ui/components/shlist/list.vue

<template>
  <view>
		<view v-if="datalist.length>0">
			<block v-if="zhtype==2">
				<view class="shlist" v-for="(ite,idx) in datalist" :key="idx">
					<view class="tittop flexc mb6">
						<view class="f17 fw co16 flex1">{{ite.userName}}</view>
						<view class="tsbtn co1" v-if="ite.isPass==1">待审核</view>
						<view class="tsbtn co2" v-if="ite.isPass==2">已通过</view>
						<view class="tsbtn co3" v-if="ite.isPass==3">已拒绝</view>
					</view>
					<view class="plr12">
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">学校：</view>
							<view class="f15 co6 flex1">{{ite.schoolName}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">班级：</view>
							<view class="f15 co6 flex1">
								<block v-for="(mite,midx) in ite.registerTeacherClassList" :key="midx">{{mite.className}};
								</block>
							</view>
						</view>
						<view class="list flexc">
							<view class="ptb4 flext flex1">
								<view class="f15 co16 flex0 fw5">学科：</view>
								<view class="f15 co6 flex1">
									<block v-for="(mite,midx) in ite.registerTeacherClassList" :key="midx">{{mite.discipline}};
									</block>
								</view>
							</view>
							<block v-if="!ite.opinion">
								<view class="btn btn1" @click="getPass(ite.id)" v-if="ite.isPass==1&&checkPermi(['audit:shyj:add'])">通过</view>
								<view class="btn btn2" @click="getSefuse(ite.id)" v-if="ite.isPass==1&&checkPermi(['audit:shyj:add'])">拒绝</view>
								<view class="btn btn3" @click="getDel(ite.id)" v-if="checkPermi(['register:teacher:remove'])">删除</view>
							</block>
							
						</view>
						<view class="list flexc" v-if="ite.opinion">
							<view class="ptb4 flext flex1">
								<view class="f15 co16 flex0 fw5">审核意见：</view>
								<view class="f15 co6 flex1">
									{{ite.opinion}}
								</view>
							</view>
							<view class="btn btn1" @click="getPass(ite.id)" v-if="ite.isPass==1&&checkPermi(['audit:shyj:add'])">通过</view>
							<view class="btn btn2" @click="getSefuse(ite.id)" v-if="ite.isPass==1&&checkPermi(['audit:shyj:add'])">拒绝</view>
							<view class="btn btn3" @click="getDel(ite.id)" v-if="checkPermi(['register:teacher:remove'])">删除</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 家长 -->
			<block v-if="zhtype==3" >
				<view class="shlist" v-for="(ite,idx) in datalist" :key="idx">
					<view class="tittop flexc mb6">
						<view class="f17 fw co16 flex1">{{ite.parentsName}}<text class="ml6">{{ite.parentsPhone}}</text></view>
						<view class="tsbtn co1" v-if="ite.isPass==1">待审核</view>
						<view class="tsbtn co2" v-if="ite.isPass==2">已通过</view>
						<view class="tsbtn co3" v-if="ite.isPass==3">已拒绝</view>
					</view>
					<view class="plr12">
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">学校：</view>
							<view class="f15 co6 flex1">{{ite.schoolName}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">班级：</view>
							<view class="f15 co6 flex1">{{ite.className}}</view>
						</view>
						<view class="list flext ptb4" v-if="ite.studentName">
							<view class="f15 co16 flex0 fw5">学生姓名：</view>
							<view class="f15 co6 flex1">{{ite.studentName}}</view>
						</view>
						<view class="list flext ptb4" v-if="ite.studentNumber">
							<view class="f15 co16 flex0 fw5">身份证号：</view>
							<view class="f15 co6 flex1">{{ite.studentNumber}}</view>
						</view>
						<view class="list flexc">
							<view class="ptb4 flext flex1"></view>
							<view class="btn btn1" @click="getPass(ite.id)" v-if="ite.isPass==1&&checkPermi(['audit:shyj:add'])">通过</view>
							<view class="btn btn2" @click="getSefuse(ite.id)" v-if="ite.isPass==1&&checkPermi(['audit:shyj:add'])">拒绝</view>
							<view class="btn btn3" @click="getDel(ite.id)" v-if="checkPermi(['register:student:remove'])">删除</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 调课 -->
			<block v-if="zhtype==4">
				<view class="shlist" v-for="(ite,idx) in datalist" :key="idx">
					<view class="tittop flexc mb6">
						<view class="f17 fw co16 flex1">{{ite.applyName}}</view>
						<view class="tsbtn co1" v-if="ite.isPass==1">待审核</view>
						<view class="tsbtn co2" v-if="ite.isPass==2">已通过</view>
						<view class="tsbtn co3" v-if="ite.isPass==3">已拒绝</view>
						<!-- <view class="tsbtn co2">已通过</view>
						<view class="tsbtn co3">已拒绝</view> -->
					</view>
					<view class="plr12">
						<!-- <view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">申请时间：</view>
							<view class="f15 co6 flex1">{{ite.applyTime}}</view>
						</view> -->
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">调课班级：</view>
							<view class="f15 co6 flex1">{{ite.subjectClass}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">调课科目：</view>
							<view class="f15 co6 flex1">{{ite.subject}}/{{ite.subjectTime}}/{{kaType(ite.subjectWeek,week)}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">被调科目：</view>
							<view class="f15 co6 flex1">{{ite.beSubject}}/{{ite.beSubjectTime}}/{{kaType(ite.week,week)}}</view>
						</view>
						<!-- <view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">时间(星期)：</view>
							<view class="f15 co6 flex1">{{kaType(ite.week,week)}}</view>
						</view> -->
						<view class="list flext ptb4" v-if='ite.content'>
							<view class="f15 co16 flex0 fw5">调课内容：</view>
							<view class="f15 co6 flex1">{{ite.content}}</view>
						</view>
						<view class="list flexc">
							<view class="flex1"><block v-if="ite.opinion">拒绝理由：{{ite.opinion||''}}</block></view>
							<view class="btn btn1" @click="getPass(ite)" v-if="ite.isPass==1&&checkPermi(['course:change:reply'])">通过</view>
							<view class="btn btn2" @click="getSefuse(ite)" v-if="ite.isPass==1&&checkPermi(['course:change:reply'])">拒绝</view>
							<view class="btn btn3" @click="getDel(ite)" v-if="checkPermi(['course:change:remove'])&&ite.applyId==userId">删除</view>
							<!-- <view class="btn btn1" @click="getUpdate(ite.id)" v-if="checkPermi(['course:change:edit'])&&ite.isPass!=2&&ite.applyId==userId">修改</view> -->
						</view>
					</view>
				</view>
			</block>
			
			<!-- 调课通知 -->
			<block v-if="zhtype==5">
				<view class="shlist" v-for="(ite,idx) in datalist" :key="idx">
					<view class="tittop flexc mb8">
						<view class="f17 f5 co47 flex1">{{ite.subject}} </view>
						<!-- <span style="margin-left: 20rpx;">{{ite.applyName}}</span> -->
						<view class="f14 f5 co47 flex0">{{ite.subjectTime}}/{{kaType(ite.week,week)}}</view>
					</view>
					<view class="plr12">
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">调课班级：</view>
							<view class="f15 co6 flex1">{{ite.subjectClass}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">被调课班级：</view>
							<view class="f15 co6 flex1">{{ite.beSubject}}/{{ite.beSubjectTime}}/{{kaType(ite.week,week)}}</view>
						</view>
						<view class="list flext ptb4" v-if='ite.content'>
							<view class="f15 co16 flex0 fw5">调课内容：</view>
							<view class="f15 co6 flex1">{{ite.content}}</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 动态 -->
			<block v-if="zhtype==6">
				<view class="dtlist" v-for="(ite,idx) in datalist" :key="idx" @click="getDetail(ite.noticeId)">
					<view class="flext">
						<image v-if='ite.avatar' :src="baseUrl+ite.avatar" class="listl"></image>
						<image v-else :src="avatar" class="listl"></image>
						<view class="listr">
							<view class="top">
								<view class="f17 co16 fw5 flex0" v-if="ite.senderName">{{ite.senderName}}</view>
								<view class="f14 co6 flex1 ml6 txr" v-if="ite.schoolName">{{ite.schoolName}}</view>
							</view>
							<view>
								<view class="f15 co16 mb8" v-if="ite.noticeContent">{{ite.noticeContent}}</view>
								<view class="imgs" v-if="ite.photo">
									<image :src="baseUrl+pit" :class="ite.photo.length==0?'img1':''"  v-for="(pit,pid) in ite.photo" :key="pid" @click.stop="getPreview(ite.photo,pit)"></image>
								</view>
							</view>
							<view class="flexcj">
								<view class="f13 coa">{{ite.createTime}}</view>
								
								<view class="trsta flexc">
									<view class="trstal">
										<image :src="tricong"></image>
										<!-- <view class="cir">2</view> -->
									</view>
									<view class="trstal">
										<image :src="triconb"></image>
										<!-- <view class="cir">2</view> -->
									</view>
									<view class="trstal">
										<image :src="triconc"></image>
									</view>
									<view class="trstal">
										<image :src="tricond"></image>
									</view>
								</view>
								<!-- 暂放end -->
								<!-- <view class="delbox">
									<image :src="tddelimg"></image>
									<view>删除</view>
								</view> -->
							</view>
							<!-- <view class="f14 coa"></view> -->
						</view>
					</view>
					<!-- 评论 -->
					<view class="trcom mt15" style="display: none;">
						<view class="trcomz flext">
							<view class="trcoml">
								<image :src="triconc"></image>
							</view>
							<view class="trcomr">
								<image :src="avatar"></image>
							</view>
						</view>
						<view class="trcomp flext">
							<view class="trcoml">
								<image :src="triconb"></image>
							</view>
							<view class="flex1">
								<view class="trcompr flext">
									<image v-if='ite.avatar' :src="baseUrl+ite.avatar" class="listl"></image>
									<image v-else :src="avatar" class="listl"></image>
									<view>
										<view class="flexcj mb5">
											<view  class="f13 fw c37 lh20">王运营</view>
											<view class="f13 co6">6月23日 14:15</view>
										</view>
										<view class="f13 co16 fw5 lh20">好的，收到！我们家长一定会督促孩子完成英语作 业，保质保量的完成！</view>
									</view>
								</view>
							</view>
							
						</view>
					</view>
					
				</view>
			</block>
			<!-- 查询注册结果 -->
			<block v-if="zhtype==7">
				<view class="shlist" v-for="(ite,idx) in datalist" :key="idx">
					<view class="tittop flexc mb6">
						<view class="f17 fw co16 flex1">
							<block v-if="ite.zctype=='school'">学校管理员</block>
							<block v-if="ite.zctype=='teacher'">老师</block>
							<block v-if="ite.zctype=='parents'">家长</block>
						<!-- {{ite.zctype}} -->
						
						</view>
						<view class="tsbtn co1" v-if="ite.isPass==1">待审核</view>
						<view class="tsbtn co2" v-if="ite.isPass==2">已通过</view>
						<view class="tsbtn co3" v-if="ite.isPass==3">已拒绝</view>
					</view>
					<!-- 学校 -->
					<view class="plr12" v-if="ite.zctype=='school'">
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">学校：</view>
							<view class="f15 co6 flex1">{{ite.schoolName}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">负责人：</view>
							<view class="f15 co6 flex1">{{ite.userName}}</view>
						</view>
						<view class="list flexc">
							<view class="ptb4 flext flex1">
								<view class="f15 co16 flex0 fw5">联系方式：</view>
								<view class="f15 co6 flex1">{{ite.userPhone}}</view>
							</view>
							<view class="btn btn3" v-if="!ite.opinion&&ite.isPass!='2'&&!ite.registerSchoolFileList" @click="getUpdate(ite)" >修改</view>
						</view>
						<view class="list flex" v-if="ite.registerSchoolFileList&&ite.registerSchoolFileList.length">
							<view class="ptb4 flext flex1">
								<view class="f15 co16 flex0 fw5">资质：</view>
								<view class="cldelistbf flexc"  v-for="(fite,fidx) in ite.registerSchoolFileList" :key='fite.id'>
									<view class="flext f15 co16 flex1" @click="getDown(fite.url)">
										<view class="imgl"><image :src="wimg" ></image></view>
										<view class="tit">{{fite.name}}</view>
									</view>
								</view>
							</view>
							<view class="btn btn3 " style="margin-top: 6rpx;" v-if="!ite.opinion&&ite.isPass!='2'" @click="getUpdate(ite)" >修改</view>
						</view>
						<view class="list flexc" v-if="ite.opinion">
							<view class="ptb4 flext flex1">
								<view class="f15 co16 flex0 fw5">审核意见：</view>
								<view class="f15 co6 flex1">
									{{ite.opinion}}
								</view>
							</view>
							<view class="btn btn3" @click="getUpdate(ite)" v-if="ite.isPass!='2'">修改</view>
						</view>
					</view>
					<view class="plr12" v-if="ite.zctype=='teacher'">
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">学校：</view>
							<view class="f15 co6 flex1">{{ite.schoolName}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">姓名：</view>
							<view class="f15 co6 flex1">{{ite.userName}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">联系方式：</view>
							<view class="f15 co6 flex1">{{ite.userPhone}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">班级：</view>
							<view class="f15 co6 flex1">
								<block v-for="(mite,midx) in ite.registerTeacherClassList" :key="midx">{{mite.className}};
								</block>
							</view>
						</view>
						<view class="list flexc">
							<view class="ptb4 flext flex1">
								<view class="f15 co16 flex0 fw5">学科：</view>
								<view class="f15 co6 flex1">
								<block v-for="(mite,midx) in ite.registerTeacherClassList" :key="midx">{{mite.discipline}};</block>
								</view>
							</view>
							<view class="btn btn3" v-if="!ite.opinion&&ite.isPass!='2'" @click="getUpdate(ite)">修改</view>
						</view>
						<view class="list flexc" v-if="ite.opinion">
							<view class="ptb4 flext flex1">
								<view class="f15 co16 flex0 fw5">审核意见：</view>
								<view class="f15 co6 flex1">
									{{ite.opinion}}
								</view>
							</view>
							<view class="btn btn3" @click="getUpdate(ite)" v-if="ite.isPass!=='2'">修改</view>
						</view>
					</view>
					<block v-if="ite.zctype=='parents'">
						<view class="plr12">
							<view class="list flext ptb4">
								<view class="f15 co16 flex0 fw5">学校：</view>
								<view class="f15 co6 flex1">{{ite.schoolName}}</view>
							</view>
							<view class="list flext ptb4">
								<view class="f15 co16 flex0 fw5">班级：</view>
								<view class="f15 co6 flex1">{{ite.className}}</view>
							</view>
							<view class="list flexc">
								<view class="ptb4 flext flex1">
									<view class="f15 co16 flex0 fw5">学生姓名：</view>
									<view class="f15 co6 flex1">{{ite.studentName}}</view>
								</view>
								<view class="btn btn3" v-if="!ite.opinion&&ite.isPass!=='2'" @click="getUpdate(ite)">修改</view>
							</view>
							<view class="list flexc" v-if="ite.opinion">
								<view class="ptb4 flext flex1">
									<view class="f15 co16 flex0 fw5">审核意见：</view>
									<view class="f15 co6 flex1">
										{{ite.opinion}}
									</view>
								</view>
								<view class="btn btn3" @click="getUpdate(ite)" v-if="ite.isPass!=='2'">修改</view>
							</view>
						</view>
					</block>
					
				</view>
			</block>
			<!-- 家长添加学生 -->
			<block v-if="zhtype==8">
				<view class="shlist" v-for="(ite,idx) in datalist" :key="idx">
					<view class="tittop flexc mb6">
						<view class="f17 fw co16 flex1">{{ite.studentName}}</view>
						<view class="tsbtn co1" v-if="ite.isPass==1">待审核</view>
						<view class="tsbtn co2" v-if="ite.isPass==2">已通过</view>
						<view class="tsbtn co3" v-if="ite.isPass==3">已拒绝</view>
					</view>
					<view class="plr12">
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">学校：</view>
							<view class="f15 co6 flex1">{{ite.schoolName}}</view>
						</view>
						<view class="list flext ptb4">
							<view class="f15 co16 flex0 fw5">班级：</view>
							<view class="f15 co6 flex1">{{ite.className}}</view>
							<view class="btn btn3" v-if="!ite.opinion&&ite.isPass!=='2'" @click="getUpdate(ite)">修改</view>
							<view class="btn btn3" @click="getDel(ite)" v-if="ite.isPass=='2'">删除</view>
						</view>
						<view class="list flexc" v-if="ite.opinion">
							<view class="ptb4 flext flex1">
								<view class="f15 co16 flex0 fw5">审核意见：</view>
								<view class="f15 co6 flex1">
									{{ite.opinion}}
								</view>
							</view>
							<!-- checkPermi(['register:student:remove'])&& -->
							<view class="btn btn3" @click="getUpdate(ite)" v-if="ite.isPass!=='2'">修改</view>
							<view class="btn btn3" @click="getDel(ite)" v-if="ite.isPass=='2'">删除</view>
						</view>
					</view>
				</view>
			</block>
			<view class="shax" v-if="wtdt">{{wtdt}}</view>
	   </view>
	   <block v-else>
			<no-data ></no-data>
	   </block>
  </view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import noData from "@/components/nodata/nodata.vue"
	import { selectDictValue } from '@/utils/common.js';
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  export default {
	  props:{
	  	datalist: {
	  		type: Array,
	  		default () {
	  			return []
	  		}
	  	},
		subject: {
			type: Array,
			default () {
				return []
			}
		},
		week: {
			type: Array,
			default () {
				return []
			}
		},
		zhtype:{
			typeof:[Number,String],
			default () {
				return 0
			}
		},
		userId:{
			typeof:[Number,String],
			default () {
				return 0
			}
		},
		avatar:{
			type: String,
			default () {
				return ''
			}
		},
	  	wtdt:{
	  		type: String,
	  		default () {
	  			return ''
	  		}
	  	},
	  	type:{
	  		type: String,
	  		default () {
	  			return ''
	  		}
	  	},
		froms:{
			type: String,
			default () {
				return ''
			}
		}
	  },
	  components:{
		noData  
	  },
	data(){
		return{
			sucimg:require("@/mine/static/mine/success.png"), 
			delimg:require("@/static/images/tcdel.png"),
			tddelimg:require("@/static/images/tdel.png"),
			tricona:require("@/static/images/tricoa.png"),
			triconb:require("@/static/images/tricob.png"),
			triconc:require("@/static/images/tricoc.png"),
			tricond:require("@/static/images/tricod.png"),
			tricong:require("@/static/images/tricog.png"),
			wimg:require('@/static/images/read.png'),
			baseUrl:''
		}
	},
	methods:{
		checkPermi,checkRole,
		kaType(data, list) {
			return selectDictValue(list, data);
		},
		getPass(data){
			this.$modal.confirm('确定通过审核？').then(() => {
			  this.$emit('getPass',data)
			})
		},
		getDel(data){
			this.$modal.confirm('确定删除该条信息？').then(() => {
			  this.$emit('getDel',data)
			})
		},
		getDetail(id){
			this.$emit('getDetail',id)
		},
		getSefuse(data){
			this.$emit('getSefuse',data)
		},
		getUpdate(data){
			this.$emit('getUpdate',data)
		},
		getDown(e){
			uni.showLoading({
				title: '加载中'
			});
			var url=this.baseUrl+e;
			uni.downloadFile({
				url: url,//文件的下载路径
				success(result) {
						uni.hideLoading()
					var filePath = result.tempFilePath;
					   uni.openDocument({
					     filePath: filePath,
					     showMenu: true,
					     success: function (res) {
					     }
					   });
				},
				fail(res) {uni.hideLoading()}
			})
		},
		// 查看照片
		getPreview(iurl,idx) {
			var newArr=[];
			iurl.forEach(ite=>{
				var ds=this.baseUrl+ite
				newArr.push(ds)
			})
			uni.previewImage({
				urls: newArr,
				current:idx,
				success: function(data) {
					
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			});
		},
	},
	mounted() {
		this.baseUrl=baseUrl
	},
	onLoad: function() {
		
    }
  }
</script>

<style lang="scss" scoped>
.shlist{width: 100%;background: #FFFFFF;border-radius: 14rpx;padding: 0 24rpx 24rpx;margin-bottom: 24rpx;
	.tittop{padding:20rpx 24rpx;border-bottom: 2rpx solid #E6E6E6;
		.tsbtn{min-width: 90rpx;height: 36rpx;border-radius: 4rpx;padding: 0 12rpx;box-sizing: border-box;font-size: 24rpx;line-height: 36rpx;
			&.co1{background: #FFEDDF;color: #E19301;}
			&.co2{background: #D3F7E5;color: #24D725;}
			&.co3{background: #FDE2E3;color: #EC1134;}
		}
	}
	.list{
		.btn{min-width: 106rpx;height: 46rpx;border-radius: 14rpx;display: flex;align-items: center;justify-content: center;box-sizing: border-box;font-size: 26rpx;margin-left: 20rpx;
			&.btn1{background: #1f57e6;color: #FFFFFF;}
			&.btn2{border: 1px solid #4775EA;color: #4775EA;}
			&.btn3{border: 1px solid red;color: red;}
		}
	}
}
// 附件
.cldelistbf {
	padding: 0rpx 24rpx;flex: 1;
		image{flex: 0 0 auto;}
		.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;margin-right: 24rpx;
			image{width: 40rpx;height: 34rpx;}
		}
		.imgr{width: 30rpx;height: 30rpx;margin-left: 24rpx;}
		.tit{line-height: 40rpx;font-size: 32rpx;color: #161616;flex: 1;word-break: break-all;}
	}
.infolist_b{color: #aaaaaa;font-size: 26rpx;padding:0 24rpx;margin-top:10rpx;
	text{word-break: break-all;margin: 0 4rpx;color: #ff0000;}
}
// 动态
.dtlist{width: 100%;margin-top: 24rpx;background: #FFFFFF;border-radius: 8rpx;padding: 28rpx 30rpx;box-sizing: border-box;
		.listl{width: 60rpx;height: 60rpx;margin-right: 20rpx;flex: 0 0 auto;border-radius:50%;}
		.listr{flex: 1;
			.top{min-height: 60rpx;display: flex;align-items: center;margin-bottom: 10rpx;
			}
			.imgs{display: flex;flex-wrap: wrap;padding-bottom: 16rpx;
				image{width: 180rpx;height: 180rpx;margin-bottom: 24rpx;margin-right: 10rpx;
				&:nth-of-type(3n){margin-right: 0;}
				&.img1{width: 100%;height: 290rpx;}
				}
				
			}
			.trsta{
				.trstal{width:40rpx ;height: 32rpx;display: flex;align-items: center;justify-content: center;position: relative;margin-left: 20rpx;
				.cir{min-width: 20rpx;height: 24rpx;line-height: 24rpx;font-size: 20rpx;color: #FFFFFF;
background: #DF1616;
border: 2rpx solid #FFFFFF;
border-radius: 6rpx;position: absolute;right: -50%;top: -50%;text-align: center;padding: 0 4rpx;box-sizing: border-box;}
				}
				image{width: 26rpx;height: 26rpx;}
			}
		}
		.delbox{display: flex;align-items: center;font-size: 26rpx;color: #718DD4;
			image{width: 24rpx;height: 25rpx ;margin-right: 12rpx;}
		}
		
		.trcom{width: 100%;background: #ECECEC;
			.trcomz{padding: 24rpx 8rpx 8rpx 24rpx;border-bottom: 2rpx solid #DADADA;
				.trcomr{display: flex;align-items: center;flex-wrap: wrap;
					image{width: 40rpx;height: 40rpx;margin: 0 16rpx 16rpx 0;border-radius: 50%;}
					}
			}
			.trcomp{padding: 24rpx 0 0 24rpx;
				.trcompr{padding: 0 24rpx 12rpx 0;border-bottom: 2rpx solid #DADADA;margin-bottom: 12rpx;
					&:last-of-type{border-bottom: none;}
					.listl{width: 40rpx;height: 40rpx;margin-right:12rpx;border-radius: 50%;flex: 0 0 auto;}
					
				}
			}
			.trcoml{flex: 0 0 auto;margin-right: 12rpx;width: 40rpx;height: 40rpx;display: flex;align-items: center;
				image{width: 26rpx;height: 26rpx;}
			}
		}
	}

</style>