feat 工单消息

2024-12-19 18:27:29 +08:00
parent 1efefe8325
commit c9b4f315e5
16 changed files with 1030 additions and 66 deletions
--- a/src/views/traffic/components/box-2.vue
+++ b/src/views/traffic/components/box-2.vue
@@ -0,0 +1,99 @@
+<template>
+	<div class="traffic-box-2">
+		<div class="map-box">
+			<Map></Map>
+			<!-- 视频 -->
+			<div class="video-list">
+				<div class="li">
+					<vue3VideoPlay  v-bind="options"/>
+				</div>
+				<div class="li">
+					<vue3VideoPlay  v-bind="options"/>
+				</div>
+				<div class="menu">查看更多</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import Map from '@/components/Map/marker.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",
+		], //显示所有按钮,
+	});
+</script>
+
+<style lang="scss" scoped>
+	.traffic-box-2{
+		width:vw(1517);
+		height:vh(965);
+		background-image: url('/src/assets/images/map-bg-2.png');
+		background-size: 100% 100%;
+		margin:0 vw(10);
+		padding:vh(35) vw(30);
+		margin-top:vh(110);
+		position:relative;
+		z-index:9;
+		.map-box{
+			width:100%;
+			height:100%;
+			position:relative;
+			.video-list{
+				width:vw(320);
+				height:vh(120);
+				background: #0A254B;
+				border-radius: 0px 0px 0px 0px;
+				position: absolute;
+				bottom:vw(10);
+				right:vw(10);
+				z-index: 99;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.li{
+					width:vw(140);
+					height:vh(105);
+					background-image: url('/src/assets/images/small-v-bg.png');
+					background-size: 100% 100%;
+					margin-right:vw(6);
+				}
+				.menu{
+					width: vw(12);
+					height: vh(60);
+					font-family: Inter, Inter;
+					font-weight: 400;
+					font-size: vw(12);
+					color: #FFFFFF;
+					line-height: vh(14);
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+				}
+			}
+		}
+	}
+</style>