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

fix 优化

Browse Source
This commit is contained in:
duanliang
2024-12-26 14:30:41 +08:00
parent 0a6b3bdd75
commit a4cd3bec39
3 changed files with 78 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/navLeft/index.vue
View File

@@ -43,7 +43,7 @@
</div> </div>
<div class="tree-a"> <div class="tree-a">
<span class="name-1">其他</span> <span class="name-1">其他</span>
<div class="tree-b" v-if="false"> <div class="tree-b" v-if="true">
<span class="name-2">摄像头1</span> <span class="name-2">摄像头1</span>
<span class="name-2 activee">摄像头1</span> <span class="name-2 activee">摄像头1</span>
<span class="name-2">摄像头1</span> <span class="name-2">摄像头1</span>

89
src/views/traffic/components/box-2.vue
View File

@@ -1,19 +1,36 @@
<template> <template>
<div class="traffic-box-2"> <div class="n-box-traffic">
<div class="map-box"> <!-- nav -->
<Map></Map> <div class="left-nav">
<!-- 视频 --> <div class="top-box">
<div class="video-list">
<div class="li"> <div class="ul">
<vue3VideoPlay v-bind="options"/> <div class="li active">路段1</div>
<div class="li">路段1</div>
<div class="li">路段1</div>
<div class="li">路段1</div>
<div class="li">路段1</div>
</div> </div>
<div class="li"> </div>
<vue3VideoPlay v-bind="options"/> </div>
<div class="traffic-box-2">
<div class="map-box">
<Map></Map>
<!-- 视频 -->
<div class="video-list">
<div class="li">
<vue3VideoPlay v-bind="options"/>
</div>
<div class="li">
<vue3VideoPlay v-bind="options"/>
</div>
<div class="menu">查看更多</div>
</div> </div>
<div class="menu">查看更多</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
@@ -48,14 +65,60 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.n-box-traffic{
display: flex;
margin-top:vh(100);
}
.left-nav{
margin-left:vw(10);
// margin-top:vh(35);
// width:vw(250);
.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(120);
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);
}
}
}
}
.traffic-box-2{ .traffic-box-2{
width:vw(1517); width:vw(1390);
height:vh(965); height:vh(975);
background-image: url('/src/assets/images/map-bg-2.png'); background-image: url('/src/assets/images/map-bg-2.png');
background-size: 100% 100%; background-size: 100% 100%;
margin:0 vw(10); margin:0 vw(10);
padding:vh(35) vw(30); padding:vh(35) vw(30);
margin-top:vh(110);
position:relative; position:relative;
z-index:9; z-index:9;
.map-box{ .map-box{

2
src/views/traffic/components/box-3.vue
View File

@@ -304,7 +304,7 @@
margin: 0 vw(10); margin: 0 vw(10);
margin-top: vh(100); margin-top: vh(100);
.content-2{ .content-2{
margin-top:vh(10); margin-top:vh(25);
} }
.content-1 { .content-1 {
.chart-item { .chart-item {