From bc3e9b68c66fdeeb7c49155ff46ed68d3650cc18 Mon Sep 17 00:00:00 2001
From: czt <czt18638530771@163.com>
Date: 星期一, 15 十二月 2025 18:35:33 +0800
Subject: [PATCH] 安防视频调整
---
fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html | 160 +++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 117 insertions(+), 43 deletions(-)
diff --git a/fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html b/fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html
index b16c4bb..72e6de3 100644
--- a/fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html
+++ b/fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html
@@ -16,6 +16,12 @@
height: 100%;
overflow-y: hidden;
}
+ /* 椤甸潰鍩虹閲嶇疆 */
+ body {
+ margin: 0;
+ padding: 0;
+ background-color: #000;
+ }
.layui-fluid {
position: relative;
@@ -91,59 +97,127 @@
color: #fff;
cursor: pointer;
}
-
+ .sp-table {
+ overflow: auto;
+ }
+ .sp-table::-webkit-scrollbar {
+ display: none; /* 闅愯棌婊氬姩鏉� */
+ }
.fenping_icon {
position: absolute;
right: 30px;
top: 16px;
}
-
+ .div1 {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
+ gap: 1px; /* 涓棿1px鐧借壊鍒嗛殧绾� */
+ background-color: #777; /* gap鍜宲adding鐨勯鑹�=鐧借壊鍒嗛殧绾� */
+ padding: 1px; /* 鍛ㄧ晫1px鐧借壊鍒嗛殧绾� */
+ box-sizing: border-box;
+ overflow: hidden;
+ }
.div_v1 {
- width: 99.8%;
- height: 760px;
- float: left;
background-color: #333;
-
- text-align: center;
- color: #FFF;
- font-size: 20px;
+ font-size: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ position: relative; /* 涓虹孩妗嗕吉鍏冪礌瀹氫綅 */
+ box-sizing: border-box;
+ z-index: 1; /* 鍩虹灞傜骇 */
}
-
+ /* 閫変腑椤癸細绾㈣壊杈规锛堣鐩栬嚜韬懆杈圭殑鐧借壊鍒嗛殧绾匡級 */
+ .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鍜宲adding鐨勯鑹�=鐧借壊鍒嗛殧绾� */
+ padding: 1px; /* 鍛ㄧ晫1px鐧借壊鍒嗛殧绾� */
+ box-sizing: border-box;
+ overflow: hidden;
+ }
.div_v4 {
- width: 49.88%;
- height: 379.5px;
- float: left;
background-color: #333;
-
- text-align: center;
- color: #FFF;
- font-size: 20px;
+ font-size: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ position: relative; /* 涓虹孩妗嗕吉鍏冪礌瀹氫綅 */
+ box-sizing: border-box;
+ z-index: 1; /* 鍩虹灞傜骇 */
}
-
+ /* 閫変腑椤癸細绾㈣壊杈规锛堣鐩栬嚜韬懆杈圭殑鐧借壊鍒嗛殧绾匡級 */
+ .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鍜宲adding鐨勯鑹�=鐧借壊鍒嗛殧绾� */
+ 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;
+ font-size: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ position: relative; /* 涓虹孩妗嗕吉鍏冪礌瀹氫綅 */
+ box-sizing: border-box;
+ z-index: 1; /* 鍩虹灞傜骇 */
}
- .bor_t_l {
- border-top: 1px solid #777;
- border-left: 1px solid #777;
- }
-
- .bor_b {
- border-bottom: 1px solid #777;
- }
-
- .bor_r {
- border-right: 1px solid #777;
- }
- .selectWin {
- border: 1px solid #a52222;
+ /* 閫変腑椤癸細绾㈣壊杈规锛堣鐩栬嚜韬懆杈圭殑鐧借壊鍒嗛殧绾匡級 */
+ .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;
}
.video {
width: 100%;
@@ -171,16 +245,16 @@
</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 +270,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>
--
Gitblit v1.9.3