手机端样式

src/views/meeting.vue

@@ -8,6 +8,7 @@
           class="layout-template-4"
           ref="videoElementRef"
         ></div>
+        <el-button :icon="FullScreen" @click="setFullScreen"></el-button>
       </div>
       <div id="right-chat">
         <Chat
@@ -32,7 +33,7 @@
       <el-tab-pane label="专家介绍"
         ><div class="meeting-info expert-info" v-html="expertInfo"></div
       ></el-tab-pane>
-      <el-tab-pane label="聊天" class="chat-pane" v-if="screenWidth < 768">
+      <el-tab-pane label="聊天" class="chat-pane" v-if="screenWidth < 900">
         <Chat
           :is-rich="route.name === 'Host'"
           place="bottom"
@@ -86,7 +87,8 @@ import dayjs from "dayjs";
 import { uniqueId } from "lodash";
 import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
 import ReconnectingWebSocket from "reconnecting-websocket";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { FullScreen } from "@element-plus/icons-vue";
 import { signMeeting, generateSignature } from "@/api/meeting";
 import Chat from "@/components/chat";
 import questions from "@/components/questions";
@@ -148,9 +150,10 @@ const startMeeting = async () => {
     role: meetingConfig.role,
   });
   let meetingSDKElement = document.getElementById("video-element");
+
   try {
-    meetingConfig.client.init({
-      debug: true,
+    await meetingConfig.client.init({
+      // debug: true,
       zoomAppRoot: meetingSDKElement,
       language: "zh-CN",
       customize: {
@@ -179,6 +182,8 @@ const startMeeting = async () => {
         ],
       },
     });
+
+    console.log(meetingWidth.value, meetingHeight.value);
     await meetingConfig.client.join({
       sdkKey: meetingConfig.sdkKey,
       signature: sign,
@@ -188,6 +193,7 @@ const startMeeting = async () => {
       userEmail: meetingConfig.userEmail,
       tk: meetingConfig.registrantToken,
     });
+
     console.log(meetingConfig.client.getAttendeeslist());
     document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
 
@@ -209,7 +215,8 @@ const startMeeting = async () => {
     isMeetingLoading.value = false;
   }
 };
-
+window.client = meetingConfig.client;
+window.startMeeting = startMeeting;
 // 根据id设置布局
 const setLayout = (templateId) => {
   videoElementRef.value.className = `layout-template-${templateId}`;
@@ -383,10 +390,28 @@ watch(attendeeslist, (val) => {
     // switchToVideoOn();
   }
 });
+
+// 点击进入全屏模式
+const setFullScreen = async () => {
+  meetingContainerRef.value.requestFullscreen();
+  // meetingContainerRef.value.className =
+  // meetingContainerRef.value.className + " fullscreen";
+  // meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
+  // meetingHeight.value = (meetingWidth.value * 9) / 16;
+  // console.log(meetingWidth.value, meetingHeight.value);
+  // videoElementRef.value.style.width = `${meetingWidth.value}px`;
+  // videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
+  // await meetingConfig.client.leaveMeeting();
+  // startMeeting();
+  // setTimeout(() => {
+  // startMeeting();
+  // }, 5000);
+  // startMeeting();
+};
 // 是否显示考试和问卷弹窗
 const showExamDialog = ref(false);
 const showQuestionnaireDialog = ref(false);
-
+const examStarted = ref(false); //考试是否开始
 /* 签到功能 */
 // 提交签到
 const showSignDialog = ref(false); //是否显示签到窗口
@@ -399,7 +424,7 @@ const submitSign = async () => {
   showSignDialog.value = false;
   ElMessage.success("签到成功");
 };
-// 当考试和问卷弹框未能正确弹出时，加载题目列表
+// 当考试和问卷弹框未能正确弹出时，（即考试开始时，未加入会议），加载题目列表
 const loadQuestionsList = async (mode) => {
   const { data } = await getQuestionsList({
     meetingId: store.getters.meetingId,
@@ -440,7 +465,7 @@ const submitQuestion = async (mode) => {
     });
     ElMessage.success("提交问卷成功");
   }
-  closeDialog();
+  // closeDialog();
 };
 
 // loadQuestionsList("1");
@@ -582,8 +607,8 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 // $videoELementWidth: 80vw * 0.9;
 // $videoElementHeight: $videoELementWidth * 9 / 16 + 42px;
-$videoWidth: 470px;
-$videoHeight: $videoWidth * 9 / 16;
+// $videoWidth: 470px;
+// $videoHeight: $videoWidth * 9 / 16;
 $meetingComponentWitdh: 80vw * 0.9;
 $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 
@@ -597,6 +622,11 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       justify-content: center;
       width: 80vw;
       position: relative;
+      .el-button {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+      }
       // #video-element {
       // width: $videoELementWidth;
       // height: $videoElementHeight;
@@ -623,17 +653,29 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 .layout-template-1 {
   :deep(#suspension-view-tabpanel-ribbon
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-      > div:last-child) {
+      > div[class*="inSharing"]
+      + div),
+  :deep(#suspension-view-tabpanel-speaker
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+      > div[class*="inSharing"]
+      + div) {
     width: $meetingComponentWitdh * 0.5;
   }
 }
 .layout-template-2 {
   :deep(#suspension-view-tabpanel-ribbon
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-      > div:last-child) {
+      > div[class*="inSharing"]
+      + div),
+  :deep(#suspension-view-tabpanel-speaker
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+      > div[class*="inSharing"]
+      + div) {
     width: $meetingComponentWitdh * 0.5;
   }
   :deep(#suspension-view-tabpanel-ribbon
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
+  :deep(#suspension-view-tabpanel-speaker
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
     flex-direction: row-reverse;
   }
@@ -642,7 +684,12 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 .layout-template-3 {
   :deep(#suspension-view-tabpanel-ribbon
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-      > div:last-child) {
+      > div[class*="inSharing"]
+      + div),
+  :deep(#suspension-view-tabpanel-speaker
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+      > div[class*="inSharing"]
+      + div) {
     width: $meetingComponentWitdh * 0.2;
     height: $meetingComponentWitdh * 0.2 * 9 / 16;
     align-self: center;
@@ -651,12 +698,19 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 .layout-template-4 {
   :deep(#suspension-view-tabpanel-ribbon
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-      > div:last-child) {
+      > div[class*="inSharing"]
+      + div),
+  :deep(#suspension-view-tabpanel-speaker
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+      > div[class*="inSharing"]
+      + div) {
     width: $meetingComponentWitdh * 0.2;
     height: $meetingComponentWitdh * 0.2 * 9 / 16;
     align-self: center;
   }
   :deep(#suspension-view-tabpanel-ribbon
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
+  :deep(#suspension-view-tabpanel-speaker
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
     flex-direction: row-reverse;
   }
@@ -684,20 +738,20 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 :deep(#suspension-view-tabpanel-ribbon
     > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
 :deep(#suspension-view-tabpanel-gallery
+    > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
+:deep(#suspension-view-tabpanel-speaker
     > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
   height: calc(80vw * 0.9 * 9 / 16);
 }
-// :deep(#suspension-view-tabpanel-ribbon
-//     > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-//     > div:last-child) {
-// height: calc(240px * 9 / 16);
-// }
+
 :deep(.zmwebsdk-MuiPaper-root) {
   background: transparent;
   box-shadow: 0 0;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 900px) {
+  $meetingComponentWitdh: 100vw * 0.9;
+  $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
   #meeting-container {
     width: 100vw !important;
   }
@@ -708,13 +762,167 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       > div
       > .zmwebsdk-MuiPaper-root
       > .zmwebsdk-MuiPaper-root:nth-child(1)) {
-    width: calc(100vw * 0.9) !important;
+    width: $meetingComponentWitdh !important;
+  }
+  :deep(#suspension-view-tabpanel-ribbon
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
+  :deep(#suspension-view-tabpanel-gallery
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
+  :deep(#suspension-view-tabpanel-speaker
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+    height: calc(100vw * 0.9 * 9 / 16) !important;
+  }
+
+  .layout-template-1 {
+    :deep(#suspension-view-tabpanel-ribbon
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div),
+    :deep(#suspension-view-tabpanel-speaker
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div) {
+      width: $meetingComponentWitdh * 0.5;
+    }
+  }
+  .layout-template-2 {
+    :deep(#suspension-view-tabpanel-ribbon
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div),
+    :deep(#suspension-view-tabpanel-speaker
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div) {
+      width: $meetingComponentWitdh * 0.5;
+    }
+  }
+  .layout-template-3 {
+    :deep(#suspension-view-tabpanel-ribbon
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div),
+    :deep(#suspension-view-tabpanel-speaker
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div) {
+      width: $meetingComponentWitdh * 0.2;
+      height: $meetingComponentWitdh * 0.2 * 9 / 16;
+    }
+  }
+  .layout-template-4 {
+    :deep(#suspension-view-tabpanel-ribbon
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div),
+    :deep(#suspension-view-tabpanel-speaker
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div) {
+      width: $meetingComponentWitdh * 0.2;
+      height: $meetingComponentWitdh * 0.2 * 9 / 16;
+    }
+  }
+}
+
+#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(#suspension-view-tabpanel-ribbon
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div),
+    :deep(#suspension-view-tabpanel-speaker
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div) {
+      width: $meetingComponentWitdh * 0.5;
+    }
+  }
+  .layout-template-2 {
+    :deep(#suspension-view-tabpanel-ribbon
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div),
+    :deep(#suspension-view-tabpanel-speaker
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div) {
+      width: $meetingComponentWitdh * 0.5;
+    }
+    :deep(#suspension-view-tabpanel-ribbon
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
+    :deep(#suspension-view-tabpanel-speaker
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+      flex-direction: row-reverse;
+    }
+  }
+
+  .layout-template-3 {
+    :deep(#suspension-view-tabpanel-ribbon
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div),
+    :deep(#suspension-view-tabpanel-speaker
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div) {
+      width: $meetingComponentWitdh * 0.2;
+      height: $meetingComponentWitdh * 0.2 * 9 / 16;
+      align-self: center;
+    }
+  }
+  .layout-template-4 {
+    :deep(#suspension-view-tabpanel-ribbon
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div),
+    :deep(#suspension-view-tabpanel-speaker
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div[class*="inSharing"]
+        + div) {
+      width: $meetingComponentWitdh * 0.2;
+      height: $meetingComponentWitdh * 0.2 * 9 / 16;
+      align-self: center;
+    }
+    :deep(#suspension-view-tabpanel-ribbon
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
+    :deep(#suspension-view-tabpanel-speaker
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+      flex-direction: row-reverse;
+    }
+  }
+
+  :deep(.zmwebsdk-MuiToolbar-root.zmwebsdk-MuiToolbar-regular) {
+    display: none; // 隐藏顶部 toolbar
+  }
+  :deep(div[class*="zmwebsdk-makeStyles-singleView"]) {
+    padding: 0; // 去掉会议组件边距
   }
   :deep(#video-element
       > div
       > .zmwebsdk-MuiPaper-root
       > .zmwebsdk-MuiPaper-root:nth-child(1)) {
-    height: calc(100vw * 0.9 * 9 / 16) !important;
+    width: calc(100vw * 0.9);
+  }
+  :deep(#video-element
+      > div
+      > .zmwebsdk-MuiPaper-root
+      > .zmwebsdk-MuiPaper-root:nth-child(2)) {
+    width: 270px;
+    background: #ccc;
+  }
+  :deep(#suspension-view-tabpanel-ribbon
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
+  :deep(#suspension-view-tabpanel-gallery
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
+  :deep(#suspension-view-tabpanel-speaker
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+    height: calc(100vw * 0.9 * 9 / 16);
   }
 }
 </style>