v3-lab-xcx/pages_safetyCheck/views/itemsManage/hiddenDangerRectification.vue

<!-- 检查项隐患项整改 -->
<template>
	<view class="snapshotDetail">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="tip">整改期限{{optionData.checkPlanSetVoList.rectifyDeadline}}{{optionData.checkPlanSetVoList.overdueUnrectify?'（逾期未完成整改关闭实验室）':''}}</view>
			<view class="items" v-if="newData.hazardCheckName!=''">
				<view class="items-t">
					<view class="items-t-r">{{newData.hazardCheckCode}} {{newData.hazardCheckName}}</view>
				</view>
				<view class="items-b">＜ {{newData.hazardCheckCode2}}
					{{newData.hazardCheckName2}} ＜ {{newData.hazardCheckCode1}} {{newData.hazardCheckName1}}
				</view>
			</view>
			<view class="items-number" v-if="newData.hazardCheckName!=''" @click="hiddenDangerClick()">
				此检查项在当前实验室累计出现<text>{{hazardCheckNum}}</text>次隐患</view>
			<view class="list">
				<view class="list-li" @click="checkCollapse()">
					<view>检查隐患</view>
					<view :id="newData.checkFlag?'fontColor-B':'fontColor-A'">
						{{newData.checkFlag?'符合':'不符合 '}}
						<img v-if="!newData.checkCollapse" :src="imagesUrl('commonality/icon_06.png')">
						<img v-if="newData.checkCollapse" :src="imagesUrl('commonality/icon_06_1.png')">
					</view>
				</view>
				<view v-if="newData.checkCollapse">
					<view class="hidden-content" v-if="!newData.checkFlag">{{newData.hazardDescribe}}
					</view>
					<view class="photo" @click="lockImg(newData.yhDtoList)">
						<img v-for="(item,index) in newData.yhDtoList" :src="baseUrl+item.fileUrl">
					</view>
					<!-- <view class="list-li">
						<view>姓名：</view>
						<view>{{newData.checkUserName}}</view>
					</view> -->
					<view class="list-li">
						<view>检查时间</view>
						<view>{{newData.checkTime}}</view>
					</view>
					<view class="voice">
						<view class="voice_t">
							<view class="voice_t_t" v-if="!newData.voiceList[0]"><text>语音备注：</text><text></text></view>
							<view class="voice_t_b" v-if="newData.voiceList[0]">语音备注：({{newData.voiceList.length}})
							</view>
						</view>
						<view class="voice_b" v-if="newData.voiceList[0]"
							v-for="(voiceItem,voiceIndex) in newData.voiceList" :key="voiceIndex">
							<view class="voice_b_l" @tap="voicePlay(voiceItem.fileUrl)">
								<img class="add-button" :src="imagesUrl('safetyCheck/icon_yybz_yy.png')" />
								{{voiceItem.fileLength}}″
							</view>
						</view>
					</view>
				</view>
				<view v-if="pageType==1 || pageType==2" v-for="(item,index) in newData.checkRectifyVoList" :key="index">
					<view class="list-li" v-if="item.rectifyTime" @click="rectifyCollapse(item)">
						<view>隐患整改</view>
						<view :id="item.rectifyResult?'fontColor-B':(item.rectifyResult?'fontColor-C':'')">
							{{item.rectifyResult?'已整改':(item.rectifyResult?'暂无法整改':'')}}
							<img v-if="!item.rectifyCollapse" :src="imagesUrl('commonality/icon_06.png')">
							<img v-if="item.rectifyCollapse" :src="imagesUrl('commonality/icon_06_1.png')">
						</view>
					</view>
					<view v-if="item.rectifyCollapse && item.rectifyTime">
						<view v-if="item.rectifyMeasure" class="hidden-content">{{item.rectifyMeasure}}
						</view>
						<view class="photo"  @click="lockImg(item.rectifyUploadList)">
							<img v-for="(item2,index2) in item.rectifyUploadList" :src="baseUrl+item2.fileUrl">
						</view>
						<view class="list-li">
							<view>姓名：</view>
							<view>{{item.rectifyName}}</view>
						</view>
						<view class="list-li">
							<view>整改时间</view>
							<view>{{item.rectifyTime}}</view>
						</view>
					</view>
					<view class="list-li" v-if="item.reviewTime" @click="reviewCollapse(item)">
						<view>复查验证</view>
						<view :id="item.examineResult?'fontColor-B':'fontColor-C'">
							{{item.examineResult?'复查完毕':'退回整改'}}
							<img v-if="!item.reviewCollapse" :src="imagesUrl('commonality/icon_06.png')">
							<img v-if="item.reviewCollapse" :src="imagesUrl('commonality/icon_06_1.png')">
						</view>
					</view>
					<view v-if="item.reviewCollapse && item.reviewTime">
						<view v-if="item.examineOpinion" class="hidden-content" >{{item.examineOpinion}}
						</view>
						<view class="photo"  @click="lockImg(item.examineUploadList)">
							<img v-for="(item3,index3) in item.examineUploadList" :src="baseUrl+item3.fileUrl">
						</view>
						<!-- <view class="list-li">
							<view>姓名：</view>
							<view>{{item.reviewName}}</view>
						</view> -->
						<view class="list-li">
							<view>复查时间</view>
							<view>{{item.reviewTime}}</view>
						</view>
					</view>
				</view>
				<view class="list-li">
					<view v-if="pageType==1">复查验证</view>
					<view v-if="pageType==2">隐患整改({{fontNum}}/500)</view>
					<view>
						<img :src="imagesUrl('commonality/icon_06.png')">
					</view>
				</view>
				<textarea v-if="pageType==1" class="describe" type="text" v-model="form.examineOpinion" maxlength="500"
					placeholder="请填写隐患描述"
					placeholder-style="font-size:24rpx;color:#999;"></textarea>
				<textarea v-if="pageType==2" class="describe" type="text" v-model="form.rectifyMeasure" maxlength="500"
					@input="sumfontnum" placeholder="立整立改的请填写相关文字及整改前后照片对比等，不能立整立改的请说明原因并附整改计划、措施等"
					placeholder-style="font-size:24rpx;color:#999;"></textarea>
					
				<view class="check-for-img-max-box">
					<view class="left-title-p"></view>
					<view class="right-img-box">
						<view class="img-box" v-for="(imgUrl,imgIndex) in form.imgDtoList" :key="imgIndex">
							<img class="img-data" :src="baseUrl+imgUrl.fileUrl">
							<img class="position-img" :src="imagesUrl('commonality/icon_ssp_closure.png')"
								@click="delImg(imgIndex)">
						</view>
						<img class="add-button" :src="imagesUrl('safetyCheck/img_ssp_pz@1x.png')"
							@click="selectImage()" v-if="form.imgDtoList.length<6">
					</view>
				</view>
				<!-- <view class="list-li-tow">
					<view>整改方案（上传文件）</view>
					<view @click="selectFile()">
						<img :src="imagesUrl('safetyCheck/icon_aqjc_sc.png')">
					</view>
				</view>
				<view class="file-li" v-if="form.rectifyProjectName">
					<img :src="imagesUrl('safetyCheck/icon_djc_wj.png')">
					<view>{{form.rectifyProjectName}}</view>
					<img :src="imagesUrl('safetyCheck/icon_yybz_sc.png')">
				</view> -->
			</view>
		</scroll-view>
		<view class="sub-btn">
			<view @click="submitForm(2)">{{pageType==1?'退回整改':'暂无法整改'}}</view>
			<view @click="submitForm(1)">{{pageType==1?'复查完毕':'完成整改'}}</view>
		</view>
	</view>

</template>

<script>
	const myaudio = uni.createInnerAudioContext();
	import {
		parseTime
	} from '@/component/public.js'
	import {
		config
	} from '@/api/request/config.js'
	import {
		securityAppCheckPhotoUpdate,
		securityAppCheckDangerGetCheckProDetail,
		securityAppCheckDangerCheckRectify,
		securityAppCheckDangerApprove,
		securityAppCheckPhotoGetCheckNumBySub,
	} from '@/pages_safetyCheck/api/index.js'
	export default {
		name: "snapshotDetail",
		components: {

		},
		data() {
			return {
				baseUrl: config.base_url,
				inspectionItems: 0, //0有检查项 1无检查项
				pageType:null,
				form: {
					imgDtoList: [],
					rectifyProjectName: '',
					rectifyProjectUrl: '',
				},
				hazardCheckNum: 0,
				newData: {},
				optionData: null,
				fontNum:0,
				rectifyId:null,
				editStatus:null,
			}
		},
		onLoad(option) {
			let optionData = JSON.parse(decodeURIComponent(option.infoData));
			console.log('测试整改',optionData)
			this.$set(this, 'pageType', optionData.pageType);
			this.$set(this, 'optionData', optionData);
			this.$set(this, 'editStatus', optionData.editStatus);
		},
		onShow() {

		},
		mounted() {
			this.securityAppCheckDangerGetCheckProDetail();
			this.securityAppCheckPhotoGetCheckNumBySub();
		},
		methods: {
			//语音备忘播放
			async voicePlay(item) {
				myaudio.src = config.base_url + item;
				myaudio.play();
			},
			//详情
			async securityAppCheckDangerGetCheckProDetail() {
				let self=this;
				let obj = {
					planId: this.optionData.checkPlanSetVoList.planId,
					planSetId: this.optionData.checkPlanSetVoList.planSetId,
					checkCategory: this.optionData.checkCategory,
					hazardCheckPro: this.optionData.hazardCheckPro,
					subId: this.optionData.subId,
				}
				const {
					data
				} = await securityAppCheckDangerGetCheckProDetail(obj);
				if (data.code == 200) {
					uni.setNavigationBarTitle({
						title: data.data.subName+'(' + data.data.roomNum + ')'
					})
					data.data.checkCollapse=false;
					data.data.inspectDot=false;
					data.data.checkTime= parseTime(data.data.checkTime, "{y}-{m}-{d}");
					if(data.data.checkRectifyVoList[0]){
						data.data.checkRectifyVoList.forEach(function(item,index){
							item.rectifyTime= parseTime(item.rectifyTime, "{y}-{m}-{d}");
							item.reviewTime= parseTime(item.reviewTime, "{y}-{m}-{d}");
							
							item.rectifyCollapse=false;
							item.reviewCollapse=false;
							if(index==data.data.checkRectifyVoList.length-1){
								self.$set(self, 'rectifyId', item.rectifyId);
								//编辑数据的时候数据回填
								if(self.pageType==1 && self.editStatus){
									item.rectifyCollapse=true;
									item.reviewTime=null;
									self.$set(self.form, 'examineOpinion', item.examineOpinion?item.examineOpinion:'');
									self.$set(self.form, 'imgDtoList', item.examineUploadList?item.examineUploadList:[]);
									
								}else if(self.pageType==2 && self.editStatus){
									item.reviewCollapse=true;
									item.rectifyTime=null;
									self.$set(self.form, 'rectifyMeasure', item.rectifyMeasure?item.rectifyMeasure:'');
									self.$set(self.form, 'imgDtoList', item.rectifyUploadList?item.rectifyUploadList:[]);
								}
								
							}
						})
					}
					this.$set(this, 'newData', data.data);
					this.$set(this.newData, 'voiceList', data.data.voiceList ? data.data.voiceList : []);

				}
			},
			// 限制文本框字数
			sumfontnum(e) {
				this.fontNum = e.detail.value.length
			},
			//获取检查项在当前实验室出现的次数
			async securityAppCheckPhotoGetCheckNumBySub() {
				let obj = {
					subId: this.optionData.subId,
					hazardCheckPro: this.optionData.hazardCheckPro,
				}
				const {
					data
				} = await securityAppCheckPhotoGetCheckNumBySub(obj);
				if (data.code == 200) {
					this.$set(this, 'hazardCheckNum', data.data);
			
				}
			},
			hiddenDangerClick(row) {
				let infoData = this.optionData;
				infoData.subName=this.newData.subName;
				infoData.roomNum=this.newData.roomNum;
				infoData.hiddenDangerRecordStatus = true;//判断是否跳转隐患列表
				uni.redirectTo({
					url: '/pages_safetyCheck/views/inspectManage/hiddenDangerRecord?infoData=' +
						encodeURIComponent(JSON.stringify(infoData))
				});
			},
			//图片预览
			lockImg(list) {
				if (!list[0]) {
					return
				}
				let urlList = [];
				for (let i = 0; i < list.length; i++) {
					urlList.push(config.base_url + list[i].fileUrl)
				}
				wx.previewImage({
					urls: urlList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			//滚动事件
			scrollGet() {},
			/******文件上传******/
			selectFile() {
				let self = this;
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success(res) {
						console.log(res)
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFiles[0].path
						self.form.rectifyProjectName = res.tempFiles[0].name
						self.uploadFile(tempFilePaths);
					}
				})
			},
			async uploadFile(tempFilePaths) {
				var self = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
					url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						console.log(res)
						if (res.code == 200) {
							self.form.rectifyProjectUrl = res.data.url;
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			/******图片上传******/
			selectImage() {
				let self=this;
				let photoMaxNun = 0;
				if (this.form.imgDtoList.length > 5) {
					uni.showToast({
						title: '最多上传6张图片',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				photoMaxNun = 6 - this.form.imgDtoList.length;
				wx.chooseImage({
					count: photoMaxNun,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						if (res.tempFilePaths[0]) {
							res.tempFilePaths.forEach(function(item, index) {
								self.uploadImg(item);
							})
						}
					}
				});
			},
			async uploadImg(tempFilePaths) {
				var self = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
					url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							this.form.imgDtoList.push({
								'fileUrl': res.data.url,
								'fileName': res.data.name,
								'fileType': 2,
							});
							console.log(res.data.url)
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			//删除图片
			delImg(minIndex) {
				this.form.imgDtoList.splice(minIndex, 1);
				this.$forceUpdate();
			},
			//折叠展开
			inspectDot(){
				this.newData.inspectDot=!this.newData.inspectDot
			},
			checkCollapse(row){
				this.newData.checkCollapse=!this.newData.checkCollapse
			},
			rectifyCollapse(row){
				row.rectifyCollapse=!row.rectifyCollapse
			},
			reviewCollapse(row){
				row.reviewCollapse=!row.reviewCollapse
			},

			//提交
			async submitForm(status) {
				let self = this;
				if(self.pageType==1){
					// if(!this.form.examineOpinion && status==2){
					// 	uni.showToast({
					// 		title: '请填写复查验证描述!',
					// 		icon: "none",
					// 		mask: true,
					// 		duration: 2000
					// 	});
					// 	return
					// }
					// if(!this.form.imgDtoList[0] && status==2){
					// 	uni.showToast({
					// 		title: '请选择现场照片!',
					// 		icon: "none",
					// 		mask: true,
					// 		duration: 2000
					// 	});
					// 	return
					// }
					
					//复查
					let obj = {
						rectifyId: this.rectifyId,
						examineOpinion: this.form.examineOpinion,
						examineResult: status == 1 ? 1 : 0, //1是通过，0是驳回
						examineUploadList: this.form.imgDtoList,
					}
					const {
						data
					} = await securityAppCheckDangerApprove(obj);
					if (data.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: "none",
							mask: true,
							duration: 2000
						});
						let infoData = this.optionData;
						uni.redirectTo({
							url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItemsDetail?infoData=' +
								encodeURIComponent(JSON.stringify(infoData))
						});
					
					}
				}else if(self.pageType==2){
					if(!this.form.rectifyMeasure){
						uni.showToast({
							title: '请填写隐患整改描述!',
							icon: "none",
							mask: true,
							duration: 2000
						});
						return
					}
					if(!this.form.imgDtoList[0]){
						uni.showToast({
							title: '请选择现场照片!',
							icon: "none",
							mask: true,
							duration: 2000
						});
						return
					}
					//整改
					let obj = {
						checkCategory: this.optionData.checkCategory,
						dangerId: this.newData.dangerId,
						rectifyMaterialName: '', //待定字段
						rectifyMaterialUrl: '', //待定字段
						rectifyMeasure: this.form.rectifyMeasure,
						rectifyResult: status == 1 ? true : false, //true已整改false暂无法整改
						rectifyUploadList: this.form.imgDtoList,
					}
					const {
						data
					} = await securityAppCheckDangerCheckRectify(obj);
					if (data.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: "none",
							mask: true,
							duration: 2000
						});
						let infoData = this.optionData;
						uni.redirectTo({
							url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItemsDetail?infoData=' +
								encodeURIComponent(JSON.stringify(infoData))
						});
					
					}
				}

				
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.snapshotDetail {
		height: 100%;
		display flex;
		box-sizing: border-box;
		padding-bottom: 160rpx;
		box-sizing: border-box;

		#bgColor-A {
			color: #FFD400;
		}

		#bgColor-B {
			color: #FF8C00;
		}

		#bgColor-C {
			color: #E11608;
		}

		#fontColor-A {
			color: #FF8C00;
		}

		#fontColor-B {
			color: #16B531;
		}

		.tip {
			width: 750rpx;
			height: 80rpx;
			background: rgba(255, 140, 0, 0.2);
			font-weight: normal;
			font-size: 28rpx;
			color: #FF8C00;
			line-height: 80rpx;
			text-align: center;
		}

		.items {
			width: 690rpx;
			min-height: 165rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx 0 0 30rpx;

			.items-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E0E0E0;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.items-t {
				border-bottom: 1rpx solid #E0E0E0;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				.items-t-l {
					width: 175rpx;
					height: 50rpx;
					background: #E11608;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					text-align: center;
					margin-right: 14rpx;
				}

				.items-t-r {
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
				}
			}

			.items-b {
				padding: 0 30rpx;
				box-sizing: border-box;
				height: 80rpx;
				font-size: 28rpx;
				color: #666666;
				line-height: 80rpx;
				text-align: left;
			}
		}

		.items-number {
			font-size: 24rpx;
			color: #3D3D3D;
			line-height: 34rpx;
			text-align: right;
			margin: 20rpx 60rpx 0 0;

			>text {
				font-size: 24rpx;
				color: #FF0000;
				line-height: 34rpx;
				text-align: right;
			}
		}

		.list {
			width: 690rpx;
			margin: 20rpx 30rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.list-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E0E0E0;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;

					>img {
						width: 24rpx;
						height: 12rpx;
						margin-left: 10rpx;
					}
				}

			}

			.list-li-tow {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-top: 1rpx solid #E0E0E0;
				border-bottom: 1rpx solid #E0E0E0;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;

					>img {
						width: 30rpx;
						height: 28rpx;
						margin-left: 10rpx;
					}
				}

			}

			.file-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				>img:nth-of-type(1) {
					width: 30rpx;
					height: 30rpx;
				}

				>view {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
					margin: 0 92rpx 0 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				>img:nth-of-type(2) {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.hidden-content {
				width: 630rpx;
				min-height: 200rpx;
				background: #F5F5F5;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: 20rpx 30rpx 0;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #666666;
				line-height: 39rpx;
				text-align: left;
			}

			.photo {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-top: 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				>img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin: 0 10rpx 10rpx 0;
				}
				>img:nth-of-type(4) {
					margin-right: 0;
				}
			}

			.describe {
				width: 636rpx;
				height: 120rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 1rpx solid #E0E0E0;
				margin: 20rpx 0 0 28rpx;
				padding: 12rpx 16rpx;
				box-sizing: border-box;
			}

			.check-for-img-max-box {
				margin: 20px 28rpx;

				.left-title-p {
					width: 100%;
					text-align: left;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
				}

				.right-img-box {
					.img-box {
						display inline-block;
						height: 150rpx;
						width: 150rpx;
						position relative;
						margin: 0 10rpx 20rpx 0;
						border-radius 10rpx;
						overflow hidden;

						.img-data {
							height: 150rpx;
							width: 150rpx;
						}

						.position-img {
							position absolute;
							right: 0;
							top: 0;
							width: 36rpx;
							height: 36rpx;
						}
					}

					.img-box:nth-of-type(4n+4) {
						margin-right: 0rpx;
					}

					.add-button {
						margin: 0 0rpx 20rpx 0;
						border-radius 10rpx;
						overflow hidden;
						display inline-block;
						height: 150rpx;
						width: 150rpx;
					}
				}
			}

			/* .list-li:last-of-type {
				border: none;
			} */
		}

	}
	/* 语音备注 */
	.voice {
		width: 690rpx;
		min-height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		overflow: hidden;
	
		.voice_t {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.voice_t_t {
				width: 100%;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 100rpx;
			}
	
			.voice_t_b {
				width: 100%;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 100rpx;
				text-align: left;
			}
		}
	
		.voice_b {
			display flex;
			justify-content flex-start;
			align-items center;
			margin-bottom: 20rpx;
	
			.voice_b_l {
				width: 400rpx;
				height: 40rpx;
				background: #0183FA;
				border-radius: 10rpx;
				display flex;
				justify-content flex-start;
				align-items center;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 30rpx;
				text-align: left;
	
				>img {
					width: 20rpx;
					height: 20rpx;
					margin-left: 16rpx;
					margin-right: 20rpx;
				}
			}
	
			.voice_b_r {
				width: 28rpx;
				height: 28rpx;
				margin-left: 20rpx;
			}
		}
	
		.voice-btn {
			width: 150rpx;
			height: 150rpx;
			position: fixed;
			right: 24rpx;
			bottom: 176rpx;
	
			>img {
				width: 150rpx;
				height: 150rpx;
				position: absolute;
			}
	
			>text {
				font-size: 24rpx;
				color: #999999;
				line-height: 30rpx;
				text-align: center;
				position: absolute;
				top: 84rpx;
				left: 26rpx;
			}
		}
	}
	
	.sub-btn {
		display: flex;
		justify-content: center;
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;

		>view:nth-of-type(1) {
			width: 345rpx;
			height: 100rpx;
			background: #FF8C00;
			border-radius: 50rpx 0rpx 0rpx 50rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}

		>view:nth-of-type(2) {
			width: 345rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 0rpx 50rpx 50rpx 0rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>