fzzy-igdss.git - Gitblit

			@@ -17,6 +17,13 @@
			overflow-y: hidden;
			}

			/* 页面基础重置 */
			body {
			margin: 0;
			padding: 0;
			background-color: #000;
			}

			.layui-fluid {
			position: relative;
			margin: 0 auto;
			@@ -92,62 +99,165 @@
			cursor: pointer;
			}

			.sp-table {
			overflow: auto;
			}

			.sp-table::-webkit-scrollbar {
			display: none; /* 隐藏滚动条 */
			}

			.fenping_icon {
			position: absolute;
			right: 30px;
			top: 16px;
			right: 20px;
			top: 15px;
			}

			.div1 {
			width: 100%;
			height: 100%;
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			gap: 1px; /* 中间1px白色分隔线 */
			background-color: #777; /* gap和padding的颜色=白色分隔线 */
			padding: 1px; /* 周界1px白色分隔线 */
			box-sizing: border-box;
			overflow: hidden;
			}

			.div_v1 {
			width: 99.8%;
			height: 760px;
			float: left;
			background-color: #333;
			font-size: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			position: relative; /* 为红框伪元素定位 */
			box-sizing: border-box;
			z-index: 1; /* 基础层级 */
			}

			text-align: center;
			color: #FFF;
			font-size: 20px;
			/* 选中项：红色边框（覆盖自身周边的白色分隔线） */
			.div_v1.active::after {
			content: '';
			position: absolute;
			/* 红框范围：超出自身，刚好覆盖周边1px白线 */
			top: -1px;
			left: -1px;
			right: -1px;
			bottom: -1px;
			border: 2px solid red; /* 红框宽度可调整 */
			z-index: 2; /* 高于自身，覆盖白线；低于其他项的基础层级，不遮挡其他白线 */
			box-sizing: border-box;
			transition: all 0.2s ease;
			}

			.div4 {
			width: 100%;
			height: 100%;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;
			gap: 1px; /* 中间1px白色分隔线 */
			background-color: #777; /* gap和padding的颜色=白色分隔线 */
			padding: 1px; /* 周界1px白色分隔线 */
			box-sizing: border-box;
			overflow: hidden;
			}

			.div_v4 {
			width: 49.88%;
			height: 379.5px;
			float: left;
			background-color: #333;
			font-size: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			position: relative; /* 为红框伪元素定位 */
			box-sizing: border-box;
			z-index: 1; /* 基础层级 */
			}

			text-align: center;
			color: #FFF;
			font-size: 20px;
			/* 选中项：红色边框（覆盖自身周边的白色分隔线） */
			.div_v4.active::after {
			content: '';
			position: absolute;
			/* 红框范围：超出自身，刚好覆盖周边1px白线 */
			top: -1px;
			left: -1px;
			right: -1px;
			bottom: -1px;
			border: 2px solid red; /* 红框宽度可调整 */
			z-index: 2; /* 高于自身，覆盖白线；低于其他项的基础层级，不遮挡其他白线 */
			box-sizing: border-box;
			transition: all 0.2s ease;
			}

			.div9 {
			width: 100%;
			height: 100%;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr;
			gap: 1px; /* 中间1px白色分隔线 */
			background-color: #777; /* gap和padding的颜色=白色分隔线 */
			padding: 1px; /* 周界1px白色分隔线 */
			box-sizing: border-box;
			overflow: hidden;
			}

			.div_v9 {
			width: 33.22%;
			height: 252.6px;
			float: left;
			background-color: #333;

			text-align: center;
			color: #FFF;
			font-size: 20px;
			}
			.bor_t_l {
			border-top: 1px solid #777;
			border-left: 1px solid #777;
			font-size: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			position: relative; /* 为红框伪元素定位 */
			box-sizing: border-box;
			z-index: 1; /* 基础层级 */
			}

			.bor_b {
			border-bottom: 1px solid #777;
			/* 选中项：红色边框（覆盖自身周边的白色分隔线） */
			.div_v9.active::after {
			content: '';
			position: absolute;
			/* 红框范围：超出自身，刚好覆盖周边1px白线 */
			top: -1px;
			left: -1px;
			right: -1px;
			bottom: -1px;
			border: 2px solid red; /* 红框宽度可调整 */
			z-index: 2; /* 高于自身，覆盖白线；低于其他项的基础层级，不遮挡其他白线 */
			box-sizing: border-box;
			transition: all 0.2s ease;
			}

			.bor_r {
			border-right: 1px solid #777;
			}
			.selectWin {
			border: 1px solid #a52222;
			}
			.video {
			width: 100%;
			height: 100%;
			}

			.playList {
			position: absolute;
			right: 200px;
			font-size: 16px;
			width: 200px;
			}
			.layui-input {
			background-color: #999;
			border-color: #999;
			}

			/* 遮罩层：覆盖整个容器，透明，点击时触发父div事件 */
			.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: transparent;
			z-index: 1; /* 遮罩层在iframe上方 */
			}
			</style>
			</head>
			@@ -164,23 +274,34 @@
			<h3>
			<i></i>视频实时预览
			</h3>
			<div class="playList">
			<form class="layui-form">
			<select id="playLan" lay-filter="select_play" class="form-control">
			<option value="1">内网播放</option>
			<option value="2">外网播放</option>
			</select>
			</form>
			</div>
			<div class="fenping_icon">
			<img onclick="fenping(1)" id="f_1" style="width: 30px" th:src="@{/img/web/group/fp_1_active.png}"/>
			<img onclick="fenping(4)" id="f_4" style="width: 30px" th:src="@{/img/web/group/fp_4.png}"/>
			<img onclick="fenping(9)" id="f_9" style="width: 30px" th:src="@{/img/web/group/fp_9.png}"/>
			<img onclick="fenping(1)" id="f_1" style="width: 38px"
			th:src="@{/img/web/group/fp_1_active.png}"/>
			<img onclick="fenping(4)" id="f_4" style="width: 38px"
			th:src="@{/img/web/group/fp_4.png}"/>
			<img onclick="fenping(9)" id="f_9" style="width: 38px"
			th:src="@{/img/web/group/fp_9.png}"/>
			</div>
			</div>

			<div class="sp-tab-db" style="padding: 5px 10px 15px 10px;">
			<div class="sp-tab-db" style="padding: 5px 10px 15px 10px;height: 765px;">
			<!--一分屏默认显示-->
			<div id="video_1" class="right-videoWrap">
			<div id="video_1" class="div1">
			<div id="f1_d1" onclick="selectWin(1,1)" class="div_v1 bor_t_l bor_b bor_r">
			<video class="video" id="video1_1" autoplay="" muted="" playsinline=""></video>
			</div>
			</div>

			<!--四分屏默认显示-->
			<div id="video_4" class="right-videoWrap" style="display: none;">
			<div id="video_4" class="div4" style="display: none;">
			<div id="f4_d1" onclick="selectWin(4,1)" class="div_v4 bor_t_l">
			<video class="video" id="video4_1" autoplay="" muted="" playsinline=""></video>
			</div>
			@@ -196,7 +317,7 @@
			</div>

			<!--九分屏默认隐藏-->
			<div id="video_9" class="right-videoWrap" style="display: none;">
			<div id="video_9" class="div9" style="display: none;">
			<div id="f9_d1" onclick="selectWin(9,1)" class="div_v9 bor_t_l">
			<video class="video" id="video9_1" autoplay="" muted="" playsinline=""></video>
			</div>
			@@ -292,11 +413,13 @@
			</ul>
			</div>
			<div class="sp-bianbei fl">
			<button type="button" class="sp-sxBtn sp-czBtn" onmousedown="ptzControl(9)" onmouseup="zoomStop()">
			<button type="button" class="sp-sxBtn sp-czBtn" onmousedown="ptzControl(9)"
			onmouseup="zoomStop()">
			<i>－</i>
			</button>
			<span>变焦</span>
			<button type="button" class="sp-fdBtn sp-czBtn" onmousedown="ptzControl(10)" onmouseup="zoomStop()">
			<button type="button" class="sp-fdBtn sp-czBtn" onmousedown="ptzControl(10)"
			onmouseup="zoomStop()">
			<i>＋</i>
			</button>
			</div>
			@@ -345,6 +468,8 @@

			<script th:inline="javascript">
			var listCamera = [[${listCamera}]];
			var type = [[${type}]];
			var lan = [[${lan}]];
			</script>
			<script th:src="@{/js/jquery.min.js}"></script>
			<script th:src="@{/ajax/libs/layui/layui.js}"></script>