解决冲突

.gitignore

@@ -21,4 +21,6 @@ pnpm-debug.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?
+node_modules
+/dist

package-lock.json

@@ -2044,49 +2044,6 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
-      },
-      "dependencies": {
-        "@vue/vue-loader-v15": {
-          "version": "npm:vue-loader@15.11.1",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
-          "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
-          "dev": true,
-          "requires": {
-            "@vue/component-compiler-utils": "^3.1.0",
-            "hash-sum": "^1.0.2",
-            "loader-utils": "^1.1.0",
-            "vue-hot-reload-api": "^2.3.0",
-            "vue-style-loader": "^4.1.0"
-          },
-          "dependencies": {
-            "hash-sum": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-              "dev": true
-            }
-          }
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2251,6 +2208,47 @@
         }
       }
     },
+    "@vue/vue-loader-v15": {
+      "version": "npm:vue-loader@15.11.1",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
+      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
+      "dev": true,
+      "requires": {
+        "@vue/component-compiler-utils": "^3.1.0",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "vue-hot-reload-api": "^2.3.0",
+        "vue-style-loader": "^4.1.0"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
+      }
+    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",

src/api/room.js

@@ -1,6 +1,6 @@
 import axios from "@/utils/request";
 let baseUrlZC = 'https://api.xayunmei.com/zhongcaiapi';
-let baseUrl = 'https://api.xayunmei.com/tiaojieapitest';
+let baseUrl = 'https://api.xayunmei.com/tiaojieapi';
 // let baseUrl = 'http://121.40.189.20:6001';
 // 开始云端录制
 export function startVideo(data) {

src/router/index.js

@@ -6,7 +6,7 @@ const routes = [
     {
         path: "/",
         component: () => import("../views/home.vue"),
-        redirect:'home'
+        redirect: 'home'
     },
     {
         path: "/home",
@@ -16,10 +16,10 @@ const routes = [
 
     },
     {
-      path:"/room",
+        path: "/room",
-      name:"Room",
+        name: "Room",
-      component:()=>import("../views/room.vue"),
+        component: () => import("../views/room.vue"),
-      meta:{title:"房间"}
+        meta: { title: "房间" }
     },
     {
         path:"/onlyOffice",

src/views/components/roomFooter.vue

@@ -1,176 +1,204 @@
 <template>
-    <div class="roomFooter">
+  <div class="roomFooter">
-      <div class="outRoom">
+    <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 type="danger" @click="exitRoom" v-if="roleFlag">解散房间</el-button>
+        >退出房间</el-button
+      >
+      <el-button type="danger" @click="exitRoom" v-if="roleFlag"
+        >解散房间</el-button
+      >
+    </div>
+    <div class="operation">
+      <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="operation">
+      <div class="video">
-        <div class="mic">
+        <img
-          <img class="micImg" src="@/assets/mic_on.png" alt="" v-if="micFlag" @click="micClickOn">
+          class="videoImg"
-          <img class="micImg" src="@/assets/mic_off.png" alt="" v-else @click="micClickOff">
+          src="@/assets/video_on.png"
-        </div>
+          alt=""
-        <div class="video">
+          v-if="videoFlag"
-          <img class="videoImg" src="@/assets/video_on.png" alt="" v-if="videoFlag" @click="videoClickOn">
+          @click="videoClickOn"
-          <img class="videoImg" src="@/assets/video_off.png" alt="" v-else @click="videoClickOff">
+        />
-        </div>
+        <img
-        <div class="sharing">
+          class="videoImg"
-          <img class="sharImg" src="@/assets/screenShare_on.png" alt="" v-if="sharFlag" @click="sharClickOn">
+          src="@/assets/video_off.png"
-          <img class="sharImg" src="@/assets/screenShare_off.png" alt="" v-else @click="sharClickOff">
+          alt=""
-        </div>
+          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>
-  </template>
+  </div>
+</template>
   
   <script>
-  import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
+import { startVideo, stopVideo, destructionRoom } from "@/api/room.js";
-  export default {
+export default {
-    name: 'Footer',
+  name: "Footer",
-    // props: [
+  props: ["micFlag","videoFlag","sharFlag"],
-    //     "roomId"
+  components: {},
-    // ],
+  data() {
-    components: {
+    return {
-  
+      roomId: null,
+      taskId: null,
+      roleFlag: true,
+      caseId: "",
+    };
+  },
+  methods: {
+    // 解散房间
+    destructionRoomFn(data) {
+      destructionRoom(data).then((res) => {
+        console.log(res, "解散房间");
+      });
     },
-    data() {
+    /**开启麦克风 */
-      return {
+    micClickOn() {
-        roomId: null,
+      this.$emit("micClickOn");
-        taskId: null,
-        roleFlag: true,
-        caseId: "",
-        micFlag: true,
-        videoFlag: true,
-        sharFlag: true,
-      };
     },
-    methods: {
+    /**关闭麦克风 */
-      // 解散房间
+    micClickOff() {
-      destructionRoomFn(data) {
+      this.$emit("micClickOff");
-        destructionRoom(data).then(res => {
-          console.log(res, "解散房间");
-        })
-      },
-      /**开启麦克风 */
-      micClickOn() {
-        this.micFlag = false;
-        this.$emit('micClickOn');
-      },
-      /**关闭麦克风 */
-      micClickOff() {
-        this.micFlag = true;
-        this.$emit('micClickOff');
-      },
-      /**开启摄像头 */
-      videoClickOn() {
-        this.videoFlag = false;
-        this.$emit('videoClickOn');
-      },
-      /**关闭摄像头 */
-      videoClickOff() {
-        this.videoFlag = true;
-        this.$emit('videoClickOff');
-      },
-      /**共享屏幕 */
-      sharClickOn(){
-        this.sharFlag = false;
-        this.$emit('sharClickOn');
-      },
-      /**关闭共享屏幕 */
-      sharClickOff(){
-        this.sharFlag = true;
-        this.$emit('sharClickOff');
-      },
-      exitRoom() {
-        if (this.roleFlag) {
-          this.stopVideoFn();
-          this.destructionRoomFn({ roomId: this.roomId })
-          this.$emit('exitRoom');
-        } else {
-          this.$emit('exitRoom');
-        }
-      },
-      async startVideoFn() {
-        await startVideo({
-          caseId: this.caseId,
-          roomId: this.roomId
-        }).then(res => {
-          this.taskId = res.data.taskId
-          console.log(res.data.taskId, "pppppp");
-        })
-      },
-      stopVideoFn() {
-        stopVideo(this.taskId).then(res => {
-          console.log(res, "KKKKKK");
-        })
-      },
     },
-    async mounted() {
+    /**开启摄像头 */
-      this.roomId = this.$route.query.roomId;
+    videoClickOn() {
-      this.caseId = this.$route.query.caseId;
+      this.$emit("videoClickOn");
-      let roleFlag = this.$route.query.flag;
+    },
-      this.roleFlag = roleFlag;
+    /**关闭摄像头 */
-      if (roleFlag) {
+    videoClickOff() {
-        await this.startVideoFn();
+      this.$emit("videoClickOff");
+    },
+    /**共享屏幕 */
+    sharClickOn() {
+      this.$emit("sharClickOn");
+    },
+    /**关闭共享屏幕 */
+    sharClickOff() {
+      this.sharFlag = true;
+      this.$emit("sharClickOff");
+    },
+    exitRoom() {
+      if (this.roleFlag) {
+        this.stopVideoFn();
+        this.destructionRoomFn({ roomId: this.roomId });
+        this.$emit("exitRoom");
+      } else {
+        this.$emit("exitRoom");
       }
-      // setTimeout(() => {
-      //     console.log(this.roomId, "房间号房间哈房间号房间哈房间号");
-      // });
     },
-  };
+    async startVideoFn() {
-  </script>
+      await startVideo({
+        caseId: this.caseId,
+        roomId: this.roomId,
+      }).then((res) => {
+        this.taskId = res.data.taskId;
+        console.log(res.data.taskId, "pppppp");
+      });
+    },
+    stopVideoFn() {
+      stopVideo(this.taskId).then((res) => {
+        console.log(res, "KKKKKK");
+      });
+    },
+  },
+  async mounted() {
+    this.roomId = this.$route.query.roomId;
+    this.caseId = this.$route.query.caseId;
+    let roleFlag = this.$route.query.flag;
+    this.roleFlag = roleFlag;
+    if (roleFlag) {
+      await this.startVideoFn();
+    }
+    // setTimeout(() => {
+    //     console.log(this.roomId, "房间号房间哈房间号房间哈房间号");
+    // });
+  },
+};
+</script>
   
   <style scoped>
-  .roomFooter {
+.roomFooter {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    display: flex;
+  display: flex;
-    flex-direction: row-reverse;
+  flex-direction: row-reverse;
-  }
+}
-  
+
-  .mic,
+.mic,
-  .video,
+.video,
-  .sharing,
+.sharing,
-  .outRoom {
+.outRoom {
-    cursor: pointer;
+  cursor: pointer;
-    width: 10%;
+  width: 10%;
-    height: 100%;
+  height: 100%;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
-  }
+}
-  
+
-  .operation {
+.operation {
-    width: 90%;
+  width: 90%;
-    height: 100%;
+  height: 100%;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-  }
+}
-  
+
-  .iconImg {
+.iconImg {
-    width: 30%;
+  width: 30%;
-    height: 60%;
+  height: 60%;
-  }
+}
-  
+
-  .title {
+.title {
-    color: aliceblue;
+  color: aliceblue;
-  }
+}
-  
+
-  .empty {
+.empty {
-    width: 60%;
+  width: 60%;
-    height: 100%;
+  height: 100%;
-  }
+}
-  
+
-  .mic,
+.mic,
-  .video,
+.video,
-  .sharing {
+.sharing {
-    width: 60px;
+  width: 60px;
-    height: 60px;
+  height: 60px;
-    margin-left: 20px;
+  margin-left: 20px;
-  }
+}
-  
+
-  .micImg,
+.micImg,
-  .videoImg,
+.videoImg,
-  .sharImg {
+.sharImg {
-    width: 40px;
+  width: 40px;
-    height: 40px;
+  height: 40px;
-  }
+}
-  </style>
+</style>

src/views/room.vue

@@ -2,16 +2,41 @@
   <div class="page">
     <div class="roompage" @mouseover="mouseHover" v-if="modileFlag">
       <div class="txtContent">
-        <el-tag type="danger" @click="txtContent">会议内容</el-tag>
+        <el-tag type="danger" @click="txtContent" v-if="modileFlag"
+          >会议内容</el-tag
+        >
       </div>
-      <div :class="userClass" :style="{ height: userHeight }" id="localStream">
+      <div class="content">
-        <div class="userName">{{ userId }}</div>
+        <div class="screenShare" v-if="screenShareFlag"></div>
+
+        <div :class="videoList">
+          <div :class="videoClass" id="localStream">
+            <div class="userName">{{ userId }}</div>
+          </div>
+          <div
+            :class="videoClass"
+            v-for="(item, index) in userList"
+            :key="index"
+            :id="item"
+          >
+            <div class="userName">{{ item }}</div>
+          </div>
+        </div>
       </div>
-      <div :class="userClass" :style="{ height: userHeight }" v-for="(item, index) in userList" :key="index" :id="item">
+      <div class="footerList">
-        <div class="userName">{{ item }}</div>
+        <roomFooter
-      </div>
+          @exitRoom="exitRoom"
-      <div class="footer">
+          @micClickOn="micClickOn"
-        <roomFooter @exitRoom="exitRoom" :roomId="roomId"></roomFooter>
+          @micClickOff="micClickOff"
+          @videoClickOn="videoClickOn"
+          @videoClickOff="videoClickOff"
+          @sharClickOn="sharClickOn"
+          @sharClickOff="sharClickOff"
+          :roomId="roomId"
+          :micFlag="micFlag"
+          :videoFlag="videoFlag"
+          :sharFlag="sharFlag"
+        ></roomFooter>
       </div>
     </div>
     <div class="roomPhone" v-if="!modileFlag">
@@ -55,22 +80,34 @@
         <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"
+            <div
-              @click="preview(item, 0)">
+              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"
+            <div
-              @click="preview(item, 0)">
+              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"
+            <div
-              @click="preview(item, 1)">
+              style="color: #104fad; cursor: pointer"
+              v-for="(item, index) in mediateFile"
+              :key="index"
+              @click="preview(item, 1)"
+            >
               {{ item.annexName }}
             </div>
           </div>
@@ -111,9 +148,10 @@ export default {
   },
   data() {
     return {
+      videoList: "videoList",
+      videoClass: "videoItem",
       resFlag: null,
       appFlag: null,
-      userClass: "userVideo5",
       userClassPhone: "userVideoPhone",
       userList: [],
       userHeight: "100%",
@@ -127,6 +165,7 @@ export default {
       localStreamAsr: null,
       contentValue: "",
       textVisible: false,
+      screenShareFlag: false,
       editorOption: {
         // Some Quill options...
       },
@@ -167,13 +206,73 @@ export default {
       },
       fileList3: [],
       editFlag: false,
+      micFlag: true,
+      videoFlag: true,
+      sharFlag: true,
     };
   },
   methods: {
+    /**点击开启麦克风图标，关闭麦克风 */
+    micClickOn() {
+      trtc.updateLocalAudio({ mute: true }).then(() => {
+        this.micFlag = false;
+        this.$message({
+          message: "麦克风关闭",
+          type: "success",
+        });
+      });
+    },
+    /**点击关闭麦克风图标，开启麦克风 */
+    micClickOff() {
+      trtc.updateLocalAudio({ mute: false }).then(() => {
+        this.micFlag = true;
+        this.$message({
+          message: "麦克风开启",
+          type: "success",
+        });
+      });
+    },
+    /**点击开启摄像头图标，关闭摄像头 */
+    videoClickOn() {
+      trtc.updateLocalVideo({ mute: true }).then(() => {
+        this.videoFlag = false;
+        this.$message({
+          message: "摄像头已关闭",
+          type: "success",
+        });
+      });
+    },
+    /**点击关闭摄像头图标，开启摄像头 */
+    videoClickOff() {
+      trtc.updateLocalVideo({ mute: false }).then(() => {
+        this.videoFlag = true;
+        this.$message({
+          message: "摄像头已开启",
+          type: "success",
+        });
+      });
+    },
+    /**共享屏幕 */
+    sharClickOn() {
+      this.sharFlag = false;
+      this.videoList = "videoList1";
+      this.videoClass = "videoItem2";
+      this.screenShareFlag = true;
+    },
+    /**关闭共享屏幕 */
+    sharClickOff() {
+      this.sharFlag = true;
+      this.videoList = "videoList";
+      this.screenShareFlag = false;
+      if(this.userList.length >= 1){
+        this.videoClass = "videoItem1";
+      }else{
+        this.videoClass = "videoItem";
+      }
+    },
     /**获取当前用户操作权限 */
     getMenuPermsByUserFn() {
       getMenuPermsByUser().then((res) => {
-        // console.log(res.perms, "KKKKKKKKKKKKKKKKKKKKKKKKKKKKKK");
         this.editFlag = res.perms.includes("caseManagement:list:editOffice");
       });
     },
@@ -362,13 +461,6 @@ export default {
                 `<span>${res.result.voice_text_str}</span>`;
             };
         }, 2000);
-
-        if (this.modileFlag) {
-          this.userClass = getWidth(this.userList);
-          this.userHeight = getHeight(this.userList);
-        } else {
-          this.userClassPhone = getWidthPhone(this.userList);
-        }
         setTimeout(() => {
           trtc.startRemoteVideo({ userId, streamType, view: `${userId}` });
         });
@@ -394,7 +486,6 @@ export default {
           this.userList.splice(deleteIndex, 1);
         }
         if (this.modileFlag) {
-          this.userClass = getWidth(this.userList);
           this.userHeight = getHeight(this.userList);
         } else {
           this.userClassPhone = getWidthPhone(this.userList);
@@ -435,6 +526,11 @@ export default {
     },
   },
   async mounted() {
+    if (this.userList.length == 1) {
+      this.videoClass = "videoItem";
+    } else if (this.userList.length > 1) {
+      this.videoClass = "videoItem1";
+    }
     // 判断设备类型
     this.modileFlag = getModile();
     let roomId = this.$route.query.roomId;
@@ -526,13 +622,34 @@ export default {
 .roompage {
   width: 100%;
   height: 100vh;
+}
+.content {
+  width: 100%;
+  height: 90%;
+  display: flex;
+}
+.videoList {
+  width: 100%;
+  height: 100%;
   display: flex;
-  align-items: center;
   justify-content: space-around;
   flex-wrap: wrap;
+  align-items: center;
+  overflow-y: scroll;
+  margin-bottom: 20px;
+  position: relative;
+}
+.videoList1 {
+  width: 20%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  align-items: center;
+  overflow-y: scroll;
+  margin-bottom: 20px;
   position: relative;
 }
-
 .txtContent {
   width: 100px;
   height: 50px;
@@ -543,39 +660,27 @@ export default {
   cursor: pointer;
 }
 
-.userVideo,
+.videoItem {
-.userVideo1,
+  width: 100%;
-.userVideo2,
+  height: 100%;
-.userVideo3,
+  background: red;
-.userVideo4,
+  border-radius: 20px;
-.userVideo5 {
+}
+.videoItem1 {
+  width: 32%;
+  height: 32%;
+  background: red;
+  border-radius: 20px;
+}
+.videoItem2 {
+  width: 90%;
+  height: 25%;
+  background: red;
+  border-radius: 20px;
+  margin-bottom: 20px;
   position: relative;
 }
 
-.userVideo5 {
-  width: 100%;
-}
-
-.userVideo {
-  width: 48%;
-}
-
-.userVideo1 {
-  width: 33%;
-}
-
-.userVideo2 {
-  width: 33%;
-}
-
-.userVideo3 {
-  width: 33%;
-}
-
-.userVideo4 {
-  width: 100%;
-}
-
 .footer {
   width: 100%;
   height: 10%;
@@ -584,7 +689,11 @@ export default {
   bottom: 0;
   z-index: 10;
 }
-
+.screenShare {
+  width: 80%;
+  height: 100%;
+  background: yellow;
+}
 .userName {
   border-radius: 10px;
   width: 90px;
@@ -598,7 +707,11 @@ export default {
   z-index: 9;
   color: #ffffff;
 }
-
+.footerList {
+  width: 100%;
+  height: 10%;
+  background: green;
+}
 .userNamePhone {
   border-radius: 10px;
   min-width: 20%;

src/views/test.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="page">
+    <div class="content">
+      <div class="screenShare" v-if="screenShareFlag"></div>
+      <div :class="videoList">
+        <div :class="videoClass" v-for="(item, index) in vivdeoList"></div>
+      </div>
+    </div>
+    <div class="footerList">
+      <button @click="screenShare">分享</button>
+      <button @click="screenShareQ">取消分享</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [],
+  data() {
+    return {
+      vivdeoList: [1],
+      videoClass: "videoItem",
+      videoList: "videoList",
+      screenShareFlag: false,
+    };
+  },
+  methods: {
+    screenShare() {
+      this.videoList = "videoList1";
+      this.screenShareFlag = true;
+      this.videoClass = "videoItem2";
+    },
+    screenShareQ(){
+       this.videoList = "videoList";
+       if(this.vivdeoList.length > 1){
+         this.videoClass = "videoItem1";
+       }else{
+         this.videoClass = "videoItem";
+       }
+      this.screenShareFlag = false;
+    }
+  },
+  mounted() {
+    if (this.vivdeoList.length == 1) {
+      this.videoClass = "videoItem";
+    } else if(this.vivdeoList.length > 1){
+      this.videoClass = "videoItem1";
+    }
+  },
+  watch: {},
+};
+</script>
+<style scoped>
+.page {
+  width: 100%;
+  height: 100vh;
+}
+.content {
+  width: 100%;
+  height: 90%;
+  display: flex;
+}
+.videoList {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  align-items: center;
+  overflow-y: scroll;
+  margin-bottom: 20px;
+}
+.videoList1 {
+  width: 20%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  align-items: center;
+  overflow-y: scroll;
+  margin-bottom: 20px;
+}
+.screenShare {
+  width: 80%;
+  height: 90%;
+  background: yellow;
+}
+.footerList {
+  width: 100%;
+  height: 10%;
+  background: green;
+}
+.videoItem {
+  width: 100%;
+  height: 100%;
+  background: red;
+  border-radius: 20px;
+}
+.videoItem1 {
+  width: 32%;
+  height: 32%;
+  background: red;
+  border-radius: 20px;
+}
+.videoItem2 {
+  width: 90%;
+  height: 25%;
+  background: red;
+  border-radius: 20px;
+  margin-bottom: 20px;
+}
+</style>

src/views/testRoom.vue

@@ -0,0 +1,854 @@
+<template>
+  <div class="page">
+    <div class="roompage" @mouseover="mouseHover" v-if="modileFlag">
+      <div class="txtContent">
+        <el-tag type="danger" @click="txtContent" v-if="modileFlag"
+          >会议内容</el-tag
+        >
+      </div>
+      <div class="content">
+        <div class="screenShare" v-if="screenShareFlag"></div>
+
+        <div :class="videoList">
+          <div :class="videoClass" id="localStream">
+            <div class="userName">{{ userId }}</div>
+          </div>
+          <div
+            :class="videoClass"
+            v-for="(item, index) in userList"
+            :key="index"
+            :id="item"
+          >
+            <div class="userName">{{ item }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="footerList">
+        <roomFooter
+          @exitRoom="exitRoom"
+          @micClickOn="micClickOn"
+          @micClickOff="micClickOff"
+          @videoClickOn="videoClickOn"
+          @videoClickOff="videoClickOff"
+          @sharClickOn="sharClickOn"
+          @sharClickOff="sharClickOff"
+          :roomId="roomId"
+          :micFlag="micFlag"
+          :videoFlag="videoFlag"
+          :sharFlag="sharFlag"
+        ></roomFooter>
+      </div>
+    </div>
+    <div class="roomPhone" v-if="!modileFlag">
+      <div class="header">
+        <roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
+      </div>
+      <div class="bodyVideo">
+        <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>
+    <!-- 语音转文字弹窗 -->
+    <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="https://api.xayunmei.com/tiaojieapi/video/upload"
+            :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="https://api.xayunmei.com/tiaojieapi/video/upload"
+            :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="editFlag"
+            ref="upload3"
+            :limit="1"
+            action="https://api.xayunmei.com/tiaojieapi/video/upload"
+            :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
+      >
+    </el-drawer>
+  </div>
+</template>
+  
+<script>
+import { getUsersig, reserveConferenceList } from "@/api/home";
+import {
+  secretaryRoleByUserId,
+  htmlToPDF,
+  selectById,
+  selectRoleMenuByCaseId,
+  getMenuPermsByUser,
+} from "@/api/room";
+import { getWidth, getHeight, getWidthPhone, getModile } from "@/utils/utils";
+import roomFooter from "./components/roomFooter.vue";
+import roomFooterPhone from "./components/footerPhone.vue";
+import ASR from "../utils/asr.esm.js";
+import TRTC from "trtc-sdk-v5";
+let trtc = null;
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import { quillEditor } from "vue-quill-editor";
+export default {
+  name: "App",
+  components: {
+    roomFooter,
+    roomFooterPhone,
+    quillEditor,
+  },
+  data() {
+    return {
+      videoList: "videoList",
+      videoClass: "videoItem",
+      resFlag: null,
+      appFlag: null,
+      userClassPhone: "userVideoPhone",
+      userList: [],
+      userHeight: "100%",
+      userPhoneHeight: "92%",
+      userSign: "",
+      roomId: "",
+      userId: null,
+      id: null,
+      showFlag: false,
+      modileFlag: false,
+      localStreamAsr: null,
+      contentValue: "",
+      textVisible: false,
+      screenShareFlag: false,
+      editorOption: {
+        // Some Quill options...
+      },
+      asrList: {},
+      updataFlag: true,
+      token: "",
+      applicantFile: [],
+      resFile: [],
+      mediateFile: [],
+      headers: {
+        // Authorization: "Bearer " + token,
+        Authorization: "",
+      },
+      filedata: {
+        annexType: 2,
+        officeFlag: 0,
+        caseId: null,
+      },
+      fileList: [],
+      headers1: {
+        // Authorization: "Bearer " + token,
+        Authorization: "",
+      },
+      filedata1: {
+        annexType: 12,
+        officeFlag: 0,
+        caseId: null,
+      },
+      fileList1: [],
+      headers3: {
+        // Authorization: "Bearer " + token,
+        Authorization: "",
+      },
+      filedata3: {
+        annexType: 7,
+        officeFlag: 0,
+        caseId: null,
+      },
+      fileList3: [],
+      editFlag: false,
+      micFlag: true,
+      videoFlag: true,
+      sharFlag: true,
+    };
+  },
+  methods: {
+    /**点击开启麦克风图标，关闭麦克风 */
+    micClickOn() {
+      trtc.updateLocalAudio({ mute: true }).then(() => {
+        this.micFlag = false;
+        this.$message({
+          message: "麦克风关闭",
+          type: "success",
+        });
+      });
+    },
+    /**点击关闭麦克风图标，开启麦克风 */
+    micClickOff() {
+      trtc.updateLocalAudio({ mute: false }).then(() => {
+        this.micFlag = true;
+        this.$message({
+          message: "麦克风开启",
+          type: "success",
+        });
+      });
+    },
+    /**点击开启摄像头图标，关闭摄像头 */
+    videoClickOn() {
+      trtc.updateLocalVideo({ mute: true }).then(() => {
+        this.videoFlag = false;
+        this.$message({
+          message: "摄像头已关闭",
+          type: "success",
+        });
+      });
+    },
+    /**点击关闭摄像头图标，开启摄像头 */
+    videoClickOff() {
+      trtc.updateLocalVideo({ mute: false }).then(() => {
+        this.videoFlag = true;
+        this.$message({
+          message: "摄像头已开启",
+          type: "success",
+        });
+      });
+    },
+    /**共享屏幕 */
+    sharClickOn() {
+      this.sharFlag = false;
+      this.videoList = "videoList1";
+      this.videoClass = "videoItem2";
+      this.screenShareFlag = true;
+    },
+    /**关闭共享屏幕 */
+    sharClickOff() {
+      this.sharFlag = true;
+      this.videoList = "videoList";
+      this.screenShareFlag = false;
+      if(this.userList.length >= 1){
+        this.videoClass = "videoItem1";
+      }else{
+        this.videoClass = "videoItem";
+      }
+    },
+    /**获取当前用户操作权限 */
+    getMenuPermsByUserFn() {
+      getMenuPermsByUser().then((res) => {
+        this.editFlag = res.perms.includes("caseManagement:list:editOffice");
+      });
+    },
+    beforeUpload(file, fileList) {
+      this.fileList = fileList;
+      if (file.name.indexOf("docx") == -1) {
+        this.filedata.officeFlag = 0;
+      } else {
+        this.filedata.officeFlag = 1;
+      }
+    },
+    // 文件上传成功
+    handlSuccess(res, file) {
+      this.$message({
+        message: "上传成功",
+        type: "success",
+      });
+      this.$refs.upload.clearFiles();
+      this.selectByIdFn(this.caseId);
+    },
+    beforeUpload1(file, fileList) {
+      this.fileList1 = fileList;
+      if (file.name.indexOf("docx") == -1) {
+        this.filedata1.officeFlag = 0;
+      } else {
+        this.filedata1.officeFlag = 1;
+      }
+    },
+    // 文件上传成功
+    handlSuccess1(res, file) {
+      this.$message({
+        message: "上传成功",
+        type: "success",
+      });
+      this.$refs.upload1.clearFiles();
+      this.selectByIdFn(this.caseId);
+    },
+    beforeUpload3(file, fileList) {
+      this.fileList3 = fileList;
+      this.filedata3.officeFlag = 1;
+    },
+    // 文件上传成功
+    handlSuccess3(res, file) {
+      this.$message({
+        message: "上传成功",
+        type: "success",
+      });
+      this.$refs.upload3.clearFiles();
+      this.selectByIdFn(this.caseId);
+    },
+    preview(item, flag) {
+      if (item.onlyOfficeFileId) {
+        this.$router.push({
+          path: "/onlyoffice",
+          query: { id: item.onlyOfficeFileId, flag: flag },
+        });
+      } else {
+        window.open(
+          "https://api.xayunmei.com/tiaojieapi" + item.annexPath,
+          "_black"
+        );
+      }
+    },
+    // 点击提交修改后的内容
+    updataClick() {
+      this.contentValue = this.contentValue.replace(/<br>/g, "");
+      htmlToPDF({
+        caseId: this.caseId,
+        htmlContent: this.contentValue,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.$message({
+            message: "提交修改成功",
+            type: "success",
+          });
+        } else {
+          this.$message({
+            message: res.msg,
+            type: "error",
+          });
+        }
+      });
+    },
+    onEditorBlur(quill) {
+      console.log("editor blur!", this.content, quill);
+    },
+    onEditorFocus(quill) {
+      if (!this.updataFlag) {
+        quill.enable(false);
+      } else {
+        quill.enable(true);
+      }
+      console.log("editor focus!", quill);
+    },
+    onEditorReady(quill) {
+      console.log("editor ready!", quill);
+    },
+    onEditorChange({ quill, html, text }) {
+      console.log("editor change!", quill, html, text);
+      this.content = html;
+    },
+    // 点击显示修改的文本框
+    txtContent() {
+      this.textVisible = true;
+      setInterval(() => {
+        this.selectByIdFn(this.caseId);
+      }, 8000);
+      this.selectRoleMenuByCaseIdFn(this.caseId);
+      this.getMenuPermsByUserFn();
+    },
+    /** 获取证据列表 */
+    selectByIdFn(id) {
+      selectById(id).then((res) => {
+        this.applicantFile = [];
+        this.resFile = [];
+        this.mediateFile = [];
+        let fileList = res.data.caseAttachList;
+        fileList.forEach((item) => {
+          if (item.annexType == 2) {
+            this.applicantFile.push(item);
+          } else if (item.annexType == 12) {
+            this.resFile.push(item);
+          } else if (item.annexType == 7) {
+            this.mediateFile.push(item);
+          }
+        });
+      });
+    },
+    // 鼠标滑过显示操作栏
+    mouseHover() {
+      this.showFlag = true;
+      setTimeout(() => {
+        this.showFlag = false;
+      }, 4000);
+    },
+    async exitRoom() {
+      // // 关闭识别
+      Object.keys(this.asrList).forEach((key) => {
+        this.asrList[key].stop();
+      });
+      this.localStreamAsr.stop();
+      await trtc.exitRoom();
+      await trtc.updateLocalVideo({ publish: false });
+      await trtc.updateLocalAudio({ publish: false });
+      await trtc.destroy();
+      this.$router.push({
+        name: "Home",
+      });
+    },
+    // 获取拉流信息
+    getPushVideo() {
+      trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, (event) => {
+        const userId = event.userId;
+        const streamType = event.streamType;
+        this.userList.push(userId);
+        setTimeout(() => {
+          let aoido = trtc.getAudioTrack(userId);
+          this.asrList[this.userList[this.userList.length - 1]] = new ASR({
+            secretKey: "INDrIXcT8YmomZBcsy0oNirnU0LTN4X7",
+            secretId: "AKID3xfHgroY4MQHvLXUXMwIQL1UjmbBX1Tv",
+            appId: 1304001529,
+            engine_model_type: "16k_zh",
+            voice_format: 1,
+            needvad: 1,
+            audioTrack: aoido,
+          });
+          this.asrList[this.userList[this.userList.length - 1]].start();
+          // 开始识别
+          this.asrList[
+            this.userList[this.userList.length - 1]
+          ].OnRecognitionStart = (res) => {
+            console.log("远端流：开始识别", res);
+          };
+          this.asrList[this.userList[this.userList.length - 1]].OnError = (
+            res
+          ) => {
+            console.log("远端流：识别失败", res);
+          };
+          // 一句话结束
+          this.asrList[this.userList[this.userList.length - 1]].OnSentenceEnd =
+            (res) => {
+              console.log("远端流：一句话结束", res);
+              this.contentValue =
+                this.contentValue +
+                `<h2>${userId}</h2>` +
+                `<span>${res.result.voice_text_str}</span>`;
+            };
+        }, 2000);
+
+        if (this.modileFlag) {
+          this.userHeight = getHeight(this.userList);
+        } else {
+          this.userClassPhone = getWidthPhone(this.userList);
+        }
+        setTimeout(() => {
+          trtc.startRemoteVideo({ userId, streamType, view: `${userId}` });
+        });
+
+        // })
+      });
+    },
+    // 删除退出会议人员列表
+    deletePushVideo() {
+      trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, (event) => {
+        const userId = event.userId;
+        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();
+        });
+      });
+    },
+    // 根据caseId查询房间相关信息
+    reserveConferenceListFn(data) {
+      reserveConferenceList(data).then((res) => {
+        this.hostId = res.data[0].userName;
+      });
+    },
+    // 根据userid查询是否是秘书角色
+    secretaryRoleByUserIdFn(data, data1) {
+      secretaryRoleByUserId(data, data1).then((res) => {
+        this.updataFlag = res.data.isSecretaryRole;
+      });
+    },
+    /**获取申请人被申请人权限 */
+    selectRoleMenuByCaseIdFn(caseId) {
+      selectRoleMenuByCaseId(caseId).then((res) => {
+        if (res.appFlag && res.appFlag == "1") {
+          this.appFlag = true;
+          this.resFlag = false;
+        } else if (res.resFlag && res.resFlag == "1") {
+          this.resFlag = true;
+          this.appFlag = false;
+        }
+      });
+    },
+  },
+  computed: {
+    editor() {
+      return this.$refs.myQuillEditor.quill;
+    },
+  },
+  async mounted() {
+    if (this.userList.length == 1) {
+      this.videoClass = "videoItem";
+    } else if (this.userList.length > 1) {
+      this.videoClass = "videoItem1";
+    }
+    // 判断设备类型
+    this.modileFlag = getModile();
+    let roomId = this.$route.query.roomId;
+    this.roomId = this.$route.query.roomId;
+    let userId = this.$route.query.userId;
+    this.userId = this.$route.query.userId;
+    this.caseId = this.$route.query.caseId;
+    this.id = this.$route.query.id;
+    this.token = this.$route.query.token;
+    this.headers.Authorization = "Bearer " + this.token;
+    this.headers1.Authorization = "Bearer " + this.token;
+    this.headers3.Authorization = "Bearer " + this.token;
+    this.filedata.caseId = this.caseId;
+    this.filedata1.caseId = this.caseId;
+    this.filedata3.caseId = this.caseId;
+    window.sessionStorage.setItem("token", this.token);
+    window.sessionStorage.setItem("userId", this.id);
+    this.secretaryRoleByUserIdFn(this.id, this.caseId);
+    // 获取主持人的userId
+    this.reserveConferenceListFn(this.caseId);
+    const sdkAppId = 1600011167;
+    // 获取usersign
+    await getUsersig(userId).then((res) => {
+      this.userSign = res.msg;
+    });
+    this.getPushVideo();
+    this.deletePushVideo();
+    try {
+      await trtc.enterRoom({
+        roomId: Number(roomId),
+        scene: "rtc",
+        sdkAppId,
+        userId,
+        userSig: this.userSign,
+      });
+      await trtc.startLocalVideo({
+        view: document.getElementById("localStream"), // 在 DOM 中的 elementId 为 localStream 的标签上预览视频。
+      });
+      await trtc.startLocalAudio();
+      console.log("进房成功");
+      this.$message({
+        message: "进房成功",
+        type: "success",
+      });
+    } catch (error) {
+      console.error("进房失败 " + error);
+      this.$message({
+        message: "进房失败",
+        type: "error",
+      });
+      // this.$router.push({
+      //     name: 'Home'
+      // })
+    }
+    this.localStreamAsr = new ASR({
+      secretKey: "INDrIXcT8YmomZBcsy0oNirnU0LTN4X7",
+      secretId: "AKID3xfHgroY4MQHvLXUXMwIQL1UjmbBX1Tv",
+      appId: 1304001529,
+      engine_model_type: "16k_zh",
+      voice_format: 1,
+      needvad: 1,
+      audioTrack: trtc.getAudioTrack(),
+    });
+    this.localStreamAsr.start();
+    // 开始识别
+    this.localStreamAsr.OnRecognitionStart = (res) => {
+      console.log("本地流：开始识别", res);
+    };
+    this.localStreamAsr.OnError = (res) => {
+      console.log("本地流：识别失败", res);
+    };
+    // 一句话结束
+    this.localStreamAsr.OnSentenceEnd = (res) => {
+      console.log("本地流：一句话结束", res);
+      // this.contentValue = `<h2>${this.userId}</h2>` + `<span>${res.result.voice_text_str}</span>`;
+      this.contentValue =
+        this.contentValue +
+        `<h2>${this.userId}</h2>` +
+        `<span>${res.result.voice_text_str}</span>`;
+    };
+  },
+  created() {
+    trtc = TRTC.create();
+  },
+};
+</script>
+  
+<style scoped>
+.roompage {
+  width: 100%;
+  height: 100vh;
+}
+.content {
+  width: 100%;
+  height: 90%;
+  display: flex;
+}
+.videoList {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  align-items: center;
+  overflow-y: scroll;
+  margin-bottom: 20px;
+  position: relative;
+}
+.videoList1 {
+  width: 20%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  align-items: center;
+  overflow-y: scroll;
+  margin-bottom: 20px;
+  position: relative;
+}
+.txtContent {
+  width: 100px;
+  height: 50px;
+  position: absolute;
+  right: 5px;
+  top: 20px;
+  z-index: 10;
+  cursor: pointer;
+}
+
+.videoItem {
+  width: 100%;
+  height: 100%;
+  background: red;
+  border-radius: 20px;
+}
+.videoItem1 {
+  width: 32%;
+  height: 32%;
+  background: red;
+  border-radius: 20px;
+}
+.videoItem2 {
+  width: 90%;
+  height: 25%;
+  background: red;
+  border-radius: 20px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.footer {
+  width: 100%;
+  height: 10%;
+  background: rgb(46 43 43 / 90%);
+  position: absolute;
+  bottom: 0;
+  z-index: 10;
+}
+.screenShare {
+  width: 80%;
+  height: 100%;
+  background: yellow;
+}
+.userName {
+  border-radius: 10px;
+  width: 90px;
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+  background-color: black;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+  color: #ffffff;
+}
+.footerList {
+  width: 100%;
+  height: 10%;
+  background: green;
+}
+.userNamePhone {
+  border-radius: 10px;
+  min-width: 20%;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  background-color: black;
+  font-size: 12px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+  color: #ffffff;
+}
+
+.header {
+  width: 100%;
+  height: 8%;
+  background-color: #716c6c;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.roomPhone {
+  width: 100%;
+  height: 100vh;
+}
+
+.bodyVideo {
+  width: 100%;
+  height: 92%;
+  display: flex;
+  flex-wrap: wrap;
+  /* justify-content: space-between; */
+}
+
+.userVideoPhone {
+  width: 100%;
+  height: 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;
+  position: relative;
+}
+
+.quill-editor {
+  height: 70%;
+}
+
+.updataBtn {
+  width: 100%;
+  position: absolute;
+  bottom: 8px;
+}
+.fileList {
+  /* max-height: 300px; */
+  /* overflow-y: scroll; */
+}
+.list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.applicant,
+.res,
+.mediate {
+  width: 100%;
+  margin-left: 20px;
+  margin-bottom: 10px;
+  color: #38393b;
+}
+</style>
+  
+  
+