1

src/MainPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, onMounted } from "vue";
 import Tools from "./components/Tools.vue";
 import NavMenu from "./components/NavMenu.vue";
 import AnnoucementPage from "./pages/AnnouncementPage.vue";
@@ -20,28 +20,45 @@ const handlePageChange = (page) => {
 };
 const mainContainer = ref(null);
 
-const { settings } = useSettings();
+const store = useSettings();
 const timer = ref(null);
-watch(() => settings.carousel, val => {
-  if (val) {
-    timer.value = setInterval(() => {
-      handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
-    }, settings.carouselTime * 1000);
-    return;
-  }
-  clearInterval(timer.value);
-  timer.value = null;
-})
 
-watch(() => settings.carouselTime, val => {
-  if (val > 0) {
+store.$subscribe((mutation, state) => {
+  // 如果更新了时间
+  if (mutation.events.key == 'carouselTime' && state.settings.carouselTime > 0 && state.settings.carousel) {
     if (timer.value) clearInterval(timer.value);
     timer.value = setInterval(() => {
       handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
-    }, val * 1000);
+    }, state.settings.carouselTime * 1000);
+  } else if (mutation.events.key == 'carousel') {
+    // 如果更新了状态
+    if (state.settings.carousel) {
+      timer.value = setInterval(() => {
+        handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
+      }, state.settings.carouselTime * 1000);
+    } else {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
   }
 })
 
+
+// 检查状态
+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 = {
   // 钢三线
   '/3-1': 1,

src/components/HeadTime.vue

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

src/components/NavMenu.vue

@@ -62,9 +62,9 @@ const handleClick = (page) => {
   z-index: 10;
 }
 
-:fullscreen .nav-menu {
+/* :fullscreen .nav-menu {
   top: 25%;
-}
+} */
 
 .flex-list {
   display: flex;

src/components/Tools.vue

@@ -8,25 +8,25 @@ import { useSettings } from '../store/settings';
 
 const emit = defineEmits(['change-resolution'])
 
-const store = useSettings();
-const settings = ref(store.settings)
-store.$subscribe((_, state) => {
-  settings.value.carousel = state.settings.carousel;
-})
+const { settings, updateSettings } = useSettings();
+// store.$subscribe((_, state) => {
+//   settings.value.carousel = state.settings.carousel;
+// })
 const visible = ref(false);
+
 function toHome() {
-  // document.location.href = '/1-1'
   document.location.reload()
 }
 function showDialog() {
   visible.value = true;
 }
 function toggleLunbo() {
-  settings.value.carousel = !settings.value.carousel;
+  updateSettings({ type: 'carousel', value: null })
 }
 
 function handleChangeResolution(w, h) {
-  emit('change-resolution', w, h)
+  emit('change-resolution', w, h);
+  visible.value = false;
 }
 </script>
 
@@ -40,7 +40,7 @@ function handleChangeResolution(w, h) {
     </button>
     <button style="position: relative;" @click="toggleLunbo">
       <span v-if="settings.carousel"
-        style="color: #fffa; font-family: 'Courier New', Courier, monospace; font-weight:600; font-size: 22px; user-select: none; position: absolute; line-height: 52px; text-align: center;">
+        style="color: #fffa; font-family: 'Courier New', Courier, monospace; font-weight:600; width: 56px; font-size: 22px; user-select: none; position: absolute; line-height: 52px; text-align: center;">
         {{ settings.carouselTime }}S</span>
       <IconExchange :color="settings.carousel ? '#03356a' : '#50A1EC'" />
     </button>

src/pages/3D.vue

@@ -629,9 +629,9 @@ watch(() => settings.fullscreen, val => {
   transform: translateX(-58%);
 }
 
-:fullscreen .absolute-full {
+/* :fullscreen .absolute-full {
   transform: translateX(-80%);
-}
+} */
 
 .info-1 .info:nth-child(1) {
   /* left: 490px;

src/store/settings.js

@@ -27,7 +27,8 @@ export const useSettings = defineStore("settings", () => {
   watch(
     () => settings.value.fullscreen,
     (val) => {
-      const mainContainer = document.getElementById("main-container");
+      // const mainContainer = document.getElementById("main-container");
+      const mainContainer = document.documentElement;
       if (val) {
         mainContainer.requestFullscreen().then(() => {
           document.removeEventListener("fullscreenchange", clearFullscreenFlag);