src/views/components/footerPhone.vue

@@ -73,7 +73,7 @@ export default {
     async mounted() {
         this.roomId = this.$route.query.roomId;
         let roleFlag = this.$route.query.flag;
-        this.roleFlag = roleFlag;
+        this.roleFlag = roleFlag || false;
         if (roleFlag) {
             await this.startVideoFn();
         }

src/views/room.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
-    <div class="iconImg">
-      <i class="el-icon-d-arrow-left"></i>
+    <div class="iconImg" v-if="!modileFlag && rightType" @click="checkList(1)">
+      <i class="el-icon-d-arrow-left" style="font-size: 30px;color: aqua;"></i>
       <!-- <i class="el-icon-d-arrow-right"></i> -->
     </div>
     <div class="roompage" @mouseover="mouseHover" v-if="modileFlag">
@@ -27,17 +27,22 @@
           :videoFlag="videoFlag" :sharFlag="sharFlag"></roomFooter>
       </div>
     </div>
-    <div class="roomPhone" v-if="!modileFlag">
-      <div class="bodyPhone">
-        <div :class="userClassPhone" id="localStream">
-          <div class="userNamePhone">{{ userId }}</div>
+    <div class="roomPhone">
+      <div class="videoPage">
+        <div :class="sharingType">
         </div>
-        <div :class="userClassPhone" v-for="(item, index) in userList" :key="index" :id="item">
-          <div class="userNamePhone">{{ item }}</div>
+        <div :class="bodyPhoneType">
+          <div :class="userClassPhone" id="localStream">
+            <div class="userNamePhone">{{ userId }}</div>
+          </div>
+          <div :class="userClassPhone" v-for="(item, index) in userList" :key="index" :id="item">
+            <div class="userNamePhone">{{ item }}</div>
+          </div>
+          <i class="el-icon-d-arrow-right" style="font-size: 30px;color: aqua;" @click="checkList(2)" v-if="!rightType"></i>
+        </div>
+        <div class="footerPhone">
+          <roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
         </div>
-      </div>
-      <div class="footerPhone">
-        <roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
       </div>
       <!-- <div class="header">
         <roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
@@ -162,12 +167,15 @@ export default {
   },
   data() {
     return {
+      rightType:true,
+      sharingType: "sharing",
+      bodyPhoneType: "bodyPhone",
       videoList: "videoList",
       videoClass: "videoItem",
       resFlag: null,
       appFlag: null,
       userClassPhone: "userVideoPhone",
-      userList: [1,2,3,4,5],
+      userList: [1, 2],
       userHeight: "100%",
       userPhoneHeight: "92%",
       userSign: "",
@@ -236,6 +244,22 @@ export default {
     UploadUrl() {
       return window.location.origin + "/tjformal/video/upload";
     },
+    /**移动端点击换出/隐藏视频列表 */
+    checkList(data) {
+      if (data == 1) {
+        if (this.userList.length < 1) {
+          this.userClassPhone = "userVideoPhone2"
+        }
+        this.sharingType = "sharing1";
+        this.bodyPhoneType = "bodyPhone1";
+        this.rightType = false;
+      } else if (data == 2) {
+        console.log("UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUu");
+        this.sharingType = "sharing1";
+        this.bodyPhoneType = "bodyPhone2";
+        this.rightType = true;
+      }
+    },
     /**点击开启麦克风图标，关闭麦克风 */
     micClickOn() {
       trtc.updateLocalAudio({ mute: true }).then(() => {
@@ -740,13 +764,15 @@ export default {
 </script>
 
 <style scoped>
-.iconImg{
+.iconImg {
   position: fixed;
-  top: 50%;
+  z-index: 9999;
+  top: 40%;
   height: 40px;
   width: 40px;
-  /* right: 10px; */
+  right: 0px;
 }
+
 .roompage {
   width: 100%;
   height: 100vh;
@@ -884,14 +910,15 @@ export default {
 .roomPhone {
   width: 100%;
   height: 100vh;
-  background-color: yellow;
 }
-.footerPhone{
+
+.footerPhone {
   width: 100%;
   height: 8%;
   background-color: greenyellow;
 }
-.bodyPhone{
+
+.bodyPhone {
   width: 100%;
   height: 92%;
   display: flex;
@@ -899,7 +926,31 @@ export default {
   flex-wrap: wrap;
   align-items: center;
   overflow-y: scroll;
-  background-color: rebeccapurple;
+}
+
+.bodyPhone1 {
+  width: 40%;
+  height: 92%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  align-items: center;
+  overflow-y: scroll;
+}
+.bodyPhone2{
+  width: 0;
+  height: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  align-items: center;
+  overflow-y: scroll;
 }
 /* 移动端样式 */
 
@@ -914,19 +965,21 @@ export default {
 .userVideoPhone {
   width: 100%;
   height: 100%;
-  background-color: yellow;
+  background-color: rgb(124, 124, 104);
   position: relative;
 }
-.userVideoPhone1{
+
+.userVideoPhone1 {
   width: 100%;
   height: 49%;
-  background-color: rgb(43, 0, 255);
+  background-color: rgb(161, 160, 169);
   position: relative;
 }
-.userVideoPhone2{
+
+.userVideoPhone2 {
   width: 150px;
   height: 150px;
-  background-color: rgb(43, 0, 255);
+  background-color: rgb(161, 160, 169);
   position: relative;
 }
 
@@ -958,4 +1011,27 @@ export default {
   margin-bottom: 10px;
   color: #38393b;
 }
+
+.videoPage {
+  width: 100%;
+  height: 100vh;
+}
+
+.sharing1 {
+  width: 100%;
+  height: 92%;
+  background: yellow;
+}
+
+.sharing {
+  width: 0;
+  height: 0;
+}
+
+.el-icon-d-arrow-right {
+  position: absolute;
+  left: 0;
+  top: 45%;
+  z-index: 999;
+}
 </style>

src/views/test.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="content">
-      <div class="screenShare" v-if="screenShareFlag"></div>
+      <div class="screenShare"></div>
       <div :class="videoList">
         <div :class="videoClass" v-for="(item, index) in vivdeoList"></div>
       </div>
@@ -27,7 +27,7 @@ export default {
   methods: {
     screenShare() {
       this.videoList = "videoList1";
-      this.screenShareFlag = true;
+      // this.screenShareFlag = true;
       this.videoClass = "videoItem2";
     },
     screenShareQ(){