fix fullscreen

src/App.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import MainPage from "./MainPage.vue";
-import Slider from "./components/Slider.vue";
+// import Slider from "./components/Slider.vue";
 import useWebsocket from "./utils/useWebsocket";
 import { useWsStore } from "./store";
 const store = useWsStore();
@@ -40,8 +40,10 @@ useWebsocket(store, urlPath.value);
 
 <style scoped>
 #app-container {
-  width: 100vw;
-  height: 100vh;
+  /* width: 100vw;
+  height: 100vh; */
   background: #fff;
+  height: 100%;
+  display: inline-block;
 }
 </style>

src/MainPage.vue

@@ -44,19 +44,19 @@ store.$subscribe((mutation, state) => {
 })
 
 
-// 检查状态
-onMounted(() => {
-  const settings = store.settings;
-  if (settings.carousel) {
-    // 开始轮播
-    if (timer.value) clearInterval(timer.value);
-    timer.value = setInterval(() => {
-      handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
-    }, settings.carouselTime * 1000);
-  }
-  // 设置分辨率
-  handleResolutionChange(settings.resolution.width, settings.resolution.height);
-})
+// // 检查状态
+// onMounted(() => {
+//   const settings = store.settings;
+//   if (settings.carousel) {
+//     // 开始轮播
+//     if (timer.value) clearInterval(timer.value);
+//     timer.value = setInterval(() => {
+//       handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
+//     }, settings.carouselTime * 1000);
+//   }
+//   // 设置分辨率
+//   handleResolutionChange(settings.resolution.width, settings.resolution.height);
+// })
 
 
 const pathMap = {
@@ -78,9 +78,11 @@ const pathMap = {
 }
 
 function handleResolutionChange(width, height) {
+  console.log('document.documentElement', document.documentElement)
   if (mainContainer.value) {
     // mainContainer.value.style.width = `${width}px`;
     // mainContainer.value.style.height = `${height}px`;
+    // changeScale(mainContainer.value, width, height)
     changeScale(mainContainer.value, width, height)
   }
 }
@@ -128,10 +130,6 @@ function resetScale(elm) {
   position: relative;
   display: flex;
   flex-direction: column;
-  /** 
-  background: url('https://img1.baidu.com/it/u=2052683582,2603151390&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800')
-  100% / 100% no-repeat;
-  */
   background: url(./assets/bg.png) 100% / cover no-repeat;
 }
 

src/components/HeadTime.vue

@@ -28,8 +28,9 @@ onMounted(() => {
   line-height: 1;
 }
 
-/* :fullscreen .datetime {
-  right: 620px;
-  top: 56px;
-} */
+:fullscreen .datetime {
+  /* right: 620px;
+  top: 56px; */
+  color: red;
+}
 </style>

src/pages/3D.vue

@@ -53,23 +53,23 @@ function changeScale(elm, width, height) {
   elm.style.transform = style.transform;
   elm.style.transformOrigin = style.transformOrigin;
 }
-onMounted(() => {
-  if (document.fullscreenElement && part3d.value) {
-    changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
-  }
-})
-watch(() => settings.fullscreen, val => {
-  if (val) {
-    // 全屏状态下
-    if (part3d.value) {
-      changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
-    }
-  } else {
-    if (part3d.value) {
-      changeScale(part3d.value, 1920, 900)
-    }
-  }
-}, { immediate: true })
+// onMounted(() => {
+//   if (document.fullscreenElement && part3d.value) {
+//     changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
+//   }
+// })
+// watch(() => settings.fullscreen, val => {
+//   if (val) {
+//     // 全屏状态下
+//     if (part3d.value) {
+//       changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
+//     }
+//   } else {
+//     if (part3d.value) {
+//       changeScale(part3d.value, 1920, 900)
+//     }
+//   }
+// }, { immediate: true })
 </script>
 
 <template>

src/style.css

@@ -3,3 +3,7 @@
   margin: 0;
   font-family: '黑体', Arial, Helvetica, sans-serif;
 }
+
+html, body {
+  height: 100%;
+}