246 lines
5.7 KiB
Vue
246 lines
5.7 KiB
Vue
<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> |