update fullscreen layout

src/components/NavMenu.vue

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

src/components/SettingDialog.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useSettings } from '../store/settings'
-const emit = defineEmits(["close"]);
+const emit = defineEmits(["close", "change-resolution"]);
 
 const store = useSettings();
 const settings = ref(store.settings);
@@ -20,7 +20,8 @@ function handleConfirm() {
     if (settings.value.resolution.width > 7680) store.settings.resolution.width = 7680;
     if (settings.value.resolution.height < 270) store.settings.resolution.height = 270;
     if (settings.value.resolution.height > 4320) store.settings.resolution.height = 4320;
-    emit('close')
+
+    emit('change-resolution', store.settings.resolution.width, store.settings.resolution.height)
 }
 </script>
 

src/components/Tools.vue

@@ -5,6 +5,9 @@ import IconExchange from "../assets/menu_icon/IconExchange.vue";
 import IconSetting from "../assets/menu_icon/IconSetting.vue";
 import SettingDialogVue from "./SettingDialog.vue";
 import { useSettings } from '../store/settings';
+
+const emit = defineEmits(['change-resolution'])
+
 const store = useSettings();
 const settings = ref(store.settings)
 store.$subscribe((_, state) => {
@@ -21,6 +24,10 @@ function showDialog() {
 function toggleLunbo() {
   settings.value.carousel = !settings.value.carousel;
 }
+
+function handleChangeResolution(w, h) {
+  emit('change-resolution', w, h)
+}
 </script>
 
 <template>
@@ -38,7 +45,7 @@ function toggleLunbo() {
       <IconExchange :color="settings.carousel ? '#03356a' : '#50A1EC'" />
     </button>
   </div>
-  <SettingDialogVue v-if="visible" @close="visible = false;" />
+  <SettingDialogVue v-if="visible" @close="visible = false;" @change-resolution="handleChangeResolution" />
 </template>
 
 <style scoped>