feat: 更新样式和脚本以改善应用布局和响应式设计

2024-12-04 12:01:21 +08:00
parent 32902909c2
commit 2479c80cd1
2 changed files with 38 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -9,12 +9,43 @@
    />
    <meta name="format-detection" content="telephone=no" />
    <title>vue-ts-example</title>
-    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />
+    <link rel="stylesheet" href="https://testingcf.jsdelivr.net/npm/@unocss/reset/tailwind.min.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 type="text/css">
+      body {
+        margin: 0;
+      }
+      #app {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+
+      @supports (min-height: 100dvh) {
+        #app {
+          min-height: 100dvh;
+        }
+        html .min-h-screen {
+          min-height: 100dvh;
+        }
+      }
+      .page-wrapper {
+        flex-grow: 1;
+      }
+    </style>
  </head>

  <body ontouchstart ontouchend>
    <div id="app">
-      <div style="display: flex; justify-content: center; align-items: center; height: 100vh">Loading...</div>
+      <div class="page-wrapper" style="display: flex; justify-content: center; align-items: center">Loading...</div>
    </div>
    <script type="module" src="/src/main.ts"></script>
    <script src="https://fastly.jsdelivr.net/npm/@vant/touch-emulator/dist/index.min.js"></script>
--- a/src/main.ts
+++ b/src/main.ts
@ -53,6 +53,11 @@ async function init() {
    .use(PrimeVue, {
      locale: zhCN['zh-CN'], // usePrimeVue().config.locale
      theme: { preset: Aura },
+      options: {
+        prefix: 'p',
+        darkModeSelector: 'system',
+        cssLayer: false,
+      },
    });
  app.config.globalProperties.$__DEV__ = $__DEV__;
  app.mount('#app');