rotate 全屏 进度50%

src/views/meeting.vue

@@ -2,17 +2,33 @@
   <div id="app-container" ref="appContainerRef">
     <!-- zoom 会议组件 -->
     <div id="meeting-chat-row">
-      <div
-        id="meeting-container"
-        ref="meetingContainerRef"
-        :class="{ fullscreen: isFullScreen }"
-      >
+      <div class="fullscreen-wrap" ref="fullscreenWrapRef">
         <div
-          id="video-element"
-          :class="`layout-template-${templateId}`"
-          ref="videoElementRef"
-        ></div>
-        <el-button :icon="FullScreen" circle @click="setFullScreen"></el-button>
+          id="meeting-container"
+          ref="meetingContainerRef"
+          :class="{
+            fullscreen: isFullScreen && !isVerticalFullScreen,
+            verticalFullScreen: isVerticalFullScreen,
+          }"
+        >
+          <div
+            id="video-element"
+            :class="`layout-template-${templateId}`"
+            ref="videoElementRef"
+          ></div>
+          <el-button
+            v-if="!isFullScreen"
+            :icon="FullScreen"
+            circle
+            @click="setFullScreen"
+          ></el-button>
+          <el-button
+            v-else
+            :icon="CloseBold"
+            circle
+            @click="quitFullScreen"
+          ></el-button>
+        </div>
       </div>
       <div id="right-chat">
         <Chat
@@ -64,6 +80,62 @@
         </span>
       </template>
     </el-dialog>
+
+    <el-dialog
+      custom-class="check-media"
+      v-model="showCheckMediaVideo"
+      :close-on-click-modal="false"
+      title="摄像头和麦克风"
+      :fullscreen="screenWidth < 900"
+      width="60%"
+    >
+      <el-alert
+        v-if="isVideoAvailable === undefined || isAudioAvailable === undefined"
+        >检测中。</el-alert
+      >
+      <el-alert
+        v-else-if="isVideoAvailable === true && isAudioAvailable === true"
+        type="success"
+        >摄像头工作正常，麦克风工作正常。</el-alert
+      >
+      <el-alert
+        v-else-if="isVideoAvailable === true && isAudioAvailable === false"
+        type="warning"
+        >摄像头工作正常，麦克风无法正常工作。</el-alert
+      >
+      <el-alert
+        v-else-if="isVideoAvailable === false && isAudioAvailable === true"
+        type="warning"
+        >摄像头无法正常工作，麦克风工作正常。</el-alert
+      >
+      <el-alert v-else type="error"
+        >摄像头无法正常工作，麦克风无法正常工作。</el-alert
+      >
+      <!-- <div id="row"> -->
+      <div id="check-media-wrap" ref="checkMediaWrapRef">
+        <video id="check-media-video" ref="checkMediaVideoRef"></video>
+        <!-- <el-icon class="microphone-icon" :size="50"> -->
+        <Microphone
+          v-if="isAudioAvailable === undefined"
+          class="microphone-loading"
+        />
+        <Microphone
+          v-else-if="isAudioAvailable === true"
+          class="microphone-on"
+        />
+        <Mute v-else class="microphone-off" />
+        <!-- </el-icon> -->
+      </div>
+      <!-- </div> -->
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="showCheckMediaVideo = false"
+            >关闭</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+
     <questions
       mode="1"
       @stage="getStageExamAnswer"
@@ -79,6 +151,15 @@
       :showDialog="showQuestionnaireDialog"
       @close="showQuestionnaireDialog = $event"
     ></questions>
+    <el-dialog v-model="showHorizontalScreen" fullscreen :show-close="false">
+      <el-result icon="warning" title="无法全屏" sub-title="请先将手机横过来">
+        <template #icon>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-hengping"></use>
+          </svg>
+        </template>
+      </el-result>
+    </el-dialog>
   </div>
 </template>
 
@@ -100,7 +181,12 @@ import { uniqueId } from "lodash";
 import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
 import ReconnectingWebSocket from "reconnecting-websocket";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { FullScreen } from "@element-plus/icons-vue";
+import {
+  FullScreen,
+  CloseBold,
+  Microphone,
+  Mute,
+} from "@element-plus/icons-vue";
 import { signMeeting, generateSignature } from "@/api/meeting";
 import Chat from "@/components/chat";
 import questions from "@/components/questions";
@@ -198,7 +284,7 @@ const startMeeting = async () => {
     console.log(meetingConfig.client.getAttendeeslist());
     document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
 
-    // 自动点击允许共享屏幕
+    // 自动点击允许共享屏幕 //TODO:自动点击按钮
     if (route.name === "Host") {
       const safeButton = document.querySelector('button[title="安全"]');
       if (safeButton) {
@@ -216,59 +302,63 @@ const startMeeting = async () => {
     isMeetingLoading.value = false;
   }
 };
+
+const setSize = () => {
+  meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
+  meetingHeight.value = (meetingWidth.value * 9) / 16;
+
+  videoElementRef.value.style.width = `${meetingWidth.value}px`;
+  videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
+
+  document.querySelector(
+    "#video-element> div> .zmwebsdk-MuiPaper-root> .zmwebsdk-MuiPaper-root:nth-child(1)"
+  ).style.width = `${meetingWidth.value}px`;
+
+  document
+    .querySelectorAll(
+      'div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root'
+    )
+    .forEach((el) => {
+      el.style.height = `${meetingHeight.value}px`;
+    });
+};
+
 window.client = meetingConfig.client;
 window.startMeeting = startMeeting;
 
-// 使摄像头窗口显示在右上角，当切换布局或resize、横屏时执行
-const makeVideoTop = () => {
-  const screenShareEl = document.querySelector(
-    'div[id*="suspension-view-tabpanel"]>div.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div'
-  );
-  if (screenShareEl) console.log(screenShareEl.offsetTop);
-};
-// 根据id设置布局
-// const setLayout = (templateId) => {
-// videoElementRef.value.className = `layout-template-${templateId}`;
-// if (templateId === "1") {
-// } else if (templateId === "2") {
-// } else if (templateId === "3") {
-// }
-// };
-// const setLayout = (templateId) => {
-//   console.log(templateId);
-//   const videoScreenWrapEl = document.querySelectorAll(
-//     ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
-//   )[2]; // 包含视频和课件的容器
-//   videoScreenWrapEl.style.flexDirection = "";
-//   const videoWrapEl = videoScreenWrapEl.lastChild;
-
-//   if (!inSharing.value) return;
-//   const screenWrapEl = document.querySelector(
-//     `div[class*="zmwebsdk-makeStyles-inSharing"]`
-//   );
-//   if (templateId === "1") {
-//     // 课件|视频 对半分
-//     videoWrapEl.style.width = `${meetingWidth.value / 2 - 2}px`;
-//   } else if (templateId === "2") {
-//     // 视频|课件 对半分
-//     videoWrapEl.style.width = `${meetingWidth.value / 2 - 2}px`;
-//     videoScreenWrapEl.style.flexDirection = "row-reverse";
-//   } else if (templateId === "3") {
-//     // 课件|视频 左4/5 | 右边1/5
-//     videoWrapEl.style.width = `${(meetingWidth.value - 4) / 5}px`;
-//   } else if (templateId === "4") {
-//     // 视频|课件 左1/4 | 右边3/4
-//     videoWrapEl.style.width = `${(meetingWidth.value - 4) / 5}px`;
-//     videoScreenWrapEl.style.flexDirection = "row-reverse";
-//   } else if (templateId === "5") {
-//     // 只显示课件
-//     videoWrapEl.style.display = `none`;
-//   } else if (templateId === "6") {
-//     // 只显示视频
-//     screenWrapEl.style.display = "none";
-//     videoWrapEl.style.width = `${meetingWidth.value - 4}px`;
-//   }
-// };
+const checkMediaVideoRef = ref(null);
+const checkMediaWrapRef = ref(null);
+const showCheckMediaVideo = ref(true);
+const isVideoAvailable = ref(undefined);
+const isAudioAvailable = ref(undefined);
+onMounted(() => {
+  nextTick(() => {
+    const videoWidth = checkMediaWrapRef.value.offsetWidth;
+    const videoHeight = checkMediaWrapRef.value.offsetHeight;
+    console.log(checkMediaVideoRef.value);
+    navigator.mediaDevices
+      .getUserMedia({ video: { width: videoWidth, height: videoHeight } })
+      .then((stream) => {
+        checkMediaVideoRef.value.srcObject = stream;
+        checkMediaVideoRef.value.play();
+        isVideoAvailable.value = true;
+      })
+      .catch((err) => {
+        console.log(err);
+        isVideoAvailable.value = false;
+      });
+  });
+  navigator.mediaDevices
+    .getUserMedia({ audio: true })
+    .then((stream) => {
+      console.log(stream);
+      isAudioAvailable.value = true;
+    })
+    .catch((err) => {
+      console.log(err);
+      isAudioAvailable.value = false;
+    });
+});
 
 // 设置文本标签
 const setTextLabel = () => {
@@ -361,11 +451,15 @@ setInterval(() => {
   }
   // ------
 
+  // TODO:
   // 检测是否存在"同意被设为嘉宾按钮",存在则自动点击
   const isSetAsGuest = document.querySelector(
     ".zmwebsdk-MuiButtonBase-root.zmwebsdk-MuiButton-root.zmwebsdk-MuiButton-contained.zmwebsdk-MuiButton-containedPrimary.zmwebsdk-MuiButton-containedSizeSmall.zmwebsdk-MuiButton-sizeSmall.zmwebsdk-MuiButton-disableElevation"
   );
-  if (isSetAsGuest) {
+  const setAsGuestLabel = document.querySelector(
+    ".zmwebsdk-MuiButtonBase-root.zmwebsdk-MuiButton-root.zmwebsdk-MuiButton-contained.zmwebsdk-MuiButton-containedPrimary.zmwebsdk-MuiButton-containedSizeSmall.zmwebsdk-MuiButton-sizeSmall.zmwebsdk-MuiButton-disableElevation>span"
+  );
+  if (isSetAsGuest && setAsGuestLabel.innerHTML === "以嘉宾身份加入") {
     isSetAsGuest.click();
   }
   // -------
@@ -376,15 +470,19 @@ setInterval(() => {
     .join("$");
 
   // 检测共享屏幕canvas距离父元素顶部距离
-  // const shareScreenWrapEl =
   const shareScreenCanvasEl = document.querySelector(
     'div[id*="suspension-view-tabpanel"]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div:first-child'
   );
-  // console.log(shareScreenCanvasEl);
   if (shareScreenCanvasEl) {
-    document.querySelector(
-      `div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root > div[class*="inSharing"] + div`
-    ).style.top = `${shareScreenCanvasEl.offsetTop}px`;
+    if (templateId.value == 3 || templateId.value == 4 || screen.width < 900) {
+      document.querySelector(
+        `div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root > div[class*="inSharing"] + div`
+      ).style.top = `${shareScreenCanvasEl.offsetTop}px`;
+    } else {
+      document.querySelector(
+        `div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root > div[class*="inSharing"] + div`
+      ).style.top = "";
+    }
   }
 }, 500);
 
@@ -402,6 +500,7 @@ watch(inSharing, (val) => {
   }
 });
 
+// 监听参会人员videoOn状态变化，自动切换到已开启摄像头的用户
 watch(attendeeslist, (val) => {
   console.log(val);
   if (inSharing.value) {
@@ -410,19 +509,63 @@ watch(attendeeslist, (val) => {
 });
 
 // 点击进入全屏模式
+const fullscreenWrapRef = ref(null);
+const isVerticalFullScreen = ref(false);
+const showHorizontalScreen = ref(false);
 const setFullScreen = async () => {
-  meetingContainerRef.value.requestFullscreen();
+  // if (window.orientation === 0) {
+  //   // ElMessageBox.prompt("请将手机横过来");
+  //   showHorizontalScreen.value = true;
+  //   setTimeout(() => {
+  //     showHorizontalScreen.value = false;
+  //   }, 1500);
+  //   return;
+  // }
+  document.querySelector(".fullscreen-wrap").requestFullscreen();
+  // meetingContainerRef.value.requestFullscreen();
   isFullScreen.value = true;
-  document
-    .querySelectorAll(
-      "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
-    )
-    .forEach((el) => {
-      el.setAttribute(
-        `style`,
-        `height: ${screen.height - screen.width * 0.08}px !important`
-      );
-    });
+  nextTick(() => {
+    meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
+    meetingHeight.value = (meetingWidth.value * 9) / 16;
+    if (window.orientation === 0) {
+      // const height = innerHeight;
+      isVerticalFullScreen.value = true;
+      nextTick(() => {
+        videoElementRef.value.setAttribute(
+          "style",
+          `width: ${innerHeight * 0.9}px !important; height: ${
+            (innerHeight * 0.9 * 9) / 16
+          }px !important`
+        );
+        document
+          .querySelectorAll(
+            'div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root'
+          )
+          .forEach((el) => {
+            el.setAttribute("style", `height: ${92}vw !important`);
+          });
+      });
+    }
+    videoElementRef.value.setAttribute(
+      `style`,
+      `width: ${meetingWidth.value}px !important; height: ${
+        screen.height - screen.width * 0.08
+      }px !important`
+    );
+    document
+      .querySelectorAll(
+        "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
+      )
+      .forEach((el) => {
+        el.setAttribute(
+          `style`,
+          `height: ${screen.height - screen.width * 0.08}px !important`
+        );
+      });
+  });
+};
+const quitFullScreen = () => {
+  document.exitFullscreen();
 };
 // 是否显示考试和问卷弹窗
 const showExamDialog = ref(false);
@@ -518,19 +661,19 @@ const initWebSocket = () => {
       });
     }
     // 开始签到时
-    else if (data.type === "isStartSign" && route.name !== "Host") {
+    else if (data.type === "isStartSign" && route.name === "Meeting") {
       showSignDialog.value = true;
     }
     // 签到结束时
-    else if (data.type === "isEndSign" && route.name !== "Host") {
+    else if (data.type === "isEndSign" && route.name === "Meeting") {
       showSignDialog.value = false;
     }
     // 开始考试时
-    else if (data.type === "isStartExam" && route.name !== "Host") {
+    else if (data.type === "isStartExam" && route.name === "Meeting") {
       showExamDialog.value = true;
     }
     // 开始问卷时
-    else if (data.type === "isStartQuestionnaire" && route.name !== "Host") {
+    else if (data.type === "isStartQuestionnaire" && route.name === "Meeting") {
       showQuestionnaireDialog.value = true;
     }
     // 会议结束时
@@ -590,7 +733,6 @@ const getStageQuestionnaireAnswer = (val) => {
 };
 
 const isFullScreen = ref(false);
-
 onMounted(() => {
   meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
   meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
@@ -598,12 +740,13 @@ onMounted(() => {
   videoElementRef.value.style.width = `${meetingWidth.value}px`;
   videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
 
-  // 当退出全屏模式时
-  meetingContainerRef.value.addEventListener("fullscreenchange", () => {
+  // 当全屏状态改变时
+  fullscreenWrapRef.value.addEventListener("fullscreenchange", () => {
     if (document.fullscreenElement) {
       isFullScreen.value = true;
     } else {
       isFullScreen.value = false;
+      isVerticalFullScreen.value = false;
       nextTick(() => {
         meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
         meetingHeight.value = (meetingWidth.value * 9) / 16;
@@ -614,6 +757,7 @@ onMounted(() => {
             "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
           )
           .forEach((el) => {
+            console.log(`${meetingHeight.value}px`);
             el.style.height = `${meetingHeight.value}px`;
           });
       });
@@ -622,15 +766,26 @@ onMounted(() => {
   setTextLabel();
   startMeeting();
 });
-window.addEventListener(
-  "resize",
-  _.throttle(() => {
-    meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
-    meetingHeight.value = (meetingWidth.value * 9) / 16;
-    videoElementRef.value.style.width = `${meetingWidth.value}px`;
-    videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
-  }, 500)
-);
+window.addEventListener("resize", (e) => {
+  console.log(e);
+  meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
+  meetingHeight.value = (meetingWidth.value * 9) / 16;
+  videoElementRef.value.style.width = `${meetingWidth.value}px`;
+  videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
+  document
+    .querySelectorAll(
+      "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
+    )
+    .forEach((el) => {
+      console.log(`${meetingHeight.value}px`);
+      el.style.height = `${meetingHeight.value}px`;
+    });
+});
+window.addEventListener("orientationchange", function () {
+  console.log(
+    "the orientation of the device is now " + screen.orientation.angle
+  );
+});
 window.getCurrentUser = meetingConfig.client.getCurrentUser;
 window.getAttendeeslist = meetingConfig.client.getAttendeeslist;
 window.getCurrentMeetingInfo = meetingConfig.client.getCurrentMeetingInfo;
@@ -645,13 +800,16 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-// $videoELementWidth: 80vw * 0.9;
-// $videoElementHeight: $videoELementWidth * 9 / 16 + 42px;
-// $videoWidth: 470px;
-// $videoHeight: $videoWidth * 9 / 16;
+$videoELementWidth: 80vw * 0.9;
+$videoElementHeight: $videoELementWidth * 9 / 16 + 1.5vw;
 $meetingComponentWitdh: 80vw * 0.9;
 $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 
+:deep(#right-chat .chat-container .message-list) {
+  height: $meetingComponentWitdh * 9 / 16;
+  overflow-y: scroll;
+}
+
 #app-container {
   #meeting-chat-row {
     display: flex;
@@ -664,8 +822,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       position: relative;
       .el-button {
         position: absolute;
-        right: 0;
-        bottom: 0;
+        right: 1vw;
+        bottom: 1vw;
       }
       :deep(.text-tag) {
         position: absolute;
@@ -691,6 +849,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       > div[class*="inSharing"]
       + div) {
     width: $meetingComponentWitdh * 0.5;
+    height: $meetingComponentWitdh * 0.5 * 9 / 16;
+    align-self: center;
   }
 }
 .layout-template-2 {
@@ -699,6 +859,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       > div[class*="inSharing"]
       + div) {
     width: $meetingComponentWitdh * 0.5;
+    height: $meetingComponentWitdh * 0.5 * 9 / 16;
+    align-self: center;
   }
   :deep(#suspension-view-tabpanel-ribbon
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
@@ -754,6 +916,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
     > .zmwebsdk-MuiPaper-root
     > .zmwebsdk-MuiPaper-root:nth-child(2)) {
   width: 270px;
+  // height: 1.5vw;
   background: #ccc;
 }
 :deep(div[id*="suspension-view-tabpanel"]
@@ -765,7 +928,44 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
   background: transparent;
   box-shadow: 0 0;
 }
-
+// 隐藏共享屏幕上方提示
+:deep(div[id*="suspension-view-tabpanel"]
+    div[class*="inSharing"]
+    > .zmwebsdk-MuiBox-root) {
+  display: none;
+}
+:deep(.check-media) {
+  .el-dialog__body {
+    text-align: center;
+    #check-media-wrap {
+      display: inline-block;
+      margin: 1vw auto;
+      // text-align: center;
+      border-radius: 1vw;
+      overflow: hidden;
+      width: 36vw;
+      height: 24vw;
+      background-color: #000;
+      position: relative;
+      svg {
+        position: absolute;
+        left: 1vw;
+        bottom: 1vw;
+        width: 3vw;
+        height: 3vw;
+      }
+      .microphone-loading {
+        color: #fff;
+      }
+      .microphone-on {
+        color: springgreen;
+      }
+      .microphone-off {
+        color: indianred;
+      }
+    }
+  }
+}
 // 适配移动端 屏幕宽度小于 900px
 @media screen and (max-width: 900px) {
   $meetingComponentWitdh: 100vw * 0.9;
@@ -782,19 +982,20 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       > .zmwebsdk-MuiPaper-root:nth-child(1)) {
     width: $meetingComponentWitdh !important;
   }
-  :deep(div[id="suspension-view-tabpanel"]
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
-    height: calc(100vw * 0.9 * 9 / 16) !important;
-  }
+  // :deep(div[id*="suspension-view-tabpanel"]
+  //     > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+  //   height: calc(100vw * 0.9 * 9 / 16) !important;
+  // }
 
   .layout-template-1 {
     :deep(div[id*="suspension-view-tabpanel"]
         > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
         > div[class*="inSharing"]
         + div) {
-      width: $meetingComponentWitdh * 0.5;
-      height: $meetingComponentWitdh * 0.5 * 9 / 14;
-      align-self: center;
+      width: $meetingComponentWitdh * 0.2;
+      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
+      position: relative;
+      align-self: initial;
     }
   }
   .layout-template-2 {
@@ -802,9 +1003,10 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
         > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
         > div[class*="inSharing"]
         + div) {
-      width: $meetingComponentWitdh * 0.5;
-      height: $meetingComponentWitdh * 0.5 * 9 / 14;
-      align-self: center;
+      width: $meetingComponentWitdh * 0.2;
+      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
+      position: relative;
+      align-self: initial;
     }
   }
   .layout-template-3 {
@@ -813,7 +1015,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
         > div[class*="inSharing"]
         + div) {
       width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 14;
+      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
       position: relative;
       // align-self: center;
     }
@@ -824,74 +1026,128 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
         > div[class*="inSharing"]
         + div) {
       width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 14;
+      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
       position: relative;
       // align-self: center;
     }
   }
-}
-
-// 全屏样式
-#meeting-container.fullscreen {
-  $meetingComponentWitdh: 100vw * 0.9;
-  $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
-  padding-top: calc(100vw * 0.08) !important;
-  width: 100vw !important;
-
-  .layout-template-1 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.5;
-    }
-  }
-  .layout-template-2 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.5;
-    }
-  }
-  .layout-template-3 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 16;
-      position: relative;
-      // align-self: center;
-    }
-  }
-  .layout-template-4 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 16;
-      position: relative;
-      // align-self: center;
-    }
-  }
-
-  :deep(#video-element
-      > div
-      > .zmwebsdk-MuiPaper-root
-      > .zmwebsdk-MuiPaper-root:nth-child(1)) {
-    width: calc(100vw * 0.9);
-  }
-  :deep(#video-element
-      > div
-      > .zmwebsdk-MuiPaper-root
-      > .zmwebsdk-MuiPaper-root:nth-child(2)) {
-    display: none;
-  }
   :deep(div[id*="suspension-view-tabpanel"]
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
     height: calc(100vw * 0.9 * 9 / 16);
   }
+  :deep(.check-media) {
+    #check-media-wrap {
+      margin: 2vw auto !important;
+      width: 80vw !important;
+      height: 54vw !important;
+      svg {
+        width: 6vw !important;
+        height: 6vw !important;
+      }
+    }
+  }
+}
+
+// 全屏样式
+.fullscreen-wrap {
+  width: 100%;
+  height: 100%;
+  #meeting-container.fullscreen {
+    $meetingComponentWitdh: 100vw * 0.9;
+    $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+    padding-top: calc(100vw * 0.08) !important;
+    width: 100vw !important;
+    #video-element {
+      // width: calc(100vw * 0.9) !important;
+      // height: calc(100vw * 0.9 * 9 / 16 + 1.5vw) !important;
+    }
+    .layout-template-1 {
+      :deep(div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div[class*="inSharing"]
+          + div) {
+        width: $meetingComponentWitdh * 0.5;
+        height: $meetingComponentWitdh * 0.5 * 9 / 16;
+        position: relative;
+        // align-self: initial;
+      }
+    }
+    .layout-template-2 {
+      :deep(div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div[class*="inSharing"]
+          + div) {
+        width: $meetingComponentWitdh * 0.5;
+        height: $meetingComponentWitdh * 0.5 * 9 / 16;
+        position: relative;
+        // align-self: initial;
+      }
+    }
+    .layout-template-3 {
+      :deep(div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div[class*="inSharing"]
+          + div) {
+        width: $meetingComponentWitdh * 0.2;
+        height: $meetingComponentWitdh * 0.2 * 9 / 16;
+        position: relative;
+        // align-self: center;
+      }
+    }
+    .layout-template-4 {
+      :deep(div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div[class*="inSharing"]
+          + div) {
+        width: $meetingComponentWitdh * 0.2;
+        height: $meetingComponentWitdh * 0.2 * 9 / 16;
+        position: relative;
+        // align-self: center;
+      }
+    }
+
+    :deep(#video-element
+        > div
+        > .zmwebsdk-MuiPaper-root
+        > .zmwebsdk-MuiPaper-root:nth-child(1)) {
+      width: calc(100vw * 0.9);
+    }
+    :deep(#video-element
+        > div
+        > .zmwebsdk-MuiPaper-root
+        > .zmwebsdk-MuiPaper-root:nth-child(2)) {
+      display: none;
+    }
+    :deep(div[id*="suspension-view-tabpanel"]
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+      height: calc(100vw * 0.9 * 9 / 16) !important;
+    }
+  }
+
+  #meeting-container.verticalFullScreen {
+    position: absolute;
+    transform-origin: 0% 0%;
+    transform: rotate(90deg);
+    top: 0;
+    left: 100vw;
+    width: 100vh !important;
+    height: calc(92vw);
+    :deep(#video-element
+        > div
+        > .zmwebsdk-MuiPaper-root
+        > .zmwebsdk-MuiPaper-root:nth-child(1)) {
+      width: calc(100vh * 0.9) !important;
+    }
+    :deep(#video-element
+        > div
+        > .zmwebsdk-MuiPaper-root
+        > .zmwebsdk-MuiPaper-root:nth-child(2)) {
+      display: none;
+    }
+    // :deep(div[id*="suspension-view-tabpanel"]
+    //     > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+    //   height: calc(100vh * 0.9 * 9 / 16) !important;
+    // }
+  }
 }
 </style>