yj_vue3/src/components/Jsmsdialog.vue

<template>
	 <el-dialog title="事件详情" custom-class="Jsmsdialog" :visible.sync="outerVisible">
	 <div class="Jsmsdialog-con">
		 <div class="Jsmsdialog-left">
			 <div class="Jsmsdialog-map">
				 <div class="Jsmsdialog-yatz">
					 <span>暂为应急预案</span>
					 <button>应急预案</button>
				 </div>
				 <img src="../assets/images/yj-mapbg2.png" />
			 </div>
			 <div class="Jsmsdialog-btn">
				 <div class="Jsmsdialog-btn-left">
					 <i class="iconfont yj-icon-fengsu"></i>
					 <i class="iconfont yj-icon-fengxiang"></i>
					 <i class="iconfont yj-icon-jiangyuliang"></i>
					 <i class="iconfont yj-icon-shidu"></i>
				 </div>
				 <div class="Jsmsdialog-btn-right">
					 <a class="dialog-btn"><i class="iconfont yj-icon-zerenzhi"></i>责任制</a>
					 <a class="dialog-btn"><i class="iconfont yj-icon-liandong"></i>联动</a>
					 <a class="dialog-btn"><i class="iconfont yj-icon-fujintantou"></i>附近探头</a>
				 </div>
			 </div>
			 <div class="Jsmsdialog-icon">
				 <leftRightSwiperScroll>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-centerdata-t-forest-fireteam" style="background:#f5ad1b"></div>
					   <div class="icon-text">
						 <h5 style="white-space: nowrap">防火队</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-centerdata-t-forest-waterintake" style="background:#58b35d"></div>
					   <div class="icon-text">
					 		<h5 style="white-space: nowrap">取水口</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-watercrane" style="background:#0fa2ff"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">水鹤</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-centerdata-t-forest-firehydrant-1" style="background:#da8ec5"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">地上消火栓</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-centerdata-t-forest-firehydrant-2" style="background:#78bfc2"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">地下消火栓</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-centerdata-t-forest-firehydrant-3" style="background:#f5ad1b"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">室内消火栓</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-centerdata-t-firecontrol-fire-force" style="background:#ff6063"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">消防力量</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-centerdata-t-firecontrol-fire-key-places" style="background:#58b35d"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">重点场所</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-centerdata-t-firecontrol-fire-pressure-sensor" style="background:#f5ad1b"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">压力传感器</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-liandong" style="background:#da8ec5"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">基本联动力量</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-centerdata-t-firecontrol-other-linkage-force" style="background:#5278e8"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">其他联动力量</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-centerdata-t-firecontrol-foam-liquid" style="background:#00d6cc"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">泡沫液</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-station" style="background:#898e28"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">专职站</h5>
					   </div>
					 </div>
					 <div class="icon-con"  >
					   <div class="iconfont icon yj-icon-fujintantou" style="background:#f5ad1b"></div>
					   <div class="icon-text">
					 						 <h5 style="white-space: nowrap">摄像头</h5>
					   </div>
					 </div>
				 </leftRightSwiperScroll>
				 <input type="number" class="d-input-bottom" placeholder="请输入搜索半径" />
			 </div>
		 </div>
		 <div class="Jsmsdialog-right">
			 <div class="Jsmsdialog-jbqk">
				 <div class="Jsmsdialog-tit2">
					 <i class="iconfont yj-icon-jibenqingkuang"></i>
					 <span>基本情况</span>
				 </div>
				 <div class="Jsmsdialog-jbqk-txt">
					 <div class="txt">
						 <span>来源：</span>
						 <span>东山乡，喇嘛甸摄像头</span>
					 </div>
					 <div class="txt">
						 <span>时间：</span>
						 <span>2023年7月21 10:25:07</span>
					 </div>
					 <div class="txt">
						 <span>地区：</span>
						 <span>东山乡喇嘛甸村</span>
					 </div>
					 <div class="txt">
						 <span>类型：</span>
						 <span class="hxsj">火险事件</span>
					 </div>
					 <div class="txt">
						 <span>状态：</span>
						 <button class="xsb">新上报</button>
						  <button class="wqr">未确认</button>
					 </div>
					 <div class="txt colm">
						 <span>详情：</span>
						 <span>东山乡喇嘛甸村喇嘛甸摄像头与2023年7月21日10:25:07上报火险事件，事件位于基站西北方向3公里</span>
					 </div>
				 </div>
			 </div>
			 <div class="Jsmsdialog-dtgz">
				 <div class="Jsmsdialog-tit2">
					 <i class="iconfont yj-icon-dongtaigenzong"></i>
					 <span>动态跟踪</span>
				 </div>
				<div class="Jsmsdialog-sjz scroll h-41-7">
					<div class="Jsmsdialog-sjz-con">
						<h4>东山乡，喇嘛甸摄像头</h4>
						<p>2023年7月21日10:25:07</p>
						<div class="Jsmsdialog-sjz-sj">
							<button class="sb">上报</button>
							<span class="hxsj">火险事件</span>
						</div>
						<img src="../assets/images/yj-img2.png" />
					</div>
					<div class="Jsmsdialog-sjz-con">
						<h4>东山乡，李四</h4>
						<p>2023年7月21日10:29:36</p>
						<div class="Jsmsdialog-sjz-sj">
							<button class="qr">确认</button>
							<span class="hxsj">森林防火事件</span>
						</div>
						<p>火老大了，赶紧来吧，再晚点就要进屯子了!</p>
						<img src="../assets/images/yj-img3.png" />
					</div>
				</div>
			 </div>
			 
		 </div>
	 </div>
	 </el-dialog>
</template>

<script>
import leftRightSwiperScroll from './leftRightSwiperScroll.vue'
export default {
  name: 'Jsmsdialog',
  data(){
	  return{
		  outerVisible:false
	  }
  },
	components: {
 	 leftRightSwiperScroll
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.Jsmsdialog{
		position: fixed;
		top:-10%;
		left:50%;
		transform: translateX(-50%);
		width: 1750px;
		height: 830px;
		background: #031135;
		border: 1px solid #2159b3;
		z-index: 999;
		box-shadow: 0px 0px 10px #1a498f;
	}
	.Jsmsdialog .el-dialog__header{
		height: 55px;
		background: #081a46;
		line-height: 55px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
	}
	.Jsmsdialog .el-dialog__header span{
		font-size: 18px;
		padding-left: 20px;
		color: #fff;
	}
	.Jsmsdialog .el-dialog__header i{
		background: none;
		outline: 0px;
		border: 0px;
		font-size: 16px;
		color: #fff;
		width: 60px;
		cursor: pointer;
	}
	.el-dialog__body{
		padding: 17px 20px;
	}
	.Jsmsdialog-con{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.Jsmsdialog-left{
		width: 1330px;
		height: 738px;
	}
	.Jsmsdialog-left .Jsmsdialog-map{
		width: 100%;
		height: 640px;
		position: relative;
	}
	.Jsmsdialog-left .Jsmsdialog-map img{
		width: 100%;
		height: 100%;
	}
	.Jsmsdialog-left .Jsmsdialog-map .Jsmsdialog-yatz{
		position: absolute;
		top:5px;
		left: 5px;
		width: 220px;
		height: 30px;
		line-height: 30px;
		display: flex;
		flex-direction: row;
		background: #18326c;
	}
	.Jsmsdialog-left .Jsmsdialog-map .Jsmsdialog-yatz span{
		color: #fff;
		font-size: 14px;
		padding-left: 15px;
	}
	.Jsmsdialog-left .Jsmsdialog-map .Jsmsdialog-yatz button{
		margin-left: auto;
		width: 80px;
		background: #052880;
		border: 0px;
		outline: 0px;
		color: #fff;
	}
	.Jsmsdialog-left .Jsmsdialog-map .Jsmsdialog-yatz button:hover{
		text-shadow: 0px 0px 5px #00ffff;
	}
	.Jsmsdialog-left .Jsmsdialog-btn{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 10px 0px 10px 0px;
	}
	.Jsmsdialog-left .Jsmsdialog-btn .Jsmsdialog-btn-left i{
		color: #fff;
		font-size: 18px;
		margin-right: 30px;
	}
	.Jsmsdialog-left .Jsmsdialog-btn .Jsmsdialog-btn-right .dialog-btn{
		color: #fff;
		font-size: 14px;
		 background: -webkit-linear-gradient(#11274d, #104894); /* Safari 5.1 - 6.0 */
		  background: -o-linear-gradient(#11274d, #104894); /* Opera 11.1 - 12.0 */
		  background: -moz-linear-gradient(#11274d, #104894); /* Firefox 3.6 - 15 */
		  background: linear-gradient(#11274d, #104894); /* 标准的语法 */
		border: 1px solid #1c61be;
		padding: 0px 12px;
		height: 30px;
		line-height: 26px;
		margin-left: 10px;
		border-radius: 5px;
		display: inline-block;
	}
	.Jsmsdialog-left .Jsmsdialog-btn .Jsmsdialog-btn-right .dialog-btn:hover{
		 background: -webkit-linear-gradient(#142f5e, #1152a7); /* Safari 5.1 - 6.0 */
		  background: -o-linear-gradient(#142f5e, #1152a7); /* Opera 11.1 - 12.0 */
		  background: -moz-linear-gradient(#142f5e, #1152a7); /* Firefox 3.6 - 15 */
		  background: linear-gradient(#142f5e, #1152a7); /* 标准的语法 */
		  text-shadow: 0px 0px 5px #00ffff;
	}
	.Jsmsdialog-left .Jsmsdialog-btn .Jsmsdialog-btn-right .dialog-btn i{
		font-size: 18px;
		margin-right: 8px;
		color: #01d2f5;
	}
	.Jsmsdialog-icon{
		font-size: 16px;
		cursor: pointer;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		background: -webkit-linear-gradient(#11274d, #104894); /* Safari 5.1 - 6.0 */
		  background: -o-linear-gradient(#11274d, #104894); /* Opera 11.1 - 12.0 */
		  background: -moz-linear-gradient(#11274d, #104894); /* Firefox 3.6 - 15 */
		  background: linear-gradient(#11274d, #104894); /* 标准的语法 */
		border: 1px solid #1c61be;
		border-radius: 5px;
	}
	.Jsmsdialog-icon .icon-con{
	    width: 100%;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    padding: 0.5rem;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	}
	.Jsmsdialog-icon .icon-con .icon{
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    border-radius: 5px;
	    text-align: center;
	    color: #fff !important;
	    border: 2.5px solid rgba(51, 70, 127, 0.7);
		width: 35px;
		height: 35px;
		font-size: 18px;
	}
	.Jsmsdialog-icon .icon-con .icon-text{
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -ms-flex-direction: column;
	    flex-direction: column;
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    font-size: 14px;
	    color: #2bacf7;
	    padding: 0 0.5rem;
	}
	.Jsmsdialog-icon .icon-con .icon-text h5{
	    font-size: 12px;
	    line-height: 35px;
	    margin-right: 10px;
	}
	.Jsmsdialog-icon .d-input-bottom {
	    border: 1px solid #1c61be;
	    background-color: #0e2a54;
	    color: #2bacf7;
		border-radius: 3px;
		    display: inline-block;
		    height: 40px;
		    line-height: 40px;
		    outline: 0;
		    padding: 0 15px;
		    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		    width: 145px;
		        margin-left: 8px;
	}
	.Jsmsdialog-right{
		width: 438px;
		margin-left: 20px;
	}
	.Jsmsdialog-tit2{
		width: 100%;
		background: url("../assets/images/yj-titxbg.png") no-repeat bottom;
		height: 40px;
		line-height: 40px;
		    align-items: center;
		    display: flex;
	}
	.Jsmsdialog-tit2 i{
		font-size: 22px;
		color: #00c3e4;
		margin-right: 8px;
	}
	.Jsmsdialog-tit2 span{
		font-size: 18px;
		 background-image:-webkit-linear-gradient(top,#fff,#4ce9ff); 
		-webkit-background-clip:text; 
		-webkit-text-fill-color:transparent; 
		font-weight: bold;
	}
	.Jsmsdialog-jbqk-txt{
		width: 96%;
		display: flex;
		flex-direction: column;
		margin: 10px auto;
	}
	.Jsmsdialog-jbqk-txt .txt{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 16px;
		color: #fff;
		margin-bottom: 10px;
	}
	.hxsj{
		padding-left: 25px;
		background: url("../assets/images/yj-fair.png") no-repeat left;
		color:#ff6406;
		background-size: contain;
	}
	.Jsmsdialog-jbqk-txt .txt button{
		font-size: 14px;
		color: #fff;
		border: 0px;
		outline: 0px;
		display: inline-block;
		border-radius: 5px;
		margin-right: 10px;
		width: 80px;
		height: 25px;
		line-height: 25px;
	}
	.Jsmsdialog-jbqk-txt .txt button.xsb{
		background: #183881;
	}
	.Jsmsdialog-jbqk-txt .txt button.wqr{
		background: #ff780a;
	}
	.colm{
		display: flex!important;
		flex-direction: column!important;
		align-items: flex-start!important;
	}
	.Jsmsdialog-sjz{
		background: url("../assets/images/yj-titx1.png") repeat-y 10px 0px;
		width: 100%;
		display: flex;
		flex-direction: column;
		margin: 13px auto;
		padding-left: 30px;
		text-align: left;
	}
	.Jsmsdialog-sjz .Jsmsdialog-sjz-con{
		position: relative;
		margin-bottom: 10px;
	}
	.Jsmsdialog-sjz .Jsmsdialog-sjz-con::after{
		content: " ";
		display: block;
		background: url("../assets/images/yj-tity3.png") no-repeat center;
		width: 14px;
		height: 14px;
		position: absolute;
		left: -25px;
		top:6px;
	}
	.Jsmsdialog-sjz .Jsmsdialog-sjz-con h4{
		font-size: 18px;
		color: #00deff;
		margin-bottom: 5px;
	}
	.Jsmsdialog-sjz .Jsmsdialog-sjz-con p{
		font-size: 14px;
		color: #fff;
		margin-bottom: 10px;
	}
	.Jsmsdialog-sjz .Jsmsdialog-sjz-con .Jsmsdialog-sjz-sj{
		margin-bottom: 13px;
	}
	.Jsmsdialog-sjz .Jsmsdialog-sjz-con .Jsmsdialog-sjz-sj button{
		font-size: 14px;
		color: #fff;
		border: 0px;
		outline: 0px;
		display: inline-block;
		border-radius: 5px;
		margin-right: 13px;
		padding: 3px 10px;
	}
	.Jsmsdialog-sjz .Jsmsdialog-sjz-con .Jsmsdialog-sjz-sj button.sb{
		background:#183881 ;
	}
	.Jsmsdialog-sjz .Jsmsdialog-sjz-con .Jsmsdialog-sjz-sj button.qr{
		background:#188138 ;
	}

</style>