feat 监控大屏

2024-12-16 16:42:46 +08:00
parent cc9782e007
commit 990ff98618
39 changed files with 1895 additions and 864 deletions
--- a/src/views/monitor/components/box-3.vue
+++ b/src/views/monitor/components/box-3.vue
@@ -0,0 +1,124 @@
+<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"></div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	
+</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>