移动端页面

src/views/components/footerPhone.vue

 <template>
     <div class="roomFooter">
-            <el-button type="danger" @click="exitRoom" v-if="!roleFlag">退出房间</el-button>
-            <el-button type="danger" @click="exitRoom" v-if="roleFlag">解散房间</el-button>
+        <!-- <el-button type="danger" @click="exitRoom" v-if="!roleFlag">退出房间</el-button>
+            <el-button type="danger" @click="exitRoom" v-if="roleFlag">解散房间</el-button> -->
+        <div class="mic">
+            <img class="micImg" src="@/assets/mic_on.png" alt="" v-if="micFlag" @click="micClickOn" />
+            <img class="micImg" src="@/assets/mic_off.png" alt="" v-else @click="micClickOff" />
+        </div>
+        <div class="video">
+            <img class="videoImg" src="@/assets/video_on.png" alt="" v-if="videoFlag" @click="videoClickOn" />
+            <img class="videoImg" src="@/assets/video_off.png" alt="" v-else @click="videoClickOff" />
+        </div>
+        <div class="sharing">
+            <img class="sharImg" src="@/assets/screenShare_on.png" alt="" v-if="sharFlag" @click="sharClickOn" />
+            <img class="sharImg" src="@/assets/screenShare_off.png" alt="" v-else @click="sharClickOff" />
+
+        </div>
+        <div class="mediationPop">
+            <el-button type="warning" @click="mediationPop">调解</el-button>
+        </div>
+        <div class="outRoom">
+            <el-button type="danger" @click="exitRoom" v-if="!roleFlag">退出</el-button>
+            <el-button type="danger" @click="exitRoom" v-if="roleFlag">解散</el-button>
+        </div>
     </div>
 </template>
-  
+
 <script>
 import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
 export default {
     },
 };
 </script>
-  
+
 <style scoped>
 .roomFooter {
     width: 100%;
     height: 100%;
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.mic,
+.video,
+.sharing
+ {
+    cursor: pointer;
+    width: 10%;
+    height: 100%;
+    display: flex;
     align-items: center;
-    flex-direction: row-reverse;
+    justify-content: center;
+}
+
+.micImg,
+.videoImg,
+.sharImg {
+    width: 40px;
+    height: 40px;
 }
-</style>
-  
-  
-  
+</style>

src/views/room.vue

 <template>
   <div class="page">
+    <div class="iconImg">
+      <i class="el-icon-d-arrow-left"></i>
+      <!-- <i class="el-icon-d-arrow-right"></i> -->
+    </div>
     <div class="roompage" @mouseover="mouseHover" v-if="modileFlag">
       <div class="txtContent">
         <el-tag type="danger" @click="txtContent" v-if="modileFlag">会议内容</el-tag>
       </div>
     </div>
     <div class="roomPhone" v-if="!modileFlag">
-      <div class="header">
+      <div class="bodyPhone">
+        <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>
+      </div>
+      <div class="footerPhone">
+        <roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
+      </div>
+      <!-- <div class="header">
         <roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
       </div>
       <div class="bodyVideo">
         <div :class="userClassPhone" v-for="(item, index) in userList" :key="index" :id="item">
           <div class="userNamePhone">{{ item }}</div>
         </div>
-      </div>
+      </div> -->
     </div>
     <!-- 语音转文字弹窗 -->
     <el-drawer title="会议内容" :visible.sync="textVisible" :modal="false">
-      <!-- <div style="margin-left: 20px; margin-bottom: 10px">
-        <div
-          style="
-            width: 100%;
-            display: flex;
-            justify-content: space-around;
-            margin-bottom: 10px;
-          "
-        >
-          <el-upload
-            ref="upload"
-            :limit="1"
-            :action="UploadUrl()"
-            :headers="headers"
-            :data="filedata"
-            :on-change="beforeUpload"
-            :on-success="handlSuccess"
-            :file-list="fileList"
-            v-if="appFlag"
-          >
-            <el-button slot="trigger" size="small" type="primary"
-              >申请人上传证据</el-button
-            >
-          </el-upload>
-          <el-upload
-            v-if="resFlag"
-            ref="upload1"
-            :limit="1"
-            :action="UploadUrl()"
-            :headers="headers1"
-            :data="filedata1"
-            :on-change="beforeUpload1"
-            :on-success="handlSuccess1"
-            :file-list="fileList1"
-          >
-            <el-button slot="trigger" size="small" type="primary"
-              >被申请人上传证据</el-button
-            >
-          </el-upload>
-          <el-upload
-            v-if="updataFlag"
-            ref="upload3"
-            :limit="1"
-            :action="UploadUrl()"
-            :headers="headers3"
-            :data="filedata3"
-            :on-change="beforeUpload3"
-            :on-success="handlSuccess3"
-            :file-list="fileList3"
-            accept=".doc,.docx"
-          >
-            <el-button slot="trigger" size="small" type="primary"
-              >上传调解书</el-button
-            >
-          </el-upload>
-        </div>
-        <div class="list">
-          <div class="applicant" v-if="applicantFile.length > 0">
-            <div>申请人证据</div>
-            <div
-              style="color: #104fad; cursor: pointer"
-              v-for="(item, index) in applicantFile"
-              :key="index"
-              @click="preview(item, 0)"
-            >
-              {{ item.annexName }}
-            </div>
-          </div>
-          <div class="res" v-if="resFile.length > 0">
-            <div>被申请人证据</div>
-            <div
-              style="color: #104fad; cursor: pointer"
-              v-for="(item, index) in resFile"
-              :key="index"
-              @click="preview(item, 0)"
-            >
-              {{ item.annexName }}
-            </div>
-          </div>
-          <div class="mediate" v-if="mediateFile.length > 0">
-            <div>调解书</div>
-            <div
-              style="color: #104fad; cursor: pointer"
-              v-for="(item, index) in mediateFile"
-              :key="index"
-              @click="preview(item, 1)"
-            >
-              {{ item.annexName }}
-            </div>
-          </div>
-        </div>
-      </div> -->
       <quill-editor ref="myQuillEditor" v-model="contentValue" :options="editorOption" @blur="onEditorBlur($event)"
         @focus="onEditorFocus($event)" @ready="onEditorReady($event)"></quill-editor>
       <el-button class="updataBtn" @click="updataClick" type="primary" :disabled="!updataFlag">确认修改内容</el-button>
       resFlag: null,
       appFlag: null,
       userClassPhone: "userVideoPhone",
-      userList: [],
+      userList: [1,2,3,4,5],
       userHeight: "100%",
       userPhoneHeight: "92%",
       userSign: "",
       filedata3: {
         annexType: 7,
         officeFlag: 0,
-        isMediaBook:1,
+        isMediaBook: 1,
         caseId: null,
       },
       fileList3: [],
   },
   methods: {
     UploadUrl() {
-      return window.location.origin + "/tiaojie/video/upload";
+      return window.location.origin + "/tjformal/video/upload";
     },
     /**点击开启麦克风图标，关闭麦克风 */
     micClickOn() {
         const streamType = event.streamType;
         const userId = event.userId;
         if (streamType == "main") {
-          // if (this.hostId == userId) {
-          //   alert("主持人已经解散会议");
-          //   this.$router.push({
-          //     name: "Home",
-          //   });
-          //   this.userList = [];
-          //   return;
-          // }
           let deleteIndex = this.userList.indexOf(userId);
           this.userList = this.userList.filter((item) => item !== userId);
           if (deleteIndex !== -1) {
             this.userList.splice(deleteIndex, 1);
           }
-          // if (this.modileFlag) {
-          //   // this.userHeight = getHeight(this.userList);
-          // } else {
-          //   this.userClassPhone = getWidthPhone(this.userList);
-          // }
           Object.keys(this.asrList).forEach((key) => {
             this.asrList[userId].stop();
           });
   async mounted() {
     if (this.userList.length == 1) {
       this.videoClass = "videoItem3";
+      this.userClassPhone = "userVideoPhone1";
     } else if (this.userList.length > 1) {
       this.videoClass = "videoItem1";
+      this.userClassPhone = "userVideoPhone2";
     } else if (this.userList.length < 1) {
       this.videoClass = "videoItem";
+      this.userClassPhone = "userVideoPhone";
     }
     // 判断设备类型
     this.modileFlag = getModile();
 </script>
 
 <style scoped>
+.iconImg{
+  position: fixed;
+  top: 50%;
+  height: 40px;
+  width: 40px;
+  /* right: 10px; */
+}
 .roompage {
   width: 100%;
   height: 100vh;
   color: #ffffff;
 }
 
-.header {
+/* .header {
   width: 100%;
   height: 8%;
   background-color: #716c6c;
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-}
-
+} */
+/* 移动端样式 */
 .roomPhone {
   width: 100%;
   height: 100vh;
+  background-color: yellow;
+}
+.footerPhone{
+  width: 100%;
+  height: 8%;
+  background-color: greenyellow;
 }
+.bodyPhone{
+  width: 100%;
+  height: 92%;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  align-items: center;
+  overflow-y: scroll;
+  background-color: rebeccapurple;
+}
+/* 移动端样式 */
 
 .bodyVideo {
   width: 100%;
   background-color: yellow;
   position: relative;
 }
-
-.userVideoPhone1 {
-  width: 50%;
-  flex-basis: calc(33.333% - 3px);
-  max-width: calc(33.333% - 3px);
-  height: 200px;
-  /* height: 0; */
-  /* padding-bottom: calc(33.333% - 3px); */
-  margin-bottom: 3px;
+.userVideoPhone1{
+  width: 100%;
+  height: 49%;
+  background-color: rgb(43, 0, 255);
+  position: relative;
+}
+.userVideoPhone2{
+  width: 150px;
+  height: 150px;
+  background-color: rgb(43, 0, 255);
   position: relative;
 }