lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 安全检测

Browse Source
This commit is contained in:
duanliang
2024-12-18 17:00:46 +08:00
parent 4a12039789
commit 8114a56034
21 changed files with 1338 additions and 1270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Correspondence/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="box-4-content">
<div class="box-4-content" >
<div class="top-box">
<div class="title">融合通信</div>
<div class="icon-box flex">
@@ -51,11 +51,23 @@
</div>
</template>
<script setup></script>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
const props = defineProps({
width: {
type: Number,
default: () => 0
},
id: {
type: String,
default: () => ''
}
})
</script>
<style lang="scss" scoped>
.box-4-content {
width: vw(260);
width: vw(315);
height: vh(1060);
background-image: url('/src/assets/images/rt-bg.png');
background-repeat: no-repeat;

4
src/components/Header/index.vue
View File

@@ -18,7 +18,9 @@
<span>{{ name }}</span>
</div>
<ul class="nav-right">
<li class="nav-right-item" v-for="(item, index) in navRight" :key="index">
<li class="nav-right-item"
@click="handleNav(item, index)"
v-for="(item, index) in navRight" :key="index">
{{ item.name }}
</li>
</ul>

246
src/components/navLeft/index.vue Normal file
View 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>