zc

src/components/LabStats/videoStats.vue

@@ -4,11 +4,9 @@
     <div class="corner-deco bl"></div><div class="corner-deco br"></div>
     <div class="panel-title">实验室视频监控</div>
     <div class="video-content">
-      <webRTC v-if="webRtcType"></webRTC>
-      <mpegts-video style="display: inline-block;margin:0 5px 5px 0;"
-      :videoProps="item" v-for="(item,index) in mpegtsList" :key="index"></mpegts-video>
-      <videoForMod v-for="(item,index) in modList" :key="index"
-                   :deviceNo="item.deviceNo"></videoForMod>
+      <webRTC v-if="webRtcType" class="video-for-min-box"></webRTC>
+      <mpegts-video class="video-for-min-box" :videoProps="item" v-for="(item,index) in mpegtsList" :key="index"></mpegts-video>
+      <videoForMod class="video-for-min-box" v-for="(item,index) in modList" :key="index" :deviceNo="item.deviceNo"></videoForMod>
     </div>
   </div>
 </template>
@@ -31,7 +29,13 @@
             height: 280, //(高度:非必传-默认338)
             url: 'https://192.168.166.11/zlmedia/gpfas/286fe8bdb0ad41f89323eaf6bd5d9f39-9ac65e490f8b43caa060e83938f47e53-29.live.flv',
             cameraIndexCode: 'mpegtsa',
-          }
+          },
+          {
+            width: 470, //(宽度:非必传-默认600)
+            height: 280, //(高度:非必传-默认338)
+            url: 'https://192.168.166.11/zlmedia/gpfas/286fe8bdb0ad41f89323eaf6bd5d9f39-9ac65e490f8b43caa060e83938f47e53-29.live.flv',
+            cameraIndexCode: 'mpegtsb',
+          },
         ],
         pollTimer:null,
         page:1,
@@ -163,15 +167,29 @@
     z-index: 2;
     flex: 1;
     min-height: 0;
-    .videoForMod:nth-child(2){
-      margin-left:10px;
+    /*.videoForMod:nth-child(2){*/
+      /*margin-left:10px;*/
+    /*}*/
+    /*.videoForMod:nth-child(3){*/
+      /*margin-top:5px;*/
+    /*}*/
+    /*.videoForMod:nth-child(4){*/
+      /*margin-top:5px;*/
+      /*margin-left:10px;*/
+    /*}*/
+    .video-for-min-box:nth-child(1){
+      margin-right:10px;
+    }
+    .video-for-min-box:nth-child(2){
+
     }
-    .videoForMod:nth-child(3){
-      margin-top:5px;
+    .video-for-min-box:nth-child(3){
+      margin-top:10px;
+      margin-right:10px;
     }
-    .videoForMod:nth-child(4){
-      margin-top:5px;
-      margin-left:10px;
+    .video-for-min-box:nth-child(4){
+      margin-top:10px;
+      margin-right:10px;
     }
   }
 </style>

src/components/LabStats/webRTC.vue

@@ -6,7 +6,7 @@
         autoplay
         muted
         playsinline
-        style="width:470px;height:290px;background-color: #000; display: block;"
+        style="width:470px;height:280px;background-color: #000; display: block;"
       ></video>
       <p class="right-text">AI</p>
     </div>
@@ -122,7 +122,7 @@
 <style scoped lang="scss">
     .webRTC {
       width:470px;
-      height:290px;
+      height:280px;
       display: inline-block;
       position: relative;
       .right-text{

src/components/videoForMod/videoForMod.vue

@@ -21,7 +21,7 @@
     data() {
       return {
         width:470,
-        height:290,
+        height:280,
         videoData:null,
         //全屏视频参数
         fullVideoProps:{},
@@ -76,6 +76,6 @@
     .videoForMod {
       display: inline-block;
       width:470px;
-      height:290px;
+      height:280px;
     }
 </style>