v3-h5-web/pages_basics/views/earlyWarningManage/earlyWarningDetail.vue

<!-- 预案报警信息 -->
<template>
	<view class="earlyWarning">
		
			<!-- 预案报警 -->
			<view class="header" v-if="form.warnType==4">{{form.eventName}} - {{form.riskPlanLevel ==1?'低风险':(form.riskPlanLevel ==2?'中风险':(form.riskPlanLevel ==3?'较高风险':(form.riskPlanLevel ==4?'高风险':'')))}}</view>
			<!-- 化学品 -->
			<view class="header_tow" v-if="form.warnType==1">
				{{form.chemicalWarnType == 1?'化学品违规带离':
				(form.chemicalWarnType == 2?'化学品超时未归还':
				(form.chemicalWarnType == 3?'化学品过期':
				(form.chemicalWarnType == 4?'化学品即将过期':
				(form.chemicalWarnType == 5?'化学品超期未入库':
				(form.chemicalWarnType == 6?'化学品业务操作超时':
				'')))))}}
			</view>
			<!-- 气瓶 -->
			<view class="header_three" v-if="form.warnType==2">{{form.warnContent}}</view>
			<!-- 算法识别 -->
			<view class="header_four" v-if="form.warnType==3">
				{{form.algorithmType == 1?'未穿戴护目镜':(
				form.algorithmType == 2?'未穿戴实验服':(
				form.algorithmType == 3?'未穿戴手套':(
				form.algorithmType == 4?'倒地预警':'')))}}
			</view>
			<!-- 预案报警 -->
			<view class="site" v-if="form.warnType==4">
				<img :src="imagesUrl('commonality/icon_wtzg_xx.png')" />
				<view>{{form.subName}}</view>
				<view></view>
				<view>{{form.labSubRelInfoRelVo.buildName}}{{form.labSubRelInfoRelVo.floorName}}{{form.labSubRelInfoRelVo.roomNum}}</view>
			</view>
			<!-- 化学品 -->
			<view class="site_tow" v-if="form.warnType==1 || form.warnType==2 || form.warnType==3">
				<view class="site_tow_t">
					<img :src="imagesUrl('commonality/icon_hxpyj_sj.png')" />
					<text>{{form.warnTime}}</text>
				</view>
				<view class="site_tow_b">
					<img :src="imagesUrl('commonality/icon_wtzg_xx.png')" />
					<text>{{form.subName}}</text>
					<text></text>
					<text>{{form.buildName}}{{form.floorName}}{{form.roomNum}}</text>
				</view>
			</view>
			<!-- 预案报警 -->
			<view class="basics" v-if="form.warnType==4">
				<view class="small_title"><text></text><text>风险概况</text></view>
				<view class="basics_li" style="margin-top:20rpx;">
					<text>发生时间：</text>
					<text v-if="form.days>0" style="position: absolute;right: 0;top:-33rpx;">+{{form.days}}</text>
					<text style="padding-right:10rpx;">{{form.eventStartTime}}{{form.eventEndTime?' - '+form.eventEndTime:''}}</text>
				</view>
				<view class="basics_li">
					<text>持续时间：</text>
					<text>{{form.riskDuration?form.riskDuration:'-'}}分钟</text>
				</view>
				<view class="basics_li">
					<text>风险响应人员：</text>
					<text>{{form.handledPerson?form.handledPerson:'-'}}</text>
				</view>
				<view class="basics_li">
					<text>实验室内人员：</text>
					<text>{{form.internalPerson?form.internalPerson:'-'}}</text>
				</view>
			</view>
			<!-- 化学品 化学品违规带离/化学品超时未归还 -->
			<view class="basics" v-if="form.warnType==1 && (form.chemicalWarnType ==1 || form.chemicalWarnType ==2)">
				<view class="small_title"><text></text><text>化学品信息</text></view>
				<view class="basics_li" style="margin-top:20rpx;">
					<text>{{form.chemicalName}}</text>
					<text></text>
				</view>
				<view class="basics_li">
					<text>存放位置：</text>
					<text>{{form.position}}</text>
				</view>
				<view class="basics_li">
					<text>化学品余量：</text>
					<text>{{form.surplus}}</text>
				</view>
				<view class="basics_li" v-if="form.chemicalWarnType==2">
					<text>申领人：</text>
					<text>{{form.collectUserName}}</text>
				</view>
				<view class="basics_li" v-if="form.chemicalWarnType==2">
					<text>申领时间：</text>
					<text>{{form.collectTime}}</text>
				</view>
			</view>
			<!-- 超期未入库 -->
			<view class="basics" v-if="form.warnType==1 && form.chemicalWarnType ==5">
				<view class="small_title"><text></text><text>化学品信息</text></view>
				<view v-for="(item,index) in form.chemicalOverdueStockList" :key="index">
					<view class="basics_li" style="margin-top:20rpx;">
						<text>{{item.chemicalName}}</text>
						<text></text>
					</view>
					<view class="basics_li">
						<text>CAS号：</text>
						<text>{{item.casNum}}</text>
					</view>
					<view class="basics_li">
						<text>化学品类型：</text>
						<text>{{item.chemicalCategory}}</text>
					</view>
				</view>
			</view>
			<!-- 过期/即将过期 -->
			<view class="basics" v-if="form.warnType==1 && (form.chemicalWarnType ==3 || form.chemicalWarnType ==4)">
				<view class="small_title"><text></text><text>化学品信息</text></view>
				<view v-for="(item,index) in form.chemicalExpireList" :key="index">
					<view class="basics_li" style="margin-top:20rpx;">
						<text>{{item.chemicalName}}</text>
						<text></text>
					</view>
					<view class="basics_li">
						<text>存放位置：</text>
						<text>{{item.position}}</text>
					</view>
					<view class="basics_li">
						<text>化学品余量：</text>
						<text>{{item.surplus}}</text>
					</view>
					<view class="basics_li">
						<text>过期时间：</text>
						<text>{{item.expireTime}}</text>
					</view>
				</view>
			</view>
			<!-- 过期/即将过期 -->
			<view class="basics" v-if="form.warnType==1 && form.chemicalWarnType ==6">
				<view class="small_title"><text></text><text>操作信息</text></view>
				<view class="basics_li" style="margin-top:20rpx;">
					<text>{{form.position}}</text>
					<text></text>
				</view>
				<view class="basics_li">
					<text>操作人：</text>
					<text>{{form.operationPerson}}</text>
				</view>
				<view class="basics_li">
					<text>操作类型：</text>
					<text>{{form.alarmType}}</text>
				</view>
			</view>
			<!-- 气瓶 -->
			<view class="basics" v-if="form.warnType==2">
				<view class="small_title"><text></text><text>气瓶信息</text></view>
				<view class="basics_li" style="margin-top:20rpx;">
					<text>{{form.name}}</text>
					<text></text>
				</view>
				<view class="basics_li">
					<text>气体余量：</text>
					<text>{{form.margin}}</text>
				</view>
				<view class="basics_li">
					<text>气瓶规格：</text>
					<text>{{form.specification}}</text>
				</view>
				<view class="basics_li">
					<text>所有人：</text>
					<text>{{form.holder}}</text>
				</view>
				<view class="basics_li">
					<text>入库时间：</text>
					<text>{{form.entryTime}}</text>
				</view>
				<view class="basics_li" v-if="form.chemicalWarnType==2">
					<text>申领人：</text>
					<text>{{form.applyUser}}</text>
				</view>
				<view class="basics_li" v-if="form.chemicalWarnType==2">
					<text>申领时间：</text>
					<text>{{form.applyTime}}</text>
				</view>
			</view>
			<!-- 通知短信 -->
			<view class="note" v-if="(form.warnType==4 && form.userLogVoList[0]) || (form.warnType==3 && form.userLogVoList[0]) || (form.warnType==1 && form.chemicalWarnType ==6 && form.userLogVoList[0])">
				<view class="small_title">
					<text></text>
					<text>报警通知</text>
				</view>
				<view class="note_li-box" style="margin-top:20rpx;" v-for="(item,index) in form.userLogVoList" :key="index">
					<text class="note-li-r-1">{{item.name}}</text>
					<view class="note_li_r-2" v-if="item.isSuccess==1">
						<img :src="imagesUrl('commonality/icon_yjxx_ytz.png')" />
						<text>{{item.alarmType==1?'电话':'短信'}}已通知</text>
					</view>
				</view>
			</view>
			<!-- 语音播报 预案/算法 -->
			<view class="note" v-if="form.warnType==4 || form.warnType==3">
				<view class="small_title"><text></text><text>预警通知</text></view>
				<view class="note_li" style="margin-top:20rpx;">
					<text>语音播报</text>
					<view class="note_li_r"><img :src="imagesUrl('commonality/icon_yjxx_ytz.png')" /><text>已通知</text></view>
				</view>
			</view>
			<!-- 声光报警通知 化学品/气瓶 -->
			<view class="note" v-if="(form.warnType==1 || form.warnType==2) && form.chemicalWarnType==1">
				<view class="small_title"><text></text><text>预警通知</text></view>
				<view class="note_li" style="margin-top:20rpx;">
					<text>声光报警通知</text>
					<view class="note_li_r"><img
							:src="imagesUrl('commonality/icon_yjxx_ytz.png')" /><text>{{form.voiceBroadcast == 1?'已通知':''}}</text></view>
				</view>
			</view>
			<!-- 报警抓拍-视频 -->
			<view v-if="(form.warnType==1&&form.chemicalWarnType==1&&videoType) || (form.warnType!=1&&videoType)"
				class="picture">
				<view class="small_title" style="border-bottom: none !important;">
					<text></text>
					<text style="flex:1;">报警抓拍</text>
					<text style="width:100rpx;color:#0183fa;" @click="goVideoPage()">查看</text>
				</view>
			</view>
			<!-- 报警抓拍-图片 -->
			<view v-if="snapImg[0]&&!videoType"
				class="picture">
				<view class="small_title" style="border-bottom: none !important;">
					<text></text>
					<text style="flex:1;">报警抓拍</text>
				</view>
				<view class="picture_b">
					<view class="img">
						<img v-for="(item,index) in snapImg" @click="lockImg(snapImg)" :key="index"
							:src="item" />
					</view>
				</view>
			</view>
			<!-- 查看监控 -->
			<view class="bottom_btn"
				v-if="(form.warnType==1&&form.chemicalWarnType==1&&form.recordVideo[0]) || (form.warnType!=1&&form.recordVideo[0])"
				@click="handleClick('','monitor')">查看监控</view>
		
	</view>

</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		config
	} from '@/api/request/config.js'
	import {
		systemMineWarningNoticeDetail,
		laboratoryEventFindByEventId,
	} from '@/pages_basics/api/index.js'
	export default {
		name: "rectifyList",
		components: {

		},
		data() {
			return {
				configUrl: config.base_url,
				//列表请求参数
				getData: {
					pageNum: 1,
					pageSize: 20,
				},
				total: 0,
				warningId: null,
				warnType: null,
				form: {
					userLogVoList:[],
					recordVideo:[],
				},
				currentTime: '',
				timeStatus: false,
				//报警预案视频相关
				webViewUrl:'',
				videoType: false,
				//图片相关
				snapImg:[],

			}
		},
		onLoad(option) {
			// console.log('短信',option)
			let self = this;
			if (!uni.getStorageSync('token')) {
				if (option.noticeId) {
					uni.setStorageSync('warningId', option.noticeId);
					uni.setStorageSync('warnType', '1');
				} else if (option.eventId) {
					uni.setStorageSync('warningId', option.eventId);
					uni.setStorageSync('warnType', '4');
				}else if (option.id) {
					uni.setStorageSync('warningId', option.id);
					uni.setStorageSync('warnType', '4');
				}
				uni.redirectTo({
					url: '/pages/views/login/login',
				});
			} else {
				if (option.noticeId) {
					this.warningId = option.noticeId;
					this.warnType = '1';
				} else if (option.eventId) {
					this.warningId = option.eventId
					this.warnType = '4';
				}else if (option.id) {
					this.warningId = option.id
					this.warnType = '4';
				} else if (uni.getStorageSync('warningId')) {
					this.warningId = uni.getStorageSync('warningId');
					this.warnType = uni.getStorageSync('warnType');
					uni.removeStorageSync('warningId');
					uni.removeStorageSync('warnType');
				}
			}
		},
		onShow() {
			
		},
		mounted() {
			this.getInfo();
		},
		methods: {
			//截取封面
			videoCover() {
				let video = document.getElementById('#myvideo');
				let canvas = document.createElement("canvas");
				let width = video.width; //canvas的尺寸和图片一样
				let height = video.height;
				canvas.width = width;
				canvas.height = height;
				canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
				let videoImg = canvas.toDataURL('image/jpeg'); //转换为base64
			},
			onLoadedMetadata(e) {
				const duration = e.duration;
				const width = e.videoWidth;
				const heigth = e.videoHeight;

				const canvas = uni.createCanvasContext('myCanvas')
				canvas.canvas.width = width;
				canvas.canvas.height = heigth;

				canvas.drawImage('myVideo', 0, 0, width, heigth)
				canvas.draw();

				const that = this;

				setTimeout(function() {
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: function(res) {
							const imagePath = res.tempFilePath;
						}
					})
				}, 1000)
			},
			//滚动事件
			scrollGet() {
				let self = this;

			},
			//判断预警时间是否超过30分钟
			compareTime(gettime) {
				let timeOut = 30 * 60 * 1000;
				let currentTime = new Date().getTime() //获取当前时间
				let endTime = new Date(gettime).getTime() //预警时间
				if (currentTime - endTime > timeOut) {
					// console.log('预警时间超过30分钟')
					this.timeStatus = false;
				} else {
					// console.log('预警没超过30分钟')
					this.timeStatus = true;
				}

			},
			//查看图片
			lockImg(list) {
				if (!list[0]) {
					return
				}
				let urlList = [];
				for (let i = 0; i < list.length; i++) {
					urlList.push(list[i])
				}
				uni.previewImage({
					urls: urlList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			//视频全屏播放
			lockVideo() {
				let videoContext = uni.createVideoContext("myvideo", this);
				videoContext.requestFullScreen({
					direction: 90
				});
				// this.videoContext.play();
			},
			//计算两个日期差值（天）
			datedifference(sDate1, sDate2) { //sDate1和sDate2是2006-12-18格式
				let dateSpan, tempDate, iDays
				sDate1 = Date.parse(sDate1)
				sDate2 = Date.parse(sDate2)
				dateSpan = sDate2 - sDate1
				dateSpan = Math.abs(dateSpan)
				iDays = Math.floor(dateSpan / (24 * 3600 * 1000))
				return iDays
			},
			getInfo() {
				if (this.warnType != 4) {
					this.systemMineWarningNoticeDetail();
				} else if (this.warnType == 4) {
					this.laboratoryEventFindByEventId();
				}
			},
			//获取详情
			async systemMineWarningNoticeDetail() {
				let _this = this;
				const {
					data
				} = await systemMineWarningNoticeDetail({
					id: this.warningId
				})
				if (data.code == 200) {
					if (data.data.warnType == 3) {
						uni.setNavigationBarTitle({
							title: '算法识别预警信息'
						})
					} else if (data.data.warnType == 1) {
						uni.setNavigationBarTitle({
							title: '化学品预警信息'
						})
					} else if (data.data.warnType == 2) {
						uni.setNavigationBarTitle({
							title: '气瓶预警信息'
						})
					}
					let list = [];
					data.data.warningNoticeLogVoList.forEach((item) => {
						let minList = item.noticePreson.split(',');
						minList.forEach((minItem) => {
							list.push({
								name: minItem,
								alarmType:item.alarmType,
								isSuccess: 1,
							})
						})
					})
					data.data.userLogVoList = list;
					data.data.recordVideo = data.data.recordVideo?data.data.recordVideo:[];
					this.$set(this, 'form', data.data);
					this.$set(this, 'snapImg', data.data.snapImg?data.data.snapImg:[]);
					if(data.data.recordVideo){
						let newData = JSON.parse(data.data.recordVideo);
						if(!newData.endTime){
							this.$set(this,'webViewUrl','');
							this.$set(this,'videoType',false);
							return
						}
						let url = uni.getStorageSync('cameraExtranetAgent')+'?cameraIndexCode='+newData.cameraIndexCode+'&startTime='+newData.startTime+'&endTime='+newData.endTime
						this.$set(this,'webViewUrl',url);
						this.$set(this,'videoType',true);
					}else{
						this.$set(this,'webViewUrl','');
						this.$set(this,'videoType',false);
					}
				}
			},
			//获取详情
			async laboratoryEventFindByEventId() {
				let _this = this;
				const {
					data
				} = await laboratoryEventFindByEventId({
					eventId: this.warningId
				})
				if (data.code == 200) {
					uni.setNavigationBarTitle({
						title: '预案报警信息'
					})
					data.data.warnType = 4;
					data.data.eventStartTime = parseTime(data.data.eventStartTime, "{y}-{m}-{d} {h}:{i}:{s}");
					data.data.eventEndTime = data.data.eventEndTime?parseTime(data.data.eventEndTime, "{h}:{i}:{s}"):null;
					if(data.data.recordPhoto){
						data.data.recordPhoto=data.data.recordPhoto.split(',')
					}
					let list = [];
					data.data.messageLogVoList.forEach((item) => {
						let minList = item.nickRoleName.split(',');
						minList.forEach((minItem) => {
							list.push({
								name: minItem,
								alarmType:item.alarmType,
								isSuccess: 1,
							})
						})
					})
					data.data.userLogVoList = list;
					data.data.recordVideo = data.data.recordVideo?data.data.recordVideo:[];
					this.$set(this, 'form', data.data);
					this.$set(this, 'snapImg', data.data.snapImg?data.data.snapImg:[]);
					if(data.data.recordVideo){
						if(data.data.recordVideo[0]){
							let newData = JSON.parse(data.data.recordVideo);
							if(!newData.endTime){
								this.$set(this,'webViewUrl','');
								this.$set(this,'videoType',false);
								return
							}
							let url = uni.getStorageSync('cameraExtranetAgent')+'?cameraIndexCode='+newData.cameraIndexCode+'&startTime='+newData.startTime+'&endTime='+newData.endTime
							this.$set(this,'webViewUrl',url);
							this.$set(this,'videoType',true);
						}else{
							this.$set(this,'webViewUrl','');
							this.$set(this,'videoType',false);
						}
					}else{
						this.$set(this,'webViewUrl','');
						this.$set(this,'videoType',false);
					}
				}
			},
			goVideoPage(){
				uni.navigateTo({
						url: '/pages_basics/views/earlyWarningManage/warningVideo?item='+encodeURIComponent(JSON.stringify(this.webViewUrl))
				});
			},
			handleClick(row, doType) {
				let self = this;
				if (doType == 'monitor') { //监控
					/* uni.navigateTo({
						url: '/pages_basics/views/earlyWarningManage/videoMonitoring?subId=' + this.form.subId + '&floorId=' +
							this.form.floorId //我的实验室
					}); */
					let obj = {
						type:4,
						subId:this.form.subId
					}
					uni.navigateTo({
							url: '/pages_manage/views/laboratory/videoPlayer?item='+encodeURIComponent(JSON.stringify(obj))
					});
				}

			},


		}
	}
</script>

<style lang="stylus" scoped>
	.earlyWarning {
		padding-bottom: 30rpx;
		box-sizing: border-box;
		overflow-y: scroll;
	
		.red_color {
			color: #D40000;
			border: 1rpx solid #D40000;
		}

		.orange_color {
			color: #FF4800;
			border: 1rpx solid #FF4800;
		}

		.yellow_color {
			color: #FFA34E;
			border: 1rpx solid #FFA34E;
		}

		.info-max-box {
			flex: 1;
			overflow: scroll;
		}

		.header {
			width: 750rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #D40000;
			line-height: 80rpx;
			text-align: center;
			background: rgba(212, 0, 0, 0.2);
		}

		.header_tow {
			width: 750rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FF4800;
			line-height: 80rpx;
			text-align: center;
			background: rgba(255, 72, 0, 0.2);
		}

		.header_three {
			width: 750rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FF4800;
			line-height: 80rpx;
			text-align: center;
			background: rgba(255, 72, 0, 0.2);
		}

		.header_four {
			width: 750rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFA34E;
			line-height: 80rpx;
			text-align: center;
			background: rgba(255, 163, 78, 0.2);
		}

		.site {
			padding: 26rpx;
			background: #FFFFFF;
			display: flex;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx 30rpx;

			>img {
				width: 30rpx;
				height: 30rpx;
				margin: auto 22rpx auto 30rpx;
			}

			>view:nth-of-type(1) {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				width:200rpx;
				color: #333333;
				line-height: 32rpx;
				display:block;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
			}

			>view:nth-of-type(2) {
				display: inline-block;
				width: 2rpx;
				background: #E0E0E0;
				margin: 0 24rpx;
			}

			>view:nth-of-type(3) {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				flex: 1;
				color: #333333;
				line-height: 32rpx;
				display:block;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
			}
		}

		.site_tow {
			width: 690rpx;
			height: 170rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx 30rpx;
			overflow: hidden;

			.site_tow_t {
				height: 40rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 32rpx;

				>img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 22rpx;
					margin-left: 30rpx;
				}

				>text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
				}
			}

			.site_tow_b {
				height: 40rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 20rpx;

				>img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 22rpx;
					margin-left: 30rpx;
				}

				>text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
				}

				>text:nth-of-type(2) {
					display: inline-block;
					width: 2rpx;
					height: 20rpx;
					background: #E0E0E0;
					margin: 0 24rpx 0 28rpx;
				}

				>text:nth-of-type(3) {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
				}
			}

		}

		.small_title {
			height: 90rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #E0E0E0;

			>text:nth-of-type(1) {
				display: inline-block;
				width: 4rpx;
				height: 30rpx;
				background: #0183FA;
				margin: 0 22rpx 0 28rpx;
			}

			>text:nth-of-type(1) {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;
			}
		}

		.basics {
			margin-left: 30rpx;
			width: 690rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding-bottom: 16rpx;
			box-sizing: border-box;

			.basics_li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 30rpx;
				position: relative;

				>text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 60rpx;
				}

				>text:nth-of-type(2) {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 60rpx;
					flex: 1;
					text-align: right;
				}
			}
		}

		.note {
			margin-left: 30rpx;
			margin-top: 20rpx;
			width: 690rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding-bottom: 16rpx;
			box-sizing: border-box;
			.note_li-box{
				display: flex;
				margin: 0 30rpx;
				.note-li-r-1{
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 60rpx;
					flex: 1 !important;;
				}
				.note_li_r-2 {
					width:190rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				
					>img {
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
				
					font-size: 28rpx;
					font-family: PingFang SC-Medium,
					PingFang SC;
					font-weight: 400;
					color: #0183FA;
					line-height: 60rpx;
				
				}
			}
			.note_li {
				display: flex;
				justify-content: space-between;
				margin: 0 30rpx;

				>text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 60rpx;
				}

				.note_li_r {
					width:140rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

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

					font-size: 28rpx;
					font-family: PingFang SC-Medium,
					PingFang SC;
					font-weight: 400;
					color: #0183FA;
					line-height: 60rpx;

				}
			}
		}

		.picture {
			margin-left: 30rpx;
			width: 690rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 20rpx;

			.picture_b {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 40rpx 30rpx 10rpx;
				box-sizing: border-box;

				.videoOpacity1 {
					opacity: 1;
				}

				.videoOpacity0 {
					opacity: 0;
				}

				.video {
					position: relative;
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin-right: 38rpx;
					margin-bottom: 10rpx;

					.video_t {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						position: absolute;
					}

					.video_b {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						left: 55rpx;
						top: 55rpx;
					}
				}

				.img {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;

					>img {
						width: 180rpx;
						height: 180rpx;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						margin-right: 38rpx;
						margin-bottom: 20rpx;
					}

					>img:nth-child(3n+3) {
						margin-right: 0;
					}
				}

			}
		}

		.bottom_btn {
			width: 690rpx;
			height: 90rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			border: 1rpx solid #0183FA;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #0183FA;
			line-height: 90rpx;
			text-align: center;
			background: #F5F5F5;
			margin: 90rpx 30rpx 30rpx;

		}
	}
</style>