feat 安全检测
This commit is contained in:
duanliang
246
src/components/navLeft/index.vue
Normal file
246
src/components/navLeft/index.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user