hhhh

src/layout/live/detailInfo.vue

@@ -52,12 +52,17 @@
               </el-col>
               <el-col :span="6" class="two">
                 <el-col v-show="zjrshow" :span="24" class="twoOne" v-for="(item, index) in zjrList" :key="index">
-                  <p>
-                    <span class="zjr-sel-info">{{ item.zjrname }}</span>
-                    <span class="twobtn">
-                      <el-button type="danger" size="mini" @click="zjrChange(item.zjrid)">主讲</el-button>
-                    </span>
-                  </p>
+                  <el-col :span="14">
+                    <div :id="forOtherId(item.zjrid)" class="video-box col-div othevideo" style="justify-content: flex-end"></div>
+                  </el-col>
+                  <el-col :span="10">
+                    <p>
+                      <span>{{ item.zjrname }}</span>
+                      <span>
+                        <el-button type="danger" size="mini" @click="zjrChange(item.zjrid)">主讲</el-button>
+                      </span>
+                    </p>
+                  </el-col>
                 </el-col>
               </el-col>
             </el-col>
@@ -410,32 +415,13 @@ export default {
         if (usertempid_) {
           const usersplit_ = usertempid_.substring(0, 5);
           if (usersplit_ === 'other') {
-            this.index_ = this.index_ + 1;
-            const id_ = 'othe-video-' + this.index_;
-            const ovid = usertempid_.substring(6);
-            if (this.index_ === 1) {
-              this.ov1 = ovid;
-            } else if (this.index_ === 2) {
-              this.ov2 = ovid;
-            } else if (this.index_ === 3) {
-              this.ov3 = ovid;
-            } else if (this.index_ === 4) {
-              this.ov4 = ovid;
-            } else if (this.index_ === 5) {
-              this.ov5 = ovid;
-            } else if (this.index_ === 6) {
-              this.ov6 = ovid;
-            } else if (this.index_ === 7) {
-              this.ov7 = ovid;
-            }
-            this.ov1 = '';
+            const id_ = 'othe-video-' + usertempid_;
             remoteStream.play(id_);
           } else if (usersplit_ === 'wxxcx') {
             const id_ = 'look-video-' + usertempid_;
             remoteStream.play(id_);
           } else if (usersplit_ === 'meetu') {
-            const ovid = usertempid_.substring(6);
-            const id_ = 'look-video-' + ovid;
+            const id_ = 'look-video-' + usertempid_;
             remoteStream.play(id_);
           }
         }
@@ -521,32 +507,6 @@ export default {
         }
       }
     },
-    async roomAnchorid(type) {
-      const data = {};
-      data.roomid = this.id;
-      if (type === 'othe1') {
-        data.otheid = this.ov1;
-      } else if (type === 'othe2') {
-        data.otheid = this.ov2;
-      } else if (type === 'othe3') {
-        data.otheid = this.ov3;
-      } else if (type === 'othe4') {
-        data.otheid = this.ov4;
-      } else if (type === 'othe5') {
-        data.otheid = this.ov5;
-      } else if (type === 'othe6') {
-        data.otheid = this.ov6;
-      } else if (type === 'othe7') {
-        data.otheid = this.ov7;
-      }
-      const res = await this.updateanchor(data);
-      if (this.$checkRes(res)) {
-        this.$message({
-          message: '操作成功',
-          type: 'success',
-        });
-      }
-    },
     async cameraChange() {
       //await this.localStream_.switchDevice('video', this.cameraId);
     },
@@ -581,7 +541,10 @@ export default {
       }
     },
     forId(itemid) {
-      return 'look-video-wxxcx-' + itemid;
+      return 'look-video-meetu-' + itemid;
+    },
+    forOtherId(itemid) {
+      return 'othe-video-other-' + itemid;
     },
     // 关闭摄像头&麦克风
     handleClose(done) {
@@ -671,21 +634,19 @@ export default {
           overflow: hidden;
           background-color: white;
           .twoOne {
-            height: 30px;
+            height: 80px;
             width: 100%;
             overflow: hidden;
             span:first-child {
-              float: left;
-              width: 65%;
-              text-align: left;
+              width: 100%;
+              text-align: center;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
               // font-weight: bold;
             }
             span:last-child {
-              float: right;
-              width: 30%;
+              width: 100%;
             }
           }
         }
@@ -767,4 +728,12 @@ export default {
   background-color: black;
   grid-area: 1/1/3/4;
 }
+.othevideo {
+  margin: 10px 10px 10px 10px;
+  width: 80px;
+  height: 80px;
+  min-height: 80px;
+  background-color: black;
+  grid-area: 1/1/3/4;
+}
 </style>