heyang 2 anos atrás
pai
commit
b906e23871

+ 30 - 1
pages.json

@@ -1,6 +1,35 @@
 {
 	"pages": [
-
+		{
+			"path": "pages/earlyWarningManage/earlyWarningArithmeticDetail",
+			"style": {
+				"navigationBarTitleText": "算法识别预警信息"
+			}
+		},
+		{
+			"path": "pages/earlyWarningManage/earlyWarningGasDetail",
+			"style": {
+				"navigationBarTitleText": "气瓶预警信息"
+			}
+		},
+		{
+			"path": "pages/earlyWarningManage/earlyWarningChemistryDetail",
+			"style": {
+				"navigationBarTitleText": "化学品预警信息"
+			}
+		},
+		{
+			"path": "pages/earlyWarningManage/earlyWarningPlanDetail",
+			"style": {
+				"navigationBarTitleText": "预案预警信息"
+			}
+		},
+        {
+			"path": "pages/earlyWarningManage/earlyWarningList",
+			"style": {
+				"navigationBarTitleText": "预警记录"
+			}
+		},
 		{
 			"path": "pages/home",//首页
 			"style": {

+ 349 - 0
pages/earlyWarningManage/earlyWarningArithmeticDetail.vue

@@ -0,0 +1,349 @@
+<!-- 算法识别信息 -->
+<template>
+  <view class="earlyWarning">
+	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
+		<!-- 预案报警 -->
+		<view class="header">多人未穿戴实验服</view>
+		<view class="site">
+			<view class="site_t">
+				<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
+				<text>2023-10-1014:00</text>
+			</view>
+			<view class="site_b">
+				<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
+				<text>一号实验室</text>
+				<text></text>
+				<text>一号楼二楼C区C111</text>
+			</view>
+		</view>
+		<view class="note">
+			<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="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+			<view class="note_li">
+				<text>李秀丽(安全责任人)</text>
+				<view class="note_li_r"><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+			<view class="note_li">
+				<text>周燕(安全责任人)</text>
+				<view class="note_li_r"><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+		</view>
+		<view class="note">
+			<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="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+		</view>
+		<view class="picture">
+			<view class="small_title"><text></text><text>报警抓拍</text></view>
+			<view class="picture_b" @click="lockImg(item.uploadDtoList)">
+				<img  src="@/images/icon_yjxx_ytz.png"/>
+				<!-- <img  :src="baseUrl+imgItem.fileUrl"   v-for="(imgItem,imgIndex) in item.uploadDtoList"/> -->
+			</view>
+		</view>
+		<view class="bottom_btn">查看监控</view>
+	</scroll-view>	
+  </view>
+
+</template>
+
+<script>
+import { config } from '@/api/request/config.js'
+import {checkManageList,conditionCollegeInfo} from '@/api/index.js'
+export default {
+  name: "rectifyList",
+  components: {
+   
+  },
+  data() {
+    return {
+		//列表请求参数
+		getData:{
+			pageNum:1,
+			pageSize:20,
+		},
+		total:0,
+		
+	}
+  },
+  onLoad(option) {
+	  
+  },
+  onShow() {
+	
+  },
+  mounted(){
+	 
+	  
+  },
+  methods: {
+		
+		//滚动事件
+		scrollGet(){
+			let self=this;
+			
+		},
+		//查看图片
+		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) {},
+			})
+		},
+		
+		handleClick(row,doType){
+		  let self=this;
+		  if( doType=='detail'){//详情	
+			  
+		  }
+		  
+		},
+		
+	  
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.earlyWarning{
+	height:100%;
+	display flex;
+	padding-bottom: 30rpx;
+	box-sizing: border-box;
+	.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: #FFA34E;
+		line-height: 80rpx;
+		text-align: center;
+		background: rgba(255,163,78,0.2);
+	}
+	.site{
+		width: 690rpx;
+		height: 170rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+		margin:20rpx 30rpx;
+		overflow: hidden;
+		.site_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_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;
+			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;
+			}
+			>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{
+			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{
+				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;
+			>img{
+				width: 180rpx;
+				height: 180rpx;
+				border-radius: 10rpx 10rpx 10rpx 10rpx;
+				margin-right: 38rpx;
+				margin-bottom: 10rpx;
+			}
+			>img:nth-of-type(3n+3){
+				margin-right: 0rpx;
+			}
+		}
+	}
+	.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>

+ 362 - 0
pages/earlyWarningManage/earlyWarningChemistryDetail.vue

@@ -0,0 +1,362 @@
+<!-- 化学品报警信息-->
+<template>
+  <view class="earlyWarning">
+	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
+		<!-- 预案报警 -->
+		<view class="header">化学品违规带离</view>
+		<view class="site">
+			<view class="site_t">
+				<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
+				<text>2023-10-1014:00</text>
+			</view>
+			<view class="site_b">
+				<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
+				<text>一号实验室</text>
+				<text></text>
+				<text>一号楼二楼C区C111</text>
+			</view>
+		</view>
+		<view class="basics">
+			<view class="small_title"><text></text><text>化学品信息</text></view>
+			<view class="basics_li" style="margin-top:20rpx;">
+				<text>化学品名称</text>
+				<text></text>
+			</view>
+			<view class="basics_li">
+				<text>存放位置:</text>
+				<text>3号柜化学品余量:100g</text>
+			</view>
+			<view class="basics_li">
+				<text>化学品余量:</text>
+				<text>100g</text>
+			</view>
+			<view class="basics_li">
+				<text>申领人:</text>
+				<text>曹秀康</text>
+			</view>
+			<view class="basics_li">
+				<text>申领时间:</text>
+				<text>10-10 10:00:23</text>
+			</view>
+			<view class="basics_li">
+				<text>过期时间:</text>
+				<text>10-10 10:00:23</text>
+			</view>
+		</view>
+		<view class="note">
+			<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="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+		</view>
+		<view class="picture">
+			<view class="small_title"><text></text><text>报警抓拍</text></view>
+			<view class="picture_b" @click="lockImg(item.uploadDtoList)">
+				<img  src="@/images/icon_yjxx_ytz.png"/>
+				<!-- <img  :src="baseUrl+imgItem.fileUrl"   v-for="(imgItem,imgIndex) in item.uploadDtoList"/> -->
+			</view>
+		</view>
+		<view class="bottom_btn">查看监控</view>
+	</scroll-view>	
+  </view>
+
+</template>
+
+<script>
+import { config } from '@/api/request/config.js'
+import {checkManageList,conditionCollegeInfo} from '@/api/index.js'
+export default {
+  name: "rectifyList",
+  components: {
+   
+  },
+  data() {
+    return {
+		//列表请求参数
+		getData:{
+			pageNum:1,
+			pageSize:20,
+		},
+		status:0,
+		total:0,
+		
+	}
+  },
+  onLoad(option) {
+	  
+  },
+  onShow() {
+	
+  },
+  mounted(){
+	 
+	  
+  },
+  methods: {
+		
+		//滚动事件
+		scrollGet(){
+			let self=this;
+			
+		},
+		//查看图片
+		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) {},
+			})
+		},
+		
+		handleClick(row,doType){
+		  let self=this;
+		  if( doType=='detail'){//详情	
+			  
+		  }
+		  
+		},
+		
+	  
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.earlyWarning{
+	height:100%;
+	display flex;
+	padding-bottom: 30rpx;
+	box-sizing: border-box;
+	.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: #FF4800;
+		line-height: 80rpx;
+		text-align: center;
+		background: rgba(255,72,0,0.2);
+	}
+	.site{
+		width: 690rpx;
+		height: 170rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+		margin:20rpx 30rpx;
+		overflow: hidden;
+		.site_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_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;
+			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;
+			}
+			>text:nth-of-type(2){
+				font-size: 28rpx;
+				font-family: PingFang SC-Medium, PingFang SC;
+				font-weight: 400;
+				color: #333333;
+				line-height: 60rpx;
+				text-align: right;
+				flex: 1;
+			}
+		}
+	}
+	.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{
+			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{
+				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;
+			>img{
+				width: 180rpx;
+				height: 180rpx;
+				border-radius: 10rpx 10rpx 10rpx 10rpx;
+				margin-right: 38rpx;
+				margin-bottom: 10rpx;
+			}
+			>img:nth-of-type(3n+3){
+				margin-right: 0rpx;
+			}
+		}
+	}
+	.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>

+ 357 - 0
pages/earlyWarningManage/earlyWarningGasDetail.vue

@@ -0,0 +1,357 @@
+<!-- 气瓶报警信息 -->
+<template>
+  <view class="earlyWarning">
+	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
+		<!-- 预案报警 -->
+		<view class="header">气瓶违规带离</view>
+		<view class="site">
+			<view class="site_t">
+				<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
+				<text>2023-10-1014:00</text>
+			</view>
+			<view class="site_b">
+				<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
+				<text>一号实验室</text>
+				<text></text>
+				<text>一号楼二楼C区C111</text>
+			</view>
+		</view>
+		<view class="basics">
+			<view class="small_title"><text></text><text>气瓶信息</text></view>
+			<view class="basics_li" style="margin-top:20rpx;">
+				<text>气体名称</text>
+				<text></text>
+			</view>
+			<view class="basics_li">
+				<text>气体余量:</text>
+				<text>10L</text>
+			</view>
+			<view class="basics_li">
+				<text>气瓶规格:</text>
+				<text>100g/瓶 </text>
+			</view>
+			<view class="basics_li">
+				<text>申领人:</text>
+				<text>刘然</text>
+			</view>
+			<view class="basics_li">
+				<text>申领时间:</text>
+				<text>10-10 10:00:23</text>
+			</view>
+		</view>
+		<view class="note">
+			<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="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+		</view>
+		<view class="picture">
+			<view class="small_title"><text></text><text>报警抓拍</text></view>
+			<view class="picture_b" @click="lockImg(item.uploadDtoList)">
+				<img  src="@/images/icon_yjxx_ytz.png"/>
+				<!-- <img  :src="baseUrl+imgItem.fileUrl"   v-for="(imgItem,imgIndex) in item.uploadDtoList"/> -->
+			</view>
+		</view>
+		<view class="bottom_btn">查看监控</view>
+	</scroll-view>	
+  </view>
+
+</template>
+
+<script>
+import { config } from '@/api/request/config.js'
+import {checkManageList,conditionCollegeInfo} from '@/api/index.js'
+export default {
+  name: "rectifyList",
+  components: {
+   
+  },
+  data() {
+    return {
+		//列表请求参数
+		getData:{
+			pageNum:1,
+			pageSize:20,
+		},
+		total:0,
+		
+	}
+  },
+  onLoad(option) {
+	  
+  },
+  onShow() {
+	
+  },
+  mounted(){
+	 
+	  
+  },
+  methods: {
+		
+		//滚动事件
+		scrollGet(){
+			let self=this;
+			
+		},
+		//查看图片
+		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) {},
+			})
+		},
+		
+		handleClick(row,doType){
+		  let self=this;
+		  if( doType=='detail'){//详情	
+			  
+		  }
+		  
+		},
+		
+	  
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.earlyWarning{
+	height:100%;
+	display flex;
+	padding-bottom: 30rpx;
+	box-sizing: border-box;
+	.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: #FF4800;
+		line-height: 80rpx;
+		text-align: center;
+		background: rgba(255,72,0,0.2);
+	}
+	.site{
+		width: 690rpx;
+		height: 170rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+		margin:20rpx 30rpx;
+		overflow: hidden;
+		.site_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_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;
+			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;
+			}
+			>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{
+			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{
+				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;
+			>img{
+				width: 180rpx;
+				height: 180rpx;
+				border-radius: 10rpx 10rpx 10rpx 10rpx;
+				margin-right: 38rpx;
+				margin-bottom: 10rpx;
+			}
+			>img:nth-of-type(3n+3){
+				margin-right: 0rpx;
+			}
+		}
+	}
+	.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>

+ 240 - 0
pages/earlyWarningManage/earlyWarningList.vue

@@ -0,0 +1,240 @@
+<!-- 安全检查-校院巡查管理 -->
+<template>
+  <view class="earlyWarning">
+	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
+		<viw class="list">
+			<view class="list_t">2023-07-02</view>
+			<view class="list_li" @click="handleClick(item,'detail')">
+				<view class="list_li_t">
+					<view class="list_li_t_l"></view>
+					<view class="list_li_t_c red_color">预案</view>
+					<view class="list_li_t_c2">甲烷气体泄露-中风险</view>
+					<view class="list_li_t_r"></view>
+				</view>
+				<view class="list_li_b">
+					<view class="list_li_b_t">
+						<text>甲烷监测实验室</text>
+						<text>17:20</text>
+					</view>
+					<view class="list_li_b_b">
+						<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
+						<text>测试一号楼-三层-C111</text>
+					</view>
+				</view>
+			</view>
+		</viw>
+		<img class="null-img" v-if="!dataList[0]" src="@/images/null-data-1.png">
+	</scroll-view>	
+  </view>
+
+</template>
+
+<script>
+import { config } from '@/api/request/config.js'
+import {checkManageList,conditionCollegeInfo} from '@/api/index.js'
+export default {
+  name: "rectifyList",
+  components: {
+   
+  },
+  data() {
+    return {
+		//列表请求参数
+		getData:{
+			pageNum:1,
+			pageSize:20,
+		},
+		dataList:[{}],
+		total:0,
+		
+	}
+  },
+  onLoad(option) {
+	  
+  },
+  onShow() {
+	
+  },
+  mounted(){
+	 
+	  
+  },
+  methods: {
+		
+		//滚动事件
+		scrollGet(){
+			let self=this;
+			if(self.total/self.getData.pageSize<=self.getData.pageNum){
+			    console.log('没有更多数据!')
+			}else{
+					setTimeout(function(){
+						self.getData.pageNum += 1;
+						self.getList(); 
+					},1000)
+						 
+			}
+			
+		},
+		
+		handleClick(row,doType){
+		  let self=this;
+		  if( doType=='detail'){//详情	
+			  
+		  }
+		  
+		},
+		async getList(){
+			let self = this;
+			const {data} = await checkManageList(this.getData);
+			if(data.code==200){
+				this.dataList=[...this.dataList,...data.data.records]
+				this.total=data.data.total;
+			}
+		},
+	  
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.earlyWarning{
+	height:100%;
+	display flex;
+	padding: 0 30rpx;
+	box-sizing: border-box;
+	.red_color{
+		color: #D40000;
+		border: 1rpx solid #D40000;
+	}
+	.orange_color{
+		color: #FF4800;
+		border: 1rpx solid #FF4800;
+	}
+	.yellow_color{
+		color: #FFA34E;
+		border: 1rpx solid #FFA34E;
+	}
+	.null-img{
+		display block
+		width:276rpx;
+		height:321rpx;
+		margin:100rpx 0 0 274rpx;
+	}
+	.list{
+		.list_t{
+			height: 80rpx;
+			font-size: 30rpx;
+			font-family: PingFang SC-Medium, PingFang SC;
+			font-weight: 400;
+			color: #666666;
+			line-height: 80rpx;
+		}	
+		.list_li{
+			width: 690rpx;
+			height:auto;
+			background: #FFFFFF;
+			border-radius: 10rpx;
+			padding-bottom: 52rpx;
+			box-sizing: border-box;
+			.list_li_t{
+				position: relative;
+				height: 110rpx;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				.list_li_t_l{
+					position: absolute;
+					left:-15rpx;
+					top: 76rpx;
+					width: 30rpx;
+					height: 30rpx;
+					background:#F5F5F5;
+					border-radius: 15rpx;
+				}
+				.list_li_t_c{
+					height: 40rpx;
+					font-size: 30rpx;
+					font-family: PingFang SC-Medium, PingFang SC;
+					font-weight: 400;
+					line-height: 36rpx;
+					margin-left: 30rpx;
+					margin-right: 20rpx;
+					border-radius: 20rpx;
+					padding: 0 20rpx;
+					box-sizing: border-box;
+					
+				}
+				.list_li_t_c2{
+					font-size: 30rpx;
+					font-family: PingFang SC-Medium, PingFang SC;
+					font-weight: 400;
+					color: #333333;
+					line-height: 30rpx;
+					white-space: nowrap;
+					overflow: hidden;
+				    text-overflow: ellipsis;
+					flex: 1;
+				}
+				.list_li_t_r{
+					position: absolute;
+					right:-15rpx;
+					top: 76rpx;
+					width: 30rpx;
+					height: 30rpx;
+					background:#F5F5F5;
+					border-radius: 15rpx;
+				}
+			}
+			.list_li_b{
+				margin: 0 30rpx;
+				border-top: 1rpx dotted #D8D8D8;
+				
+				.list_li_b_t{
+					display: flex;
+					justify-content: space-between;
+					margin-top:28rpx;
+					>text:nth-of-type(1){
+						font-size: 30rpx;
+						font-family: PingFang SC-Medium, PingFang SC;
+						font-weight: 400;
+						color: #333333;
+						line-height: 30rpx;
+					}
+					>text:nth-of-type(2){
+						font-size: 30rpx;
+						font-family: PingFang SC-Medium, PingFang SC;
+						font-weight: 400;
+						color: #666666;
+						line-height: 30rpx;
+					}
+				}
+				.list_li_b_b{
+					display: flex;
+					justify-content: flex-start;
+					margin-top:30rpx;
+					>img{
+						width: 30rpx;
+						height: 30rpx;
+						margin-right: 22rpx;
+					}
+					>text{
+						font-size: 28rpx;
+						font-family: PingFang SC-Medium, PingFang SC;
+						font-weight: 400;
+						color: #666666;
+						line-height: 28rpx;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						flex: 1;
+					}
+				}
+			}
+		}	
+	}
+	.info-max-box{
+		flex: 1;
+		overflow: scroll;
+	}
+}
+</style>

+ 344 - 0
pages/earlyWarningManage/earlyWarningPlanDetail.vue

@@ -0,0 +1,344 @@
+<!-- 预案报警信息 -->
+<template>
+  <view class="earlyWarning">
+	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
+		<!-- 预案报警 -->
+		<view class="header">甲烷气体泄露-中风险</view>
+		<view class="site">
+			<img src="@/images/Version2.2/icon_wtzg_xx.png"/>
+			<text>一号实验室</text>
+			<text></text>
+			<text>一号楼二楼C区C111</text>
+		</view>
+		<view class="basics">
+			<view class="small_title"><text></text><text>风险概况</text></view>
+			<view class="basics_li" style="margin-top:20rpx;">
+				<text>发生时间:</text>
+				<text>10-12 12:00:56至12:03:03 </text>
+			</view>
+			<view class="basics_li">
+				<text>持续时间:</text>
+				<text>30秒</text>
+			</view>
+			<view class="basics_li">
+				<text>风险响应人员:</text>
+				<text>曹秀康、杨虎城、刘波 </text>
+			</view>
+			<view class="basics_li">
+				<text>实验室内人员:</text>
+				<text>刘然、李茶、周瑶瑶、李娇、 李雪、陈记、李玉玉</text>
+			</view>
+		</view>
+		<view class="note">
+			<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="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+			<view class="note_li">
+				<text>李秀丽(安全责任人)</text>
+				<view class="note_li_r"><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+			<view class="note_li">
+				<text>周燕(安全责任人)</text>
+				<view class="note_li_r"><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+		</view>
+		<view class="note">
+			<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="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+			<view class="note_li">
+				<text>李秀丽(安全责任人)</text>
+				<view class="note_li_r"><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+			<view class="note_li">
+				<text>周燕(安全责任人)</text>
+				<view class="note_li_r"><img  src="@/images/icon_yjxx_ytz.png"/><text>已通知</text></view>
+			</view>
+		</view>
+		<view class="picture">
+			<view class="small_title"><text></text><text>报警抓拍</text></view>
+			<view class="picture_b" @click="lockImg(item.uploadDtoList)">
+				<img  src="@/images/icon_yjxx_ytz.png"/>
+				<!-- <img  :src="baseUrl+imgItem.fileUrl"   v-for="(imgItem,imgIndex) in item.uploadDtoList"/> -->
+			</view>
+		</view>
+		<view class="bottom_btn">查看监控</view>
+	</scroll-view>	
+  </view>
+
+</template>
+
+<script>
+import { config } from '@/api/request/config.js'
+import {checkManageList,conditionCollegeInfo} from '@/api/index.js'
+export default {
+  name: "rectifyList",
+  components: {
+   
+  },
+  data() {
+    return {
+		//列表请求参数
+		getData:{
+			pageNum:1,
+			pageSize:20,
+		},
+		total:0,
+		
+	}
+  },
+  onLoad(option) {
+	  
+  },
+  onShow() {
+	
+  },
+  mounted(){
+	 
+	  
+  },
+  methods: {
+		
+		//滚动事件
+		scrollGet(){
+			let self=this;
+			
+		},
+		//查看图片
+		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) {},
+			})
+		},
+		
+		handleClick(row,doType){
+		  let self=this;
+		  if( doType=='detail'){//详情	
+			  
+		  }
+		  
+		},
+		
+	  
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.earlyWarning{
+	height:100%;
+	display flex;
+	padding-bottom: 30rpx;
+	box-sizing: border-box;
+	.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);
+	}
+	.site{
+		width: 690rpx;
+		height: 80rpx;
+		background: #FFFFFF;
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+		margin:20rpx 30rpx;
+		>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;
+			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;
+			}
+			>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{
+			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{
+				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;
+			>img{
+				width: 180rpx;
+				height: 180rpx;
+				border-radius: 10rpx 10rpx 10rpx 10rpx;
+				margin-right: 38rpx;
+				margin-bottom: 10rpx;
+			}
+			>img:nth-of-type(3n+3){
+				margin-right: 0rpx;
+			}
+		}
+	}
+	.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>

+ 65 - 0
pages/earlyWarningManage/videoMonitoring.vue

@@ -0,0 +1,65 @@
+<!-- 视频监控-->
+<template>
+  <view class="earlyWarning">
+	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
+		
+	</scroll-view>	
+  </view>
+
+</template>
+
+<script>
+import { config } from '@/api/request/config.js'
+import {checkManageList,conditionCollegeInfo} from '@/api/index.js'
+export default {
+  name: "rectifyList",
+  components: {
+   
+  },
+  data() {
+    return {
+		
+		
+	}
+  },
+  onLoad(option) {
+	  
+  },
+  onShow() {
+	
+  },
+  mounted(){
+	 
+	  
+  },
+  methods: {
+		
+		//滚动事件
+		scrollGet(){
+			let self=this;
+			
+		},
+		
+		
+		handleClick(row,doType){
+		  let self=this;
+		  if( doType=='detail'){//详情	
+			  
+		  }
+		  
+		},
+		
+	  
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.earlyWarning{
+	height:100%;
+	display flex;
+	padding-bottom: 30rpx;
+	box-sizing: border-box;
+	
+}
+</style>