v3-lab-xcx/pages_safetyExamine/examineManage/examineDetail.vue

<!-- 安全检查-检查详情 -->
<template>
  <view class="examine">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view class="basics">
			<view class="basics_li">
				<text>学院：</text>
				<text>{{infoData.collegeName}}</text>
			</view>
			<view class="basics_li">
				<text>实验室：</text>
				<text>{{infoData.subjectName}}-{{infoData.roomNumber}}</text>
			</view>
			<view class="basics_li">
				<text>楼栋：</text>
				<text>{{infoData.buildName?infoData.buildName:'-'}}</text>
			</view>
			<view class="basics_li">
				<text>检查组织：</text>
				<text>{{infoData.checkType==1?'校园巡查':(infoData.checkType==2?'实验室自查':'')}}</text>
			</view>
			<view class="basics_li">
				<text>检查类型：</text>
				<text>{{infoData.checkCategory==1?'综合检查':(infoData.checkCategory==2?'专项检查':'')}}</text>
			</view>
			<view class="basics_li">
				<text>检查范围：</text>
				<text>{{infoData.checkRange==1?'全校':(infoData.checkRange==2?'学院':'实验室')}}</text>
			</view>
			<view class="basics_li" >
				<text>计划标题：</text>
				<text>{{infoData.title}}</text>
			</view>
			<view class="demand" style="border:none;">
				<text>检查要求：</text>
				<text>{{infoData.checkDemand?infoData.checkDemand:''}}</text>
			</view>
		</view>
		<view class="attachment" v-if="infoData.isAttachment==1">
			<view class="attachment_t">
				<text>材料附件</text>
				<text>点击文件标题查看</text>
			</view>
			<view class="attachment_li" v-for="item in attachmentList">
				<img src="@/pages_safetyExamine/images/icon_djc_wj.png"/>
				<text  @click="attachmentPreview(item)">{{item.fileName}}</text>
				<!-- <img class="attachment_li_del" src="@/images/Version3.3.3/icon_fjgk_sc.png"/> -->
			</view>
		</view>
		<view class="basics" v-if="manageStatus==2">
			<view class="basics_li">
				<text>检查结果：</text>
				<text>{{infoData.checkResult==0?'不符合':(infoData.checkResult==1?'符合':'')}}</text>
			</view>
			<view class="basics_li" v-if="infoData.checkResult==0">
				<text>整改期限：</text>
				<text>{{infoData.rectifyDeadline}}</text>
			</view>
			<view class="basics_li" v-if="infoData.checkResult==0">
				<text>整改通知：</text>
				<text style="color: #0183FA;" @click="rectifyInform">{{infoData.rectifyNotice == 1?'整改告知书':(infoData.rectifyNotice == 2?'整改通知书':'')}}</text>
			</view>
			<view class="basics_li">
				<text>检查者：</text>
				<text>{{infoData.checkUser}}</text>
			</view>
			<view class="basics_li" style="border:none;">
				<text>检查时间：</text>
				<text>{{infoData.checkTime}}</text>
			</view>
		</view>
		<!-- 综合检查 -->
		<viw v-if="infoData.checkCategory==1">
			<view class="inconformity" @click="inconformityFun()" v-if="manageStatus==2 && infoData.checkResult==0">不符合项<img v-if="inconformityStatus" src="@/pages_safetyExamine/images/icon_bfhx_xq.png"/><img v-if="!inconformityStatus" src="@/pages_safetyExamine/images/icon_bfhx_sq.png"/></view>
			<view v-for="(item,index) in infoData.checkHazardDtoList" v-if="manageStatus==2 && infoData.checkResult==0">
				<view class="danger">
					<view class="sort">{{index+1}}</view>
					<view class="grade" :style="item.switch?'border-bottom: 1rpx solid #D8D8D8;':'border:none;'">
						<text>第{{index+1}}项隐患</text>
						<text style="color: #0183FA;" @click="dangerItem(item)">{{item.rectifyStatus==1?'已完成':(item.rectifyStatus==2?'待整改':(item.rectifyStatus==3?'待复核':(item.rectifyStatus==4?'暂无法整改':'')))}} >></text>
					</view>
					<view v-if="item.switch">
						<view class="grade">
							<text>隐患等级：</text>
							<text>{{item.hazardLevel==2?'一般隐患':(item.hazardLevel==1?'重大隐患':(item.hazardLevel==3?'管理问题':''))}}</text>
						</view>
						<view class="project">
							<view class="project_t">检查项目：</view>
							<view class="project_b">{{item.hazardCheckProStr}}</view>
							<view class="project_b2" v-if="item.hazardCheckCount>0">此检查项在当前实验室累计出现{{item.hazardCheckCount}}次隐患</view>
						</view>
						<view class="project">
							<view class="project_t">检查要点：</view>
							<view class="project_b">{{item.hazardCheckPoint}}</view>
						</view>
						<view class="project">
							<view class="project_t">隐患描述：</view>
							<view class="project_b">{{item.hazardDescribe}}</view>
						</view>
						<view class="picture">
							<view class="picture_t">隐患照片</view>
							<view class="picture_b" @click="lockImg(item.uploadDtoList)">
								<img  :src="baseUrl+imgItem.fileUrl"   v-for="(imgItem,imgIndex) in item.uploadDtoList"/>
							</view>
						</view>
					</view>
				</view>
				<view class="pack_up" @click="switchFun(item)">{{item.switch?'收起':'展开'}}<img v-if="item.switch" src="@/pages_safetyExamine/images/icon_06_1.png"/><img v-if="!item.switch" src="@/pages_safetyExamine/images/icon_06.png"/></view>
			</view>
		</viw>
		<!-- 专项检查 -->
		<view v-if="infoData.checkCategory==2 && manageStatus==2"  v-for="(itemAll,indexAll) in infoData.checkHazardInfoVoList">
			<view class="inconformity_tow" @click="inconformityFun2(itemAll)" >{{itemAll.hazardName}}<img v-if="inconformityStatus2" src="@/pages_safetyExamine/images/icon_bfhx_xq.png"/><img v-if="!inconformityStatus2" src="@/pages_safetyExamine/images/icon_bfhx_sq.png"/></view>
			<view class="danger_border">
				<view class="ident">检查项目</view>
				<view class="danger special_danger" v-for="(item,index) in itemAll.checkHazardDtoList">
					<view class="grade" :style="item.switch?'border-bottom: 1rpx solid #D8D8D8;':'border:none;'">
						<view class="sort">{{index+1}}</view>
						<text>第{{index+1}}项隐患</text>
						<viwe :class="item.checkFlag==0?'noConform':'isConform'">{{item.checkFlag==0?'不符合':'符合'}}</viwe>
						<text style="color: #0183FA;" v-if="item.checkFlag==0" @click="dangerItem(item)">{{item.rectifyStatus==1?'已完成':(item.rectifyStatus==2?'待整改':(item.rectifyStatus==3?'待复核':(item.rectifyStatus==4?'暂无法整改':'')))}} >></text>
					</view>
					<view class="small_items">{{item.hazardCheckProStr}}</view>
					<view v-if="item.switch">
						<view class="frequency" v-if="item.hazardCheckCount>0">此检查项在当前实验室累计出现{{item.hazardCheckCount}}次隐患</view>
						<view class="grading">
							<text>隐患等级：</text>
							<text>{{item.hazardLevel==2?'一般隐患':(item.hazardLevel==1?'重大隐患':(item.hazardLevel==3?'管理问题':''))}}</text>
						</view>
						<view class="project">
							<view class="project_t">隐患描述：</view>
							<view class="project_b">{{item.hazardDescribe}}</view>
						</view>
						<view class="picture">
							<view class="picture_t">隐患照片</view>
							<view class="picture_b" @click="lockImg(item.uploadDtoList)">
								<img  :src="baseUrl+imgItem.fileUrl"   v-for="(imgItem,imgIndex) in item.uploadDtoList"/>
							</view>
						</view>
					</view>
					<view class="pack_up" v-if="item.checkFlag==0" @click="switchFun(item)">{{item.switch?'收起':'展开'}}<img v-if="item.switch" src="@/pages_safetyExamine/images/icon_06_1.png"/><img v-if="!item.switch" src="@/pages_safetyExamine/images/icon_06.png"/></view>
				</view>
			</view>
		</view>
	</scroll-view>
	<view class="report" @click="rectifyReport" v-if="isEndProcess==1 && infoData.checkResult==0">整改报告</view>
	<view class="bottom_btn" v-if="manageStatus==0 && isSelfData==1" @click="handleClick('','startInspect')">开始检查</view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {checkSign,queryDeptSignByUserId,findCheckManage,findByPlanIdAttachment} from '@/api/apiDemo/index.js'
export default {
  name: "rectifyList",
  components: {

  },
  data() {
    return {
		baseUrl:config.base_url,
		manageStatus:0,//0 待检查 1 检查中 2已检查
		pageType:0,
		inconformityStatus:false,
		infoData:{},
		isSelfData:'',
		attachmentList:[],
        checkCategory:'2',//检查类型 1综合检查 2专项检查
		inconformityStatus2:false,
		isEndProcess:'',

	}
  },
  onLoad(option) {
	 if(option.id){
	 	this.id=option.id
		this.isEndProcess=option.isEndProcess
	 	this.findCheckManage()
	 }

	 if(option.manageStatus){//检查状态
		 this.manageStatus=option.manageStatus;
	 }
	 if(option.isSelfData){//0没有权限 1 有权限
	 		 this.isSelfData=option.isSelfData;
	 }

	 if(option.manageStatus==0 || option.manageStatus==1){
		uni.setNavigationBarTitle({
			title:'待检查'
		})
	 }else if(option.manageStatus==2){
	 	uni.setNavigationBarTitle({
	 		title:'已检查'
	 	})
	 }
  },
  onShow() {

  },
  mounted(){

  },
  methods: {

		//滚动事件
		scrollGet(){

		},
		//开展检查
		handleClick(row,doType){
			if(doType=='startInspect'){
				uni.navigateTo({
				    url: '/pages_safetyExamine/examineManage/examineAdd?id='+this.id
				});
			}
		},
		//根据计划id查询附件列表
		async findByPlanIdAttachment(){
			let _this = this;
			const {data} = await findByPlanIdAttachment({checkPlanId:this.infoData.checkPlanId});
			if(data.code == 200){
				_this.attachmentList=data.data;
			}
		},
		//详情
		async findCheckManage(){
			let _this = this;
			const {data} = await findCheckManage({id:this.id});
			if(data.code == 200){
				if(data.data.checkCategory==1){//综合检查
					data.data.checkHazardDtoList.forEach(function(item){
						item.switch=false;
					})
				}else if(data.data.checkCategory==2){//专项检查
					data.data.checkHazardInfoVoList.forEach(function(item){
						item.checkHazardDtoList.forEach(function(item2){
							item2.switch=false;
						})

					})
				}
				this.infoData=data.data;

				if(data.data.isAttachment==1){//0没有附件 1有附件
					this.findByPlanIdAttachment()
				}

			}
		},
		//附件查看
		attachmentPreview(item){
			uni.showLoading({
				title: '下载中'
			});
			wx.downloadFile({
				url: config.base_url+item.fileUrl,
				header: {
					Authorization: uni.getStorageSync('token')
				},
				success: function (res) {
					uni.hideLoading();
					const filePath = res.tempFilePath
					wx.openDocument({
					  filePath: filePath,
					  success: function (res) {
						console.log('打开文档成功')
					  }
					})
				},
				fail: function (res){
					uni.hideLoading();
					uni.showToast({
						title: '下载失败',
						icon:"none",
						mask:true,
						duration: 2000
					});
				}
			})
		},
		//查看图片
		lockImg(list){
			console.log(list)
			if(!list[0]){
				return
			}
			let urlList=[];
			for(let i=0;i<list.length;i++){
				urlList.push(this.baseUrl+list[i].fileUrl)
			}
			wx.previewImage({
				urls: urlList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {},
			})
		},
		//隐患项跳转详情
		dangerItem(row){
			uni.navigateTo({
				 url: '/pages_safetyExamine/dangerManage/dangerDetail?item='+encodeURIComponent(JSON.stringify(row))
			})
		},
		//隐患项收起展开
	    inconformityFun(){
			this.inconformityStatus=!this.inconformityStatus;
			if(this.inconformityStatus){
				this.infoData.checkHazardDtoList.forEach(function(item){
					item.switch=true;
				})
			}else{
				this.infoData.checkHazardDtoList.forEach(function(item){
					item.switch=false;
				})
			}
		},
		//专项隐患项收起展开
		inconformityFun2(itemAll){
			this.inconformityStatus2=!this.inconformityStatus2;
			if(this.inconformityStatus2){
				itemAll.checkHazardDtoList.forEach(function(item){
					item.switch=true;
				})
			}else{
				itemAll.checkHazardDtoList.forEach(function(item){
					item.switch=false;
				})
			}
		},
		//隐患小项收起展开
		switchFun(item){
			item.switch=!item.switch
		},
		//整改通知
		rectifyInform(){//rectifyNotice 整改通知(1整改告知书 2整改通知书)
			if(this.infoData.rectifyNotice==1){//1整改告知书
				this.genReport(this.infoData.id)
			}else if(this.infoData.rectifyNotice==2){//2整改通知书
				this.genNotice(this.infoData.id)
			}
		},
		//整改报告
		rectifyReport(){
			uni.showLoading({
				title: '下载中'
			});
			wx.downloadFile({
				url: config.base_url+'/zd-security/checkRectify/genReport/' + this.infoData.id,
				header: {
					Authorization: uni.getStorageSync('token')
				},
				success: function (res) {
					const fileManager = wx.getFileSystemManager()
					const filePath = wx.env.USER_DATA_PATH + '/(整改报告).docx'
					fileManager.saveFile({
						tempFilePath: res.tempFilePath,
						filePath,
						success: () => {
							uni.hideLoading();
							wx.openDocument({
							filePath: filePath,
							showMenu: true,
							fileType: 'docx'
							})
						},
						fail: function (res){
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
					})
				},
				fail: function (res){
					uni.hideLoading();
					uni.showToast({
						title: '下载失败',
						icon:"none",
						mask:true,
						duration: 2000
					});
				}
			})
		},
		//整改通知书
		genNotice(id){
			uni.showLoading({
				title: '下载中'
			});
			wx.downloadFile({
				url: config.base_url+'/zd-security/checkManage/getRectifyAdviceNote/' + id,
				header: {
					Authorization: uni.getStorageSync('token')
				},
				success: function (res) {
					const fileManager = wx.getFileSystemManager()
					const filePath = wx.env.USER_DATA_PATH + '/(整改通知书).docx'
					fileManager.saveFile({
						tempFilePath: res.tempFilePath,
						filePath,
						success: () => {
							uni.hideLoading();
							wx.openDocument({
							filePath: filePath,
							showMenu: true,
							fileType: 'docx'
							})
						},
						fail: function (res){
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
					})
				},
				fail: function (res){
					uni.hideLoading();
					uni.showToast({
						title: '下载失败',
						icon:"none",
						mask:true,
						duration: 2000
					});
				}
			})
		},
		//整改告知书
		genReport(id){
			uni.showLoading({
				title: '下载中'
			});
			wx.downloadFile({
				url: config.base_url+'/zd-security/checkManage/getRectifyNotification/' + id,
				header: {
					Authorization: uni.getStorageSync('token')
				},
				success: function (res) {
					const fileManager = wx.getFileSystemManager()
					const filePath = wx.env.USER_DATA_PATH + '/整改报告.docx'
					fileManager.saveFile({
						tempFilePath: res.tempFilePath,
						filePath,
						success: () => {
							uni.hideLoading();
							wx.openDocument({
								filePath: filePath,
								showMenu: true,
								fileType: 'docx'
							})
						},
						fail: function (res){
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
					})
				},
				fail: function (res){
					uni.hideLoading();
					uni.showToast({
						title: '下载失败',
						icon:"none",
						mask:true,
						duration: 2000
					});
				}
			})
		},

  }
}
</script>

<style lang="stylus" scoped>
.examine{
	height:100%;
	display flex;
	.info-max-box{
		flex: 1;
		overflow: scroll;
		padding-bottom: 140rpx;
	}
	.basics{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 30rpx 32rpx;
		box-sizing: border-box;
		margin: 20rpx 30rpx ;
		.basics_li{
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #D8D8D8;
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 80rpx;
				width: 140rpx;
			}
			>text:nth-of-type(2){
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				text-align: right;
				white-space: nowrap;
			    overflow: hidden;
			    text-overflow: ellipsis;
			}
		}
		.demand{
			>text{
				display: block;
			}
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 70rpx;
				width: 140rpx;
			}
			>text:nth-of-type(2){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
			}
		}
	}
	.attachment{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;
		padding-bottom: 32rpx;
		box-sizing: border-box;
		.attachment_t{
			border-bottom: 1rpx solid #D8D8D8;
			>text:nth-of-type(1){
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 110rpx;
				margin-left: 28rpx;
			}
			>text:nth-of-type(2){
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 110rpx;
				margin-left: 24rpx;
			}
		}
		.attachment_li{
			height: 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 32rpx;
			>img{
				width: 30rpx;
				height: 26rpx;
				margin-right: 20rpx;
				margin-left: 50rpx;
			}
			>text{
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 40rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.attachment_li_del{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.inconformity{
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 100rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		>img{
			width: 30rpx;
			height: 26rpx;
			margin-left: 20rpx;
		}
	}
	/* 专项检查 */
	.inconformity_tow{
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 100rpx;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		>img{
			width: 30rpx;
			height: 26rpx;
			margin-left: 20rpx;
		}
	}
	.danger{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 15rpx 30rpx 15rpx;
		box-sizing: border-box;
		margin: 20rpx 30rpx;
		position: relative;
		.sort{
			width: 40rpx;
			height: 40rpx;
			background: #0183FA;
			border-radius: 20rpx 0rpx 10rpx 0rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			position: absolute;
			left: 0;
			top: 0;
		}
		.danger_title{
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height:80rpx;
			border-bottom: 1rpx solid #D8D8D8;
		}

		.grade{
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #D8D8D8;
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 80rpx;
				width: 140rpx;
			}
			>text:nth-of-type(2){
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				text-align: right;
			}
		}
		.grading{
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 80rpx;
				width: 140rpx;
			}
			>text:nth-of-type(2){
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				text-align: left;
				background: #F5F5F5;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
		}
		.small_items{
			min-height: 158rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			padding: 20rpx 14rpx;
			box-sizing: border-box;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			opacity: 1;
			border: 1rpx solid #E0E0E0;
			border-top:none;
		}

		.frequency{
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 26rpx;
			margin-top: 14rpx;
			text-align: right;
			margin-bottom: 14rpx;
		}
		.project{
			.project_t{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.project_b{
				min-height: 158rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				padding: 20rpx 14rpx;
				box-sizing: border-box;
				background: #F5F5F5;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
			.project_b2{
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 26rpx;
				margin-top: 14rpx;
				text-align: right;
			}
		}
		.picture{
			.picture_t{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.picture_b{
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				>img{
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin-right: 14rpx;
					margin-bottom: 10rpx;
				}
				>img:nth-of-type(3n+3){
					margin-right: 0rpx;
				}
			}
		}
	}
	.danger_border{
		border-radius: 20rpx;
		width: 690rpx;
		background: #FFFFFF;
		margin: 0rpx 30rpx 20rpx;
		overflow: hidden;

	}
	.special_danger{
		width:auto;
		background: #FFFFFF;
		padding: 0;
		box-sizing: border-box;
		margin: 0 30rpx 12rpx;
		border-radius: 0;
		.grade{
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			border-bottom: 1rpx solid #D8D8D8;
			position: relative;
			background: #F5F5F5;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			.sort{
				width: 40rpx;
				height: 40rpx;
				background: #0183FA;
				border-radius: 20rpx 0rpx 10rpx 0rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: center;
				position: absolute;
				left: 0;
				top: 0;
			}
			.isConform{
				width: 100rpx;
				height: 40rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 36rpx;
				background: #C4DEF6;
				text-align: center;
				border-radius:20rpx;
				margin-left: 12rpx;
				margin-top: 20rpx;
			}
			.noConform{
				width: 100rpx;
				height: 40rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FF0000;
				line-height: 36rpx;
				background: #F7C4C4;
				text-align: center;
				border-radius:20rpx;
				margin-left: 12rpx;
				margin-top: 20rpx;
			}
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 80rpx;
				width: 140rpx;
				margin-left: 66rpx;
			}
			>text:nth-of-type(2){
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				text-align: right;
				margin-right: 30rpx;
			}
		}

	}
	.ident{
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 42rpx;
		margin: 34rpx 30rpx;
	}
	.pack_up{
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		>img{
			width: 14rpx;
			height: 8rpx;
			margin-left: 22rpx;
		}
	}
	.report{
		width: 153rpx;
		height: 50rpx;
		background: #0183FA;
		border-radius: 25rpx 0rpx 0rpx 25rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;
		position: fixed;
		top: 180rpx;
		right: 0;
		text-align: center;
	}
	.bottom_btn{
		position: fixed;
		bottom: 26rpx;
		left: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 90rpx;
		width: 690rpx;
		height: 90rpx;
		background: #0183FA;
		border-radius: 20rpx;
		text-align: center;

	}
}
</style>