From a4cd3bec3945ef4f498e197db288eaaac194d4e1 Mon Sep 17 00:00:00 2001
From: duanliang <duanliang>
Date: Thu, 26 Dec 2024 14:30:41 +0800
Subject: [PATCH] =?UTF-8?q?fix=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/navLeft/index.vue       |  2 +-
 src/views/traffic/components/box-2.vue | 89 ++++++++++++++++++++++----
 src/views/traffic/components/box-3.vue |  2 +-
 3 files changed, 78 insertions(+), 15 deletions(-)

diff --git a/src/components/navLeft/index.vue b/src/components/navLeft/index.vue
index 09aeeb0..6d66ccf 100644
--- a/src/components/navLeft/index.vue
+++ b/src/components/navLeft/index.vue
@@ -43,7 +43,7 @@
 				</div>
 				<div class="tree-a">
 					<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 activee">摄像头1</span>
 						<span class="name-2">摄像头1</span>
diff --git a/src/views/traffic/components/box-2.vue b/src/views/traffic/components/box-2.vue
index f4fd32a..fc0d738 100644
--- a/src/views/traffic/components/box-2.vue
+++ b/src/views/traffic/components/box-2.vue
@@ -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{
diff --git a/src/views/traffic/components/box-3.vue b/src/views/traffic/components/box-3.vue
index f62c9bd..3eb396c 100644
--- a/src/views/traffic/components/box-3.vue
+++ b/src/views/traffic/components/box-3.vue
@@ -304,7 +304,7 @@
 		margin: 0 vw(10);
 		margin-top: vh(100);
 		.content-2{
-			margin-top:vh(10);
+			margin-top:vh(25);
 		}
 		.content-1 {
 			.chart-item {