feat: 更新 index.html 和 App.vue，优化页面结构和样式

2024-12-03 22:34:56 +08:00
parent 45e5396153
commit 8be5378514
2 changed files with 76 additions and 42 deletions
--- a/index.html
+++ b/index.html
@ -1,7 +1,6 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="zh-CN">
-
-<head>
+  <head>
    <meta charset="UTF-8" />
    <link
      rel="icon"
@ -10,26 +9,58 @@
    />
    <meta
      name="viewport"
-    content="width=device-width, initial-scale=1.0"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>Vue FormKit Example</title>
    <link
      rel="stylesheet"
      href="/src/assets/tailwind.css"
-  >
+    />
    <link
      rel="stylesheet"
      href="/src/assets/main.css"
+    />
+
+    <script>
+      function setAppHeight() {
+        const app = document.getElementById('app');
+        app.style.minHeight = `${window.innerHeight}px`;
+      }
+
+      window.addEventListener('resize', setAppHeight);
+      window.addEventListener('load', setAppHeight);
+    </script>
+    <style>
+      #app {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+
+      @supports (min-height: 100dvh) {
+        #app {
+          min-height: 100dvh;
+        }
+      }
+
+      .page-wrapper {
+        flex-grow: 1;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="app">
+      <div
+        class="page-wrapper"
+        style="display: flex; justify-content: center; align-items: center"
      >
-
-</head>
-
-<body>
-  <div id="app"></div>
+        Loading...
+      </div>
+    </div>
    <script
      type="module"
      src="/src/main.ts"
    ></script>
-</body>
-
+  </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@ -2,9 +2,11 @@
 import AllCustom from './all-custom/all-custom.vue';
 import TutorialForm from './tutorial-form/index.vue';
 import ZodForm from './zod-form/index.vue';
+
 </script>

 <template>
+  <div class="page-wrapper">
    <ZodForm v-if="false" />
    <TutorialForm v-if="false" />

@ -20,4 +22,5 @@ import ZodForm from './zod-form/index.vue';
        <InputText id="username"></InputText>
      </FloatLabel>
    </div>
+  </div>
 </template>