From 5abbe3d32134d65dc39cf2f48ca2339d51cdcc82 Mon Sep 17 00:00:00 2001
From: ljt990218 <2511590093@qq.com>
Date: Sat, 23 Mar 2024 20:59:31 +0800
Subject: [PATCH 1/6] fix: Screen adaptation

---
 index.html          | 58 ++++++++++++++++++++++++++-------------------
 src/App.vue         | 12 +++++++---
 src/pages/index.vue |  2 ++
 src/styles/app.less |  2 +-
 4 files changed, 46 insertions(+), 28 deletions(-)
diff --git a/index.html b/index.html
index 463b3c79..79d68bec 100644
--- a/index.html
+++ b/index.html
@@ -1,26 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
-    <link rel="apple-touch-icon" href="/pwa-192x192.png" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f6d2d2">
-    <meta name="msapplication-TileColor" content="#f6d2d2">
-    <script>
-      ;(function () {
-        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-        const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
-        if (setting === 'dark' || (prefersDark && setting !== 'light'))
-          document.documentElement.classList.toggle('dark', true)
-      })()
-    </script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-    <noscript>
-      This website requires JavaScript to function properly.
-      Please enable JavaScript to continue.
-    </noscript>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <link rel="apple-touch-icon" href="/pwa-192x192.png" />
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f6d2d2">
+  <meta name="msapplication-TileColor" content="#f6d2d2">
+  <script>
+    ; (function () {
+      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
+      if (setting === 'dark' || (prefersDark && setting !== 'light'))
+        document.documentElement.classList.toggle('dark', true)
+    })()
+  </script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+  <noscript>
+    This website requires JavaScript to function properly.
+    Please enable JavaScript to continue.
+  </noscript>
+</body>
+
+<script>
+  let app = document.querySelector('#app')
+  window.addEventListener('load', function () {
+    app.style.minHeight = window.innerHeight + 'px'
+  })
+</script>
+
+</html>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 7524d538..b8c7805c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,6 +36,13 @@ const { initializeThemeSwitcher } = useAutoThemeSwitcher(appStore)
 onMounted(() => {
   initializeThemeSwitcher()
 })
+
+let appSrapperTop = ref('0px')
+const router = useRouter()
+router.beforeEach(to => {
+  to.meta.title != undefined ? appSrapperTop.value = '46px' : appSrapperTop.value = '0px'
+})
+
 </script>
 
 <template>
@@ -43,7 +50,7 @@ onMounted(() => {
     <NavBar />
     <router-view v-slot="{ Component, route }">
       <transition :name="routeTransitionName">
-        <div :key="route.name" class="app-wrapper">
+        <div :key="route.name" class="app-wrapper" :style="{ top: appSrapperTop }">
           <component :is="Component" />
         </div>
       </transition>
@@ -54,9 +61,8 @@ onMounted(() => {
 <style scoped>
 .app-wrapper {
   width: 100%;
-  height: 100%;
+  height: calc( 100% - 46px );
   position: absolute;
-  top: 46px;
   left: 0;
   overflow-y: auto;
 }
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 5e3dfc02..ee13012f 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -34,6 +34,7 @@ const menuItems = [
 </script>
 
 <template>
+  <div class="m-t-46" />
   <VanCellGroup inset>
     <VanCell center title="🌗 暗黑模式">
       <template #right-icon>
@@ -45,6 +46,7 @@ const menuItems = [
       <VanCell :title="item.title" :to="item.route" is-link />
     </template>
   </VanCellGroup>
+
 </template>
 
 <route lang="yaml">
diff --git a/src/styles/app.less b/src/styles/app.less
index 2925d90e..25e55093 100644
--- a/src/styles/app.less
+++ b/src/styles/app.less
@@ -1,7 +1,7 @@
 #app {
-  min-height: 100vh;
   position: relative;
   overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 html {

From ad01968cbfbad173a64b58d174293f3937231818 Mon Sep 17 00:00:00 2001
From: ljt990218 <2511590093@qq.com>
Date: Sat, 23 Mar 2024 21:00:26 +0800
Subject: [PATCH 2/6] fix: Screen adaptation

---
 src/App.vue         |  7 +++----
 src/pages/index.vue | 24 ++++++++++++------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b8c7805c..b96b7a4a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -37,12 +37,11 @@ onMounted(() => {
   initializeThemeSwitcher()
 })
 
-let appSrapperTop = ref('0px')
+const appSrapperTop = ref('0px')
 const router = useRouter()
-router.beforeEach(to => {
-  to.meta.title != undefined ? appSrapperTop.value = '46px' : appSrapperTop.value = '0px'
+router.beforeEach((to) => {
+  to.meta.title !== undefined ? appSrapperTop.value = '46px' : appSrapperTop.value = '0px'
 })
-
 </script>
 
 <template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index ee13012f..720f0837 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -34,19 +34,19 @@ const menuItems = [
 </script>
 
 <template>
-  <div class="m-t-46" />
-  <VanCellGroup inset>
-    <VanCell center title="🌗 暗黑模式">
-      <template #right-icon>
-        <VanSwitch v-model="checked" size="20px" aria-label="on/off Dark Mode" @click="toggle()" />
+  <div class="m-t-46">
+    <VanCellGroup inset>
+      <VanCell center title="🌗 暗黑模式">
+        <template #right-icon>
+          <VanSwitch v-model="checked" size="20px" aria-label="on/off Dark Mode" @click="toggle()" />
+        </template>
+      </VanCell>
+
+      <template v-for="item in menuItems" :key="item.route">
+        <VanCell :title="item.title" :to="item.route" is-link />
       </template>
-    </VanCell>
-
-    <template v-for="item in menuItems" :key="item.route">
-      <VanCell :title="item.title" :to="item.route" is-link />
-    </template>
-  </VanCellGroup>
-
+    </VanCellGroup>
+  </div>
 </template>
 
 <route lang="yaml">

From 20766c30fca56e8e4f26f1ddadd7c1525fe85d72 Mon Sep 17 00:00:00 2001
From: ljt990218 <2511590093@qq.com>
Date: Sat, 23 Mar 2024 21:15:05 +0800
Subject: [PATCH 3/6] fix: Screen adaptation

---
 src/layouts/404.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/404.vue b/src/layouts/404.vue
index 9f4c4de6..20b3f51e 100644
--- a/src/layouts/404.vue
+++ b/src/layouts/404.vue
@@ -3,7 +3,7 @@ const router = useRouter()
 </script>
 
 <template>
-  <main p="x4 y16" text-18 text="center gray-300 dark:gray-200">
+  <main p="x4 y62" text-18 text="center gray-300 dark:gray-200">
     <van-icon name="warn-o" size="3em" />
 
     <RouterView />

From 0a8787982dee76617fb5b3f3c03bb9a88339c1de Mon Sep 17 00:00:00 2001
From: ljt990218 <2511590093@qq.com>
Date: Sat, 23 Mar 2024 21:25:01 +0800
Subject: [PATCH 4/6] fix: Screen adaptation

---
 src/App.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b96b7a4a..959bc257 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,9 +38,11 @@ onMounted(() => {
 })
 
 const appSrapperTop = ref('0px')
+const appSrapperHeight = ref('calc( 100% - 0px )')
 const router = useRouter()
 router.beforeEach((to) => {
   to.meta.title !== undefined ? appSrapperTop.value = '46px' : appSrapperTop.value = '0px'
+  to.meta.title !== undefined ? appSrapperHeight.value = 'calc( 100% - 46px )' : appSrapperHeight.value = 'calc( 100% - 0px )'
 })
 </script>
 
@@ -49,7 +51,7 @@ router.beforeEach((to) => {
     <NavBar />
     <router-view v-slot="{ Component, route }">
       <transition :name="routeTransitionName">
-        <div :key="route.name" class="app-wrapper" :style="{ top: appSrapperTop }">
+        <div :key="route.name" class="app-wrapper" :style="{ top: appSrapperTop,height: appSrapperHeight }">
           <component :is="Component" />
         </div>
       </transition>
@@ -60,7 +62,6 @@ router.beforeEach((to) => {
 <style scoped>
 .app-wrapper {
   width: 100%;
-  height: calc( 100% - 46px );
   position: absolute;
   left: 0;
   overflow-y: auto;

From 8ba0d07ecf002d15d98e5712aea35744b6fe5566 Mon Sep 17 00:00:00 2001
From: ljt990218 <2511590093@qq.com>
Date: Sat, 23 Mar 2024 21:28:48 +0800
Subject: [PATCH 5/6] fix: Screen adaptation

---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 959bc257..e53f69fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -51,7 +51,7 @@ router.beforeEach((to) => {
     <NavBar />
     <router-view v-slot="{ Component, route }">
       <transition :name="routeTransitionName">
-        <div :key="route.name" class="app-wrapper" :style="{ top: appSrapperTop,height: appSrapperHeight }">
+        <div :key="route.name" class="app-wrapper" :style="{ top: appSrapperTop, height: appSrapperHeight }">
           <component :is="Component" />
         </div>
       </transition>

From 51f23184dcd2de33780897aa8cc8cb9915e534fb Mon Sep 17 00:00:00 2001
From: ljt990218 <2511590093@qq.com>
Date: Sat, 23 Mar 2024 21:37:00 +0800
Subject: [PATCH 6/6] fix: Screen adaptation

---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 959bc257..e53f69fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -51,7 +51,7 @@ router.beforeEach((to) => {
     <NavBar />
     <router-view v-slot="{ Component, route }">
       <transition :name="routeTransitionName">
-        <div :key="route.name" class="app-wrapper" :style="{ top: appSrapperTop,height: appSrapperHeight }">
+        <div :key="route.name" class="app-wrapper" :style="{ top: appSrapperTop, height: appSrapperHeight }">
           <component :is="Component" />
         </div>
       </transition>
