实时预览布局

src/views/livePreview/components/videoBox1.vue

@@ -1,18 +1,18 @@
 <template>
-  <el-card style="border: none;border-radius: 0;height: 100%;background-color: transparent" :body-style="{ height:'100%', padding: '0px', background: 'transparent',textAlign:'-webkit-center' }">
+  <el-card style="border: none;border-radius: 0;height: 100%;background-color: transparent" :body-style="{ padding: '0px', background: 'transparent',textAlign:'-webkit-center' }">
     <el-row class='mainBox' :style="mainBoxStyle">
       <el-col :span='number' v-for='(item, index) in boxList.slice(boxListIndex)' :key='item.boxId'
-              :id="'childBox_' + item.boxId" class='childBox' :style='{ height: heightActive }'
-              @click.native='setActiveBox(item)' @dblclick.native="changeToOne(item)"
-              :class='{ redBorder: ifShowRedBorder(item) }'>
+        :id="'childBox_' + item.boxId" class='childBox' :style='{ height: heightActive }'
+        @click.native='setActiveBox(item)' @dblclick.native="changeToOne(item)"
+        :class='{ redBorder: ifShowRedBorder(item) }'>
         <div>
           <span class="title">{{ item.name }}</span>
         </div>
         <!-- v-if和v-show可以考虑一下 -->
         <webrtc-player v-if="(item.code === 'H264' || item.code !== 'H265') && item.mainUrl" :video-src='active===1 ? item.mainUrl : item.auxiliaryUrl' :video-id="item.boxId"
-                       :camera-name="item.name" ref='player' @destroy="close" :key="index" style='width: 100%' />
+          :camera-name="item.name" ref='player' @destroy="close" :key="index" style='width: 100%' />
         <jessibucaBox v-if="item.code === 'H265' && item.mainUrl" :video-src='active===1 ? item.mainUrl : item.auxiliaryUrl' :video-id="item.boxId"
-                      :camera-name="item.name" ref='player' @destroy="close"></jessibucaBox>
+          :camera-name="item.name" ref='player' @destroy="close"></jessibucaBox>
         <span v-if="!item.mainUrl" style="color: white">无信号</span>
       </el-col>
     </el-row>
@@ -118,12 +118,12 @@ export default {
         // 以宽为基准，高度会有剩余空间
         this.mainBoxStyle = {
           width: `${containerWidth}px`,
-          height: '100%',
+          height: `${heightBasedOnWidth}px`,
         };
       } else {
         // 以高为基准，宽度会有剩余空间
         this.mainBoxStyle = {
-          width: '100%',
+          width: `${widthBasedOnHeight}px`,
           height: `${containerHeight}px`,
         };
       }