Arbitrate-FrontendH5/src/views/room.vue

<template>
  <div class="page">
    <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">
      <div class="txtContent">
        <el-tag type="danger" @click="txtContent" v-if="modileFlag">会议内容</el-tag>
      </div>
      <div class="content">
        <div class="screenShare" id="screenShare" v-show="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" @mediationPop="mediationPop" :roomId="roomId" :micFlag="micFlag"
          :videoFlag="videoFlag" :sharFlag="sharFlag"></roomFooter>
      </div>
    </div>
    <div class="roomPhone">
      <div class="videoPage">
        <div :class="sharingType">
        </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="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">
      <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>
    <!-- 调解 -->
    <el-drawer :visible.sync="drawerMediatio" direction="ltr" title="调解内容">
      <div style="
          width: 100%;
          display: flex;
          justify-content: space-around;
          margin-bottom: 10px;
          margin-top: 20px;
        ">
        <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 ref="upload1" :limit="1" :action="UploadUrl()" :headers="headers1" :data="filedata1"
          :on-change="beforeUpload1" :on-success="handlSuccess1" :file-list="fileList1" v-if="resFlag">
          <el-button slot="trigger" size="small" type="primary">被申请人上传证据</el-button>
        </el-upload>
        <el-upload ref="upload3" :limit="1" :action="UploadUrl()" :headers="headers3" :data="filedata3"
          :on-change="beforeUpload3" :on-success="handlSuccess3" :file-list="fileList3" accept=".doc,.docx"
          v-if="updataFlag">
          <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>
        <el-form label-width="100px">
          <el-col :span="24">
            <el-form-item label="调解结果:">
              <el-radio-group v-model="formData.mediaResult">
                <el-radio :label="1">达成调解</el-radio>
                <el-radio :label="2">未达成调解</el-radio>
                <el-radio :label="3">未达成调解但不在争议</el-radio>
                <el-radio :label="4">未达成调解但同意引入仲裁</el-radio>
                <el-radio :label="5">达成和解</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否用印申请:">
              <el-radio-group v-model="formData.sealFlag">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div>
        <el-button style="width:100%;" type="primary" @click="determineMeeting" :disabled="!updataFlag">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getUsersig, reserveConferenceList, confirmMeetingResult } from "@/api/home";
import {
  secretaryRoleByUserId,
  htmlToPDF,
  selectById,
  selectRoleMenuByCaseId,
  getMenuPermsByUser,
  videoUpload,
} 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 {
      rightType:true,
      sharingType: "sharing",
      bodyPhoneType: "bodyPhone",
      videoList: "videoList",
      videoClass: "videoItem",
      resFlag: null,
      appFlag: null,
      userClassPhone: "userVideoPhone",
      userList: [1, 2],
      userHeight: "100%",
      userPhoneHeight: "92%",
      userSign: "",
      roomId: "",
      userId: null,
      id: null,
      showFlag: false,
      drawerMediatio: false,
      modileFlag: false,
      localStreamAsr: null,
      contentValue: "",
      textVisible: false,
      screenShareFlag: false,
      editorOption: {
        // Some Quill options...
      },
      asrList: {},
      updataFlag: true,
      token: "",
      applicantFile: [],
      resFile: [],
      mediateFile: [],
      formData: {
        mediaResult: 1,
        sealFlag: 1
      },
      caseFlowId: null,
      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,
        isMediaBook: 1,
        caseId: null,
      },
      fileList3: [],
      editFlag: false,
      micFlag: true,
      videoFlag: true,
      sharFlag: true,
    };
  },
  methods: {
    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(() => {
        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",
        });
      });
    },
    /**共享屏幕 */
    async sharClickOn() {
      // this.videoList = "videoList1";
      // this.videoClass = "videoItem2";
      // this.screenShareFlag = true;
      if (this.screenShareFlag) {
        alert("其他用户已经分享");
        return;
      }
      await trtc.startScreenShare().then(() => {
        this.sharFlag = false;
      });
    },
    /**关闭共享屏幕 */
    sharClickOff() {
      trtc.stopScreenShare().then(() => {
        this.sharFlag = true;
        this.videoList = "videoList";
        this.screenShareFlag = false;
        if (this.userList.length > 1) {
          this.videoClass = "videoItem1";
        } else if (this.userList.length < 1) {
          this.videoClass = "videoItem";
        } else if (this.userList.length == 1) {
          this.videoClass = "videoItem3";
        }
      });
    },
    /**获取当前用户操作权限 */
    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, type) {
      if (item.onlyOfficeFileId) {
        debugger
        // this.$router.push({
        //   path: "/onlyoffice",
        //   query: { id: item.onlyOfficeFileId, flag: flag },
        // });
        let flag = 1;
        if (this.editFlag && type != 0) {
          flag = 1;
        } else {
          flag = 0;
        }
        let token = sessionStorage.getItem("token");
        window.open(
          `http://121.40.189.20:9002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
          "_black"
          // `http://localhost:81/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
          // "_black"
        );
      } else {
        window.open(window.location.origin + '/tiaojie' + 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.caseFlowId = res.data.caseFlowId;
        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.stopLocalVideo();
      await trtc.stopLocalAudio();
      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;
        if (streamType == "main") {
          this.userList.push(userId);
          setTimeout(() => {
            trtc.startRemoteVideo({ userId, streamType, view: `${userId}` });
          });
        } else if (streamType == "sub") {
          setTimeout(() => {
            trtc
              .startRemoteVideo({ userId, streamType, view: "screenShare" })
              .then(() => {
                this.videoList = "videoList1";
                this.videoClass = "videoItem2";
              });
          });
          this.screenShareFlag = true;
        }
        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);
        // })
      });
    },
    /**主持人解散房间监听事件 */
    exitRoomAll() {
      trtc.on(TRTC.EVENT.KICKED_OUT, event => {
        console.log(event.reason);
        alert("主持人已经解散会议");
        this.$router.push({
          name: "Home",
        });
        this.userList = [];
      });
    },
    // 删除退出会议人员列表
    deletePushVideo() {
      trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, (event) => {
        const streamType = event.streamType;
        const userId = event.userId;
        if (streamType == "main") {
          let deleteIndex = this.userList.indexOf(userId);
          this.userList = this.userList.filter((item) => item !== userId);
          if (deleteIndex !== -1) {
            this.userList.splice(deleteIndex, 1);
          }
          Object.keys(this.asrList).forEach((key) => {
            this.asrList[userId].stop();
          });
        } else if (streamType == "sub") {
          this.sharFlag = true;
          this.videoList = "videoList";
          this.screenShareFlag = false;
          if (this.userList.length > 1) {
            this.videoClass = "videoItem1";
          } else if (this.userList.length < 1) {
            this.videoClass = "videoItem";
          } else if (this.userList.length == 1) {
            this.videoClass = "videoItem3";
          }
        }
      });
    },
    // 根据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;
        }
      });
    },
    // 调解
    mediationPop() {
      this.drawerMediatio = true;
      this.selectByIdFn(this.caseId);
      setInterval(() => {
        this.selectByIdFn(this.caseId);
      }, 8000);
      this.selectRoleMenuByCaseIdFn(this.caseId);
      this.getMenuPermsByUserFn();
    },
    // 确定会议结果
    determineMeeting() {
      let valueMeeting = {
        id: this.caseId,
        mediaResult: this.formData.mediaResult,
        sealFlag: this.formData.sealFlag,
        caseFlowId: this.caseFlowId
      }
      confirmMeetingResult(valueMeeting).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "确定成功",
            type: "success",
          });
          this.drawerMediatio = false
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  watch: {
    userList(value) {
      if (value.length == 1) {
        this.videoClass = "videoItem3";
      } else if (value.length > 1) {
        this.videoClass = "videoItem1";
      } else if (value.length < 1) {
        this.videoClass = "videoItem";
      }
    },
  },
  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();
    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();
    this.exitRoomAll();
    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>
.iconImg {
  position: fixed;
  z-index: 9999;
  top: 40%;
  height: 40px;
  width: 40px;
  right: 0px;
}

.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;
}

.videoItem3 {
  width: 48%;
  height: 100%;
  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;
}

.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;
}

.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;
}
/* 移动端样式 */

.bodyVideo {
  width: 100%;
  height: 92%;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.userVideoPhone {
  width: 100%;
  height: 100%;
  background-color: rgb(124, 124, 104);
  position: relative;
}

.userVideoPhone1 {
  width: 100%;
  height: 49%;
  background-color: rgb(161, 160, 169);
  position: relative;
}

.userVideoPhone2 {
  width: 150px;
  height: 150px;
  background-color: rgb(161, 160, 169);
  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;
}

.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>