1:1 view in mobile

src/views/meeting.vue

@@ -375,7 +375,6 @@ const setTextLabel = () => {
   });
   store.getters.textLabelList.forEach((item) => {
     const labelObj = JSON.parse(item.textLabel);
-    console.log(labelObj);
     const textEl = document.createElement("div");
     textEl.id = `${uniqueId("tag-")}`;
     textEl.innerHTML = labelObj.content;
@@ -940,12 +939,10 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
     height: calc(80vw * 1080 / 1920) !important;
   }
   // 底部操作条
-  :deep(
-      #video-element
-        > div
-        > .zmwebsdk-MuiPaper-root
-        > .zmwebsdk-MuiPaper-root:nth-child(2)
-    ) {
+  :deep(#video-element
+      > div
+      > .zmwebsdk-MuiPaper-root
+      > .zmwebsdk-MuiPaper-root:nth-child(2)) {
     // display: none !important;
     // position: absolute;
     // visibility: hidden;
@@ -956,19 +953,15 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
     transform: translate(-50%, 100%);
   }
   // 视频组件宽度
-  :deep(
-      #video-element
-        > div
-        > .zmwebsdk-MuiPaper-root
-        > .zmwebsdk-MuiPaper-root:nth-child(1)
-    ) {
+  :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
-    ) {
+  :deep(div[id*="suspension-view-tabpanel"]
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
     // height: calc(80vw * 850 / 1346) !important;
     height: calc(80vw * 1080 / 1920) !important;
   }
@@ -979,19 +972,15 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
     }
 
     // 视频组件宽度
-    :deep(
-        #video-element
-          > div
-          > .zmwebsdk-MuiPaper-root
-          > .zmwebsdk-MuiPaper-root:nth-child(1)
-      ) {
+    :deep(#video-element
+        > div
+        > .zmwebsdk-MuiPaper-root
+        > .zmwebsdk-MuiPaper-root:nth-child(1)) {
       width: 100vw !important;
     }
     // zoom 会议共享屏幕组件宽度
-    :deep(
-        div[id*="suspension-view-tabpanel"]
-          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-      ) {
+    :deep(div[id*="suspension-view-tabpanel"]
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
       // height: calc(80vw * 850 / 1346) !important;
       height: calc(100vw * 1080 / 1920) !important;
     }
@@ -1003,19 +992,15 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
     }
 
     // 视频组件宽度
-    :deep(
-        #video-element
-          > div
-          > .zmwebsdk-MuiPaper-root
-          > .zmwebsdk-MuiPaper-root:nth-child(1)
-      ) {
+    :deep(#video-element
+        > div
+        > .zmwebsdk-MuiPaper-root
+        > .zmwebsdk-MuiPaper-root:nth-child(1)) {
       width: 100vw !important;
     }
     // zoom 会议共享屏幕组件宽度
-    :deep(
-        div[id*="suspension-view-tabpanel"]
-          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-      ) {
+    :deep(div[id*="suspension-view-tabpanel"]
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
       // height: calc(80vw * 850 / 1346) !important;
       height: calc(100vw * 1080 / 1920) !important;
     }
@@ -1040,19 +1025,15 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
     }
 
     // 视频组件宽度
-    :deep(
-        #video-element
-          > div
-          > .zmwebsdk-MuiPaper-root
-          > .zmwebsdk-MuiPaper-root:nth-child(1)
-      ) {
+    :deep(#video-element
+        > div
+        > .zmwebsdk-MuiPaper-root
+        > .zmwebsdk-MuiPaper-root:nth-child(1)) {
       width: calc(100vw * 1920 / 1080) !important;
     }
     // zoom 会议共享屏幕组件宽度
-    :deep(
-        div[id*="suspension-view-tabpanel"]
-          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-      ) {
+    :deep(div[id*="suspension-view-tabpanel"]
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
       // height: calc(100vh * 1080 / 1920) !important;
       height: 100vw !important;
     }
@@ -1078,12 +1059,10 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
     :deep(.rich-editor) {
       width: 14vw !important;
     }
-    :deep(
-        .notInSharing
-          div[id*="suspension-view-tabpanel"]
-          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-          > div
-      ) {
+    :deep(.notInSharing
+        div[id*="suspension-view-tabpanel"]
+        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+        > div) {
       width: $meetingComponentWitdh;
     }
     #meeting-container {
@@ -1102,17 +1081,13 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
       }
       #video-element {
         width: $meetingComponentWitdh;
-        :deep(
-            div[id*="suspension-view-tabpanel"]
-              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-              > div[class*="inSharing"]
-              > div
-          ) {
+        :deep(div[id*="suspension-view-tabpanel"]
+            > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+            > div[class*="inSharing"]
+            > div) {
           padding-top: 3px;
         }
-        :deep(
-            .zmwebsdk-MuiListSubheader-root.zmwebsdk-MuiListSubheader-sticky.zmwebsdk-MuiListSubheader-gutters
-          ) {
+        :deep(.zmwebsdk-MuiListSubheader-root.zmwebsdk-MuiListSubheader-sticky.zmwebsdk-MuiListSubheader-gutters) {
           position: initial;
         }
       }
@@ -1149,95 +1124,73 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
   }
 }
 .layout-template-1 {
-  :deep(
-      div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div
-    ) {
+  :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;
     align-self: center;
   }
 }
 .layout-template-2 {
-  :deep(
-      div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div
-    ) {
+  :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;
     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
-    ) {
+  :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(
-      div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div
-    ) {
+  :deep(div[id*="suspension-view-tabpanel"]
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+      > div[class*="inSharing"]
+      + div) {
     width: $meetingComponentWitdh * 0.15;
     height: $meetingComponentWitdh * 0.15 * 9 / 16;
     position: relative;
   }
 }
 .layout-template-4 {
-  :deep(
-      div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div
-    ) {
+  :deep(div[id*="suspension-view-tabpanel"]
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+      > div[class*="inSharing"]
+      + div) {
     width: $meetingComponentWitdh * 0.15;
     height: $meetingComponentWitdh * 0.15 * 9 / 16;
     position: relative;
   }
-  :deep(
-      #suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-    ),
-  :deep(
-      #suspension-view-tabpanel-speaker
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-    ) {
+  :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-5 {
-  :deep(
-      div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div
-    ) {
+  :deep(div[id*="suspension-view-tabpanel"]
+      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+      > div[class*="inSharing"]
+      + div) {
     display: none;
     width: $meetingComponentWitdh;
     height: $meetingComponentWitdh * 9 / 16;
     position: relative;
   }
-  :deep(
-      #suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-    ),
-  :deep(
-      #suspension-view-tabpanel-speaker
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-    ) {
+  :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;
   }
 }
@@ -1248,27 +1201,21 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
 :deep(div[class*="zmwebsdk-makeStyles-singleView"]) {
   padding: 0; // 去掉会议组件边距
 }
-:deep(
-    #video-element
-      > div
-      > .zmwebsdk-MuiPaper-root
-      > .zmwebsdk-MuiPaper-root:nth-child(1)
-  ) {
+:deep(#video-element
+    > div
+    > .zmwebsdk-MuiPaper-root
+    > .zmwebsdk-MuiPaper-root:nth-child(1)) {
   width: $meetingComponentWitdh;
 }
-:deep(
-    #video-element
-      > div
-      > .zmwebsdk-MuiPaper-root
-      > .zmwebsdk-MuiPaper-root:nth-child(2)
-  ) {
+:deep(#video-element
+    > div
+    > .zmwebsdk-MuiPaper-root
+    > .zmwebsdk-MuiPaper-root:nth-child(2)) {
   width: 270px;
   background: #ccc;
 }
-:deep(
-    div[id*="suspension-view-tabpanel"]
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-  ) {
+:deep(div[id*="suspension-view-tabpanel"]
+    > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
   height: $meetingComponentWitdh * 9 / 16;
 }
 
@@ -1277,11 +1224,9 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
   box-shadow: 0 0;
 }
 // 隐藏共享屏幕上方提示
-:deep(
-    div[id*="suspension-view-tabpanel"]
-      div[class*="inSharing"]
-      > .zmwebsdk-MuiBox-root
-  ) {
+:deep(div[id*="suspension-view-tabpanel"]
+    div[class*="inSharing"]
+    > .zmwebsdk-MuiBox-root) {
   display: none;
 }
 
@@ -1295,12 +1240,10 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
       padding-right: 0;
     }
     #meeting-chat-row {
-      :deep(
-          .notInSharing
-            div[id*="suspension-view-tabpanel"]
-            > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-            > div
-        ) {
+      :deep(.notInSharing
+          div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div) {
         width: $meetingComponentWitdh;
       }
       #meeting-container {
@@ -1312,39 +1255,43 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
         }
         #video-element {
           width: 88vw;
-          :deep(
-              div[id*="suspension-view-tabpanel"]
-                > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-                > div[class*="inSharing"]
-                + div
-            ) {
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+              > div[class*="inSharing"]
+              + div) {
             width: $meetingComponentWitdh * 0.15;
             height: $meetingComponentWitdh * 0.15 * 9 / 14.5;
             position: relative;
             align-self: initial;
           }
-          // width: 72vw;
-          :deep(
-              div[id*="suspension-view-tabpanel"]
+          &.layout-template-1,
+          &.layout-template-2 {
+            :deep(div[id*="suspension-view-tabpanel"]
                 > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
                 > div[class*="inSharing"]
-                > div
-            ) {
+                + div) {
+              width: $meetingComponentWitdh * 0.5;
+              height: $meetingComponentWitdh * 0.5 * 9 / 16;
+              // align-self: center;
+            }
+          }
+
+          // width: 72vw;
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+              > div[class*="inSharing"]
+              > div) {
             padding-top: initial;
           }
-          :deep(
-              div[id*="suspension-view-tabpanel"]
-                > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-            ) {
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
             height: $meetingComponentWitdh * 9 / 16;
           }
         }
-        :deep(
-            #video-element
-              > div
-              > .zmwebsdk-MuiPaper-root
-              > .zmwebsdk-MuiPaper-root:nth-child(1)
-          ) {
+        :deep(#video-element
+            > div
+            > .zmwebsdk-MuiPaper-root
+            > .zmwebsdk-MuiPaper-root:nth-child(1)) {
           width: $meetingComponentWitdh;
         }
       }
@@ -1360,12 +1307,10 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
   #meeting-chat-row {
     .fullscreen-wrap {
       width: 80vw;
-      :deep(
-          .notInSharing.fullscreen
-            div[id*="suspension-view-tabpanel"]
-            > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-            > div
-        ) {
+      :deep(.notInSharing.fullscreen
+          div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div) {
         width: 88vw;
       }
       #meeting-container.fullscreen {
@@ -1384,77 +1329,63 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
           width: $meetingComponentWitdh;
         }
         .layout-template-1 {
-          :deep(
-              div[id*="suspension-view-tabpanel"]
-                > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-                > div[class*="inSharing"]
-                + div
-            ) {
+          :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;
           }
         }
         .layout-template-2 {
-          :deep(
-              div[id*="suspension-view-tabpanel"]
-                > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-                > div[class*="inSharing"]
-                + div
-            ) {
+          :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;
           }
         }
 
         .layout-template-3 {
-          :deep(
-              div[id*="suspension-view-tabpanel"]
-                > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-                > div[class*="inSharing"]
-                + div
-            ) {
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+              > div[class*="inSharing"]
+              + div) {
             width: $meetingComponentWitdh * 0.15;
             height: $meetingComponentWitdh * 0.15 * 9 / 16;
           }
         }
         .layout-template-4 {
-          :deep(
-              div[id*="suspension-view-tabpanel"]
-                > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-                > div[class*="inSharing"]
-                + div
-            ) {
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+              > div[class*="inSharing"]
+              + div) {
             width: $meetingComponentWitdh * 0.15;
             height: $meetingComponentWitdh * 0.15 * 9 / 16;
           }
         }
         .layout-template-5 {
-          :deep(
-              div[id*="suspension-view-tabpanel"]
-                > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-                > div[class*="inSharing"]
-                + div
-            ) {
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+              > div[class*="inSharing"]
+              + div) {
             display: none;
             width: $meetingComponentWitdh;
             height: $meetingComponentWitdh * 9 / 16;
           }
         }
 
-        :deep(
-            #video-element
-              > div
-              > .zmwebsdk-MuiPaper-root
-              > .zmwebsdk-MuiPaper-root:nth-child(1)
-          ) {
+        :deep(#video-element
+            > div
+            > .zmwebsdk-MuiPaper-root
+            > .zmwebsdk-MuiPaper-root:nth-child(1)) {
           width: 88vw;
         }
-        :deep(
-            #video-element
-              > div
-              > .zmwebsdk-MuiPaper-root
-              > .zmwebsdk-MuiPaper-root:nth-child(2)
-          ) {
+        :deep(#video-element
+            > div
+            > .zmwebsdk-MuiPaper-root
+            > .zmwebsdk-MuiPaper-root:nth-child(2)) {
           display: none;
         }
         // :deep(div[id*="suspension-view-tabpanel"]
@@ -1462,14 +1393,13 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
         //   height: calc(100vw * 0.9 * 9 / 16);
         // }
       }
-      :deep(
-          .notInSharing.verticalFullScreen
-            div[id*="suspension-view-tabpanel"]
-            > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-            > div
-        ) {
+      :deep(.notInSharing.verticalFullScreen
+          div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div) {
         width: 88vh;
       }
+      // 竖屏全屏
       #meeting-container.verticalFullScreen {
         $meetingComponentWitdh: 88vh;
         $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
@@ -1487,39 +1417,42 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
         }
         #video-element {
           width: $meetingComponentWitdh;
-          :deep(
-              div[id*="suspension-view-tabpanel"]
-                > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-                > div[class*="inSharing"]
-                + div
-            ) {
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+              > div[class*="inSharing"]
+              + div) {
             width: $meetingComponentWitdh * 0.15;
             height: $meetingComponentWitdh * 0.15 * 9 / 14.5;
           }
-          :deep(
-              div[id*="suspension-view-tabpanel"]
+          &.layout-template-1,
+          &.layout-template-2 {
+            :deep(div[id*="suspension-view-tabpanel"]
                 > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
                 > div[class*="inSharing"]
-                > div
-            ) {
+                + div) {
+              width: $meetingComponentWitdh * 0.5;
+              height: $meetingComponentWitdh * 0.5 * 9 / 14.5;
+            }
+          }
+
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+              > div[class*="inSharing"]
+              > div) {
             padding-top: initial;
           }
         }
-        :deep(
-            #video-element
-              > div
-              > .zmwebsdk-MuiPaper-root
-              > .zmwebsdk-MuiPaper-root:nth-child(1)
-          ) {
+        :deep(#video-element
+            > div
+            > .zmwebsdk-MuiPaper-root
+            > .zmwebsdk-MuiPaper-root:nth-child(1)) {
           // width: calc(100vh * 0.9) !important;
           width: $meetingComponentWitdh;
         }
-        :deep(
-            #video-element
-              > div
-              > .zmwebsdk-MuiPaper-root
-              > .zmwebsdk-MuiPaper-root:nth-child(2)
-          ) {
+        :deep(#video-element
+            > div
+            > .zmwebsdk-MuiPaper-root
+            > .zmwebsdk-MuiPaper-root:nth-child(2)) {
           display: none;
         }
         // :deep(div[id*="suspension-view-tabpanel"]