no message

src/views/test/components/SeedlingMonitor.vue

@@ -1,39 +1,47 @@
 <template>
 
 	<div class="video">
-		<video class="video11" autoplay controls loop muted></video>
+		<video class="video11" :src="options[1].value"  autoplay controls loop muted></video>
 	</div>
 	<div class="rightContent">
-		<div class="font">苗情设备</div>
-		<div class="selectItem">
-			<el-select size="small" v-model="value" placeholder="请选择">
-				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-				</el-option>
-			</el-select>
+		<div class="top">
+			<div class="font">苗情设备</div>
+			<div class="selectItem">
+				<el-select size="small" v-model="value" placeholder="请选择">
+					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+					</el-option>
+				</el-select>
+			</div>
+		</div>
+		
+		<div class="mid">
+			<div class="midFont">监控区域:<span>测试园区玉米</span></div>
+			<div class="midbottomFont">采集时间:<span>2023-05-06</span> </div>
 		</div>
 
 	</div>
 </template>
+
 <script>
+	import videofarm1 from '@/assets/video/videofarm1.mp4';
+	import videofarm2 from '@/assets/video/videofarm2.mp4';
 	export default {
 		data() {
 			return {
+		
 				options: [{
-					value: '选项1',
+					value: 'videofarm1',
 					label: '设备一'
 				}, {
-					value: '选项2',
+					value: 'videofarm2',
 					label: '设备二'
 				}, {
 					value: '选项3',
 					label: '设备三'
 				}, {
 					value: '选项4',
-					label: '设备一'
-				}, {
-					value: '选项5',
-					label: '设备五'
-				}],
+					label: '设备四'
+				},],
 				value: ''
 
 			};
@@ -45,9 +53,9 @@
 </script>
 <style scoped>
 	.video {
-		margin-top: 20rem;
+		margin-top: 25rem;
 		width: 180rem;
-		height: 180rem;
+		height: 165rem;
 		display: inline-block;
 		float: left;
 	}
@@ -55,49 +63,36 @@
 	.video11 {
 		width: 100%;
 		height: 100%;
+		border-radius: 20rem;
 	}
-
+	
 	.rightContent {
-		margin-top: 20rem;
+		margin-top: 30rem;
 		width: 165rem;
 		height: 300rem;
 		display: inline-block;
-
 		float: right;
 
 	}
 
 	.font {
 		margin-top: 10rem;
+		font-size: 16rem;
 		width: 70rem;
 		height: 30rem;
 		float: left;
+		color:rgb(200, 250, 255);
+		text-align: left;	
 	}
 
-	.el-dropdown-link {
-		cursor: pointer;
-		color: #409EFF;
-	}
-
-	.el-icon-arrow-down {
-		font-size: 12px;
-	}
-
-	.el-select-dropdown__item {
-		color: #409eff !important;
-		padding: 0 32rem 0 20rem;
-		height: 34rem;
-		line-height: 34rem;
-		font-size: 14rem;
-	}
 
 	::v-deep .el-input__inner {
 		color: #fff;
 	}
 
 	::v-deep .el-input__wrapper {
-		background-color: rgba(255, 255, 255, 0) !important;;
-		color: #0e294d !important;; 
+		background-color: rgba(255, 255, 255, 0) !important;
+		color: #0e294d !important;
 	}
 
 	.selectItem {
@@ -106,10 +101,27 @@
 		height: 5rem;
 		display: inline-block;
 		float: right;
-
-
-
-
-
+	}
+	.top{
+		height: 60rem;
+		width: 100%;
+	}
+	.midFont{
+		font-size: 14rem;
+		margin-top: 5rem;
+		color:  rgb(200, 250, 255);
+		text-align: left;
+		padding-left: 20rem;
+		background: url('@/assets/images/jiankong.png') no-repeat;
+		background-size: 10%,10%;
+	}
+	.midbottomFont{
+		margin-top:30rem;
+		font-size: 14rem;
+		color:rgb(200, 250, 255);
+		text-align: left;
+		padding-left: 20rem;
+		background: url('@/assets/images/shijian.png') no-repeat;
+		background-size: 11%,11%;
 	}
 </style>

src/views/test/components/SoilMoisture.vue

@@ -80,13 +80,26 @@
 					xAxis: [{
 							type: 'category',
 							boundaryGap: false,
+							axisLabel: {
+								formatter: "{value}",
+								color: "#e2e9ff",
+							},
 							data: ['1:00', '5:00', '9:00', '13:00', '17:00', '21:00', '24:00']
 						},
 
 
 					],
 					yAxis: [{
-						type: 'value'
+						type: 'value',
+						splitLine: {
+							lineStyle: {
+								color: "rgba(255,255,255,0.12)",
+							},
+						},
+						axisLabel: {
+							formatter: "{value}",
+							color: "#e2e9ff",
+						},
 					}],
 					series: [{
 							name: '土壤温度（℃）',