<template>
  <div class="right-nav">
	  <div class="nav-cont">
		  <div class="nav-tit">
			  <div class="nav-circle">
				  <img src="../assets/images/yj-tity1.png" />
			  </div>
			  <p>事件统计</p>
		  </div>
		  <div class="cjms-sjtj">
			  <div class="cjms-sjdiv">
				  <i class="iconfont yj-icon-gaojingshijian"></i>
				  <div class="cjms-sjdiv-sj">
					  <span>事件总数</span>
					  <p>2682</p>
				  </div>
			  </div>
			  <div class="cjms-sjdiv">
				  <i class="iconfont yj-icon-querengongdan"></i>
				  <div class="cjms-sjdiv-sj">
					  <span>确认事件</span>
					  <p>2000</p>
				  </div>
			  </div>
		  </div>
		 <div class="cjms-sjcon">
			 <p><span>今日事件</span><b>2682</b></p>
			 <p><span>新增事件</span><b>2682</b></p>
			 <p><span>确认事件</span><b>2682</b></p>
			 <p><span>完成事件</span><b>2682</b></p>
		 </div>
		<div class="jydw-list scroll h-45">
			<div class="jydw-li">
				<img src="../assets/images/yj-img1.png"/>
				<div class="jydw-txt">
					<h2>防汛应急事件</h2>
					<p>2023/7/27 18:50:36</p>
				</div>
			</div>
			<div class="jydw-li">
				<img src="../assets/images/emergency_team/team3.jpg"/>
				<div class="jydw-txt">
					<h2>防汛应急事件</h2>
					<p>2023/7/27 18:50:36</p>
				</div>
			</div>
			<div class="jydw-li">
				<img src="../assets/images/emergency_team/team2.jpg"/>
				<div class="jydw-txt">
					<h2>防汛应急事件</h2>
					<p>2023/7/27 18:50:36</p>
				</div>
			</div>
			<div class="jydw-li">
				<img src="../assets/images/emergency_team/team4.jpg"/>
				<div class="jydw-txt">
					<h2>防汛应急事件</h2>
					<p>2023/7/27 18:50:36</p>
				</div>
			</div>
			<div class="jydw-li">
				<img src="../assets/images/emergency_team/team5.jpg"/>
				<div class="jydw-txt">
					<h2>防汛应急事件</h2>
					<p>2023/7/27 18:50:36</p>
				</div>
			</div>
			<div class="jydw-li">
				<img src="../assets/images/yj-img1.png"/>
				<div class="jydw-txt">
					<h2>防汛应急事件</h2>
					<p>2023/7/27 18:50:36</p>
				</div>
			</div>
			<div class="jydw-li">
				<img src="../assets/images/emergency_team/team3.jpg"/>
				<div class="jydw-txt">
					<h2>防汛应急事件</h2>
					<p>2023/7/27 18:50:36</p>
				</div>
			</div>
		</div>
	  </div>
  </div>
</template>

<script>
export default {
  name: 'Cjmsrightnav',
  props: {

  },
  methods:{

  },
  mounted(){
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.right-nav{
		background: url("../assets/images/yj-cjmsrightnavbg.png") no-repeat center;
		background-size: 100% 100%;
		position: absolute;
		right: 0px;
		top:0px;
		height: 87.2vh;
		z-index: 3;
		width: 421px;
	}
	.nav-cont{
		width: 370px;
		height: calc(100vh - 17vh);
		margin-top: 10vh;
		margin: 8vh 19px 0px 0px;
		float: right;
	}
	.cjms-sjtj{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 20px 5px 10px 20px;
	}
	.cjms-sjtj .cjms-sjdiv{
		background:url("../assets/images/yj-cjmsbtnbg1.png") no-repeat center;
		background-size:100% 100%;
		width: 145px;
		height:52px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0px 10px;
	}
	.cjms-sjtj .cjms-sjdiv i{
		color:#fff;
		font-size:30px;
	}
	.cjms-sjtj .cjms-sjdiv .cjms-sjdiv-sj{
		text-align:right;
		color:#fff;
	}
	.cjms-sjtj .cjms-sjdiv .cjms-sjdiv-sj span{
		font-size:12px;
		display:block;
	}
	.cjms-sjtj .cjms-sjdiv .cjms-sjdiv-sj p{
		font-size:24px;
		font-family:myfont2;
	}
	.cjms-sjcon{
		margin: 0px 5px 20px 20px;
	}
	.cjms-sjcon p{
		background:url("../assets/images/yj-cjmsbtnbg2.png") no-repeat center;
		background-size:100% 100%;
		width: 1005;
		height:40px;
		line-height:40px;
		color:#fff;
		padding:0px 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom:8px;
	}
	.cjms-sjcon p span{
		font-size:12px;
	}
	.cjms-sjcon p b{
		font-size:24px;
		font-family:myfont2;
		margin-right:0px;
	}
	.jydw-list{
		display: flex;
		flex-direction: column;
		margin: 20px 20px;
	}
	.jydw-list .jydw-li{
		display: flex;
		flex-direction: row;
		margin-bottom: 15px;
		cursor: pointer;
		text-align: left;
	}
	.jydw-list .jydw-li img{
		width: 100px;
		height: 68px;
		margin-right: 15px;
	}
	.jydw-list .jydw-li h2{
		color: #23d6df;
		font-size: 16px;
		font-weight: 900;
		padding-bottom: 5px;
	}
	.jydw-list .jydw-li p{
		color: #fff;
		font-size: 14px;
		line-height: 20px;
	}


</style>
