Forráskód Böngészése

添加首页视频监控

East 4 éve
szülő
commit
21bcf1c243
2 módosított fájl, 32 hozzáadás és 4 törlés
  1. 30 3
      src/views/home/Home.vue
  2. 2 1
      src/views/home/swiperMulti.vue

+ 30 - 3
src/views/home/Home.vue

@@ -69,7 +69,12 @@
             </div>
         </section>
         <footer class="footer">
-            <swiperMulti @onOpen="onOpen" @openItem="openItem"></swiperMulti>
+            <div class="video">
+                <div class="video-content" @click="toVideo">
+                    <div class="chart-tab-title">视频监控</div>
+                </div>
+            </div>
+            <div class="swiper"><swiperMulti @onOpen="onOpen" @openItem="openItem"></swiperMulti></div>
             <div class="control-log">
                 <div class="control-content">
                     <div class="chart-tab-title">控制日志</div>
@@ -271,6 +276,9 @@ export default {
                     this.echartsList = [arr1, arr2, arr3];
                 }
                 this.isQk = true;
+        },
+        toVideo() {
+            this.$router.push('/monitor')
         }
     },
     mounted() {
@@ -528,10 +536,29 @@ export default {
         margin-top: 10px;
         height: 33.3%;
         justify-content: space-between;
+        > .video {
+            width: 21%;
+            height: 100%;
+            margin: 0 10px;
+            > .video-content {
+                cursor: pointer;
+                width: 100%;
+                height: 100%;
+                border-radius: 8px;
+                // margin: 0 10px;
+                background-color: #001346;
+                // display: flex;
+                // flex-direction: column;
+                overflow: hidden;
+            }
+        }
+        > .swiper {
+            width: 61%;
+        }
         > .control-log {
-            width: 20%;
+            width: 21%;
             height: 100%;
-            margin: 0 10px 0 22px;
+            margin: 0 10px;
             > .control-content {
                 display: flex;
                 border-radius: 8px;

+ 2 - 1
src/views/home/swiperMulti.vue

@@ -261,11 +261,12 @@ export default {
 <style lang="scss" scope>
 .swiperMulti {
     box-sizing: border-box;
-    width: 79%;
+    width: 93%;
     height: 100%;
     position: relative;
     cursor: pointer;
     overflow: hidden;
+    margin: auto;
     > .guide{
         position: absolute;
         font-size: 60px;