<template>
	<div class="left-nav">
		<div class="top-box">
			<!-- <div class="title">监控切换</div> -->
			<div class="ul">
				<div class="li active">异常告警</div>
				<div class="li">景区入口</div>
				<div class="li">核心路段</div>
				<div class="li">公共交通</div>	
				<div class="li">广场</div>	
			</div>
		</div>
		<div class="bom-box">
			<div class="title">
				<span>检索</span>
			</div>
			
			<div class="search-box flex">
				<el-input
				  placeholder="请输入内容"
				  v-model="searchValue"
				  clearable>
				</el-input>
				<img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
			</div>
			<div class="tree-box">
			
				<div class="tree-a">
					<span class="name-1">核心点位</span>
					<div class="tree-b">
						<span class="name-2">摄像头1</span>
						<span class="name-2 activee">摄像头1</span>
						<span class="name-2">摄像头1</span>
					</div>
				</div>
				<div class="tree-a">
					<span class="name-1">核心点位</span>
					<div class="tree-b" >
						<span class="name-2">摄像头1</span>
						<span class="name-2 activee">摄像头1</span>
						<span class="name-2">摄像头1</span>
					</div>
				</div>
				<div class="tree-a">
					<span class="name-1">其他</span>
					<div class="tree-b" v-if="false">
						<span class="name-2">摄像头1</span>
						<span class="name-2 activee">摄像头1</span>
						<span class="name-2">摄像头1</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	
</script>
<style lang="scss" scoped>
	//背景色设置为透明
	:deep(.el-input__wrapper){
	  background-color:rgba(0,0,0,0);
	  border:none;
	  box-shadow:none;
	}
	//输入框颜色
	:deep(.el-input__inner) {
	  background-color: rgba(0, 0, 0, 0) !important;
	  color: #fff;
	}
	.left-nav{
		margin-left:vw(10);
		// margin-top:vh(35);
		width:vw(250);
	
		.bom-box{
			margin-top:vh(20);
			.search-box{
				background: rgba(217,217,217,0);
				border-radius: 2px 2px 2px 2px;
				border: 1px solid #0096FF;
				margin:vw(20) auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.search-icon{
					width:vw(16);
					height:vh(16);
					margin:0 vw(20);
				}
			}
		
			.tree-box::before{
				position:absolute;
				top:vw(-8);
				left:vw(-8);
				content: '';
				width:vw(12);
				height:vw(12);
				background-image: url('/src/assets/images/icon-a-1.png');
				background-size:100% 100%;
			}
			.tree-box::after{
				position:absolute;
				content: '';
				width:vw(12);
				height:vw(12);
				background-image: url('/src/assets/images/icon-a-1.png');
				background-size:100% 100%;
				bottom:vw(-4);
				left:vw(-8);
				
			}
			.tree-box{
				margin-left:vw(10);
				margin-top:vh(20);
				position:relative;
				border-left:vw(3) solid;
				border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
				.tree-a{
					.name-1{
						padding:0 vw(20);
						display: block;
						font-weight: 400;
						font-size: vw(15);
						color: #FFFFFF;
						height:vh(30);
						line-height:vh(30);
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					
				}
				.tree-b::before{
					position:absolute;
					top:vw(-8);
					left:vw(-8);
					content: '';
					width:vw(12);
					height:vw(12);
					background-image: url('/src/assets/images/icon-a-1.png');
					background-size:100% 100%;
				}
				// .tree-b::after{
				// 	position:absolute;
				// 	content: '';
				// 	width:vw(12);
				// 	height:vw(12);
				// 	background-image: url('/src/assets/images/icon-a-1.png');
				// 	background-size:100% 100%;
				// 	bottom:vw(-4);
				// 	left:vw(-8);
					
				// }
				.tree-b{
					// margin-top:vh(20);
					position:relative;
					border-left:vw(3) solid;
					border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
					margin-left:vw(30);
					margin-top:vh(10);
					.name-2{
						padding:0 vw(20);
						display: block;
						font-weight: 400;
						font-size: vw(15);
						color: #FFFFFF;
						height:vh(30);
						line-height:vh(30);
						text-align: left;
						font-style: normal;
						text-transform: none;
						
					}
				}
			}
			.tree-box .tree-a:first-child{
				position:relative;
				top:vh(-15);
			}
			.tree-box .tree-a:last-child{
				position:relative;
				bottom:vh(-12);
			}
			.title{
				background-image: url('/src/assets/images/nav-l-t-bg.png');
				background-size: 100% 100%;
				
				span{
					margin-left:vw(30);
					font-weight: 800;
					font-size: vw(15);
					line-height: vh(26);
					text-align: center;
					font-style: normal;
					text-transform: none;
					
					background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
					color: transparent;
				}
				
			}
		}
		.top-box{
			text-align: left;
			font-weight: 400;
			font-size: vw(18);
			color: rgba(255,255,255,0.7);
			line-height: 21px;
			text-align: left;
			font-style: normal;
			text-transform: none;
			.title{
				font-weight: 600;
				font-size: vw(15);
				text-align: left;
				font-style: normal;
				text-transform: none;
				height:vh(35);
				line-height: vh(34);
				padding-left:vw(20);
				// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
			}
			.ul{
				.li{
					background: url('/src/assets/images/m-nav-bg-1.png');
					background-size: 100% 100%;
					width:vw(250);
					height:vh(58);
					line-height:vh(58);
					text-align: center;
					margin-bottom:vh(15);
				}
				.active{
					background: url('/src/assets/images/m-nav-bg-2.png');
					background-size: 100% 100%;
					// width:vw(178);
				}
			}
		}
	}
</style>