更新

src/views/live/roomMeet.vue

@@ -6,12 +6,40 @@
           <span>{{ roomInfos.title }}</span>
         </el-col>
         <el-col :span="24" class="video">
-          <div id="look-video" class="video-box col-div" style="justify-content: flex-end"></div>
+          <el-col :span="24" class="videoMeet">
+            <el-col :span="18" class="one">
+              <!-- <div id="look-video" class="video-box col-div" style="justify-content: flex-end"></div> -->
+              1
+            </el-col>
+            <el-col :span="6" class="two">
+              <el-col :span="24" class="twoOne">
+                2
+              </el-col>
+              <el-col :span="24" class="twoOne">
+                3
+              </el-col>
+              <el-col :span="24" class="twoOne">
+                4
+              </el-col>
+            </el-col>
+            <el-col :span="6" class="three">
+              5
+            </el-col>
+            <el-col :span="6" class="three">
+              6
+            </el-col>
+            <el-col :span="6" class="three">
+              7
+            </el-col>
+            <el-col :span="6" class="three">
+              8
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="videoBtn">
+            <el-button type="success" round @click="liveon()" size="mini"><i class="el-icon-camera-solid"></i></el-button>
+          </el-col>
         </el-col>
         <el-col :span="24" class="chat">
-          <el-col :span="24" class="chatList">
-            <el-button type="success" round @click="liveon()">成功按钮</el-button>
-          </el-col>
           <el-col :span="24" class="chatList">
             聊天列表
           </el-col>
@@ -167,13 +195,37 @@ export default {
     font-weight: bold;
   }
   .video {
-    background: #000;
+    position: relative;
+    height: 280px;
+    overflow: hidden;
+    // background: #000;
     margin: 0 0 10px 0;
-    .videoLeft {
-      height: 200px;
+    .videoMeet {
+      .one {
+        height: 210px;
+        overflow: hidden;
+        border: 1px solid red;
+      }
+      .two {
+        height: 210px;
+        overflow: hidden;
+        border: 1px solid blue;
+        .twoOne {
+          height: 70px;
+          overflow: hidden;
+          border: 1px solid blue;
+        }
+      }
+      .three {
+        height: 70px;
+        overflow: hidden;
+        border: 1px solid cyan;
+      }
     }
-    .videoRight {
-      height: 200px;
+    .videoBtn {
+      position: absolute;
+      top: 10px;
+      left: 10px;
     }
   }
   .chat {

vue.config.js

@@ -20,20 +20,20 @@ module.exports = {
     //api地址前缀
     proxy: {
       '/weixin': {
-        target: 'http://zb.liaoningdoupo.com',
+        target: 'https://zb.liaoningdoupo.com',
         changeOrigin: true,
         ws: true,
       },
       '/files': {
-        target: 'http://zb.liaoningdoupo.com',
+        target: 'https://zb.liaoningdoupo.com',
       },
       '/api': {
-        target: 'http://zb.liaoningdoupo.com',
+        target: 'https://zb.liaoningdoupo.com',
         changeOrigin: true,
         ws: true,
       },
       '/wxtoken': {
-        target: 'http://zb.liaoningdoupo.com',
+        target: 'https://zb.liaoningdoupo.com',
         changeOrigin: true,
         ws: true,
         pathRewrite: {
@@ -41,7 +41,7 @@ module.exports = {
         },
       },
       '/ws': {
-        target: 'http://zb.liaoningdoupo.com',
+        target: 'https://zb.liaoningdoupo.com',
         ws: true,
       },
     },