From 4cfdbc7edcd3c58e1342d9940ce561918cd91f1b Mon Sep 17 00:00:00 2001
From: quantulr <35954003+quantulr@users.noreply.github.com>
Date: Tue, 7 Jun 2022 00:49:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=BA=E5=88=B6=E5=85=A8=E5=B1=8F=2090%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/meeting.vue | 314 +++++++++++++++++++++---------------------
 1 file changed, 156 insertions(+), 158 deletions(-)

diff --git a/src/views/meeting.vue b/src/views/meeting.vue
index 57e3e03..19dc0cc 100644
--- a/src/views/meeting.vue
+++ b/src/views/meeting.vue
@@ -83,6 +83,7 @@
 
     <el-dialog
       custom-class="check-media"
+      destroy-on-close
       v-model="showCheckMediaVideo"
       :close-on-click-modal="false"
       title="摄像头和麦克风"
@@ -307,7 +308,7 @@ 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.width = `${meetingWidth.value}px`;
   videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
 
   document.querySelector(
@@ -522,45 +523,37 @@ const setFullScreen = async () => {
   //   return;
   // }
   document.querySelector(".fullscreen-wrap").requestFullscreen();
-  // meetingContainerRef.value.requestFullscreen();
+
   isFullScreen.value = true;
   nextTick(() => {
     meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
     meetingHeight.value = (meetingWidth.value * 9) / 16;
+    // 当手机竖屏时
     if (window.orientation === 0) {
-      // const height = innerHeight;
       isVerticalFullScreen.value = true;
+      videoElementRef.value.style.height = `${
+        screen.width - screen.height * 0.08
+      }px`;
       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'
+            "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
           )
           .forEach((el) => {
-            el.setAttribute("style", `height: ${92}vw !important`);
+            el.style.height = `${screen.width - screen.height * 0.08}px`;
           });
       });
     }
-    videoElementRef.value.setAttribute(
-      `style`,
-      `width: ${meetingWidth.value}px !important; height: ${
-        screen.height - screen.width * 0.08
-      }px !important`
-    );
+
+    videoElementRef.value.style.height = `${
+      screen.height - screen.width * 0.08
+    }px`;
     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`
-        );
+        el.style.height = `${screen.height - screen.width * 0.08}px`;
       });
   });
 };
@@ -737,7 +730,7 @@ onMounted(() => {
   meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
   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`;
 
   // 当全屏状态改变时
@@ -750,7 +743,7 @@ onMounted(() => {
       nextTick(() => {
         meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
         meetingHeight.value = (meetingWidth.value * 9) / 16;
-        videoElementRef.value.style.width = `${meetingWidth.value}px`;
+        // videoElementRef.value.style.width = `${meetingWidth.value}px`;
         videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
         document
           .querySelectorAll(
@@ -758,7 +751,8 @@ onMounted(() => {
           )
           .forEach((el) => {
             console.log(`${meetingHeight.value}px`);
-            el.style.height = `${meetingHeight.value}px`;
+            // el.style.height = `${meetingHeight.value}px`;
+            el.style.height = "";
           });
       });
     }
@@ -766,20 +760,12 @@ onMounted(() => {
   setTextLabel();
   startMeeting();
 });
+// 当修改窗口尺寸时
 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(
@@ -800,8 +786,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-$videoELementWidth: 80vw * 0.9;
-$videoElementHeight: $videoELementWidth * 9 / 16 + 1.5vw;
 $meetingComponentWitdh: 80vw * 0.9;
 $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 
@@ -820,6 +804,9 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       justify-content: center;
       width: 80vw;
       position: relative;
+      #video-element {
+        width: 72vw;
+      }
       .el-button {
         position: absolute;
         right: 1vw;
@@ -878,7 +865,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
     width: $meetingComponentWitdh * 0.2;
     height: $meetingComponentWitdh * 0.2 * 9 / 16;
     position: relative;
-    // align-self: center;
   }
 }
 .layout-template-4 {
@@ -889,7 +875,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
     width: $meetingComponentWitdh * 0.2;
     height: $meetingComponentWitdh * 0.2 * 9 / 16;
     position: relative;
-    // align-self: center;
   }
   :deep(#suspension-view-tabpanel-ribbon
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
@@ -916,7 +901,6 @@ $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"]
@@ -940,7 +924,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
     #check-media-wrap {
       display: inline-block;
       margin: 1vw auto;
-      // text-align: center;
       border-radius: 1vw;
       overflow: hidden;
       width: 36vw;
@@ -968,24 +951,28 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 }
 // 适配移动端 屏幕宽度小于 900px
 @media screen and (max-width: 900px) {
-  $meetingComponentWitdh: 100vw * 0.9;
-  $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
-  #meeting-container {
-    width: 100vw !important;
+  // $meetingComponentWitdh: 100vw * 0.9;
+  // $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+
+  #app-container {
+    #meeting-chat-row {
+      #meeting-container {
+        width: 100vw;
+        #video-element {
+          width: 90vw;
+        }
+        :deep(#video-element
+            > div
+            > .zmwebsdk-MuiPaper-root
+            > .zmwebsdk-MuiPaper-root:nth-child(1)) {
+          width: 90vw;
+        }
+      }
+    }
   }
   #right-chat {
     display: none !important;
   }
-  :deep(#video-element
-      > div
-      > .zmwebsdk-MuiPaper-root
-      > .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;
-  // }
 
   .layout-template-1 {
     :deep(div[id*="suspension-view-tabpanel"]
@@ -1017,7 +1004,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       width: $meetingComponentWitdh * 0.2;
       height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
       position: relative;
-      // align-self: center;
     }
   }
   .layout-template-4 {
@@ -1028,7 +1014,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       width: $meetingComponentWitdh * 0.2;
       height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
       position: relative;
-      // align-self: center;
     }
   }
   :deep(div[id*="suspension-view-tabpanel"]
@@ -1036,118 +1021,131 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
     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;
+    .el-dialog__body {
+      #check-media-wrap {
+        margin: 2vw auto;
+        width: 80vw;
+        height: 54vw;
+        svg {
+          width: 6vw;
+          height: 6vw;
+        }
       }
     }
   }
 }
 
 // 全屏样式
-.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;
-      }
-    }
+#app-container {
+  #meeting-chat-row {
+    .fullscreen-wrap {
+      // $meetingComponentWitdh: 90vw;
+      // width: 100%;
+      // height: 100%;
+      width: 80vw;
 
-    :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.fullscreen {
+        $meetingComponentWitdh: 100vw * 0.9;
+        // $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+        padding-top: 8vw;
+        width: 100vw;
+        #video-element {
+          width: 90vw;
+        }
+        .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;
+          }
+        }
+        .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;
+          }
+        }
 
-  #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;
+        .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;
+          }
+        }
+        .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;
+          }
+        }
+        :deep(#video-element
+            > div
+            > .zmwebsdk-MuiPaper-root
+            > .zmwebsdk-MuiPaper-root:nth-child(1)) {
+          width: 90vw;
+        }
+        :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);
+        // }
+      }
+
+      #meeting-container.verticalFullScreen {
+        $meetingComponentWitdh: 100vw * 0.9;
+        $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+        position: absolute;
+        transform-origin: 0% 0%;
+        transform: rotate(90deg);
+        top: 0;
+        left: 100vw;
+        width: 100vh !important;
+        height: calc(92vw);
+        #video-element {
+          width: 90vh;
+          :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 / 14.5;
+          }
+        }
+        :deep(#video-element
+            > div
+            > .zmwebsdk-MuiPaper-root
+            > .zmwebsdk-MuiPaper-root:nth-child(1)) {
+          // width: calc(100vh * 0.9) !important;
+          width: 90vh;
+        }
+        :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;
+        // }
+      }
     }
-    :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>