安防视频调整

czt

2 天以前 bc3e9b68c66fdeeb7c49155ff46ed68d3650cc18

 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和padding的颜色=白色分隔线 */
            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和padding的颜色=白色分隔线 */
            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和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;
            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>