zhgdyunapp/pages/projectEnd/safeSame/details.vue

<template>
	<view class="deetailPage">
		<view class="fixedheader">
			<headers :showBack="true" :themeType="true">
				<view class="headerName">
					查看检查记录
				</view>
			</headers>
			<u-tabs :bar-height="4" :font-size="28" active-color="#498CEC" inactive-color="#B3B3B3" :bar-width="375"
				:list="list" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
		</view>
		<view class="content record" :style="{paddingTop: mobileTopHeight + 100 + 'px'}" v-if="checkedTab==1">
			<view class="content_main">
				<template v-for="item in securityDangerList">
					<view class="box-item" v-if="item.originalFieldName == '整改时限'">
						<view>{{
					      item.displayFieldName
					        ? item.displayFieldName
					        : item.originalFieldName
					    }}:</view>
						<view class="item_space-between">
							<view>
								{{basicInfo.changeLimitTime ? basicInfo.changeLimitTime : '--'}}
							</view>
							<view @click="onNavigateToDetail(1)">
								延期申请记录
							</view>
						</view>
					</view>
					<view class="box-img"
						v-else-if="item.originalFieldName == '上传图片' || item.originalFieldName == '隐患图片'">
						<view>{{
					      item.displayFieldName
					        ? item.displayFieldName
					        : item.originalFieldName
					    }}:</view>
						<view class="imgBox_wrap">
							<view class="imgBox" v-show="imgFileList.length>0" v-for="(item,index) in imgFileList"
								:key="index">
								<image :src="item.split('*')[1]" class="img" @click="previewImage(item.split('*')[1])">
								</image>
							</view>
						</view>
					</view>
					<view class="box-item" v-else-if="item.originalFieldName == '上传附件'">
						<view>{{
					      item.displayFieldName
					        ? item.displayFieldName
					        : item.originalFieldName
					    }}:</view>
						<view v-show="videoFileList.length>0">
							<view style="color: #4181FE;" @click="playVideo(item.split('*')[1],'video')"
								v-for="(item,index) in videoFileList" :key="index">
								{{item.split('*')[0]}}
							</view>
						</view>
					</view>
					<view class="box-img" v-else-if="item.originalFieldName == '整改后图片'">
						<view>{{
					      item.displayFieldName
					        ? item.displayFieldName
					        : item.originalFieldName
					    }}:</view>
						<view class="imgBox_wrap">
							<view class="imgBox" v-show="rectifyAfterImageList.length>0"
								v-for="(item,index) in rectifyAfterImageList" :key="index">
								<image :src="item.split('*')[1]" class="img" @click="previewImage(item.split('*')[1])">
								</image>
							</view>
						</view>
					</view>
					<view class="box-item" v-else>
						<view>{{
                          item.displayFieldName
                            ? item.displayFieldName
                            : item.originalFieldName
                        }}:</view>
						<view>
							{{
							   dataNameUp(basicInfo, item)
							}}
						</view>
					</view>
				</template>
			</view>
			<view class="backBtn" v-if="basicInfo.status == 2 && issueInfoList.length == 0 &&
			                basicInfo.inspectManId == userInfo.userId && btnEditAuth">
				<view class="btn-option" @click="backCheckRecord">撤回</view>
			</view>
			<view class="editBtn" v-if="basicInfo.status == 6 &&
			                basicInfo.inspectManId == userInfo.userId">
				<view class="btn-delete" @click="deleteCheckRecord" v-if="btnDeleteAuth">删除检查</view>
				<view class="btn-resubmit" @click="resubmitCheckRecord" v-if="btnEditAuth">重新提交</view>
			</view>
		</view>



		<view class="content record" :style="{paddingTop: mobileTopHeight + 100 + 'px'}" v-if="checkedTab==2">
			<view class="bg-white" v-if="issueInfoList.length>0">
				<ul class="flex table_title">
					<li>发起顺序</li>
					<li>人员</li>
					<li>时间</li>
					<li>状态</li>
				</ul>
				<view v-for="(item,index) in issueInfoList" :key="index">
					<ul class="flex table_item" @click="handleShowItem(index)">
						<li>
							<span class="table_index">{{index}}</span>{{item.typeName}}
						</li>
						<li>
							<!-- {{item.createUserName}}{{item.peopleName}} -->
							{{item.createUserName}}
						</li>
						<li>
							{{item.rectifyTime}}
							<!-- {{item.createTime.split(' ')[0]}} -->
						</li>
						<li>
							<span
								:class="{'table_error': item.status == 1, 'table_success': item.status == 2}">{{item.statusText}}</span>
							<span class="icon-down" v-show="item.isShow"></span>
							<span class="icon-right" v-show="!item.isShow"></span>
						</li>
					</ul>
					<view class="table_content" v-show="item.isShow">
						<view class="message imgList" style="font-size: 14px;" v-if="item.type == 1 && item.violatorId">
							<span>违章人员：</span>
							<span>{{ personList.filter(ele =>  item.violatorId.includes(ele.id)).map(ele => ele.workerName).join('、') }}</span>
						</view>
						<view class="imgList">
							<ul>
								<li class="img-item" v-for="(item2, index2) in item.fileUrl" :key="index2">
									<image :src="item2" @click="previewImage(item2)">
								</li>
							</ul>
						</view>
						<view class="message" style="font-size: 14px;">
							<span>补充说明：</span>
							<span>{{item.additionalRemarks}}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="new-nodata" v-if="issueInfoList.length==0">
				<view></view>
				<text>暂无数据...</text>
			</view>
			<view class="approveBtn editBtn"
				v-if="btnEditAuth && userInfo.userId == basicInfo.changeId && entryType == 2 && issueInfoList.length <= 0 || userInfo.userId == basicInfo.changeId && entryType == 2 && issueInfoList.length > 0 && issueInfoList[issueInfoList.length-1].statusText !== '已整改'">
				<view class="btn" style="background-color: #EEF3FF;color: #5181F6" @click="onNavigateToDetail(2)">移交</view>
				<view class="btn" @click="replyBtn(1)">整改回复</view>
			</view>
			<view class="approveBtn editBtn"
				v-if="btnEditAuth && basicInfo.reviewIds.includes(userInfo.userId) && entryType == 3 && issueInfoList.length > 0 && issueInfoList[issueInfoList.length-1].type !== 2">
				<view class="btn" style="background-color: #EEF3FF;color: #5181F6" @click="onNavigateToDetail(2)">移交</view>
				<view class="btn" @click="replyBtn(2)">复查回复</view>
			</view>
			<view class="approveBtn editBtn"
				v-if="btnEditAuth && basicInfo.verifyManIds &&  basicInfo.verifyManIds.includes(userInfo.userId) && entryType == 4 && issueInfoList.length > 0 && issueInfoList[issueInfoList.length-1].type !== 3">
				<view class="btn" style="background-color: #EEF3FF;color: #5181F6" @click="onNavigateToDetail(2)">移交</view>
				<view class="btn" @click="replyBtn(3)">核验回复</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobileTopHeight: 0,
				checkedTab: 1,
				imgFileList: [],
				videoFileList: [],
				basicInfo: {},
				issueInfoList: [],
				userInfo: {},
				entryType: '',
				recordType: 1, // 1为安全问题  2为排查记录
				id: '',
				btnEditAuth: true,
				btnDeleteAuth: true,
				projectSn: "",
				personList: [],
				current: 0,
				list: [{
					name: '检查详情'
				}, {
					name: '审批流程'
				}],
				postponeApply: "",
				rectifyAfterImageList: [],
				securityDangerList: [],
				dangerItemList: [], // 问题等级二
				majorItemList: [], // 责任专业
			}
		},
		onLoad(option) {
			this.btnEditAuth = this.checkBtnPermission({
				key: 'inspectionLedger_edit',
				menuPath: '/project/safeSame/inspectionLedger'
			})
			this.btnDeleteAuth = this.checkBtnPermission({
				key: 'inspectionLedger_delete',
				menuPath: '/project/safeSame/inspectionLedger'
			})
			this.id = option.id;
			if (option.postponeApply) {
				this.postponeApply = option.postponeApply;
			}
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.entryType = Number(option.type)
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.getPointAreaFn();
			this.getDicProjectTypeList();
		},
		onShow() {
			this.getBasicInfo();
			this.getIssueInfo();
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo', res)
					console.log(res)
				}
			})
			console.log('this.mobileTopHeight', this.mobileTopHeight)
		},
		methods: {
			getDicProjectTypeList() {
				this.sendRequest({
					url: 'xmgl/dictionaryItem/list',
					method: 'get',
					data: {
						dictionaryEncoding: "xz_security_danger_item_record_priority_name_dic",
						projectSn: this.projectSn,
					},
					success: res => {
						console.log(res.result)
						if (res.code == 200) {
							this.dangerItemList = res.result;
						}
					}
				})
				this.sendRequest({
					url: 'xmgl/dictionaryItem/list',
					method: 'get',
					data: {
						dictionaryEncoding: "xz_security_quality_inspection_record_duty_major",
						projectSn: this.projectSn,
					},
					success: res => {
						console.log(res.result)
						if (res.code == 200) {
							this.majorItemList = res.result;
						}
					}
				})
			},
			onNavigateToDetail(type) {
				if(type == 1) {
					uni.navigateTo({
						url: `./hiddenDangerpending/extensionRequestList?id=${this.basicInfo.id}&postponeApply=${this.postponeApply}`
					})
				} else if (type == 2) {
					uni.navigateTo({
						url: `./selectTransferor?id=${this.basicInfo.id}`
					})
				}
			},
			// 获取违章人员列表
			getPointAreaFn() {
				let requestData = {
					projectSn: this.projectSn,
				};
				this.sendRequest({
					url: 'xmgl/workerInfo/getLaborManagementInfoList',
					method: 'post',
					data: requestData,
					success: (res) => {
						console.log(res);
						this.personList = res.result;
					},
				})
			},
			// 重新提交
			resubmitCheckRecord() {
				uni.navigateTo({
					url: '/pages/projectEnd/safeSame/editIssue?id=' + this.id
				})
			},
			// 删除检查单
			deleteCheckRecord() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要删除吗？',
					success: async (res) => {
						if (res.confirm) {
							this.sendRequest({
								url: 'xmgl/xzSecurityQualityInspectionRecord/delete',
								method: 'post',
								data: {
									id: that.id
								},
								success: res => {
									uni.showToast({
										title: res.message
									})
									setTimeout(function() {
										uni.redirectTo({
											url: '/pages/projectEnd/safeSame/list?type=1'
										})
									}, 500)
								}
							})
						}
					}
				});
			},
			// 撤回检查单
			backCheckRecord() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要撤回吗？',
					success: async (res) => {
						if (res.confirm) {
							this.sendRequest({
								url: 'xmgl/xzSecurityQualityInspectionRecord/revocation',
								method: 'post',
								data: {
									id: that.id
								},
								success: res => {
									uni.showToast({
										title: res.message
									})
									setTimeout(function() {
										uni.redirectTo({
											url: '/pages/projectEnd/safeSame/list?type=1'
										})
									}, 500)
								}
							})
						}
					}
				});
			},
			handleShowItem(index) {
				this.issueInfoList[index].isShow = !this.issueInfoList[index].isShow
				let newObj = this.issueInfoList[index]
				this.issueInfoList.splice(index, 1, newObj)
				// console.log(index, this.issueInfoList[index])
			},
			//切换tab
			changeTab(type) {
				this.current = type;
				this.checkedTab = type + 1;
				if (this.checkedTab == 1) {
					this.getBasicInfo();
				} else {
					this.getIssueInfo();
				}
			},
			//获取基本信息
			getBasicInfo() {
				let that = this;
				this.sendRequest({
					url: 'xmgl/xzSecurityQualityInspectionRecord/selectQualityInspectionRecordById',
					method: 'post',
					data: {
						id: that.id
					},
					success: res => {
						console.log(res.result, this.userInfo)
						that.recordType = res.result.recordType
						that.basicInfo = res.result;
						console.log('获取基本信息---', that.basicInfo);
						if (res.result.imageUrl) {
							that.imgFileList = res.result.imageUrl.split(',');
						}
						if (res.result.fileUrl) {
							that.videoFileList = res.result.fileUrl.split(',');
						}
						if (res.result.rectifyAfterImage) {
							that.rectifyAfterImageList = res.result.rectifyAfterImage.split(',');
						}
						that.getSecurityDangerFieldPage();
					}
				})
			},
			// 获取安全隐患
			getSecurityDangerFieldPage(recordType) {
				this.sendRequest({
					url: 'xmgl/xzSecurityDangerField/getEffectiveConfig',
					method: 'post',
					data: {
						pageNo: 1,
						pageSize: -1,
						sn: this.projectSn,
						companyProjectType: 2,
						recordType: recordType ? recordType : this.recordType,
					},
					success: res => {
						console.log(res.result)
						if (res.code == 200) {
							this.securityDangerList = res.result
								.filter((item) => item.isEnabled == 1);
						}
					}
				})
			},
			//获取整改信息
			getIssueInfo() {
				let that = this;
				this.sendRequest({
					url: 'xmgl/xzSecurityQualityRectifyRecord/selectRectifyRecordList',
					method: 'post',
					data: {
						qualityId: that.id
					},
					success: res => {
						console.log(res.result)
						// console.log(JSON.parse(res.result[0].fileUrl))
						that.issueInfoList = res.result;
						that.issueInfoList.forEach((item, index) => {
							if (item.fileUrl) {
								let imgList = [];
								if (item.fileUrl.startsWith("[") && item.fileUrl.endsWith("]")) {
									let fileListI = JSON.parse(item.fileUrl);
									fileListI.forEach((file) => {
										let url = file.url;
										if (!url.startsWith("http://")) {
											url = that.url_config + 'image/' + url;
										}
										imgList.push(url);
									});
								} else {
									let fileListI = item.fileUrl.split(",");
									fileListI.forEach((url) => {
										if (!url.startsWith("http://")) {
											url = that.url_config + 'image/' + url;
										}
										imgList.push(url);
									});
								}
								item.fileUrl = imgList;
							} else {
								item.fileUrl = [];
							}
							if (item.type == 1) {
								item.typeName = '整改人'
								item.peopleName = this.basicInfo.changeName
							} else if (item.type == 2) {
								item.typeName = '复查人'
								item.peopleName = this.basicInfo.reviewName
							} else if (item.type == 3) {
								item.typeName = '核验人'
								item.peopleName = this.basicInfo.inspectManName
							}

							if (item.status == 1) {
								item.isPass = false
							} else {
								item.isPass = true
							}
							item.isShow = false
							if (item.type == 1 && item.status == 1) {
								item.statusText = '未整改'
							} else if (item.type == 1 && item.status == 2) {
								item.statusText = '已整改'
							} else if (item.type == 2 && item.status == 1) {
								item.statusText = '复查不合格'
							} else if (item.type == 2 && item.status == 2) {
								item.statusText = '复查合格'
							} else if (item.type == 3 && item.status == 1) {
								item.statusText = '核验不合格'
							} else if (item.type == 3 && item.status == 2) {
								item.statusText = '核验合格'
							}
						})


					}
				})
			},

			//新增回复
			replyBtn(type) {
				let stateId = this.issueInfoList.length > 0 ? this.issueInfoList[this.issueInfoList.length - 1].id : '';
				let createId = this.basicInfo.creatorId ? this.basicInfo.creatorId : this.basicInfo.inspectManId
				uni.navigateTo({
					url: '/pages/projectEnd/safeSame/reply?id=' + this.id + '&type=' + type + '&stateId=' +
						stateId + '&createId=' +
						createId
				})
			},
			//播放视频
			playVideo(url, type) {
				uni.navigateTo({
					url: '/pages/projectEnd/carWashManage/mediaPlay?url=' + url + '&type=' + type
				})
			},

			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			}

		},
		computed: {
			dataNameUp() {
				return (row, eItem) => {
					if (eItem.originalFieldName == "责任区域") {
						return row.regionNames || row.regionName || '--';
					} else if (eItem.originalFieldName == "问题描述") {
						return row.problemDescription || '--';
					} else if (eItem.originalFieldName == "问题分类") {
						return row.dangerItemContent || '--';
					} else if (eItem.originalFieldName == "问题等级") {
						const levelList = ["一级", "二级", "三级", "四级"];
						return levelList[row.level - 1];
					} else if (eItem.originalFieldName == "问题等级二") {
						const find = this.dangerItemList.find(
							(item) => item.data == row.priorityNameDic
						);
						return find ? find.name : "--";
					} else if (eItem.originalFieldName == "责任专业") {
						const find = this.majorItemList.find(
							(item) => item.data == row.dutyMajor
						);
						return find ? find.name : "";
					} else if (eItem.originalFieldName == "紧急程度") {
						const levelList = ["一般", "严重", "重大"];
						return levelList[row.urgentLevel - 1];
					} else if (eItem.originalFieldName == "整改人") {
						return row.changeName ? row.changeName : '--';
					} else if (eItem.originalFieldName == "复查人") {
						return row.reviewNames || row.reviewName || '--';
					} else if (eItem.originalFieldName == "核验人") {
						return row.verifyManNames || row.verifyManName || '--';
					} else if (eItem.originalFieldName == "分包单位") {
						return row.enterpriseNames || row.enterpriseName || '--';
					} else if (eItem.originalFieldName == "现场整改") {
						return row.status == 1 || row.status == 5 ? "已完成" : "未完成";
					}
					return row[eItem.fieldName] || '--';
				};
			},
		}
	}
</script>

<style>
	.bg-white {
		background-color: white;
	}

	.new-nodata {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		>view {
			width: 300rpx;
			height: 300rpx;
			background-image: url('@/static/staffAttendance/nodata.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		>text {
			font-size: 22rpx;
			color: #808080;
			margin-top: 60rpx;
		}
	}

	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		.headerName {
			z-index: 1;
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex2 {
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}

	.flex3 {
		display: flex;
	}

	.deetailPage {
		width: 100%;
		height: 100%;
	}

	.tab {
		width: 100%;
		height: 45px;
		text-align: center;
		box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
	}

	.tabType {
		width: 50%;
		line-height: 43px;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);

	}

	.checkedTab {
		color: #4181FE;
		border-bottom: 2px solid #4181FE;

	}

	.noCheckTab {
		padding-bottom: 2px;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
		background-color: #EFF3F7;
		/* padding: 30rpx 28rpx; */
	}

	.content_main {
		padding: 30rpx 28rpx;
		background-color: white;
		// border-radius: 18rpx;
		position: relative;
		padding-bottom: 60px;

		.box-bottom {
			width: 100%;
			padding: 0 26rpx;
			height: 112rpx;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 0 0 18rpx 18rpx;
			justify-content: flex-end;
			position: absolute;
			left: 0;
			bottom: 0;

			>view {
				padding: 10rpx 18rpx;
				border-radius: 6rpx;
				border: 2rpx solid #3E89FD;
				font-size: 28rpx;
				color: #3E89FD;
			}

			>view:not(:first-child) {
				margin-left: 20rpx;
			}

			.btn-error {
				border-color: #ED2B29;
				color: #ED2B29;
			}

			.btn-start {
				background-color: #3E89FD;
				border-color: #3E89FD;
				color: #FFFFFF;
			}
		}

		.box-content_detail {
			font-size: 28rpx;
			color: #4D4D4D;
			margin-top: 4rpx;
		}

		.webkit-clamp_2 {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 限制为两行 */
			overflow: hidden;
		}

		.box-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 26rpx;
			font-size: 28rpx;

			>view:first-child {
				color: #808080;
			}

			>view:last-child {
				font-size: 24rpx;
				color: #4D8EEC;
			}
		}

		.box-content1 {
			margin-top: 26rpx;
			font-size: 28rpx;

			>view:first-child {
				color: #808080;
			}

			>view:last-child {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #4D4D4D;
			}
		}

		.box-img {
			display: flex;
			flex-direction: column;
			margin-top: 26rpx;
			font-size: 28rpx;

			>view:first-child {
				width: 192rpx;
				margin-right: 26rpx;
				color: #808080;
			}

			.imgBox_wrap_list {
				flex-direction: column;
				align-items: flex-start !important;

				.imgBox_list {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 14rpx 26rpx 14rpx 40rpx;

					>view:first-child {
						display: flex;
						align-items: center;

						.u-icon {
							font-size: 40rpx;
							color: #B3B3B3;
						}

						>view:last-child {
							margin-left: 14rpx;
							width: 320rpx;
							font-size: 24rpx;
							color: #808080;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					>view:last-child {
						font-weight: 500;
						font-size: 24rpx;
						color: #4D8EEC;
					}
				}

				.imgBox_list:nth-child(even) {
					background-color: #FBFBFB;
				}

				.imgBox_list:nth-child(odd) {
					background-color: #FFFFFF;
				}
			}

			.imgBox_wrap {
				display: flex;
				flex-wrap: wrap;
				margin-left: calc(192rpx + 28rpx);
				flex: 1;

				>view:not(:last-child) {
					margin-right: 26rpx;
				}

				>view {
					margin-bottom: 20rpx;
				}

				.imgBox {
					width: 164rpx;
					height: 164rpx;
					display: inline-flex;
					position: relative;
					border-radius: 8rpx;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}

				}
			}
		}

		.box-item {
			display: flex;
			align-items: center;
			margin-top: 26rpx;
			font-size: 28rpx;

			>view:first-child {
				width: 192rpx;
				margin-right: 26rpx;
				color: #808080;
			}

			>view:last-child {
				flex: 1;
				color: #4D4D4D;
				word-break: break-all;
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
				// -webkit-line-clamp: 1;
				// /* 限制为两行 */
				// overflow: hidden;
			}

			.item_space-between {
				display: flex;
				justify-content: space-between;
				font-size: 14px;

				>view:last-child {
					color: #498CEC;
				}
			}

			.color-error {
				color: #FF0000 !important;
			}

			.color-49 {
				color: #498CEC !important;
			}
		}

		.box-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			>view:first-child {
				display: flex;
				align-items: center;
				flex: 1;

				>view:last-child {
					font-weight: 800;
					font-size: 30rpx;
					color: #171717;
				}
			}

			// >view:last-child {
			// 	padding: 4rpx 20rpx;
			// 	border-radius: 4rpx;
			// 	border: 2rpx solid #F1F1F1;
			// 	font-weight: 500;
			// 	font-size: 22rpx;
			// }

			.wks_active {
				background-color: #898989;
				color: #1A1A1A;
			}

			.sgz_active {
				background-color: #BED0FA;
				color: #5181F6;
			}

			.ztz_active {
				background-color: #C38100;
				color: #FFFFFF;
			}

			.ywg_acitve {
				background-color: #88CF65;
				color: #1A1A1A;
			}
		}
	}

	.type {
		font-size: 30rpx;
		line-height: 40px;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);
	}

	.pre {
		padding: 10px 30rpx;
		background-color: rgba(194, 194, 194, 0.2);
		min-height: 50px;
		width: 100%;
		white-space: pre-wrap;
		word-wrap: break-word;
		box-sizing: border-box;
		line-height: initial;
	}

	.accessory {
		width: 100%;
		height: 70px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.accessoryImg {
		width: 110rpx;
		height: 60px;
		margin-right: 8px;
	}

	.userImg {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		box-shadow: 0px 0 15px rgba(194, 194, 194, 0.5);
		margin-top: 5px;
	}

	.bubble {
		margin-left: 18px;
		width: 90%;
		box-sizing: border-box;
	}

	.bubble .bubble_content {
		width: 90%;
		background-color: #fff;
		padding: 10px 15px;
		display: inline-block;
		border-radius: 6px;
		position: relative;
		box-shadow: -2px 0 15px rgba(194, 194, 194, 0.5);
		position: relative;

	}

	.bubble .bubble_content::after {
		content: '';
		border: 8px solid #ffffff00;
		border-right: 8px solid #fff;
		position: absolute;
		top: 10px;
		left: -16px;
	}

	.record {
		/* background-color: rgba(234, 234, 234, 0.4); */
		/* padding-bottom: 60px; */
	}

	.bubble_content .name {
		font-size: 30rpx;
		margin: 10px 0;
	}

	.time {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular;

	}

	.item_title {
		margin: 10px 0;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		opacity: 0.8;
	}

	.approveBtn {
		position: fixed;
		bottom: 0;
		width: calc(100%);
		box-sizing: border-box;
		z-index: 99;
		background-color: #FFFFFF;
		box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
		padding: 18rpx 26rpx;
	}

	.approveBtn .btn {
		color: #fff;
		text-align: center;
		padding: 16rpx 0;
		background-color: #5181F6;
		border-radius: 6rpx
	}

	/* .approveBtn .btn:active {
		background-color: rgba(65, 129, 254, 0.8);
	} */

	.backBtn {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		box-sizing: border-box;
		z-index: 99;
	}

	.backBtn .btn-option {
		width: 100%;
		line-height: 40px;
		background-color: #4181FE;
		color: #fff;
		text-align: center;
	}

	.backBtn .btn-option:active {
		background-color: rgba(65, 129, 254, 0.8);
	}

	.editBtn {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		z-index: 99;
	}

	.editBtn .btn-delete {
		width: 50%;
		line-height: 40px;
		background-color: #D51C1C;
		color: #fff;
		text-align: center;
	}

	.editBtn .btn-resubmit {
		width: 50%;
		line-height: 40px;
		background-color: #5382F6;
		color: #fff;
		text-align: center;
	}

	.editBtn .btn {
		width: 50%;
		border-radius: 0;
	}

	.pass_wrap {
		position: absolute;
		top: 100px;
		right: 20px;
		z-index: 10;
	}

	.pass_icon {
		width: 80px;
		height: 80px;
	}

	.noData {
		text-align: center;
		font-size: 32rpx;
		margin-top: 120px;
		color: #bed0fb;
	}

	.noDataImg {
		width: 125px;
		height: 98px;
	}

	.table_title {
		list-style: none;
		justify-content: space-between;
		padding-left: 0;
		align-items: center;
		height: 56rpx;
		border-bottom: 1px solid #f1f1f1;
	}

	.table_title li {
		flex: 1;
		text-align: center;
		line-height: 56rpx;
	}

	.table_index {
		display: block;
		border-radius: 50%;
		color: #fff;
		background: #488DEC;
		width: 32rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		margin-right: 10rpx;
	}

	.table_success {
		display: block;
		color: #13B98C;
		background: rgba(19, 185, 140, 0.2);
		line-height: 32rpx;
		padding: 6rpx;
	}

	.table_error {
		display: block;
		color: #EA3941;
		background: rgba(234, 57, 65, 0.2);
		line-height: 32rpx;
		padding: 6rpx;
	}

	.table_item {
		list-style: none;
		justify-content: space-between;
		padding-left: 0;
		align-items: center;
		height: 100rpx;
		border-bottom: 1px solid #f1f1f1;
	}

	.table_item li {
		flex: 1;
		text-align: center;
		font-size: 12px;
		line-height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* .table_item li:last-child {
		justify-content: flex-end;
	} */

	.table_item li:nth-child(1) {
		flex: none;
		width: 136rpx;
	}

	.table_title li:nth-child(1) {
		flex: none;
		width: 136rpx;
	}

	.icon-down {
		height: 8px;
		width: 8px;
		background: url("@/static/icon-down-black.png") center no-repeat;
		background-size: 100%;
		margin-left: 4rpx;
	}

	.icon-right {
		height: 8px;
		width: 8px;
		background: url("@/static/icon-right.png") center no-repeat;
		background-size: 100%;
		margin-left: 8rpx;
	}

	.table_content {
		/* background: #f1f1f1; */
		padding: 28rpx;
	}

	.imgList {
		margin-bottom: 20rpx;
	}

	.imgList ul {
		list-style: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.imgList ul li {
		width: 30%;
		height: 100px;
		margin: 0 10rpx;
		margin-bottom: 20rpx;
	}

	.imgList ul li image {
		width: 100%;
		height: 100%;
	}

	.textRight {
		margin-left: 20px;
		width: 80%;
	}

	.textColor {
		color: gray;
		width: 68px;
	}
</style>