diff --git a/package-lock.json b/package-lock.json
index 62cdef3..73fcc81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,11 +12,13 @@
         "axios": "^1.7.9",
         "echarts": "^5.5.1",
         "element-plus": "^2.9.0",
+        "flv.js": "^1.6.2",
         "pinia": "^2.2.6",
         "vue": "^3.5.13",
         "vue-countup-v3": "^1.4.2",
         "vue-echarts": "^7.0.3",
-        "vue-router": "^4.4.5"
+        "vue-router": "^4.4.5",
+        "vue3-video-play": "^1.3.2"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.1",
@@ -467,7 +469,6 @@
         "node": ">=6.9.0"
       }
     },
-<<<<<<< HEAD
     "node_modules/@ctrl/tinycolor": {
       "version": "3.6.1",
       "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
@@ -484,8 +485,6 @@
         "vue": "^3.2.0"
       }
     },
-=======
->>>>>>> 897d91a9c6208a60428d9db9f9bd4745e1233705
     "node_modules/@esbuild/win32-x64": {
       "version": "0.24.0",
       "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
@@ -502,7 +501,6 @@
         "node": ">=18"
       }
     },
-<<<<<<< HEAD
     "node_modules/@floating-ui/core": {
       "version": "1.6.8",
       "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.8.tgz",
@@ -525,8 +523,6 @@
       "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
     },
-=======
->>>>>>> 897d91a9c6208a60428d9db9f9bd4745e1233705
     "node_modules/@jiaminghi/color": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
@@ -700,7 +696,6 @@
       "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
       "dev": true
     },
-<<<<<<< HEAD
     "node_modules/@popperjs/core": {
       "name": "@sxzz/popperjs-es",
       "version": "2.11.7",
@@ -711,8 +706,6 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
-=======
->>>>>>> 897d91a9c6208a60428d9db9f9bd4745e1233705
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.3",
       "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
@@ -1770,6 +1763,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.24.0",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.24.0.tgz",
@@ -2001,6 +2000,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/flv.js": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
+      "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "es6-promise": "^4.2.8",
+        "webworkify-webpack": "^2.1.5"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -2116,6 +2125,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.5.17",
+      "resolved": "https://registry.npmmirror.com/hls.js/-/hls.js-1.5.17.tgz",
+      "integrity": "sha512-wA66nnYFvQa1o4DO/BFgLNRKnBTVXpNeldGRBJ2Y0SvFtdwvFKCbqa9zhHoZLoxHhZ+jYsj3aIBkWQQCPNOhMw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
@@ -3369,6 +3384,15 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.10",
       "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.10.tgz",
@@ -3823,10 +3847,7 @@
       "version": "1.4.2",
       "resolved": "https://registry.npmmirror.com/vue-countup-v3/-/vue-countup-v3-1.4.2.tgz",
       "integrity": "sha512-nRC65jBcdgwybxqztgd/WaK8ZN5T9ECPyiCFGYFMewCsvqdRVo1CtpT7JREcPNF837Fgu/izTSFiuzrIGD6w0A==",
-<<<<<<< HEAD
-=======
       "license": "MIT",
->>>>>>> 897d91a9c6208a60428d9db9f9bd4745e1233705
       "dependencies": {
         "countup.js": "^2.6.2"
       },
@@ -3891,6 +3912,17 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-video-play": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/vue3-video-play/-/vue3-video-play-1.3.2.tgz",
+      "integrity": "sha512-eEwCJ0NIkfVQgTj0I3Kf9b1E/04Qne8mQQiE8r77BocblHsZ2T6af3q8l8Zzs/OvjlpQAQvkN/ACVUOJC3RSXg==",
+      "license": "ISC",
+      "dependencies": {
+        "hls.js": "^1.0.10",
+        "throttle-debounce": "^3.0.1",
+        "vue": "^3.2.2"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.2.tgz",
@@ -3987,6 +4019,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
+      "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 33422bc..0884a16 100644
--- a/package.json
+++ b/package.json
@@ -13,11 +13,13 @@
     "axios": "^1.7.9",
     "echarts": "^5.5.1",
     "element-plus": "^2.9.0",
+    "flv.js": "^1.6.2",
     "pinia": "^2.2.6",
     "vue": "^3.5.13",
     "vue-countup-v3": "^1.4.2",
     "vue-echarts": "^7.0.3",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.4.5",
+    "vue3-video-play": "^1.3.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
diff --git a/src/assets/images/map-img-1.jpg b/src/assets/images/map-img-1.jpg
new file mode 100644
index 0000000..1643619
Binary files /dev/null and b/src/assets/images/map-img-1.jpg differ
diff --git a/src/assets/images/one-video-bg.png b/src/assets/images/one-video-bg.png
new file mode 100644
index 0000000..1e90947
Binary files /dev/null and b/src/assets/images/one-video-bg.png differ
diff --git a/src/assets/images/v-item-bg-1.png b/src/assets/images/v-item-bg-1.png
new file mode 100644
index 0000000..e787a6e
Binary files /dev/null and b/src/assets/images/v-item-bg-1.png differ
diff --git a/src/components/Map/marker.vue b/src/components/Map/marker.vue
new file mode 100644
index 0000000..7478ff0
--- /dev/null
+++ b/src/components/Map/marker.vue
@@ -0,0 +1,69 @@
+<template>
+  <div id="container" class="map" />
+</template>
+
+<script setup>
+  
+
+  onMounted(() => {
+    // fetchData()
+    var map = new BMapGL.Map('container')
+    map.centerAndZoom(new BMapGL.Point(109.643452, 31.028006), 16)
+    // map.enableScrollWheelZoom(true)
+    // map.setMapType(BMAP_SATELLITE_MAP)
+
+    // 绘制自定义marker图标
+    var myIcon = new BMapGL.Icon("t.png", new BMapGL.Size(42, 59));
+	
+	const markersData = [
+	    { lng: 109.643452, lat: 31.028006 },
+	
+	];
+	// 循环创建标记并添加到地图上
+	markersData.forEach((item) => {
+	    const point = new BMapGL.Point(item.lng, item.lat);
+	    const marker = new BMapGL.Marker(point,{
+			icon: myIcon
+		});
+		// 创建图文信息窗口
+		var sContent = `<div style="background:red;">111111</div>`;
+		var infoWindow = new BMapGL.InfoWindow(sContent);
+		// marker添加点击事件
+		marker.addEventListener('click', function () {
+		    this.openInfoWindow(infoWindow);
+		    // 图片加载完毕重绘infoWindow
+		    document.getElementById('imgDemo').onload = function () {
+		        infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
+		    };
+		});
+	    map.addOverlay(marker);
+	});
+	
+  
+  })
+</script>
+<style scoped lang="scss">
+	:deep(.BMap_bubble_pop){
+		    
+		    
+		
+	}
+  :deep(.BMap_cpyCtrl) {
+    display: none;
+  }
+  :deep(.anchorBL) {
+    display: none;
+  }
+  // ::v-deep {
+  //   .BMap_cpyCtrl {
+  //     display: none;
+  //   }
+  //   .anchorBL {
+  //     display: none;
+  //   }
+  // }
+  .map {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/components/Map/t-ico-1.png b/src/components/Map/t-ico-1.png
new file mode 100644
index 0000000..f018953
Binary files /dev/null and b/src/components/Map/t-ico-1.png differ
diff --git a/src/main.js b/src/main.js
index 0be59f0..a7209f1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,9 +4,11 @@ import App from './App.vue'
 import router from './router'
 import '@/styles/reset.css'
 import '@/styles/common.scss'
-
+import vue3videoPlay from 'vue3-video-play' // 引入组件
+import 'vue3-video-play/dist/style.css' // 引入css
 const app = createApp(App)
 
+app.use(vue3videoPlay)
 app.use(createPinia())
 app.use(router)
 
diff --git a/src/router/index.js b/src/router/index.js
index 1e2e898..d358c44 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,11 +8,16 @@ const router = createRouter({
       name: 'home',
       component: () => import('@/views/home/index.vue')
     },
-    {
-      path: '/monitor',
-      name: 'monitor',
-      component: () => import('@/views/monitor/index.vue')
-    },
+	{
+	  path: '/monitor',
+	  name: 'monitor',
+	  component: () => import('../views/monitor/index.vue')
+	},
+	{
+	  path: '/testing',
+	  name: 'testing',
+	  component: () => import('../views/testing/index.vue')
+	},
     {
       path: '/scenic',
       name: 'scenic',
diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue
index 4f733ba..af706af 100644
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -288,3 +288,4 @@
     }
   }
 </style>
+
diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue
index e206ce1..6af9fd2 100644
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -61,7 +61,6 @@
       <div class="box">
         <div class="title-3"><span>异常告警</span></div>
         <div class="pt-20">
-          <!-- <Line :width="370" :height="180" id="line" /> -->
 		  <v-chart class="line-chart" :option="optionLine" autoresize />
         </div>
       </div>
@@ -151,14 +150,14 @@
 </template>
 
 <script setup>
-  import * as echarts from 'echarts/core';
+  import * as echarts from 'echarts'
   import countup from 'vue-countup-v3'
-  import gauge from './gauge.vue'
   import { use } from 'echarts/core';
   import { CanvasRenderer } from 'echarts/renderers';
   import { GaugeChart } from 'echarts/charts';
   import { PieChart } from 'echarts/charts';
   import { LineChart } from 'echarts/charts';
+  import { fitChartSize } from '@/utils/dataUtil'
   import {
     TitleComponent,
     TooltipComponent,
@@ -186,20 +185,23 @@
 	  legend: {
 		type: 'scroll',
 		orient: 'vertical',
-		right: 0,
+		right: -10,
 		top: 0,
 		bottom: 20,
 		itemWidth:5,
 		itemHeight:5,
+		textStyle:{
+			fontSize:fitChartSize(12),
+		}
 	  },
   	  series: [
   	    {
   	      name: 'Access From',
   		  type: 'pie',
-  		  left:-70,
-  		  top:-30,
-		  // width:200,
-		  // height:200,
+  		  left:-25,
+  		  top:-20,
+		  width:fitChartSize(230),
+		  height:fitChartSize(230),
   		  radius: ['40%', '50%'],
   		  avoidLabelOverlap: false,
   		  padAngle: 5,
@@ -213,7 +215,7 @@
 		  emphasis: {
 			label: {
 				show: true,
-				fontSize: 10,
+				fontSize: fitChartSize(10),
 				fontWeight: 'bold',
 				color:'#fff'
 			  }
@@ -242,38 +244,38 @@
 		left:'4%',
 		containLabel: true,
 	  },
-	    xAxis: {
-		  nameLocation: 'middle',
-	      type: 'category',
-		  boundaryGap: false,
-		  axisLabel: {
-			  fontSize:10,
-			  interval: 0, // 显示所有标签
-			  rotate: 0, // 旋转标签45度
-		  },
-	      data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
-		  axisTisk:{
-			show: true,
-			// 设置刻度长度
-			length: 1,
-			lineStyle: {
-				type: 'dashed' ,// 设置为虚线
-				width:0,
-			} 
-		  },
-		  axisLine: {
-			lineStyle: {
-				color: '#0096FF' // 设置横线颜色
-			}
-		  }
-	    },
+	xAxis: {
+	  nameLocation: 'middle',
+	  type: 'category',
+	  boundaryGap: false,
+	  axisLabel: {
+		  fontSize:fitChartSize(10),
+		  interval: 0, // 显示所有标签
+		  rotate: 0, // 旋转标签45度
+	  },
+	  data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
+	  axisTisk:{
+		show: true,
+		// 设置刻度长度
+		length: 1,
+		lineStyle: {
+			type: 'dashed' ,// 设置为虚线
+			width:0,
+		} 
+	  },
+	  axisLine: {
+		lineStyle: {
+			color: '#0096FF' // 设置横线颜色
+		}
+	  }
+	},
 	    yAxis: {
 	      type: 'value',
 		  min:0,
 		  max:45,
 		  interval:15,
 		   axisLabel: {
-			  fontSize: 12 ,// 设置Y轴刻度字体大小
+			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
 			  color: 'rgba(255,255,255,0.9)',
 		   },
 		   splitLine:{
@@ -448,6 +450,7 @@
 		}
 		.item1,.item2{
 			background-image: url('/src/assets/images/four-t-1.png');
+			background-size: 100% 100%;
 		}
 		.item3{
 			background-image: url('/src/assets/images/four-t-2.png');
@@ -528,15 +531,15 @@
     }
     .core {
       background-image: url('@/assets/images/m-t-1.png');
-	  background-size: contain;
+	  background-size: 100% 100%;
     }
     .queue {
       background-image: url('@/assets/images/m-t-2.png');
-	  background-size: contain;
+	  background-size: 100% 100%;
     }
     .congestion {
       background-image: url('@/assets/images/m-t-2.png');
-	  background-size: contain;
+	  background-size: 100% 100%;
     }
     .box {
       width: vw(384);
diff --git a/src/views/monitor/components/box-3.vue b/src/views/monitor/components/box-3.vue
index a323c5b..a1fc40c 100644
--- a/src/views/monitor/components/box-3.vue
+++ b/src/views/monitor/components/box-3.vue
@@ -21,18 +21,74 @@
 		</div>
 		<!-- 视频 -->
 		<div class="video-box">
-			<div class="v-item" v-for="item in 15"></div>
+			<div v-if="videoLog == 1" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
+				  <block  @click="handleItemVideo">
+					  <vue3VideoPlay  v-bind="options"/>
+				  </block>
+					
+			</div>
+			
+			<div class="video-live flex" v-if="videoLog==2">
+				<div class="video-lt">
+					<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">
+							<vue3VideoPlay  v-bind="options"/>
+						</div>
+						
+					</div>
+					
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
+	import { fitChartSize } from '@/utils/dataUtil'
+	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>
 	.box-3-content{
-		width:vw(2353);
-		height:vh(964);
+		width:vw(2410);
+		height:vh(965);
 		// background-image: url('/src/assets/images/monotir-bg-1.png');
 		background-size: 100% 100%;
 		margin-top: vh(120);
@@ -44,8 +100,68 @@
 			flex-wrap: wrap;
 			padding-top:0;
 			margin-left:vw(20);
+			.video-live{
+				justify-content: space-between;
+				.video-lt{
+					width:vw(1700);
+					height:vh(950);
+					background-image: url('/src/assets/images/one-video-bg.png');
+					background-size: 100% 100%;
+				}
+				.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);
+					}
+					.v-error-bg{
+						background-image: url('/src/assets/images/v-item-bg-1.png');
+						background-size: 100% 100%;
+					}
+				}
+			}
 			.v-item{
-				width:vw(400);
+				width:vw(420);
 				height:vh(300);
 				background-image: url('/src/assets/images/v-item-bg.png');
 				background-size: 100% 100%;
@@ -53,9 +169,13 @@
 				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%;
+			}
 		}
 		.left-nav{
-			margin-left:vw(20);
+			margin-left:vw(10);
 			// margin-top:vh(35);
 			width:vw(250);
 			.bom-box{
diff --git a/src/views/monitor/components/box-4.vue b/src/views/monitor/components/box-4.vue
index 48579c4..d429aeb 100644
--- a/src/views/monitor/components/box-4.vue
+++ b/src/views/monitor/components/box-4.vue
@@ -146,11 +146,14 @@
 				text-transform: none;
 				flex-wrap: wrap;
 				.icon{
-					
 					display: block;
 					margin:vh(20) auto;
 					width:vw(86);
 					height:vh(104);
+					img{
+						width:vw(86);
+						height:vh(104);
+					}
 				}
 			}
 			.title{
diff --git a/src/views/monitor/components/box-5.vue b/src/views/monitor/components/box-5.vue
index a782f4c..f222db3 100644
--- a/src/views/monitor/components/box-5.vue
+++ b/src/views/monitor/components/box-5.vue
@@ -65,13 +65,14 @@
 <script setup>
   import * as echarts from 'echarts/core';
   import countup from 'vue-countup-v3'
-  import gauge from './gauge.vue'
+
   import { use } from 'echarts/core';
   import { CanvasRenderer } from 'echarts/renderers';
   import { GaugeChart } from 'echarts/charts';
   import { PieChart } from 'echarts/charts';
   import { LineChart } from 'echarts/charts';
   import { BarChart } from 'echarts/charts';
+  import { fitChartSize } from '@/utils/dataUtil'
   import {
     TitleComponent,
     TooltipComponent,
@@ -127,7 +128,7 @@
 		  emphasis: {
 			label: {
 				show: true,
-				fontSize: 10,
+				fontSize: fitChartSize(10),
 				fontWeight: 'bold',
 				color:'#fff'
 			  }
@@ -187,7 +188,7 @@
 		  max:45,
 		  interval:15,
 		   axisLabel: {
-			  fontSize: 12 ,// 设置Y轴刻度字体大小
+			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
 			  color: 'rgba(255,255,255,0.9)',
 		   },
 		   splitLine:{
@@ -266,7 +267,7 @@
 	        type: 'category',
 	        boundaryGap: true,
 	        axisLabel: {
-			  fontSize:10,
+			  fontSize:fitChartSize(10),
 			  interval: 0, // 显示所有标签
 			  rotate: 0, // 旋转标签45度
 	        },
@@ -295,7 +296,7 @@
 	        interval:15,
 			
 	         axisLabel: {
-			  fontSize: 12 ,// 设置Y轴刻度字体大小
+			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
 			  color: 'rgba(255,255,255,0.9)',
 			  offset:10,
 	         },
diff --git a/src/views/monitor/components/gauge.vue b/src/views/monitor/components/gauge.vue
deleted file mode 100644
index 0aa0d48..0000000
--- a/src/views/monitor/components/gauge.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="gauge" :id="id" />
-</template>
-
-<script setup>
-  import * as echarts from 'echarts'
-  import { fitChartSize } from '@/utils/dataUtil'
-
-  const props = defineProps({
-    id: {
-      type: String,
-      default: () => ''
-    }
-  })
-
-  let gaugeChart = null
-
-  onMounted(() => {
-    init()
-  })
-  const init = () => {
-    // 基于准备好的dom，初始化echarts实例
-    gaugeChart = echarts.init(document.getElementById(props.id))
-    gaugeChart.setOption({
-      series: [
-        {
-          type: 'gauge',
-          startAngle: 180,
-          endAngle: 0,
-          min: 0,
-          max: 100,
-          radius: '100%',
-          splitNumber: 10,
-          center: ['50%', '60%'],
-          itemStyle: {
-            color: '#58D9F9',
-            shadowColor: 'rgba(0,138,255,0.45)',
-            shadowBlur: 10,
-            shadowOffsetX: 2,
-            shadowOffsetY: 2
-          },
-          progress: {
-            show: true,
-            roundCap: true,
-            width: fitChartSize(6)
-          },
-          pointer: {
-            show: false
-          },
-          axisLine: {
-            roundCap: true,
-            lineStyle: {
-              width: fitChartSize(6)
-            }
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          },
-          detail: {
-            width: '100%',
-            lineHeight: 20,
-            height: 20,
-            offsetCenter: [0, '20%'],
-            valueAnimation: true,
-            formatter: function (value) {
-              return '{value|' + value.toFixed(0) + '}{unit|%}'
-            },
-            rich: {
-              value: {
-                fontSize: fitChartSize(12),
-                fontWeight: 'bolder',
-                color: '#02F9FA'
-              },
-              unit: {
-                fontSize: fitChartSize(12),
-                color: '#02F9FA'
-              }
-            }
-          },
-          data: [
-            {
-              value: 80
-            }
-          ]
-        }
-      ]
-    })
-    window.addEventListener('resize', resize)
-  }
-  const resize = () => {
-    if (gaugeChart) {
-      gaugeChart.dispose()
-      init()
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .gauge {
-    width: vw(70);
-    height: vh(50);
-  }
-</style>
diff --git a/src/views/monitor/index.vue b/src/views/monitor/index.vue
index bece486..5ed24be 100644
--- a/src/views/monitor/index.vue
+++ b/src/views/monitor/index.vue
@@ -1,35 +1,19 @@
 <template>
   <main class="wrapper">
-    <box1 />
-	<box5/>
-	<!-- <box2 /> -->
+    <CoreVideo />
+	<box2 />
 	<box3 />
-    <div class="header">
-      <ul class="nav-left">
-        <li class="nav-left-item">奉节县</li>
-        <li class="nav-left-item">三峡之巅</li>
-        <li class="nav-left-item">白帝城</li>
-		<li class="nav-left-item">龙河桥</li>
-      </ul>
-      <div class="title">监控大屏</div>
-      <ul class="nav-right">
-        <li class="nav-right-item">停车</li>
-        <li class="nav-right-item">工单</li>
-        <li class="nav-right-item">舆情</li>
-        <li class="nav-right-item">酒店</li>
-      </ul>
-    </div>
-    <box4 />
+	<Header title="监控大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
+    <Correspondence />
   </main>
 </template>
 
 <script setup>
-  import box1 from './components/box-1.vue'
-  import box4 from './components/box-4.vue'
   import box3 from './components/box-3.vue'
   import box2 from './components/box-2.vue'
   import box5 from './components/box-5.vue'
-
+  const navLeft = [{ name: '奉节县' }, { name: '三峡之巅', path: '/scenic' }, { name: '白帝城' },{ name: '龙河桥' }]
+  const navRight = [{ name: '路段' }, { name: '路段' }, { name: '路段' }, { name: '路段' }]
   onMounted(() => {})
 </script>
 
diff --git a/src/views/testing/components/box-1.vue b/src/views/testing/components/box-1.vue
new file mode 100644
index 0000000..fcc2564
--- /dev/null
+++ b/src/views/testing/components/box-1.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="box-1">
+    <div class="title">核心景区视频</div>
+    <ul class="list">
+      <li
+        class="item"
+        :style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
+        v-for="(item, index) in 10"
+        :key="index"
+      >
+        <p class="item-title">三峡之巅-最新异常名称</p>
+        <!-- <img class="item-img" src="@/assets/images/img-1.png" alt="" /> -->
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+  import item1 from '@/assets/images/item-1.png'
+  import item2 from '@/assets/images/item-2.png'
+
+  console.log(item1, 'item1')
+</script>
+
+<style lang="scss" scoped>
+  .box-1 {
+    margin: vh(10);
+    width: vw(326);
+    border-radius: vw(2);
+    background-image: url('@/assets/images/bg-1.png');
+    background-size: 100% 100%;
+
+    .title {
+      width: vw(260);
+      height: vh(26);
+      text-align: center;
+      line-height: vh(26);
+      margin-left: vw(32.5);
+      font-size: vw(16);
+      font-weight: 800;
+      color: #fff;
+      background-image: url('@/assets/images/title-1.png');
+      background-size: 100% 100%;
+    }
+
+    .list {
+      overflow-y: auto;
+      overflow-x: hidden;
+      height: vh(1026);
+      padding: vw(8);
+      /* 滚动条整体样式 */
+      &::-webkit-scrollbar {
+        width: vw(0); /* 滚动条的宽度 */
+      }
+
+      /* 滚动条轨道 */
+      &::-webkit-scrollbar-track {
+        background: #f1f1f1; /* 轨道的背景色 */
+      }
+
+      /* 滚动条滑块 */
+      &::-webkit-scrollbar-thumb {
+        background: #888; /* 滑块的背景色 */
+        border-radius: 5px; /* 滑块的圆角 */
+      }
+
+      /* 当鼠标悬停在滚动条上时滑块的样式 */
+      &::-webkit-scrollbar-thumb:hover {
+        background: #555; /* 滑块的背景色 */
+      }
+    }
+
+    .item {
+      margin-bottom: vh(13);
+      background-size: 100% 100%;
+      &-title {
+        margin-bottom: vh(6);
+        margin-left: vw(45);
+        color: #fff;
+        font-size: vw(16);
+        height: vh(24);
+        line-height: vh(24);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &-img {
+        width: 100%;
+        height: vh(164);
+        display: block;
+      }
+    }
+  }
+</style>
diff --git a/src/views/testing/components/box-2.vue b/src/views/testing/components/box-2.vue
new file mode 100644
index 0000000..e578304
--- /dev/null
+++ b/src/views/testing/components/box-2.vue
@@ -0,0 +1,629 @@
+<template>
+  <div class="box-2">
+    <div class="header">
+      <div class="title"> 交通信息 </div>
+    </div>
+    <div class="flex pt-20 p-box">
+      <div class="item core">
+        <span class="title-1">全县景区数</span>
+        <div class="flex align-end color1"> <countup endVal="895" /><span class="unit"></span></div>
+      </div>
+      <div class="item queue">
+        <span class="title-1">核心景区数</span>
+        <div class="flex align-end color2"> <countup endVal="895" /><span class="unit"></span></div>
+      </div>
+      <div class="item congestion">
+        <span class="title-1">低感景区总数</span>
+        <div class="flex align-end color3"> <countup endVal="895" /><span class="unit"></span></div>
+      </div>
+    </div>
+	<div class="header">
+	  <div class="title"> 景区信息 </div>
+	</div>
+	<div class="flex-four">
+		<div class="item item1">
+			<div class="box1">
+				核心路段监控点位
+				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
+			</div>
+		
+		</div>
+		<div class="item item2">
+			<div class="box1">
+				核心景区分析点位
+				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
+			</div>
+			
+		</div>
+		<div class="item item3">
+			<div class="box1">
+				异常点位
+				<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
+			</div>
+		
+		</div>
+		<div class="item item4">
+			<div class="box1">
+				异常告警
+				<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
+			</div>
+		
+		</div>
+		<div class="item item5">
+			<div class="box1">
+				已处理
+				<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
+			</div>
+		
+		</div>
+	</div>
+    <div class="flex pt-20 p-box">
+      <div class="box">
+        <div class="title-3"><span>异常告警</span></div>
+        <div class="pt-20">
+          <!-- <Line :width="370" :height="180" id="line" /> -->
+		  <v-chart class="line-chart" :option="optionLine" autoresize />
+        </div>
+      </div>
+      <div class="box">
+        <div class="title-3"><span>异常告警占比</span></div>
+        <div class="pt-20 h-flex">
+			<div class="left">
+				<v-chart class="chart" :option="option1" autoresize />
+			</div>
+			<div class="right">
+				<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
+				<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
+				<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
+				<div class="li"><span class="rk-img" >1</span>核心监控1</div>
+				<div class="li"><span class="rk-img" >1</span>核心监控1</div>
+				<div class="li"><span class="rk-img" >1</span>核心监控</div>
+			</div>
+        </div>
+      </div>
+    </div>
+	<div class="header">
+	  <div class="title"> 景区信息 </div>
+	</div>
+	<div class="flex-four">
+		<div class="item item1">
+			<div class="box1">
+				核心路段监控点位
+				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
+			</div>
+		
+		</div>
+		<div class="item item2">
+			<div class="box1">
+				核心景区分析点位
+				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
+			</div>
+			
+		</div>
+		<div class="item item3">
+			<div class="box1">
+				异常点位
+				<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
+			</div>
+		
+		</div>
+		<div class="item item4">
+			<div class="box1">
+				异常告警
+				<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
+			</div>
+		
+		</div>
+		<div class="item item5">
+			<div class="box1">
+				已处理
+				<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
+			</div>
+		
+		</div>
+	</div>
+	<div class="flex pt-20 p-box">
+	  <div class="box">
+	    <div class="title-3"><span>异常告警</span></div>
+	    <div class="pt-20">
+	      <!-- <Line :width="370" :height="180" id="line" /> -->
+		  <v-chart class="line-chart"  :option="optionLine" autoresize />
+	    </div>
+	  </div>
+	  <div class="box">
+	    <div class="title-3"><span>异常告警占比</span></div>
+	    <div class="pt-20 h-flex">
+			<div class="left">
+				<v-chart class="chart" :option="option1" autoresize />
+			</div>
+			<div class="right">
+				<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
+				<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
+				<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
+				<div class="li"><span class="rk-img" >1</span>核心监控1</div>
+				<div class="li"><span class="rk-img" >1</span>核心监控1</div>
+				<div class="li"><span class="rk-img" >1</span>核心监控</div>
+			</div>
+	    </div>
+	  </div>
+	</div>
+  </div>
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import countup from 'vue-countup-v3'
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { GaugeChart } from 'echarts/charts';
+  import { PieChart } from 'echarts/charts';
+  import { LineChart } from 'echarts/charts';
+  import { fitChartSize } from '@/utils/dataUtil'
+  import {
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+  } from 'echarts/components';
+  import VChart, { THEME_KEY } from 'vue-echarts';
+  import { ref, provide } from 'vue';
+  
+  use([
+	LineChart,
+    GaugeChart,
+    CanvasRenderer,
+    PieChart,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+  ]);
+  
+  provide(THEME_KEY, 'dark');
+  const option1 = ref({
+  	backgroundColor:'transparent',
+	  tooltip: {
+	    trigger: 'item'
+	  },
+	  legend: {
+		type: 'scroll',
+		orient: 'vertical',
+		right: -10,
+		top: 0,
+		bottom: 20,
+		itemWidth:5,
+		itemHeight:5,
+		textStyle:{
+			fontSize:fitChartSize(12),
+		}
+	  },
+  	  series: [
+  	    {
+  	      name: 'Access From',
+  		  type: 'pie',
+  		  left:-25,
+  		  top:-20,
+		  width:fitChartSize(230),
+		  height:fitChartSize(230),
+  		  radius: ['40%', '50%'],
+  		  avoidLabelOverlap: false,
+  		  padAngle: 5,
+  		  itemStyle: {
+  			borderRadius: 2
+  		  },
+		  label: {
+			  show: false,
+			  position: 'center'
+		  },
+		  emphasis: {
+			label: {
+				show: true,
+				fontSize: fitChartSize(10),
+				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: '其他' },
+  	      ]
+  	     
+  	    },
+  	  ],
+  });
+  const optionLine = ref({
+	  backgroundColor:'transparent',
+	  grid:{
+		top:'50',
+		bottom:'20',
+		left:'4%',
+		containLabel: true,
+	  },
+	    xAxis: {
+		  nameLocation: 'middle',
+	      type: 'category',
+		  boundaryGap: false,
+		  axisLabel: {
+			  fontSize:fitChartSize(10),
+			  interval: 0, // 显示所有标签
+			  rotate: 0, // 旋转标签45度
+		  },
+	      data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
+		  axisTisk:{
+			show: true,
+			// 设置刻度长度
+			length: 1,
+			lineStyle: {
+				type: 'dashed' ,// 设置为虚线
+				width:0,
+			} 
+		  },
+		  axisLine: {
+			lineStyle: {
+				color: '#0096FF' // 设置横线颜色
+			}
+		  }
+	    },
+	    yAxis: {
+	      type: 'value',
+		  min:0,
+		  max:45,
+		  interval:15,
+		   axisLabel: {
+			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
+			  color: 'rgba(255,255,255,0.9)',
+		   },
+		   splitLine:{
+			   show:true,
+			   lineStyle:{
+				   type:'dashed',
+				   color:'#00D0FF'
+			   }
+		   }
+	    },
+		
+	    series: [
+	      {
+	        data: [0, 23, 30, 24, 40, 30, 45,26],
+	        type: 'line',
+	        smooth: true,
+			label:{
+				show:false,//隐藏坐标点
+			},
+			itemStyle:{
+				color:'transparent'
+			},
+			markLine:{
+				symbol:['none','none'],
+				label:{show:false}
+			},
+			
+			lineStyle: {
+				color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+				{
+				  offset: 0,
+				  color: '#7DE7FF'
+				},
+				{
+				  offset: 0.5,
+				  color: '#02F9FA'
+				},
+				{
+				  offset: 1,
+				  color: '#009DFF'
+				},
+			 ]),
+			 width:3,
+			}
+	      }
+	    ]
+	
+  })
+  onMounted(() => {})
+</script>
+
+<style scoped lang="scss">
+	.line-chart{
+		width:100%;
+		height:vh(200);
+	}
+  .box-2 {
+    margin-top: vh(120);
+    width: vw(800);
+    height: vh(950);
+    padding: vw(8);
+    box-sizing: border-box;
+    // background-image: url('@/assets/images/bg-2.png');
+    background-size: 100% 100%;
+	.p-box{
+		padding-top:vh(10);
+		justify-content: space-between;
+	}
+	.h-flex{
+		display: flex;
+		justify-content: space-between;
+		.left{
+			flex:1;
+			width:vw(260);
+		}
+		.right{
+			margin-left:vw(20);
+			width:vw(120);
+			.li{
+				position: relative;
+				font-weight: 400;
+				font-size: vw(14);
+				color: #FFFFFF;
+				line-height: 16px;
+				text-align: left;
+				font-style: normal;
+				text-transform: none;
+				position: relative;
+				padding-left:vw(30);
+				padding:0 vw(10);
+				padding-left:vw(15);
+				background: linear-gradient( 90deg, #1B5EC7 0%, rgba(27,94,199,0) 100%);
+				border-radius: 0px 0px 0px 0px;
+				height:vh(24);
+				line-height:vh(24);
+				margin-bottom:vh(8);
+				// opacity: 0.4;
+				.rk-img{
+					position: absolute;
+					width:vw(24);
+					height:vh(24);
+					line-height:vh(24);
+					left:vw(-12);
+					top:50%;
+					display: block;
+					background-image: url('/src/assets/images/rk-4.png');
+					background-size: 100% 100%;
+					transform: translateY(-50%);
+					text-align: center;
+				}
+			}
+			.li-1{
+				background: linear-gradient( 90deg, #FFC10B 0%, rgba(255,209,44,0) 100%);
+				.rk-img{
+					background-image: url('/src/assets/images/rk-1.png');
+				}
+			}
+			.li-2{
+				background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
+				.rk-img{
+					background-image: url('/src/assets/images/rk-2.png');
+				}
+			}
+			.li-3{
+				background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
+				.rk-img{
+					background-image: url('/src/assets/images/rk-3.png');
+				}
+			}
+		}
+	}
+	.flex-four{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		.item{
+			
+			margin:vw(10);
+			width:vw(142);
+			height:vh(106);
+			font-weight: 400;
+			font-size: vw(14);
+			color: rgba(255,255,255,0.9);
+			line-height: 16px;
+			text-align: center;
+			font-style: normal;
+			text-transform: none;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding:0;
+			margin-top:0;
+			.box1{
+				width:vw(142);
+			}
+			.item-num{
+				margin-top:vh(10);
+			}
+			.color1{
+				color: #02F9FA;
+			}
+			.color2{
+				color: #F15A25;
+			}
+			.color3{
+				color: #E21B1B;
+			}
+			.color4{
+				color: #12B5FD;
+			}
+			
+		}
+		.item1,.item2{
+			background-image: url('/src/assets/images/four-t-1.png');
+			background-size: 100% 100%;
+		}
+		.item3{
+			background-image: url('/src/assets/images/four-t-2.png');
+		}
+		.item4{
+			background-image: url('/src/assets/images/four-t-3.png');
+		}
+		.item5{
+			background-image: url('/src/assets/images/four-t-4.png');
+		}
+	}
+    .header {
+      position: relative;
+      .title {
+        margin: vh(5) auto;
+        width: vw(468);
+        height: vh(32);
+        font-weight: 800;
+        font-size: vw(16);
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-image: url('@/assets/images/title-4.png');
+        background-size: 100% 100%;
+      }
+      .more {
+        position: absolute;
+        top: vh(0);
+        right: vw(20);
+        cursor: pointer;
+        width: vw(60);
+        height: vh(24);
+        background-image: url('@/assets/images/more.png');
+        background-size: 100% 100%;
+      }
+    }
+
+    .item {
+      position: relative;
+      flex: 1;
+      padding-left: vw(100);
+	  width:vw(230);
+      height: vh(70);
+      display: flex;
+      align-items: center;
+      background-size: 100% 100%;
+	  .align-end{
+		  margin-top:vh(10);
+	  }
+	  .color1{
+		  color: #12B5FD;
+	  }
+	  .color2{
+		  color: #02F9FA;
+	  }
+	  .color3{
+		  color: #F15A25;
+	  }
+	
+    }
+    .title-1 {
+      position: absolute;
+      top: vh(10);
+      font-weight: 400;
+      font-size: vw(14);
+      color: rgba(255, 255, 255, 0.7);
+    }
+    .countup-wrap {
+      
+      font-size: vw(28);
+      font-weight: bold;
+    }
+    .unit {
+      color: #02f9fa;
+      font-size: vw(14);
+      margin-bottom: vh(4);
+    }
+    .core {
+      background-image: url('@/assets/images/m-t-1.png');
+	  background-size: 100% 100%;
+    }
+    .queue {
+      background-image: url('@/assets/images/m-t-2.png');
+	  background-size: 100% 100%;
+    }
+    .congestion {
+      background-image: url('@/assets/images/m-t-2.png');
+	  background-size: 100% 100%;
+    }
+    .box {
+      width: vw(384);
+      // height: vh(360);
+      background-image: url('@/assets/images/bg-3.png');
+      background-size: 100% 100%;
+      &:nth-child(1) {
+        margin-right: vw(10);
+      }
+      .title-2 {
+        width: vw(253);
+        height: vh(28);
+        display: flex;
+        align-items: center;
+        background-image: url('@/assets/images/title-5.png');
+        background-size: 100% 100%;
+        & > span {
+          padding-left: vw(22);
+          font-weight: bold;
+          font-size: vw(15);
+          background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+          color: transparent; /* 兼容其他浏览器 */
+        }
+      }
+      .statistic {
+        display: flex;
+        margin-top: vh(12);
+        width: 100%;
+        height: vh(88);
+        background-image: url('@/assets/images/bg-4.png');
+        background-size: 100% 100%;
+        &-item {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+        &-title {
+          font-size: vw(14);
+          color: rgba(255, 255, 255, 0.9);
+        }
+        &-value {
+          margin-top: vh(10);
+          font-weight: bold;
+          font-size: vw(24);
+          color: #02f9fa;
+        }
+        .count {
+          font-weight: bold;
+          font-size: vw(28);
+          color: #ff4400 !important;
+        }
+        .prefix,
+        .suffix {
+          color: #ff4400;
+          font-size: vw(12);
+        }
+      }
+      .title-3 {
+        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; /* 兼容其他浏览器 */
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/testing/components/box-3.vue b/src/views/testing/components/box-3.vue
new file mode 100644
index 0000000..3d8e910
--- /dev/null
+++ b/src/views/testing/components/box-3.vue
@@ -0,0 +1,158 @@
+<template>
+	<!-- 视频 -->
+	<div class="box-3-content">
+		
+		<div class="left-nav">
+			<div class="top-box">
+				<!-- <div class="title">监控切换</div> -->
+				<div class="ul">
+					<div class="li active">异常告警</div>
+					<div class="li">景区入口</div>
+					<div class="li">核心路段</div>
+					<div class="li">公共交通</div>	
+					<div class="li">广场</div>	
+				</div>
+			</div>
+			<div class="bom-box">
+				<div class="title">
+					<span>检索</span>
+				</div>
+			</div>
+		</div>
+		<!-- 视频 -->
+		<div class="video-box">
+			<div class="v-item" v-for="item in 15">
+				  <!-- 视频 -->
+					<vue3VideoPlay 
+					v-bind="options"/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { fitChartSize } from '@/utils/dataUtil'
+	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",
+		], //显示所有按钮,
+	});
+	
+	//  webscoket连接
+	
+</script>
+<style lang="scss" scoped>
+	.box-3-content{
+		width:vw(2353);
+		height:vh(964);
+		// background-image: url('/src/assets/images/monotir-bg-1.png');
+		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);
+			.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);
+			}
+		}
+		.left-nav{
+			margin-left:vw(20);
+			// margin-top:vh(35);
+			width:vw(250);
+			.bom-box{
+				margin-top:vh(20);
+				.title{
+					background-image: url('/src/assets/images/nav-l-t-bg.png');
+					background-size: 100% 100%;
+					
+					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;
+					}
+					
+				}
+			}
+			.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(250);
+						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);
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/testing/components/box-4.vue b/src/views/testing/components/box-4.vue
new file mode 100644
index 0000000..d429aeb
--- /dev/null
+++ b/src/views/testing/components/box-4.vue
@@ -0,0 +1,177 @@
+<template>
+	<div class="box-4-content">
+		<div class="top-box">
+			<div class="title">融合通信</div>
+			<div class="icon-box flex">
+				<div class="icon">
+					<img src="/src/assets/images/r-icon-1.png" alt="" />
+					白帝城
+				</div>
+				<div class="icon"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
+				<div class="icon"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
+				<div class="icon"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
+				<div class="icon"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
+				<div class="icon"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
+			</div>
+		</div>
+		<div class="bom-box">
+			<div class="title">
+				<span>最近联系</span>
+			</div>
+			<table class="table">
+				<tr class="tr-th">
+					<th>人员姓名</th>
+					<th>部门</th>
+					<th>职位</th>
+					<th>时间</th>
+				</tr>
+				 <tr class="tr-td">
+				    <td>January</td>
+				    <td>$100</td>
+					<td>January</td>
+					<td>$100</td>
+				  </tr>
+				  <tr class="tr-td">
+				    <td>February</td>
+				    <td>$80</td>
+					<td>February</td>
+					<td>$80</td>
+				  </tr>
+				  <tr class="tr-td">
+				    <td>February</td>
+				    <td>$80</td>
+					<td>February</td>
+					<td>$80</td>
+				  </tr>
+				  <tr class="tr-td">
+				    <td>February</td>
+				    <td>$80</td>
+					<td>February</td>
+					<td>$80</td>
+				  </tr>
+				  
+			</table>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	
+</script>
+
+<style lang="scss" scoped>
+	.box-4-content{
+		width:vw(317);
+		height:vh(1062);
+		background-image: url('/src/assets/images/rt-bg.png');
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		margin-top:vh(10);
+		margin-left:vw(10);
+		position: relative;
+		z-index: 999;
+		.bom-box{
+			.table{
+				width:100%;
+				margin-top:vh(5);
+				.tr-th{
+					background: linear-gradient( 180deg, rgba(0,99,255,0) 0%, #0063FF 100%);
+					border-radius: 0px 0px 0px 0px;
+					// border: 1px solid;
+					border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
+					font-weight: 400;
+					font-size: vw(12);
+					color: #0096FF;
+					line-height: vh(14);
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+					
+					th{
+						padding:vw(5);
+					}
+					
+				}
+				.tr-td{
+					font-weight: 400;
+					font-size: vw(14);
+					color: #F1F7FF;
+					line-height: vh(16);
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+					
+					td{
+						padding:vh(5) vw(10)
+					}
+				}
+				.tr-td:nth-child(odd){
+					background: linear-gradient( 90deg, rgba(0,150,255,0) 0%, rgba(0,150,255,0.22) 100%);
+				}
+			}
+			.title{
+				background-image: url('/src/assets/images/nav-l-t-bg.png');
+				background-size: 100% 100%;
+				
+				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;
+				}
+				
+			}
+		}
+		.top-box{
+			width:100%;
+			height:vh(500);
+			.icon-box{
+				justify-content: center;
+				font-family: Inter, Inter;
+				font-weight: 400;
+				font-size: vw(14);
+				color: #FFFFFF;
+				line-height: vh(16);
+				text-align: center;
+				font-style: normal;
+				text-transform: none;
+				flex-wrap: wrap;
+				.icon{
+					display: block;
+					margin:vh(20) auto;
+					width:vw(86);
+					height:vh(104);
+					img{
+						width:vw(86);
+						height:vh(104);
+					}
+				}
+			}
+			.title{
+				font-weight: 800;
+				font-size: vw(16);
+				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;
+				
+			}
+		}
+	}
+
+</style>
diff --git a/src/views/testing/components/box-5.vue b/src/views/testing/components/box-5.vue
new file mode 100644
index 0000000..63077d9
--- /dev/null
+++ b/src/views/testing/components/box-5.vue
@@ -0,0 +1,514 @@
+<template>
+	<!-- 安全检测 -->
+	<div class="box-detection">
+		<!-- 地图 -->
+		<div class="detection-top">
+			<!-- <img class="map-img" src="@/assets/images/map-img-1.jpg" alt="" /> -->
+			
+			<Map />
+		</div>
+		<div class="detection-bom flex">
+			<!-- 数据 -->
+			<div class="d-left">
+				<div class="t-title">
+					<span>监控点位统计</span>
+				</div>
+				<div class="t-census flex">
+					<img class="t-icon" src="@/assets/images/t-ico-0.png" alt="" />
+					<div class="item">
+						监控点位 <div class="color1"><countup endVal="895" /></div>
+					</div>
+					<div class="item">
+						核心点位 <div class="color1"><countup endVal="895" /></div>
+					</div>
+					<div class="item">
+						拥堵次数 <div class="color2"><countup endVal="895" /></div>
+					</div>
+				</div>
+				<div class="box">
+				  <div class="title-3"><span>异常告警占比</span></div>
+				  <div class="pt-20 h-flex">
+					<div class="left">
+						<v-chart class="chart" :option="optionBar" autoresize />
+						<!-- <v-chart class="chart" :option="option1" autoresize /> -->
+					</div>
+						
+				  </div>
+				</div>
+			</div>
+			<div class="d-right">
+				<div class="t-title">
+					<span>交通信息</span>
+				</div>
+				<div class="t-census flex">
+					<img class="t-icon" src="@/assets/images/t-ico-1.png" alt="" />
+					<div class="item">
+						监控点位 <div class="color1"><countup endVal="895" /></div>
+					</div>
+					<div class="item">
+						核心点位 <div class="color1"><countup endVal="895" /></div>
+					</div>
+					<div class="item">
+						拥堵次数 <div class="color1"><countup endVal="895" /></div>
+					</div>
+				</div>
+				<div class="box">
+				  <div class="title-3"><span>异常告警占比</span></div>
+				  <div class="pt-20 h-flex">
+					<div class="left">
+						<v-chart class="line-chart"  :option="optionLine" autoresize />
+					</div>
+						
+				  </div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import countup from 'vue-countup-v3'
+  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: 30,
+		top: 30,
+		bottom: 20,
+		itemWidth:5,
+		itemHeight:5,
+	  },
+  	  series: [
+  	    {
+  	      name: 'Access From',
+  		  type: 'pie',
+  		  left:-100,
+  		  top:-30,
+		  // 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(10),
+				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: '其他' },
+  	      ]
+  	     
+  	    },
+  	  ],
+  });
+  const optionLine = ref({
+	  backgroundColor:'transparent',
+	  grid:{
+		top:'50',
+		bottom:'50',
+		left:'4%',
+		containLabel: true,
+	  },
+	    xAxis: {
+		  nameLocation: 'middle',
+	      type: 'category',
+		  boundaryGap: false,
+		  axisLabel: {
+			  fontSize:10,
+			  interval: 0, // 显示所有标签
+			  rotate: 0, // 旋转标签45度
+		  },
+	      data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
+		  axisTisk:{
+			show: true,
+			// 设置刻度长度
+			length: 1,
+			lineStyle: {
+				type: 'dashed' ,// 设置为虚线
+				width:0,
+			} 
+		  },
+		  axisLine: {
+			lineStyle: {
+				color: '#0096FF' // 设置横线颜色
+			}
+		  }
+	    },
+	    yAxis: {
+	      type: 'value',
+		  min:0,
+		  max:45,
+		  interval:15,
+		   axisLabel: {
+			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
+			  color: 'rgba(255,255,255,0.9)',
+		   },
+		   splitLine:{
+			   show:true,
+			   lineStyle:{
+				   type:'dashed',
+				   color:'#00D0FF'
+			   }
+		   }
+	    },
+		
+	    series: [
+	      {
+	        data: [0, 23, 30, 24, 40, 30, 45,26],
+	        type: 'line',
+	        smooth: true,
+			label:{
+				show:false,//隐藏坐标点
+			},
+			itemStyle:{
+				color:'transparent'
+			},
+			markLine:{
+				symbol:['none','none'],
+				label:{show:false}
+			},
+			
+			lineStyle: {
+				color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+				{
+				  offset: 0,
+				  color: '#7DE7FF'
+				},
+				{
+				  offset: 0.5,
+				  color: '#02F9FA'
+				},
+				{
+				  offset: 1,
+				  color: '#009DFF'
+				},
+			 ]),
+			 width:3,
+			}
+	      }
+	    ]
+	
+  })
+  const optionBar = ref({
+	  backgroundColor:'transparent',
+	  tooltip: {
+	      trigger: 'axis',
+	      axisPointer: {
+	        type: 'shadow'
+	      }
+	    },
+	    legend: {
+			// type: 'scroll',
+			// orient: 'vertical',
+			right: 0,
+			top: 0,
+			bottom: 20,
+			itemWidth:5,
+			itemHeight:5,
+	    },
+	    grid: {
+	      left: '3%',
+	      right: '4%',
+	      bottom: '20%',
+	      containLabel: true,
+		  show:false,
+	    },
+	    xAxis: [
+	      {
+	        nameLocation: 'middle',
+	        type: 'category',
+	        boundaryGap: true,
+	        axisLabel: {
+			  fontSize:fitChartSize(10),
+			  interval: 0, // 显示所有标签
+			  rotate: 0, // 旋转标签45度
+	        },
+			minorTisk:{
+				show:false,
+			},
+	        data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
+			axisTisk:{
+				alignWithLabel: true,
+				show: false,
+				// 设置刻度长度
+				length: 0,
+				lineStyle: {
+					type: 'dashed' ,// 设置为虚线
+					width:0,
+				} 
+			},
+	      }
+	    ],
+	    yAxis: [
+	      {
+			  
+	        type: 'value',
+	        min:0,
+	        max:45,
+	        interval:15,
+			
+	         axisLabel: {
+			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
+			  color: 'rgba(255,255,255,0.9)',
+			  offset:10,
+	         },
+	         splitLine:{
+			   show:false,
+			   lineStyle:{
+				   type:'dashed',
+				   color:'#00D0FF'
+			   }
+	         },
+			
+	      }
+	    ],
+	    series: [
+		  
+	      {
+			itemStyle: {
+			  // 设置柱状图颜色
+			  color: '#0D53FF'
+		    },
+	        name: '三峡之巅',
+	        type: 'bar',
+	        stack: 'Ad',
+	        emphasis: {
+	          focus: 'series'
+	        },
+	        data: [10, 0, 16, 10, 22, 11, 9,30],
+			barWidth: '45%', // 设置柱体粗细，可以是百分比或者像素值
+	      },
+	      {
+	        name: '白帝城',
+	        type: 'bar',
+	        stack: 'Ad',
+	        emphasis: {
+	          focus: 'series'
+	        },
+			itemStyle: {
+			  // 设置柱状图颜色
+			  color: '#05FFB9'
+			},
+	        data: [20, 5, 14, 14, 0, 20, 11,2]
+	      },
+	      {
+	        name: '龙河桥',
+	        type: 'bar',
+	        stack: 'Ad',
+	        emphasis: {
+	          focus: 'series'
+	        },
+			itemStyle: {
+			  // 设置柱状图颜色
+			  color: '#FFCB39'
+			},
+	        data: [15, 20, 8, 19, 20, 5, 22,13]
+	      },
+	      
+	    ]
+  })
+  onMounted(() => {})
+</script>
+<style lang="scss" scoped>
+	.line-chart{
+		width:100%;
+		height:vh(240);
+	}
+	.box-detection{
+		margin-top: vh(120);
+		width:vw(820);
+		height:vh(950);
+		background: linear-gradient( 321deg, #0B2F64 0%, #062B57 91%, rgba(5,40,79,0) 100%);
+		border-radius: 0px 0px 0px 0px;
+		.detection-top{
+			width:100%;
+			height:vh(580);
+			background-color: #fff;
+			.map-img{
+				width:100%;
+				height:100%;
+			}
+		}
+		.detection-bom{
+			justify-content: space-between;
+			.d-left{
+				width:vw(405);
+				.left{
+					width:100%;
+					height:vh(240);
+				}
+			}
+			.d-right{
+				width:vw(405);
+			}
+			.box {
+			  width:100%;
+			  padding:vw(5);
+			  margin-top:vh(5);
+			  background-image: url('@/assets/images/bg-3.png');
+			  background-size: 100% 100%;
+			  &:nth-child(1) {
+			    margin-right: vw(10);
+			  }
+			  .title-2 {
+			    width: vw(253);
+			    height: vh(28);
+			    display: flex;
+			    align-items: center;
+			    background-image: url('@/assets/images/title-5.png');
+			    background-size: 100% 100%;
+			    & > span {
+			      padding-left: vw(22);
+			      font-weight: bold;
+			      font-size: vw(15);
+			      background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
+			      -webkit-background-clip: text;
+			      background-clip: text;
+			      -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+			      color: transparent; /* 兼容其他浏览器 */
+			    }
+			  }
+			  .statistic {
+			    display: flex;
+			    margin-top: vh(12);
+			    width: 100%;
+			    height: vh(88);
+			    background-image: url('@/assets/images/bg-4.png');
+			    background-size: 100% 100%;
+			    &-item {
+			      flex: 1;
+			      display: flex;
+			      flex-direction: column;
+			      align-items: center;
+			      justify-content: center;
+			    }
+			    &-title {
+			      font-size: vw(14);
+			      color: rgba(255, 255, 255, 0.9);
+			    }
+			    &-value {
+			      margin-top: vh(10);
+			      font-weight: bold;
+			      font-size: vw(24);
+			      color: #02f9fa;
+			    }
+			    .count {
+			      font-weight: bold;
+			      font-size: vw(28);
+			      color: #ff4400 !important;
+			    }
+			    .prefix,
+			    .suffix {
+			      color: #ff4400;
+			      font-size: vw(12);
+			    }
+			  }
+			  .title-3 {
+			    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; /* 兼容其他浏览器 */
+			    }
+			  }
+			}
+			.t-title {
+			  margin: vh(10) auto;
+			  width: 100%;
+			  height: vh(32);
+			  font-weight: 800;
+			  font-size: vw(16);
+			  color: #fff;
+			  display: flex;
+			  align-items: center;
+			  justify-content: center;
+			  background-image: url('@/assets/images/title-4.png');
+			  background-size: 100% 100%;
+			}
+			.t-census{
+				justify-content: center;
+				align-items: center;
+				background-image: url('@/assets/images/i-data-bg-1.png');
+				background-size: 100% 100%;
+				padding:vw(10);
+				.t-icon{
+					width:vw(45);
+					height:vh(48);
+				}
+				.item{
+					flex:1;
+					font-weight: 400;
+					font-size: vw(14);
+					color: rgba(255,255,255,0.9);
+					line-height: vh(16);
+					text-align: center;
+					font-style: normal;
+					text-transform: none;
+					.color1{
+						display: block;
+						font-weight: bold;
+						font-size: vw(24);
+						color: #FFFFFF;
+						line-height: 28px;
+						text-align: center;
+						font-style: normal;
+						text-transform: none;
+					}
+					.color2{
+						display: block;
+						font-weight: bold;
+						font-size: vw(24);
+						color: #F15A25;
+						line-height: 28px;
+						text-align: center;
+						font-style: normal;
+						text-transform: none;
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/testing/index.vue b/src/views/testing/index.vue
new file mode 100644
index 0000000..63a459d
--- /dev/null
+++ b/src/views/testing/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <main class="wrapper">
+    <box1 />
+	<box5/>
+	<box3 />
+    <div class="header">
+      <ul class="nav-left">
+        <li class="nav-left-item">奉节县</li>
+        <li class="nav-left-item">三峡之巅</li>
+        <li class="nav-left-item">白帝城</li>
+		<li class="nav-left-item">龙河桥</li>
+      </ul>
+      <div class="title">三峡之巅-安全检测</div>
+      <ul class="nav-right">
+        <li class="nav-right-item">路段1</li>
+        <li class="nav-right-item">路段</li>
+        <li class="nav-right-item">路段</li>
+        <li class="nav-right-item">路段</li>
+      </ul>
+    </div>
+    <box4 />
+  </main>
+</template>
+
+<script setup>
+  import box1 from './components/box-1.vue'
+  import box4 from './components/box-4.vue'
+  import box3 from './components/box-3.vue'
+  import box5 from './components/box-5.vue'
+
+  onMounted(() => {})
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    display: flex;
+    width: 100vw;
+    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>
diff --git a/t.png b/t.png
new file mode 100644
index 0000000..1b82972
Binary files /dev/null and b/t.png differ