yj_vue3/src/components/Leftnav.vue

<template>
	<div class="nav">
		<div class="nav-cont">
			<!--<div class="yj-tqdiv">-->
				<!--<div class="yj-qyb">-->
					<!--<i class="iconfont yj-icon-tianqi-baoyu"></i>-->
					<!--<p>暴雨</p>-->
				<!--</div>-->
				<!--<div class="yj-tqtxt">-->
					<!--<p>风力：2级</p>-->
					<!--<p>低温：20℃</p>-->
					<!--<p>风向：东南风</p>-->
					<!--<p>高温：17℃</p>-->
					<!--<p>火险：一级火险</p>-->
					<!--<p>湿度：93</p>-->
				<!--</div>-->
			<!--</div>-->
			<div class="yj-tqdiv2">
				<div class="yj-qyb">
					<img class="yj-qybimg qing" src="../assets/images/yj-tq-qing.png"/>
					<div class="yj-qybtxt">
						<h4>-12~-4℃</h4>
						<p><i class="iconfont yj-icon-weizhi"></i>延吉市 晴</p>
					</div>
				</div>
				<div class="yj-tqtxt2">
					<span>风力：2级</span>
					<span>低温：-12℃</span>
					<span>风向：西北风</span>
					<span>高温：-4℃</span>
					<span>火险：一级火险</span>
					<span>湿度：53</span>
				</div>
			</div>

			<div class="nav-tit">
				<div class="nav-circle">
					<img src="../assets/images/yj-tity1.png" />
				</div>
				<p>应急资源信息</p>
			</div>
			<h6 class="nav-wz"><i class="iconfont yj-icon-weizhi"></i>新兴街道民昌社区</h6>
			<div class="left-table">
				<div class="bz-name">
					<img src="../assets/images/yj-navimg2.png"/>
					<p>班长</p>
				</div>
				<div class="bz-table">
					<div class="bz-head">
						<span>姓名</span>
						<span>性别</span>
						<span>身份证号</span>
						<span>联系电话</span>
					</div>
					<div class="scroll h-22">
						<div class="bz-td">
							<span title="朴明">朴明</span>
							<span title="女">女</span>
							<span title="222401197210073324">222401197210073324</span>
							<span title="17643311303">17643311303</span>
						</div>
						<div class="bz-td">
							<span title="朴明">王永玲</span>
							<span title="朴明">女</span>
							<span title="朴明">222426198103232926</span>
							<span title="朴明">17643311338</span>
						</div>
						<div class="bz-td">
							<span title="邢超">邢超</span>
							<span title="男">男</span>
							<span title="23272119950921063X">23272119950921063X</span>
							<span title="17643311332">17643311332</span>
						</div>
						<div class="bz-td">
							<span title="于洋">于洋</span>
							<span title="男">男</span>
							<span title="222401199005270010">222401199005270010</span>
							<span title="17643311336">17643311336</span>
						</div>
						<div class="bz-td">
							<span title="桂延章">桂延章</span>
							<span title="男">男</span>
							<span title="222401199005270010">222401199005270010</span>
							<span title="15944328870">15944328870</span>
						</div>
						<div class="bz-td">
							<span title="于芳">于芳</span>
							<span title="女">女</span>
							<span title="222401199508020021">222401199508020021</span>
							<span title="18340835186">18340835186</span>
						</div>
						<div class="bz-td">
							<span title="于洋">于洋</span>
							<span title="男">男</span>
							<span title="222401199005270010">222401199005270010</span>
							<span title="17643311336">17643311336</span>
						</div>
						<div class="bz-td">
							<span title="单明金砚">单明金砚</span>
							<span title="女">女</span>
							<span title="222403199004275621">222403199004275621</span>
							<span title="17643311340">17643311340</span>
						</div>

					</div>
				</div>
			</div>
			<h6 class="nav-wz"><i class="iconfont yj-icon-weizhi"></i>进学街道</h6>
			<div class="left-table">
				<div class="bz-name">
					<img src="../assets/images/yj-navimg2.png"/>
					<p>班长</p>
				</div>
				<div class="bz-table">
					<div class="bz-head">
						<span>姓名</span>
						<span>性别</span>
						<span>身份证号</span>
						<span>联系电话</span>
					</div>
					<div class="scroll h-22">
						<div class="bz-td">
							<span title="朴明">朴明</span>
							<span title="女">女</span>
							<span title="222401197210073324">222401197210073324</span>
							<span title="17643311303">17643311303</span>
						</div>
						<div class="bz-td">
							<span title="朴明">王永玲</span>
							<span title="朴明">女</span>
							<span title="朴明">222426198103232926</span>
							<span title="朴明">17643311338</span>
						</div>
						<div class="bz-td">
							<span title="邢超">邢超</span>
							<span title="男">男</span>
							<span title="23272119950921063X">23272119950921063X</span>
							<span title="17643311332">17643311332</span>
						</div>
						<div class="bz-td">
							<span title="于洋">于洋</span>
							<span title="男">男</span>
							<span title="222401199005270010">222401199005270010</span>
							<span title="17643311336">17643311336</span>
						</div>
						<div class="bz-td">
							<span title="桂延章">桂延章</span>
							<span title="男">男</span>
							<span title="222401199005270010">222401199005270010</span>
							<span title="15944328870">15944328870</span>
						</div>
						<div class="bz-td">
							<span title="于芳">于芳</span>
							<span title="女">女</span>
							<span title="222401199508020021">222401199508020021</span>
							<span title="18340835186">18340835186</span>
						</div>
						<div class="bz-td">
							<span title="于洋">于洋</span>
							<span title="男">男</span>
							<span title="222401199005270010">222401199005270010</span>
							<span title="17643311336">17643311336</span>
						</div>
						<div class="bz-td">
							<span title="单明金砚">单明金砚</span>
							<span title="女">女</span>
							<span title="222403199004275621">222403199004275621</span>
							<span title="17643311340">17643311340</span>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.nav{
		background: url("../assets/images/yj-leftnavbg.png") no-repeat center;
		background-size: cover;
		position: absolute;
		left: 0px;
		top:0px;
		height: 100vh;
		z-index: 3;
		width: 382px;
	}
	.nav-cont{
		width: 320px;
		height: calc(100vh - 17vh);
		margin-top: 10vh;
		margin: 8vh 0px 0px 15px;
	}

	.left-table{
		display: flex;
		flex-direction: row;
		margin: 20px 0px;
	}
	.left-table .bz-name{
		background: url("../assets/images/yj-navimg1.png") no-repeat center;
		background-size: 100% 100%;
		width: 40px;
		height: 40px;
		padding: 0px 5px;
		margin-right: 8px;
	}
	.left-table .bz-name img{
		width: 30px;
		margin-top: 4px;
	}
	.left-table .bz-name p{
		margin-top: -13px;
		text-align: center;
		font-size: 14px;
		color: #36c9ff;
		margin-top: 10px;
	}
	.bz-table{
		width: 100%;
	}

	.bz-table .bz-head{
		background: rgb(27, 55, 113,0.8);
		width: 100%;
		height: 33px;
		line-height: 33px;
		padding: 0px 1%;
	}
	.bz-table .bz-td{
		width: 100%;
		height: 33px;
		line-height: 33px;
		padding: 0px 1%;
	}
	.bz-table .bz-td:nth-child(even){
		background: rgb(24, 56, 129,0.4);
	}
	.bz-table .bz-head span,.bz-table .bz-td span{
		color: #fff;
		font-size: 10px;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
		position: relative;
	}
	.bz-table .bz-head span:nth-child(1){
		width: 15%;
	}
	.bz-table .bz-head span:nth-child(2){
		width: 10%;
	}
	.bz-table .bz-head span:nth-child(3){
		width: 47%;
	}
	.bz-table .bz-head span:nth-child(4){
		width: 28%;
	}

	.bz-table .bz-td span:nth-child(1){
		width: 15%;
	}
	.bz-table .bz-td span:nth-child(2){
		width: 10%;
	}
	.bz-table .bz-td span:nth-child(3){
		width: 47%;
	}
	.bz-table .bz-td span:nth-child(4){
		width: 28%;
	}




	.nav-wz{
		font-size: 16px;
		color: #46e7ff;
		margin-top: 10px;
		text-align: left;
	}
	.nav-wz i{
		margin-right: 4px;
	}

	.yj-tqdiv{
		display: flex;
		flex-direction: row;
		margin: 0px 0px 20px 0px;
		background: url("../assets/images/yj-tqbg.png") no-repeat center;
		background-size: 100% 100%;
		padding: 15px 0px;
		height: 180px;
	}
	.yj-tqdiv .yj-qyb{
		display: flex;
		flex-direction: column;
		margin-right: 15px;
		align-items: center;
		width: 120px;
		text-align: center;
	}
	.yj-tqdiv .yj-qyb i{
		color: #00ffff;
		font-size: 60px;
	}
	.yj-tqdiv .yj-qyb p{
		color: #00ffff;
		font-size: 16px;
	}
	.yj-tqdiv .yj-tqtxt{
		color: #00ffff;
		text-align: left;
		font-size: 14px;
		line-height: 25px;
	}


	.yj-tqdiv2{
		display: flex;
		flex-direction: column;
		margin: 0px 0px 20px 0px;
		background: url("../assets/images/yj-tqbg.png") no-repeat center;
		background-size: 100% 100%;
		padding: 15px 0px;
		height: 180px;
	}
	.yj-tqdiv2 .yj-qyb{
		display: flex;
		flex-direction: row;
		padding-left: 20px;
	}
	.yj-tqdiv2 .yj-qyb .yj-qybimg{
		width: 60px;
	}
	.yj-tqdiv2 .yj-qyb .yj-qybtxt{
		text-align: left;
		padding-left: 25px;
	}
	.yj-tqdiv2 .yj-qyb .yj-qybtxt h4{
		font-size: 30px;
		color: #fff402;
		font-weight: bold;
	}
	.yj-tqdiv2 .yj-qyb .yj-qybtxt p{
		font-size: 14px;
		color: #fff;
	}
	.yj-tqdiv2 .yj-qyb .yj-qybtxt p i{
		font-size: 13px;
		color: #fff;
	}
	.yj-tqdiv2 .yj-tqtxt2{
		padding: 10px 0px 0px 20px;
		text-align: left;
	}
	.yj-tqdiv2 .yj-tqtxt2 span{
		color: #00bef1;
		display: inline-block;
		width: 130px;
		margin: 0px 10px;
		font-size: 14px;
		line-height: 25px;
	}


</style>