修改视频中心页面仓库图代码

src/views/monitor/videos/index.vue

@@ -49,11 +49,13 @@
           </div> -->
           <!-- 11 -->
         </div>
+        <div class="shipinscons">
           <div class="shipinscon">
 
             <div class="shipinstu">
+              <img src="/image/cangkutu.png"/>
               <!-- 111入侵报警 -->
-            <div class="ruqinbaojing" v-show="showRuqinbaojing">
+              <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>
@@ -83,7 +85,7 @@
               </div>
               <!-- 111end -->
               <!-- 222视频监控 -->
-            <div class="ruqinbaojing" v-show="showShipinjiankong">
+              <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>
@@ -103,7 +105,7 @@
               </div>
               <!-- 2222end -->
               <!-- 333门禁管理 -->
-            <div class="ruqinbaojing" v-show="showMenjinguanli">
+              <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>
@@ -116,7 +118,7 @@
               </div>
               <!-- 333end -->
               <!--444门电子围栏-->
-            <div class="ruqinbaojing" v-show="showDianziweilan">
+              <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>
@@ -132,6 +134,7 @@
               </div>
               <!-- 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;
+  .shipinscons {height: 95%;text-align: center;
-  padding: 20px 50px 20px 50px;background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
+    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;
+  .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;