yj_vue3/src/components/Cjmsleftnav.vue

<template>
  <div class="nav">
	  <div class="nav-cont">
		  <div class="nav-tit">
			  <div class="nav-circle">
				  <img src="../assets/images/yj-tity1.png" />
			  </div>
			  <p>摄像头信息</p>
		  </div>
		  <ul class="sxt-list">
			  <li>名称：摄像头</li>
			  <li>地址：东风乡喇嘛屯</li>
			  <li>塔高：50m</li>
			  <li>半径：6km</li>
			  <li>网络：移动</li>
			  <li>状态：在线</li>
			  <li>周边：</li>
		  </ul>
		  <div class="sxt-img">
			  <div class="sxt-img-div">
				  <img src="../assets/images/yj-cjmsimg1.png"/>
				  <span>摄像头1</span>
			  </div>
			  <div class="sxt-img-div">
				  <img src="../assets/images/yj-cjmsimg1.png"/>
				  <span>摄像头2</span>
			  </div>
			  <div class="sxt-img-div">
				  <img src="../assets/images/yj-cjmsimg1.png"/>
				  <span>摄像头3</span>
			  </div>
		  </div>
		</div>
</div>
</template>

<script>
export default {
  name: 'Cjmsleftnav',
  props: {
	  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.nav{
		background: url("../assets/images/yj-cjmsleftnavbg.png") no-repeat center;
		background-size: 100% 100%;
		position: absolute;
		left: 0px;
		top: 0px;
		height: 87.2vh;
		z-index: 3;
		width: 421px;
	}
	.nav-cont{
		width: 350px;
		height: calc(100vh - 17vh);
		margin-top: 10vh;
		margin: 8vh 0px 0px 15px;
	}
	
	.sxt-list{
		display: flex;
		flex-direction: column;
		margin: 20px 10px;
	}
	.sxt-list li{
		font-size:14px;
		color:#fff;
		height:28px;
		line-height:28px;
		margin:2px 0px;
		width:100%;
		padding-left:18px;
		text-align: left;
	}
	.sxt-list li:nth-child(odd){
		background:#102452;
	}
	.sxt-img{
		display:flex;
		flex-direction:row;
		justify-content: space-around;
	}
	.sxt-img .sxt-img-div{
		cursor: pointer;
	}
	.sxt-img .sxt-img-div img{
		width:105px;
		height:75px;
		border:1px solid #173e79;
	}
	.sxt-img .sxt-img-div span{
		text-align:center;
		color:#fff;
		font-size:14px;
		display:block;
	}
	
	
</style>