From b740fed4ee8dfb8b6c4a1eb7ff6afc571eebc345 Mon Sep 17 00:00:00 2001
From: "zyc@123456" <784479659@qq.com>
Date: Wed, 24 May 2023 19:48:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A7=86=E9=A2=91=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E9=A1=B5=E9=9D=A2=E4=BB=93=E5=BA=93=E5=9B=BE=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor/videos/index.vue | 192 ++++++++++++++++-------------
 1 file changed, 109 insertions(+), 83 deletions(-)

diff --git a/src/views/monitor/videos/index.vue b/src/views/monitor/videos/index.vue
index 9bce13e..accbbb5 100644
--- a/src/views/monitor/videos/index.vue
+++ b/src/views/monitor/videos/index.vue
@@ -49,89 +49,92 @@
           </div> -->
           <!-- 11 -->
         </div>
-        <div class="shipinscon">
-
-          <div class="shipinstu">
-            <!-- 111入侵报警 -->
-            <div class="ruqinbaojing" v-show="showRuqinbaojing">
-              <div class="myiconfont bluezibg jingicon ruqin_zhengchang1"  @click="openshipinRuqinbaojing()">&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon ruqin_zhengchang2">&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon ruqin_zhengchang3" >&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon ruqin_zhengchang4" >&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon ruqin_zhengchang5" >&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon ruqin_zhengchang6" >&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon ruqin_zhengchang7" >&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon ruqin_zhengchang8" >&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon ruqin_zhengchang9" >&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon ruqin_zhengchang10" >&#xe608;</div>
-              <div class="myiconfont bluezibg jingicon ruqin_zhengchang11" >&#xe608;</div>
-
-              <div class="myiconfont huizibg jingicon ruqin_lixian1" >&#xe608;</div>
-              <div class="myiconfont huizibg jingicon ruqin_lixian2" >&#xe608;</div>
-
-              <div class="myiconfont redzibg jingicon ruqin_baojing1">&#xe608;</div>
-              <div class="myiconfont redzibg jingicon ruqin_baojing2">&#xe608;</div>
-              <div class="myiconfont redzibg jingicon ruqin_baojing3">&#xe608;</div>
-              <div class="myiconfont redzibg jingicon ruqin_baojing4">&#xe608;</div>
-              <!-- 显示文字 -->
-              <div class="seencons ruqin_zhengchang1b" v-show="seenshipinRuqinbaojing">
-                <p @click="toMore()">布防</p>
-                <p @click="toMore()">撤防</p>
-                <p @click="toMore()">报警确认</p>
-                <p @click="toMore()">旁路</p>
+        <div class="shipinscons">
+          <div class="shipinscon">
+
+            <div class="shipinstu">
+              <img src="/image/cangkutu.png"/>
+              <!-- 111入侵报警 -->
+              <div class="ruqinbaojing" style="z-index: 10;" v-show="showRuqinbaojing">
+                <div class="myiconfont bluezibg jingicon ruqin_zhengchang1"  @click="openshipinRuqinbaojing()">&#xe608;</div>
+                <div class="myiconfont bluezibg jingicon ruqin_zhengchang2">&#xe608;</div>
+                <div class="myiconfont bluezibg jingicon ruqin_zhengchang3" >&#xe608;</div>
+                <div class="myiconfont bluezibg jingicon ruqin_zhengchang4" >&#xe608;</div>
+                <div class="myiconfont bluezibg jingicon ruqin_zhengchang5" >&#xe608;</div>
+                <div class="myiconfont bluezibg jingicon ruqin_zhengchang6" >&#xe608;</div>
+                <div class="myiconfont bluezibg jingicon ruqin_zhengchang7" >&#xe608;</div>
+                <div class="myiconfont bluezibg jingicon ruqin_zhengchang8" >&#xe608;</div>
+                <div class="myiconfont bluezibg jingicon ruqin_zhengchang9" >&#xe608;</div>
+                <div class="myiconfont bluezibg jingicon ruqin_zhengchang10" >&#xe608;</div>
+                <div class="myiconfont bluezibg jingicon ruqin_zhengchang11" >&#xe608;</div>
+
+                <div class="myiconfont huizibg jingicon ruqin_lixian1" >&#xe608;</div>
+                <div class="myiconfont huizibg jingicon ruqin_lixian2" >&#xe608;</div>
+
+                <div class="myiconfont redzibg jingicon ruqin_baojing1">&#xe608;</div>
+                <div class="myiconfont redzibg jingicon ruqin_baojing2">&#xe608;</div>
+                <div class="myiconfont redzibg jingicon ruqin_baojing3">&#xe608;</div>
+                <div class="myiconfont redzibg jingicon ruqin_baojing4">&#xe608;</div>
+                <!-- 显示文字 -->
+                <div class="seencons ruqin_zhengchang1b" v-show="seenshipinRuqinbaojing">
+                  <p @click="toMore()">布防</p>
+                  <p @click="toMore()">撤防</p>
+                  <p @click="toMore()">报警确认</p>
+                  <p @click="toMore()">旁路</p>
+                </div>
               </div>
-            </div>
-            <!-- 111end -->
-            <!-- 222视频监控 -->
-            <div class="ruqinbaojing" v-show="showShipinjiankong">
-              <div class="myiconfont bluezibg jingicon shipin_zhengchang1" @mouseover="enter"  @mouseleave="leave"  @click="openshipinShipinjiankong()">&#xe644;</div>
-
-              <div class="myiconfont huizibg jingicon shipin_lixian1" >&#xe644;</div>
-
-              <div class="myiconfont redzibg jingicon shipin_baojing1">&#xe644;</div>
-              <!-- 显示文字 -->
-              <div class="seencons shipin_zhengchang1b" v-show="seenshipinShipinjiankong">
-                <p @click="toMore()">实时视频</p>
-                <p @click="toMore()">回放视频</p>
-              </div>
-              <!-- 鼠标移入显示文字 -->
-              <div class="seenconsc shipin_zhengchang1c" v-show="seen_shubiaoShipinjiankong">
-                <p>设备名称：1号楼1F西侧走廊像机1</p>
-                <p>设备编号：HK023123</p>
-                <p>设备IP：192.168.1.2</p>
+              <!-- 111end -->
+              <!-- 222视频监控 -->
+              <div class="ruqinbaojing" style="z-index: 20;" v-show="showShipinjiankong">
+                <div class="myiconfont bluezibg jingicon shipin_zhengchang1" @mouseover="enter"  @mouseleave="leave"  @click="openshipinShipinjiankong()">&#xe644;</div>
+
+                <div class="myiconfont huizibg jingicon shipin_lixian1" >&#xe644;</div>
+
+                <div class="myiconfont redzibg jingicon shipin_baojing1">&#xe644;</div>
+                <!-- 显示文字 -->
+                <div class="seencons shipin_zhengchang1b" v-show="seenshipinShipinjiankong">
+                  <p @click="toMore()">实时视频</p>
+                  <p @click="toMore()">回放视频</p>
+                </div>
+                <!-- 鼠标移入显示文字 -->
+                <div class="seenconsc shipin_zhengchang1c" v-show="seen_shubiaoShipinjiankong">
+                  <p>设备名称：1号楼1F西侧走廊像机1</p>
+                  <p>设备编号：HK023123</p>
+                  <p>设备IP：192.168.1.2</p>
+                </div>
               </div>
-            </div>
-            <!-- 2222end -->
-            <!-- 333门禁管理 -->
-            <div class="ruqinbaojing" v-show="showMenjinguanli">
-              <div class="myiconfont bluezibg jingicon menjin_zhengchang1"  @click="openshipinMenjinguanli()">&#xe60b;</div>
-
-              <div class="myiconfont huizibg jingicon menjin_lixian1" >&#xe60b;</div>
-
-              <div class="myiconfont redzibg jingicon menjin_baojing1">&#xe60b;</div>
-              <!-- 显示文字 -->
-              <div class="seencons menjin_zhengchang1b" v-show="seenshipinMenjinguanli">
-                <p @click="toMore()">开门</p>
+              <!-- 2222end -->
+              <!-- 333门禁管理 -->
+              <div class="ruqinbaojing" style="z-index: 30;" v-show="showMenjinguanli">
+                <div class="myiconfont bluezibg jingicon menjin_zhengchang1"  @click="openshipinMenjinguanli()">&#xe60b;</div>
+
+                <div class="myiconfont huizibg jingicon menjin_lixian1" >&#xe60b;</div>
+
+                <div class="myiconfont redzibg jingicon menjin_baojing1">&#xe60b;</div>
+                <!-- 显示文字 -->
+                <div class="seencons menjin_zhengchang1b" v-show="seenshipinMenjinguanli">
+                  <p @click="toMore()">开门</p>
+                </div>
               </div>
-            </div>
-            <!-- 333end -->
-            <!--444门电子围栏-->
-            <div class="ruqinbaojing" v-show="showDianziweilan">
-              <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1"  @click="openshipinDianziweilan()">&#xe6b8;</div>
-
-              <div class="myiconfont huizibg jingicon Dianziweilan_lixian1" >&#xe6b8;</div>
-
-              <div class="myiconfont redzibg jingicon Dianziweilan_baojing1">&#xe6b8;</div>
-              <!-- 显示文字 -->
-              <div class="seencons Dianziweilan_zhengchang1b" v-show="seenshipinDianziweilan">
-                <p @click="toMore()">布防</p>
-                <p @click="toMore()">撤防</p>
-                <p @click="toMore()">报警确认</p>
-                <p @click="toMore()">旁路</p>
+              <!-- 333end -->
+              <!--444门电子围栏-->
+              <div class="ruqinbaojing" style="z-index: 40;" v-show="showDianziweilan">
+                <div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1"  @click="openshipinDianziweilan()">&#xe6b8;</div>
+
+                <div class="myiconfont huizibg jingicon Dianziweilan_lixian1" >&#xe6b8;</div>
+
+                <div class="myiconfont redzibg jingicon Dianziweilan_baojing1">&#xe6b8;</div>
+                <!-- 显示文字 -->
+                <div class="seencons Dianziweilan_zhengchang1b" v-show="seenshipinDianziweilan">
+                  <p @click="toMore()">布防</p>
+                  <p @click="toMore()">撤防</p>
+                  <p @click="toMore()">报警确认</p>
+                  <p @click="toMore()">旁路</p>
+                </div>
               </div>
-            </div>
-            <!-- 444end -->
+              <!-- 444end -->
 
+            </div>
           </div>
             <!-- 下部机构导航 -->
             <div class="tabhead">
@@ -580,13 +583,36 @@ export default {
   padding: 10px;
 }
 .tab-header{background-color: #fff;}
-  .shipinscon {margin: 20px 0 0 0;
-  padding: 20px 50px 20px 50px;background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+  .shipinscons {height: 95%;text-align: center;
+    margin: 20px auto 0;
+    text-align: center;position: relative;
+  padding: 20px 50px 20px 50px;
+  background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+}
+.shipinscon {width: 60%;
+    margin: 20px auto 0;
+    text-align: center;position: relative;
+  padding: 20px 50px 20px 50px;
+
 }
-  .shipinstu {z-index: 0;
-   background: url("/image/cangkutu.png") center bottom no-repeat;
+  .shipinstu {
+    /* border:1px solid #0241c1; */
+    position:absolute;left: 0;
+    margin: 0 auto;text-align: center;
+
+  /* z-index: 0;
+  background: url("/image/cangkutu.png") center bottom no-repeat;
   background-size: 100% 100%;min-height: 580px;
-  padding: 0 20px;position: relative;
+  padding: 0 20px;position: relative; */
+}
+.shipinstu img{margin: 0 auto;height: 550px;}
+.shipinstu .ruqinbaojing{position:absolute;left: 0;top:0;
+     /* position:absolute; */
+     /* border: #e20202 solid 2px; */
+     width: 100%;
+     height: 100%;
+     /* float: left;
+     top:0; */
 }
 .shipinstu .jingicon {cursor: pointer;
   font-size: 22px !important;