diff --git a/src/assets/images/t-box-title-bg-1.png b/src/assets/images/t-box-title-bg-1.png
new file mode 100644
index 0000000..d3590ab
Binary files /dev/null and b/src/assets/images/t-box-title-bg-1.png differ
diff --git a/src/assets/images/t-icon-1.png b/src/assets/images/t-icon-1.png
new file mode 100644
index 0000000..8bd5f47
Binary files /dev/null and b/src/assets/images/t-icon-1.png differ
diff --git a/src/components/monitor/index.vue b/src/components/monitor/index.vue
new file mode 100644
index 0000000..63db096
--- /dev/null
+++ b/src/components/monitor/index.vue
@@ -0,0 +1,205 @@
+<template>
+	<div class="video-box">
+		<div class="flex video-one-1" v-if="videoLog == 1">
+			<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
+				  <vue3VideoPlay  v-bind="options"/>
+			</div>
+				
+		</div>
+		
+		<div class="video-live flex" v-if="videoLog==2">
+			<div class="video-lt v-error-bg">
+				<div class="desc">核心路段：这是一条信息说明</div>
+				<vue3VideoPlay  v-bind="options"/>
+			</div>
+			<div class="video-rt">
+				<div class="title">
+					<span>最近联系</span>
+				</div>
+				<div class="rt-v-box">
+					<div class="rt-video v-error-bg" v-for="item in 8">
+						<div class="desc">核心路段：这是一条信息说明</div>
+						<vue3VideoPlay  v-bind="options"/>
+					</div>
+					
+				</div>
+				
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { fitChartSize } from '@/utils/dataUtil'
+	let searchValue = ref('')
+	const options = reactive({
+	    src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
+	    type: 'm3u8', //视频类型
+		width:"100%",
+		height:"100%",
+		color: "#409eff", //主题色
+		title: "", //视频名称
+		muted: false, //静音
+		webFullScreen: false,
+		speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
+		autoPlay: true, //自动播放
+		loop: false, //循环播放
+		mirror: false, //镜像画面
+		ligthOff: false, //关灯模式
+		volume: 0.3, //默认音量大小
+		control: true, //是否显示控制
+		controlBtns: [
+		    // "audioTrack",
+		    // "quality",
+		    // "speedRate",
+		    // "volume",
+		    "setting",
+		    "pip",
+		    "pageFullScreen",
+		    "fullScreen",
+		], //显示所有按钮,
+	});
+	const videoLog = ref(1)
+	const handleItemVideo = ()=>{
+		console.log('单击视频')
+		videoLog.value = 2
+	}
+	
+</script>
+
+<style lang="scss" scoped>
+	.video-box{
+		flex:1;
+		display:flex;
+		.video-one-1{
+			background-image: url('/src/assets/images/log-v-bg.png');
+			background-size: 100% 100%;
+			flex-wrap: wrap;
+			padding-top:0;
+			padding:vh(30) vw(20);
+			margin-left:vw(20);
+		}
+		.video-live{
+			justify-content: space-between;
+			margin-left:vw(10) ;
+			.video-lt{
+				width:vw(1666);
+				height:vh(950);
+				background-image: url('/src/assets/images/one-video-bg.png');
+				background-size: 100% 100%;
+				padding:vh(40) vw(50);
+				position:relative;
+				.desc{
+					position:absolute;
+					// width:100%;
+					left:vw(50);
+					right:vw(50);
+					top:40(vh);
+					z-index: 9;
+					background: rgba(4,30,69,0.5);
+					border-radius: 0px 0px 0px 0px;
+					text-align: center;
+					font-weight: 400;
+					font-size: vw(14);
+					color: #FFFFFF;
+					padding:vw(20);
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+				}
+			}
+			.v-error-bg{
+				// background-image: url('/src/assets/images/v-item-bg-1.png');
+				// background-size: 100% 100%;
+				.desc{
+					background: rgba(226,27,27,0.5);
+				}
+			}
+			.video-rt{
+				width:vw(400);
+				height:vh(950);
+				background: radial-gradient( to bottom 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
+				border-radius: 0px 0px 0px 0px;
+				border: 1px solid;
+				opacity: 0.4;
+				border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+				margin-left:vw(10);
+				padding:vw(20);
+				.rt-v-box{
+					overflow-y: auto;
+					height:100%;
+				}
+				.title{
+					background-image: url('/src/assets/images/nav-l-t-bg.png');
+					background-size: 100% 100%;
+					margin-bottom:vh(10);
+					position:relative;
+					left:vw(-20);
+					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;
+					}
+					
+				}
+				.rt-video{
+					width:100%;
+					height:vh(300);
+					background-image: url('/src/assets/images/v-item-bg.png');
+					background-size: 100% 100%;
+					padding:vw(20);
+					box-sizing: border-box;
+					margin-bottom:vh(2);
+					position:relative;
+					.desc{
+						position:absolute;
+						width:100%;
+						left:0;
+						bottom:0;
+						z-index: 9;
+						background: rgba(4,30,69,0.5);
+						border-radius: 0px 0px 0px 0px;
+						text-align: center;
+						font-weight: 400;
+						font-size: vw(14);
+						color: #FFFFFF;
+						padding:vw(20);
+						text-align: left;
+						font-style: normal;
+						text-transform: none;
+					}
+				}
+				.v-error-bg{
+					background-image: url('/src/assets/images/v-item-bg-1.png');
+					background-size: 100% 100%;
+					.desc{
+						background: rgba(226,27,27,0.5);
+					}
+				}
+			}
+		}
+		.v-item{
+			width:vw(400);
+			height:vh(300);
+			background-image: url('/src/assets/images/v-item-bg.png');
+			background-size: 100% 100%;
+			padding:vw(20);
+			margin-right:vw(4);
+			margin-bottom:vh(4);
+		}
+		.v-error-bg{
+			background-image: url('/src/assets/images/v-item-bg-1.png');
+			background-size: 100% 100%;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index d7cf874..2b40d6f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -27,7 +27,12 @@ const router = createRouter({
       path: '/scenic',
       name: 'scenic',
       component: () => import('@/views/scenic/index.vue')
-    }
+    },
+	{
+	  path: '/traffic',
+	  name: 'traffic',
+	  component: () => import('@/views/traffic/index.vue')
+	}
   ]
 })
 
diff --git a/src/views/monitor/components/box-3.vue b/src/views/monitor/components/box-3.vue
index 8a96e7f..0d6ea74 100644
--- a/src/views/monitor/components/box-3.vue
+++ b/src/views/monitor/components/box-3.vue
@@ -4,227 +4,25 @@
 		<navLeft></navLeft>
 		
 		<!-- 视频 -->
-		<div class="video-box">
-			<div class="flex video-one-1" v-if="videoLog == 1">
-				<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
-					  <vue3VideoPlay  v-bind="options"/>
-				</div>
-					
-			</div>
-			
-			<div class="video-live flex" v-if="videoLog==2">
-				<div class="video-lt v-error-bg">
-					<div class="desc">核心路段：这是一条信息说明</div>
-					<vue3VideoPlay  v-bind="options"/>
-				</div>
-				<div class="video-rt">
-					<div class="title">
-						<span>最近联系</span>
-					</div>
-					<div class="rt-v-box">
-						<div class="rt-video v-error-bg" v-for="item in 8">
-							<div class="desc">核心路段：这是一条信息说明</div>
-							<vue3VideoPlay  v-bind="options"/>
-						</div>
-						
-					</div>
-					
-				</div>
-			</div>
-		</div>
+		<monitor></monitor>
 	</div>
 </template>
 
 <script setup>
 	import { fitChartSize } from '@/utils/dataUtil'
 	import navLeft from '@/components/navLeft/index.vue'
-	let searchValue = ref('')
-	const options = reactive({
-	    src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
-	    type: 'm3u8', //视频类型
-		width:"100%",
-		height:"100%",
-		color: "#409eff", //主题色
-		title: "", //视频名称
-		muted: false, //静音
-		webFullScreen: false,
-		speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
-		autoPlay: true, //自动播放
-		loop: false, //循环播放
-		mirror: false, //镜像画面
-		ligthOff: false, //关灯模式
-		volume: 0.3, //默认音量大小
-		control: true, //是否显示控制
-		controlBtns: [
-		    // "audioTrack",
-		    // "quality",
-		    // "speedRate",
-		    // "volume",
-		    "setting",
-		    "pip",
-		    "pageFullScreen",
-		    "fullScreen",
-		], //显示所有按钮,
-	});
-	const videoLog = ref(1)
-	const handleItemVideo = ()=>{
-		console.log('单击视频')
-		videoLog.value = 2
-	}
+	import monitor from '@/components/monitor/index.vue'
 	
 </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;
-	}
+	
 	.box-3-content{
 		width:vw(2356);
 		height:vh(965);
 
 		margin-top: vh(120);
 		display: flex;
-		.video-box{
-			flex:1;
-			display:flex;
-			.video-one-1{
-				background-image: url('/src/assets/images/log-v-bg.png');
-				background-size: 100% 100%;
-				flex-wrap: wrap;
-				padding-top:0;
-				padding:vh(30) vw(20);
-				margin-left:vw(20);
-			}
-			.video-live{
-				justify-content: space-between;
-				margin-left:vw(10) ;
-				.video-lt{
-					width:vw(1666);
-					height:vh(950);
-					background-image: url('/src/assets/images/one-video-bg.png');
-					background-size: 100% 100%;
-					padding:vh(40) vw(50);
-					position:relative;
-					.desc{
-						position:absolute;
-						// width:100%;
-						left:vw(50);
-						right:vw(50);
-						top:40(vh);
-						z-index: 9;
-						background: rgba(4,30,69,0.5);
-						border-radius: 0px 0px 0px 0px;
-						text-align: center;
-						font-weight: 400;
-						font-size: vw(14);
-						color: #FFFFFF;
-						padding:vw(20);
-						text-align: left;
-						font-style: normal;
-						text-transform: none;
-					}
-				}
-				.v-error-bg{
-					// background-image: url('/src/assets/images/v-item-bg-1.png');
-					// background-size: 100% 100%;
-					.desc{
-						background: rgba(226,27,27,0.5);
-					}
-				}
-				.video-rt{
-					width:vw(400);
-					height:vh(950);
-					background: radial-gradient( to bottom 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
-					border-radius: 0px 0px 0px 0px;
-					border: 1px solid;
-					opacity: 0.4;
-					border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
-					margin-left:vw(10);
-					padding:vw(20);
-					.rt-v-box{
-						overflow-y: auto;
-						height:100%;
-					}
-					.title{
-						background-image: url('/src/assets/images/nav-l-t-bg.png');
-						background-size: 100% 100%;
-						margin-bottom:vh(10);
-						position:relative;
-						left:vw(-20);
-						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;
-						}
-						
-					}
-					.rt-video{
-						width:100%;
-						height:vh(300);
-						background-image: url('/src/assets/images/v-item-bg.png');
-						background-size: 100% 100%;
-						padding:vw(20);
-						box-sizing: border-box;
-						margin-bottom:vh(2);
-						position:relative;
-						.desc{
-							position:absolute;
-							width:100%;
-							left:0;
-							bottom:0;
-							z-index: 9;
-							background: rgba(4,30,69,0.5);
-							border-radius: 0px 0px 0px 0px;
-							text-align: center;
-							font-weight: 400;
-							font-size: vw(14);
-							color: #FFFFFF;
-							padding:vw(20);
-							text-align: left;
-							font-style: normal;
-							text-transform: none;
-						}
-					}
-					.v-error-bg{
-						background-image: url('/src/assets/images/v-item-bg-1.png');
-						background-size: 100% 100%;
-						.desc{
-							background: rgba(226,27,27,0.5);
-						}
-					}
-				}
-			}
-			.v-item{
-				width:vw(400);
-				height:vh(300);
-				background-image: url('/src/assets/images/v-item-bg.png');
-				background-size: 100% 100%;
-				padding:vw(20);
-				margin-right:vw(4);
-				margin-bottom:vh(4);
-			}
-			.v-error-bg{
-				background-image: url('/src/assets/images/v-item-bg-1.png');
-				background-size: 100% 100%;
-			}
-		}
+		
 		
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/monitor/index.vue b/src/views/monitor/index.vue
index b58e8c6..e93282e 100644
--- a/src/views/monitor/index.vue
+++ b/src/views/monitor/index.vue
@@ -54,67 +54,5 @@
 		height: 100vh;
 		overflow: hidden;
 		background-color: #0a254b;
-
-		.header {
-			position: absolute;
-			left: vw(326);
-
-			.title {
-				width: vw(3133);
-				height: vh(120);
-				font-size: vw(48);
-				font-weight: 800;
-				text-align: center;
-				padding-top: vh(20);
-				color: #fff;
-				letter-spacing: vw(10);
-				box-sizing: border-box;
-				text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
-				background-image: url('@/assets/images/title.png');
-				background-size: 100% 100%;
-			}
-
-			.nav-left {
-				position: absolute;
-				left: vw(380);
-				top: vh(34);
-				display: flex;
-
-				&-item {
-					cursor: pointer;
-					margin-left: vh(-10);
-					width: vw(210);
-					height: vh(56);
-					padding-top: vh(10);
-					font-weight: 600;
-					font-size: vw(28);
-					text-align: center;
-					color: rgba(208, 236, 255, 0.9);
-					background-image: url('@/assets/images/title-2.png');
-					background-size: 100% 100%;
-				}
-			}
-
-			.nav-right {
-				position: absolute;
-				right: vw(424);
-				top: vh(34);
-				display: flex;
-
-				&-item {
-					cursor: pointer;
-					margin-right: vh(-10);
-					width: vw(210);
-					height: vh(56);
-					padding-top: vh(10);
-					font-weight: 600;
-					font-size: vw(28);
-					text-align: center;
-					color: rgba(208, 236, 255, 0.9);
-					background-image: url('@/assets/images/title-3.png');
-					background-size: 100% 100%;
-				}
-			}
-		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/testing/components/box-3.vue b/src/views/testing/components/box-3.vue
index 973b4e4..0bc5b47 100644
--- a/src/views/testing/components/box-3.vue
+++ b/src/views/testing/components/box-3.vue
@@ -4,72 +4,13 @@
 		<navLeft></navLeft>
 		
 		<!-- 视频 -->
-		<div class="video-box">
-			<div class="flex video-one-1" v-if="videoLog == 1">
-				<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
-					  <vue3VideoPlay  v-bind="options"/>
-				</div>
-					
-			</div>
-			<div class="video-live flex" v-if="videoLog == 2">
-				<div class="video-lt v-error-bg">
-					<div class="desc">核心路段：这是一条信息说明</div>
-					<vue3VideoPlay  v-bind="options"/>
-				</div>
-				<div class="video-rt">
-					<div class="title">
-						<span>最近联系</span>
-					</div>
-					<div class="rt-v-box">
-						<div class="rt-video v-error-bg" v-for="item in 8">
-							<div class="desc">核心路段：这是一条信息说明</div>
-							<vue3VideoPlay  v-bind="options"/>
-						</div>
-						
-					</div>
-					
-				</div>
-			</div>
-		</div>
+		<monitor></monitor>
 	</div>
 </template>
 
 <script setup>
-	import { fitChartSize } from '@/utils/dataUtil'
 	import navLeft from '@/components/navLeft/index.vue'
-	const options = reactive({
-	    src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
-	    type: 'm3u8', //视频类型
-		width:"100%",
-		height:"100%",
-		color: "#409eff", //主题色
-		title: "", //视频名称
-		muted: false, //静音
-		webFullScreen: false,
-		speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
-		autoPlay: true, //自动播放
-		loop: false, //循环播放
-		mirror: false, //镜像画面
-		ligthOff: false, //关灯模式
-		volume: 0.3, //默认音量大小
-		control: true, //是否显示控制
-		controlBtns: [
-		    // "audioTrack",
-		    // "quality",
-		    // "speedRate",
-		    // "volume",
-		    "setting",
-		    "pip",
-		    "pageFullScreen",
-		    "fullScreen",
-		], //显示所有按钮,
-	});
-	const videoLog = ref(1)
-	const handleItemVideo = ()=>{
-		console.log('单击视频')
-		videoLog.value = 2
-	}
-	
+	import monitor from '@/components/monitor/index.vue'
 </script>
 <style lang="scss" scoped>
 	.box-3-content{
@@ -79,139 +20,6 @@
 		background-size: 100% 100%;
 		margin-top: vh(120);
 		display: flex;
-		.video-box{
-			flex:1;
-			// padding:vh(40) vw(20);
-			display:flex;
-			flex-wrap: wrap;
-			padding-top:0;
-			// margin-left:vw(20);
-			.video-one-1{
-				background-image: url('/src/assets/images/log-v-bg.png');
-				background-size: 100% 100%;
-				flex-wrap: wrap;
-				padding-top:0;
-				padding:vh(30) vw(20);
-				margin-left:vw(20);
-			}
-			.video-live{
-				justify-content: space-between;
-				margin-left:vw(10) ;
-				.video-lt{
-					width:vw(1666);
-					height:vh(950);
-					background-image: url('/src/assets/images/one-video-bg.png');
-					background-size: 100% 100%;
-					padding:vh(40) vw(50);
-					position:relative;
-					.desc{
-						position:absolute;
-						// width:100%;
-						left:vw(50);
-						right:vw(50);
-						top:40(vh);
-						z-index: 9;
-						background: rgba(4,30,69,0.5);
-						border-radius: 0px 0px 0px 0px;
-						text-align: center;
-						font-weight: 400;
-						font-size: vw(14);
-						color: #FFFFFF;
-						padding:vw(20);
-						text-align: left;
-						font-style: normal;
-						text-transform: none;
-					}
-				}
-				.v-error-bg{
-					// background-image: url('/src/assets/images/v-item-bg-1.png');
-					// background-size: 100% 100%;
-					.desc{
-						background: rgba(226,27,27,0.5);
-					}
-				}
-				.video-rt{
-					width:vw(400);
-					height:vh(950);
-					background: radial-gradient( to bottom 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
-					border-radius: 0px 0px 0px 0px;
-					border: 1px solid;
-					opacity: 0.4;
-					border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
-					margin-left:vw(10);
-					padding:vw(20);
-					.rt-v-box{
-						overflow-y: auto;
-						height:100%;
-					}
-					.title{
-						background-image: url('/src/assets/images/nav-l-t-bg.png');
-						background-size: 100% 100%;
-						margin-bottom:vh(10);
-						position:relative;
-						left:vw(-20);
-						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;
-						}
-						
-					}
-					.rt-video{
-						width:100%;
-						height:vh(300);
-						background-image: url('/src/assets/images/v-item-bg.png');
-						background-size: 100% 100%;
-						padding:vw(20);
-						box-sizing: border-box;
-						margin-bottom:vh(2);
-						position:relative;
-						.desc{
-							position:absolute;
-							width:100%;
-							left:0;
-							bottom:0;
-							z-index: 9;
-							background: rgba(4,30,69,0.5);
-							border-radius: 0px 0px 0px 0px;
-							text-align: center;
-							font-weight: 400;
-							font-size: vw(14);
-							color: #FFFFFF;
-							padding:vw(20);
-							text-align: left;
-							font-style: normal;
-							text-transform: none;
-						}
-					}
-					.v-error-bg{
-						background-image: url('/src/assets/images/v-item-bg-1.png');
-						background-size: 100% 100%;
-						.desc{
-							background: rgba(226,27,27,0.5);
-						}
-					}
-				}
-			}
-			.v-item{
-				width:vw(400);
-				height:vh(300);
-				background-image: url('/src/assets/images/v-item-bg.png');
-				background-size: 100% 100%;
-				padding:vw(20);
-				margin-right:vw(4);
-				margin-bottom:vh(4);
-			}
-		}
+		
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/traffic/components/box-1.vue b/src/views/traffic/components/box-1.vue
new file mode 100644
index 0000000..0447219
--- /dev/null
+++ b/src/views/traffic/components/box-1.vue
@@ -0,0 +1,253 @@
+<template>
+	<div class="traffic-box-1">
+		<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>
+		<div class="list-item">
+			<div class="item-li" v-for="item in 4">
+				<div class="title-3"><span>拥堵频次占比</span></div>
+				<div class="chart-box">
+					<v-chart class="chart"  :option="option1" autoresize />
+				</div>
+			</div>
+			
+		</div>
+	</div>
+</template>
+
+<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',
+		  tooltip: {
+		    trigger: 'item'
+		  },
+		  legend: {
+		  		type: 'scroll',
+		  		orient: 'vertical',
+		  		right: 10,
+		  		top: 70,
+		  		bottom: 20,
+		  		itemWidth:5,
+		  		itemHeight:5,
+				padding: [20,10,20,10],
+				// itemGap:15,
+				show:true,
+				lineStyle:{
+					 borderColor:'#fff',
+					 width:5,
+				},
+				textStyle: {
+				  color: '#fff',
+				  fontSize:fitChartSize(16),
+				  lineHeight: 16,
+				  rich: {
+					d: {   
+						  width: '100%',
+						  borderWidth: 0.5,
+						  height:5,
+						  backgroundColor: '1',
+						},
+					 a: {
+						width: 75,
+						align: 'left',
+						fontSize:fitChartSize(16),
+						// backgroundColor:'1'
+						// color:'1',
+						// borderColor:'#eee',
+						// borderWidth:2
+					 },
+				  }
+				},
+				formatter: (e) => {
+					 let ratio = 0
+					 let value = 0
+					 if (option1.value.series[0].data.length > 0) {
+						option1.value.series[0].data.forEach(item => {
+							if (e == item.name) {
+						  ratio = (item.value*100/3799).toFixed(0)
+						  value = item.value
+							}
+						 });
+					  }
+					  // return `${e}    ${ratio}%  
+					  let arr = ['{a|' + e + '}', '{b|' + ratio + '%}'] 
+					  return arr.join('')
+				},
+				itemStyle:{
+					// color:'#fff'
+					
+				},
+				backgroundColor:'rgba(0,77,136,0.6)'
+		  },
+		  series: [
+		    {
+		      name: 'Access From',
+			  type: 'pie',
+			  left:-50,
+			  top:40,
+			  width:fitChartSize(350),
+			  height:fitChartSize(350),
+			  // width:200,
+			  // height:200,
+			  radius: ['40%', '50%'],
+			  avoidLabelOverlap: false,
+			  padAngle: 5,
+			  itemStyle: {
+				borderRadius: 2
+			  },
+			  label: {
+				  show: false,
+				  position: 'center',
+				  
+			  },
+			  emphasis: {
+				label: {
+					show: true,
+					fontSize: fitChartSize(16),
+					fontWeight: 'bold',
+					color:'#fff'
+				  }
+				},
+				labelLine: {
+				  show: true
+				},
+		      data: [
+		        { value: 200, name: '异常状况1' },
+		        { value: 500, name: '异常状况2' },
+		        { value: 234, name: '异常状况3' },
+		        { value: 135, name: '异常状况4' },
+		        { value: 100, name: '异常状况5' },
+				{ value: 777, name: '异常状况6' },
+				{ value: 777, name: '其他' },
+		      ]
+		     
+		    },
+		  ],
+	});
+</script>
+
+<style lang="scss" scoped>
+	.traffic-box-1{
+		width:vw(815);
+		height:vh(975);
+		background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
+		border-radius: 0px 0px 0px 0px;
+		margin-top:vh(100);
+		position: relative;
+		z-index: 9;
+		.list-item{
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			padding:0 vw(10);
+			.item-li{
+				width: vw(394);
+				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;
+				border: 1px solid;
+				border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+				.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; /* 兼容其他浏览器 */
+					}
+				}
+				.chart-box{
+					width:100%;
+					height:vh(370);
+				}
+			}
+		}
+		.title-num{
+			display: flex;
+			justify-content: flex-start;
+			padding:vw(40);
+			.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);
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/traffic/index.vue b/src/views/traffic/index.vue
index 02409e3..11831ac 100644
--- a/src/views/traffic/index.vue
+++ b/src/views/traffic/index.vue
@@ -1,7 +1,14 @@
 <template>
+	<main class="wrapper">
+		<CoreVideo />
+		<box1/>
+		<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
+		<Correspondence />
+	</main>
 </template>
 
-<script>
+<script setup>
+	import box1 from './components/box-1.vue'
 </script>
 
 <style>