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

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

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