监控页面控制按钮和列表重叠问题

templates/backstageNet/jk/equipmanage_jk.html

@@ -133,6 +133,9 @@
         .nullData p:first-child {
             padding-top: 10%;
         }
+        .flashShowDiv{
+            background: #323d48;
+        }
 
         .flashShowDiv,
         .flashDownDiv,
@@ -256,8 +259,11 @@
             line-height: 30px;
             font-size: 14px;
             border: 1px solid #000;
-            width: 90%;
-            padding-left: 5px;
+        }
+        .jkListDiv{
+            overflow-x: hidden;
+            line-height: 40px;
+            height: 100%;
         }
 
         .jkListUl>li {
@@ -265,33 +271,17 @@
             font-size: 14px;
             line-height: 30px;
             cursor: pointer;
-            padding-left: 20px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            width: 200px;
-        }
-
-        .ctrlBox {
-            /* display: none; */
-            position: absolute;
-            /* background: #685f5f; */
-            z-index: 99999;
-            /* padding: 0 20px; */
-            width: 240px;
-            height: 260px;
-            left: 0;
-            bottom: 30px;
-            /* border: 1px solid #000; */
-            border-radius: 30px 30px 50px 50px;
+            text-indent: 15px;
         }
 
-
         .cutCtrl,
         .directionCtrl>div {
             position: absolute;
-            width: 50px;
-            height: 50px;
+            width: 40px;
+            height: 40px;
             cursor: pointer;
         }
 
@@ -306,35 +296,35 @@
 
         .directionCtrl {
             position: relative;
-            width: 180px;
+            /* width: 180px; */
             height: 180px;
             bottom: 0;
             background: url(../static/imgs/ptz_bg.png) no-repeat center;
-            background-size: 100% 100%;
-            margin-left: 30px;
+            background-size: 150px 150px;
+            /* margin-left: 13px; */
         }
 
         .upCtrl {
-            top: 7px;
-            left: 50%;
+            top: 18px;
+            left: 53%;
             margin-left: -25px;
         }
 
         .leftCtrl {
-            left: 10px;
-            top: 50%;
+            left: 24px;
+            top: 53%;
             margin-top: -25px;
         }
 
         .bottomCtrl {
-            bottom: 8px;
-            left: 50%;
+            bottom: 17px;
+            left: 53%;
             margin-left: -25px;
         }
 
         .rightCtrl {
-            right: 7px;
-            top: 50%;
+            right: 26px;
+            top: 53%;
             margin-top: -25px;
         }
 
@@ -345,8 +335,8 @@
             width: 120px;
             height: 30px;
             margin: auto;
-            margin-top: 15px;
-            margin-bottom: 15px;
+            /* margin-top: 15px; */
+            /* margin-bottom: 15px; */
         }
 
         .Zoom span {
@@ -367,6 +357,15 @@
             background-color: #36404D;
             color: rgb(255, 255, 0);
         }
+        .gardenListBtn button.layui-btn-primary{
+            color: #49dfb4;
+            border: #000;
+            background-image: linear-gradient(#525b6d, #3e4654);
+            border: 1px solid #3c4452;
+        }
+        .gardenListBtn button.layui-btn-primary:hover{
+            box-shadow: 0 0 2px 0px #039c6b;
+        }
     </style>
 </head>
 <script>
@@ -396,18 +395,12 @@
             </div>
             <div class="flashShowDiv">
                 <div style="display: table; width: 100%;" id="jk_main">
-
-                    <!-- <div id="div_ControlPanel" style="display: table-cell; width: 160px; height: 911.875px; overflow: hidden; background: rgb(0, 0, 0); vertical-align: top;"></div> -->
-                    <!-- <div id="div_ControlPanel" style="display: table-cell; width: 160px; height: 911.875px; overflow: hidden; background: rgb(0, 0, 0); vertical-align: top;"></div> -->
-                    <!-- 隐藏 -->
-                    <!-- <div id="div_vControl" style="display: table-cell; width: 22px; vertical-align: middle;"></div> -->
-
                     <!-- 视频框 -->
                     <div style="display: table-cell;">
-                        <div id="divMain" style="width: 100%; height:750px; background: #313a47; margin: auto; padding: 5px; position: relative; z-index: 9999;">
+                        <div id="divMain" style="height:750px; background: #313a47; margin: auto; padding: 5px; position: relative; z-index: 9999;">
 
                         </div>
-                        <div style="clear: both; width: 100%; height: 45px; line-height: 45px; background: #323d48; padding: 5px; position: relative; z-index: 9999;">
+                        <div style="clear: both; height: 45px; line-height: 45px; background: #323d48; padding: 5px; position: relative; z-index: 9999;">
                             &ensp;
                             <span class="v1" id="span_V1" onclick="CreateVidewDiv(1);">
                                 <i class="iconfont" style="font-size: 24px;">&#xe600;</i>
@@ -423,62 +416,72 @@
                         </div>
                     </div>
                     <!-- 控制 -->
-                    <div id="div_ControlPanel" style="position:relative;display: table-cell; width: 220px; background: #464e60; overflow: hidden; vertical-align: top; padding: 10px;">
-                        <div class="jkListDiv">
-                            <div class="searchInp">
-                                <input type="text" placeholder="请输入设备ID搜索">
-                            </div>
-                            <ul class="jkListUl" id="dataFillDiv">
-                                <!-- <li onclick='StartPlay("363","1","2","rtmp://rtmp01open.ys7.com/openlive/18319fb1a08249d3a498c5cba3e8bdee.hd","http://hls01open.ys7.com/openlive/18319fb1a08249d3a498c5cba3e8bdee.hd.m3u8","719458092","1","阳台",this)'>监控一</li>
-                                <li onclick='StartPlay("417","1","2","rtmp://rtmp.open.ys7.com/openlive/8702368f321341deb9fb5edb9d72faec", "http://hls.open.ys7.com/openlive/8702368f321341deb9fb5edb9d72faec.m3u8","C25308553","1","阳台",this)'>监控二</li>
-                                <li>监控三</li>
-                                <li>监控四</li>
-                                <li>监控五</li> -->
-
-                                
-                            </ul>
-                            <div class="gardenListBtn">
-                                <span class="firstPage">
-                                    <button type="button" onclick="switchPage('home')" class="layui-btn layui-btn-sm layui-btn-primary">
-                                        <i class="layui-icon">&#xe68e;</i>
-                                    </button>
-                                </span>
-                                <span class="prevPageBtn">
-                                    <button type="button" onclick="switchPage('jian')" class="layui-btn layui-btn-sm layui-btn-primary">
-                                        <i class="layui-icon">&#xe65a;</i>
-                                    </button>
-                                </span>
-                                <span class="menuCurr">1</span>
-                                <span class="">/</span>
-                                <span class="menuTotalPage">6</span>
-                                <span class="">页</span>
-                                <span class="nextPageBtn">
-                                    <button type="button" onclick="switchPage('jia')" class="layui-btn layui-btn-sm layui-btn-primary">
-                                        <i class="layui-icon">&#xe65b;</i>
-                                    </button>
-                                </span>
-                            </div>
-                        </div>
-                        <div class="ctrlBox">
-                            <!-- <div class="cutCtrl" onclick="configCamera(this,'takephoto','')"></div> -->
-                            <div class="directionCtrl">
-                                <div class="upCtrl" onmousedown="configCamera(this,'move',0)" onmouseup="configCamera(this,'stop')"></div>
-                                <div class="leftCtrl" onmousedown="configCamera(this,'move',2)" onmouseup="configCamera(this,'stop')"></div>
-                                <div class="bottomCtrl" onmousedown="configCamera(this,'move',1)" onmouseup="configCamera(this,'stop')"></div>
-                                <div class="rightCtrl" onmousedown="configCamera(this,'move',3)" onmouseup="configCamera(this,'stop')"></div>
-                            </div>
-                            <div class="Zoom">
-                                <span onmousedown="configCamera(this,'move',8)" onmouseup="configCamera(this,'stop')"></span>
-                                <span onmousedown="configCamera(this,'move',9)" onmouseup="configCamera(this,'stop')"></span>
-                            </div>
-                        </div>
+                    <div id="div_ControlPanel" style="position:relative;display: table-cell; width: 220px; background: #464e60; overflow: hidden; vertical-align: top;">
+                        
+                        <table style="width: 100%; height: 100%">
+                            <tr style="height: 30px;">
+                                <td>
+                                    <div class="searchInp">
+                                        <input type="text" placeholder="请输入设备ID搜索">
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td style="vertical-align: top;">
+                                    <div class="jkListDiv">                                       
+                                        <ul class="jkListUl" id="dataFillDiv"></ul>
+                                    </div> 
+                                </td>
+                            </tr>
+                            <tr style="height: 50px;">
+                                <td>
+                                    <div class="gardenListBtn">
+                                        <span class="firstPage">
+                                            <button type="button" onclick="switchPage('home')" class="layui-btn layui-btn-sm layui-btn-primary">
+                                                <i class="layui-icon">&#xe68e;</i>
+                                            </button>
+                                        </span>
+                                        <span class="prevPageBtn">
+                                            <button type="button" onclick="switchPage('jian')" class="layui-btn layui-btn-sm layui-btn-primary">
+                                                <i class="layui-icon">&#xe65a;</i>
+                                            </button>
+                                        </span>
+                                        <span class="menuCurr">1</span>
+                                        <span class="">/</span>
+                                        <span class="menuTotalPage">6</span>
+                                        <span class="">页</span>
+                                        <span class="nextPageBtn">
+                                            <button type="button" onclick="switchPage('jia')" class="layui-btn layui-btn-sm layui-btn-primary">
+                                                <i class="layui-icon">&#xe65b;</i>
+                                            </button>
+                                        </span>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr id="tr_ptz">
+                                <td style="height: 190px; padding: 15px;">
+                                    <div class="ctrlBox">
+                                        <!-- <div class="cutCtrl" onclick="configCamera(this,'takephoto','')"></div>  -->
+                                        <div class="directionCtrl">
+                                            <div class="upCtrl" onmousedown="configCamera(this,'move',0)" onmouseup="configCamera(this,'stop')"></div>
+                                            <div class="leftCtrl" onmousedown="configCamera(this,'move',2)" onmouseup="configCamera(this,'stop')"></div>
+                                            <div class="bottomCtrl" onmousedown="configCamera(this,'move',1)" onmouseup="configCamera(this,'stop')"></div>
+                                            <div class="rightCtrl" onmousedown="configCamera(this,'move',3)" onmouseup="configCamera(this,'stop')"></div>
+                                        </div>
+                                        <div class="Zoom">
+                                            <span onmousedown="configCamera(this,'move',8)" onmouseup="configCamera(this,'stop')"></span>
+                                            <span onmousedown="configCamera(this,'move',9)" onmouseup="configCamera(this,'stop')"></span>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+
+                        </table>
+                        
+                        
                     </div>
 
                 </div>
-                <!-- <div class="fenpei-bottom">
-                    <input type="hidden" id="totalPage" value={{ nums }}>
-                    <div id="page" style="text-align: center;"></div>
-                </div> -->
             </div>
         </div>
     </div>
@@ -587,14 +590,6 @@
 
         //预览函数
         function StartPlay(id, connectionType, liveStatus, rtmp, hls, deviceSerial, cameraNo, title, obj) {
-            // if (obj == null) {
-
-            //     $("#dataFillDiv >li").eq(0).addClass("select-c");
-            // }
-            // else {
-            //     $("#dataFillDiv >li").removeClass("select-c");
-            //     $(obj).addClass("select-c");
-            // }
 
             $("#span_ConnectionType_" + curIndex).html(connectionType);
             $("#span_deviceSerial_" + curIndex).html(deviceSerial);