共享窗口的大小占满背景

src/views/meeting.vue

@@ -1,5 +1,11 @@
 <template>
-  <div id="app-container" ref="appContainerRef">
+  <div
+    id="app-container"
+    :class="{
+      isShare: templateId == 5 && inSharing && !isShareByme,
+    }"
+    ref="appContainerRef"
+  >
     <!-- zoom 会议组件 -->
     <div id="meeting-chat-row">
       <div class="fullscreen-wrap" ref="fullscreenWrapRef">
@@ -437,6 +443,7 @@ const switchToVideoOn = () => {
 };
 
 const inSharing = ref(false); // 共享屏幕是否开启
+const isShareByme = ref(false); // 是否由我共享
 const attendeeslist = ref("");
 setInterval(() => {
   // 共享屏幕状态变化
@@ -446,6 +453,13 @@ setInterval(() => {
   inSharing.value = screenShareEl ? true : false;
   // ------
 
+  // TODO:查找停止共享按钮元素，判断是否由自己共享，由自己共享则不应用 id 5 布局。
+  if (templateId.value == 5) {
+    const stopShareEl = document.querySelector(
+      `div[class*="zmwebsdk-makeStyles-isSharing-"]`
+    );
+    isShareByme.value = stopShareEl ? true : false;
+  }
   // 检测是否是ribbon视图, 如果是, 则切换到gallery view, 当观众被设为嘉宾或嘉宾被设为观众时需要切换视图.
   const isRibbon = document.querySelector(
     "#suspension-view-tab-thumbnail-ribbon.zmwebsdk-MuiTab-selected"
@@ -912,6 +926,40 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 $meetingBackgroundWidth: 80vw; //会议背景宽度
 $meetingBackgroundHeight: 80vw * 9 / 16;
 
+.isShare {
+  #meeting-container {
+    padding-top: 0 !important;
+  }
+  #right-chat {
+    height: calc(80vw * 1080 / 1920) !important;
+  }
+  #video-element {
+    width: 80vw !important;
+    // height: calc(80vw * 850 / 1346) !important;
+    height: calc(80vw * 1080 / 1920) !important;
+  }
+  // 底部操作条
+  :deep(#video-element
+      > div
+      > .zmwebsdk-MuiPaper-root
+      > .zmwebsdk-MuiPaper-root:nth-child(2)) {
+    display: none !important;
+  }
+  // 视频组件宽度
+  :deep(#video-element
+      > div
+      > .zmwebsdk-MuiPaper-root
+      > .zmwebsdk-MuiPaper-root:nth-child(1)) {
+    width: 80vw !important;
+  }
+  // zoom 会议共享屏幕组件宽度
+  :deep(div[id*="suspension-view-tabpanel"]
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+    // height: calc(80vw * 850 / 1346) !important;
+    height: calc(80vw * 1080 / 1920) !important;
+  }
+}
+
 :deep(#right-chat .chat-container .message-list) {
   // height: $meetingComponentWitdh * 9 / 16;
   // height: 100%;