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 @@ { 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(() => {