diff --git a/src/assets/images/t-a-1.png b/src/assets/images/t-a-1.png
new file mode 100644
index 0000000..ef3b045
Binary files /dev/null and b/src/assets/images/t-a-1.png differ
diff --git a/src/assets/images/t-a-2.png b/src/assets/images/t-a-2.png
new file mode 100644
index 0000000..fef12a3
Binary files /dev/null and b/src/assets/images/t-a-2.png differ
diff --git a/src/assets/images/t-b-1.png b/src/assets/images/t-b-1.png
new file mode 100644
index 0000000..c3ca44c
Binary files /dev/null and b/src/assets/images/t-b-1.png differ
diff --git a/src/assets/images/t-b-2.png b/src/assets/images/t-b-2.png
new file mode 100644
index 0000000..67e7ab8
Binary files /dev/null and b/src/assets/images/t-b-2.png differ
diff --git a/src/assets/images/work-icon-xl-1.png b/src/assets/images/work-icon-xl-1.png
new file mode 100644
index 0000000..fd93c45
Binary files /dev/null and b/src/assets/images/work-icon-xl-1.png differ
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 0bd41f1..821b490 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -11,7 +11,7 @@
   import box2 from './components/box-2.vue'
   import box3 from './components/box-3.vue'
   import box4 from './components/box-4.vue'
-  const navLeft = [{ name: '安全' }, { name: '景区', path: '/scenic' }, { name: '交通',path: '/traffic'  }]
+  const navLeft = [{ name: '安全',path: '/roadTesting' }, { name: '景区', path: '/scenic' }, { name: '交通',path: '/traffic'  }]
   const navRight = [
     { name: '停车' },
     { name: '工单',path: '/workOrder' },
diff --git a/src/views/traffic/components/box-1.vue b/src/views/traffic/components/box-1.vue
index 9de0a6d..5825315 100644
--- a/src/views/traffic/components/box-1.vue
+++ b/src/views/traffic/components/box-1.vue
@@ -206,7 +206,7 @@
 			flex-wrap: wrap;
 			padding:0 vw(10);
 			.item-li{
-				width: vw(394);
+				width: vw(388);
 				height: vh(420);
 				background: radial-gradient(  70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
 				border-radius: 0px 0px 0px 0px;
diff --git a/src/views/traffic/components/box-3.vue b/src/views/traffic/components/box-3.vue
index d41c9ca..54f962c 100644
--- a/src/views/traffic/components/box-3.vue
+++ b/src/views/traffic/components/box-3.vue
@@ -1,14 +1,469 @@
 <template>
 	<div class="traffic-box-3">
-		
+		<!-- 1 -->
+		<div class="content-1">
+			<div class="tp-title">
+				<div class="box-1">
+					<img class="icon-xl" src="@/assets/images/work-icon-xl-1.png" alt="">
+					<div class="xl-title">施家梁子大桥</div>
+					<div class="tp-item">3号摄像机</div>
+					<div class="tp-item item-bg-2">3号点位</div>
+				</div>
+				<div class="rt-text">严重拥堵</div>
+			</div>
+			<div class="title-num">
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">路段长度
+					</div>
+					<div class="item-num"><span>
+							<countup endVal="88895" />
+						</span> </div>
+				</div>
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">平均车速
+					</div>
+					<div class="item-num"><span>
+							<countup endVal="88895" />
+						</span></div>
+				</div>
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">拥堵距离
+					</div>
+					<div class="item-num"><span>
+							<countup endVal="88895" />
+						</span></div>
+				</div>
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">拥堵次数
+					</div>
+					<div class="item-num"><span>
+							<countup endVal="88895" />
+						</span></div>
+				</div>
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">拥堵开始时间
+					</div>
+					<div class="item-num"><span>12:00:00</span></div>
+				</div>
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">拥堵持续时长
+					</div>
+					<div class="item-num"><span>1h30S</span></div>
+				</div>
+			</div>
+			<!-- chart -->
+			<div class="chart-item">
+				<div class="title-3"><span>拥堵频次占比</span></div>
+				<div class="chart-box">
+					<v-chart class="chart" :option="option1" autoresize />
+				</div>
+			</div>
+		</div>
+		<!-- 2 -->
+		<div class="content-1 content-2">
+			<div class="tp-title">
+				<div class="box-1">
+					<img class="icon-xl" src="@/assets/images/work-icon-xl-1.png" alt="">
+					<div class="xl-title">施家梁子大桥</div>
+					<div class="tp-item">3号摄像机</div>
+					<div class="tp-item item-bg-2">3号点位</div>
+				</div>
+				<div class="rt-text">严重拥堵</div>
+			</div>
+			<div class="title-num">
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">路段长度
+					</div>
+					<div class="item-num"><span>
+							<countup endVal="88895" />
+						</span> </div>
+				</div>
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">平均车速
+					</div>
+					<div class="item-num"><span>
+							<countup endVal="88895" />
+						</span></div>
+				</div>
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">拥堵距离
+					</div>
+					<div class="item-num"><span>
+							<countup endVal="88895" />
+						</span></div>
+				</div>
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">拥堵次数
+					</div>
+					<div class="item-num"><span>
+							<countup endVal="88895" />
+						</span></div>
+				</div>
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">拥堵开始时间
+					</div>
+					<div class="item-num"><span>12:00:00</span></div>
+				</div>
+				<div class="item-box">
+					<div class="item-t flex">
+						<img src="@/assets/images/t-icon-1.png" alt="">拥堵持续时长
+					</div>
+					<div class="item-num"><span>1h30S</span></div>
+				</div>
+			</div>
+			<!-- chart -->
+			<div class="chart-item">
+				<div class="title-3"><span>拥堵频次占比</span></div>
+				<div class="chart-box">
+					<v-chart class="chart" :option="option1" autoresize />
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
 
-<script>
+<script setup>
+	import countup from 'vue-countup-v3'
+	import * as echarts from 'echarts'
+	import {
+		fitChartSize
+	} from '@/utils/dataUtil'
+	import Map from '@/components/Map/marker.vue'
+	import VChart, {
+		THEME_KEY
+	} from 'vue-echarts';
+	import {
+		ref,
+		provide
+	} from 'vue';
+
+	provide(THEME_KEY, 'dark');
+	const option1 = ref({
+		backgroundColor: 'transparent',
+		height: fitChartSize(230),
+		width: '92%',
+		grid: {
+			top: '50',
+			bottom: '0',
+			left: '4%',
+			containLabel: true,
+		},
+		color: [{
+				type: 'linear',
+				x: 0,
+				y: 0,
+				x2: 0,
+				y2: 1,
+				colorStops: [{
+						offset: 0,
+						color: '#0096FF' // 0% 处的颜色
+					},
+					{
+						offset: 1,
+						color: '#004D88' // 100% 处的颜色
+					}
+				],
+				global: false // 缺省为 false
+			},
+			{
+				type: 'linear',
+				x: 0,
+				y: 0,
+				x2: 0,
+				y2: 1,
+				colorStops: [{
+					offset: 0,
+					color: '#FFCB39' // 0% 处的颜色
+				}, {
+					offset: 1,
+					color: '#0A4190' // 100% 处的颜色
+				}],
+				global: false // 缺省为 false
+			},
+			{
+				type: 'linear',
+				x: 0,
+				y: 0,
+				x2: 0,
+				y2: 1,
+				colorStops: [{
+					offset: 0,
+					color: '#9846FE' // 0% 处的颜色
+				}, {
+					offset: 1,
+					color: '#0A4190' // 100% 处的颜色
+				}],
+				global: false // 缺省为 false
+			},
+			{
+				type: 'linear',
+				x: 0,
+				y: 0,
+				x2: 0,
+				y2: 1,
+				colorStops: [{
+					offset: 0,
+					color: '#FF5619' // 0% 处的颜色
+				}, {
+					offset: 1,
+					color: '#0A4190' // 100% 处的颜色
+				}],
+				global: false // 缺省为 false
+			},
+		],
+		legend: {
+			type: 'plain',
+			orient: 'horizontal',
+			right: fitChartSize(10),
+			top: fitChartSize(10),
+			bottom: fitChartSize(20),
+			itemWidth: 6,
+			itemHeight: 6,
+		},
+		tooltip: {},
+		dataset: {
+			source: [
+				['product', '路段类型1', '路段类型2', '路段类型3', '路段类型4'],
+				['10:00', 399.3, 185.8, 293.7, 123],
+				['10:30', 83.1, 273.4, 455.1, 123],
+				['11:00', 86.4, 465.2, 382.5, 123],
+				['11:30', 72.4, 153.9, 439.1, 123],
+				['12:00', 72.4, 453.9, 239.1, 123],
+				['12:30', 72.4, 453.9, 239.1, 123],
+				['13:00', 86.4, 465.2, 282.5, 123],
+				['13:30', 72.4, 453.9, 239.1, 123],
+				['14:00', 72.4, 453.9, 239.1, 123],
+				['14:30', 72.4, 453.9, 239.1],
+			]
+		},
+		xAxis: {
+			type: 'category',
+			axisTisk: {
+				show: true,
+				// 设置刻度长度
+				length: 1,
+				lineStyle: {
+					type: 'dashed', // 设置为虚线
+					width: 0,
+				}
+			},
+		},
+		yAxis: {
+			type: 'value',
+			min: 0,
+			max: 500,
+			interval: 100,
+			axisLabel: {
+				fontSize: fitChartSize(12), // 设置Y轴刻度字体大小
+				color: '#eee',
+			},
+			splitLine: {
+				show: true,
+				lineStyle: {
+					type: 'dashed',
+					color: '#00D0FF'
+				}
+			}
+		},
+		// Declare several bar series, each will be mapped
+		// to a column of dataset.source by default.
+		series: [{
+				type: 'bar'
+			}, {
+				type: 'bar'
+			}, {
+				type: 'bar'
+			},
+			{
+				type: 'bar'
+			}
+		]
+	})
 </script>
 
 <style lang="scss" scoped>
-	.traffic-box-3{
-		
+	.traffic-box-3 {
+		width: vw(818);
+		height: vh(480);
+		background: linear-gradient(330deg, #0B2F64 0%, #062B57 100%);
+		border-radius: 0px 0px 0px 0px;
+		padding: vw(10);
+		position: relative;
+		z-index: 9;
+		margin: 0 vw(10);
+		margin-top: vh(100);
+		.content-2{
+			margin-top:vh(10);
+		}
+		.content-1 {
+			.chart-item {
+				margin-top: vh(10);
+				height: vh(293);
+				background: radial-gradient(70% at 99% 50%, #0A4190 0%, rgba(0, 77, 136, 0.6) 100%);
+				border-radius: 0px 0px 0px 0px;
+				border: 1px solid;
+				border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+
+				.chart-box {
+					width: 100%;
+					height: vh(250);
+				}
+
+				.title-3 {
+					margin-left: vw(10);
+					position: relative;
+					width: vw(344);
+					height: vh(12);
+					margin-top: vh(20);
+					background-image: url('@/assets/images/title-6.png');
+					background-size: 100% 100%;
+
+					&>span {
+						position: absolute;
+						bottom: vh(4);
+						left: vw(20);
+						font-size: vw(15);
+						font-weight: bold;
+						background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
+						-webkit-background-clip: text;
+						background-clip: text;
+						-webkit-text-fill-color: transparent;
+						/* 兼容WebKit内核浏览器 */
+						color: transparent;
+						/* 兼容其他浏览器 */
+					}
+				}
+			}
+
+			.title-num {
+				display: flex;
+				justify-content: flex-start;
+				padding: vw(20);
+				background: radial-gradient(70% at 99% 50%, #0A4190 0%, rgba(0, 77, 136, 0.6) 100%);
+				border-radius: 0px 0px 0px 0px;
+				border: 1px solid;
+				border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+
+				.item-box {
+					flex: 1;
+
+					.item-t {
+						display: flex;
+						font-weight: 400;
+						font-size: vw(14);
+						color: rgba(255, 255, 255, 0.8);
+						text-align: left;
+						font-style: normal;
+						text-transform: none;
+						margin-bottom: vh(20);
+
+						img {
+							margin-right: vw(5);
+							width: vw(8);
+							height: vh(8);
+						}
+
+					}
+
+					.item-num {
+						width: vw(134);
+						height: vh(30);
+						background-image: url('@/assets/images/t-box-title-bg-1.png');
+						background-size: 100% 100%;
+						font-weight: bold;
+						font-size: vw(24);
+						color: #02F9FA;
+						text-align: left;
+						font-style: normal;
+						text-transform: none;
+						padding-left: vw(15);
+						position: relative;
+						left: vw(-8);
+
+						span {
+							position: relative;
+							top: vh(-5);
+						}
+					}
+				}
+			}
+
+			.tp-title {
+				display: flex;
+				align-items: center;
+
+				.box-1 {
+					flex: 1;
+					display: flex;
+					align-items: center;
+
+					.icon-xl {
+						width: vw(30);
+						height: vh(22);
+						margin-right: vw(15);
+					}
+
+					.xl-title {
+						font-size: vw(28);
+						font-weight: bold;
+						color: transparent;
+						-webkit-background-clip: text;
+						background-clip: text;
+						-webkit-text-fill-color: transparent;
+						background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
+						margin-right: vw(20);
+					}
+
+					.tp-item {
+						width: vw(120);
+						height: vh(72);
+						background-image: url('/src/assets/images/t-a-1.png');
+						background-size: 100% 100%;
+						font-weight: 600;
+						font-size: vw(15);
+						color: #FFFFFF;
+						padding-left: vw(42);
+						text-align: left;
+						font-style: normal;
+						text-transform: none;
+						display: flex;
+						align-items: center;
+						margin: 0 vw(20)
+					}
+
+					.item-bg-2 {
+						background-image: url('/src/assets/images/t-a-2.png');
+						background-size: 100% 100%;
+					}
+				}
+
+				.rt-text {
+					width: vw(116);
+					height: vh(40);
+					font-weight: 400;
+					font-size: vw(14);
+					color: #FFFFFF;
+					padding-left: vw(15);
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+					background-image: url('/src/assets/images/t-b-1.png');
+					background-size: 100% 100%;
+					line-height: vh(40);
+					padding-left: vw(40);
+				}
+			}
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/traffic/index.vue b/src/views/traffic/index.vue
index 18aa88d..bdede9f 100644
--- a/src/views/traffic/index.vue
+++ b/src/views/traffic/index.vue
@@ -2,7 +2,8 @@
 	<main class="wrapper">
 		<CoreVideo />
 		<box1/>
-		<!-- <box2/> -->
+		<box2/>
+		<box3/>
 		<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
 		<Correspondence />
 	</main>
@@ -11,6 +12,7 @@
 <script setup>
 	import box1 from './components/box-1.vue'
 	import box2 from './components/box-2.vue'
+	import box3 from './components/box-3.vue'
 </script>
 
 <style>