From 12d5ee979f8880a6d80fa6fc1aae22ed1e0ce8e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Mon, 31 Mar 2025 15:30:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E5=BC=8F=E5=B8=83=E5=B1=80=EF=BC=8C=E4=BD=BF=E7=94=A8=20CSS=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=9A=84=E5=8D=95=E4=BD=8D=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=B1=8F=E5=B9=95=E9=AB=98=E5=BA=A6=E5=92=8C=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                  | 12 ++++++++----
 src/pages/index-new.page.vue |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1a2b7f5..cee6c6f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,10 +27,14 @@ const themeConfig = computed(() => {
 .layout-wrapper {
   isolation: isolate;
 }
-.w-screen {
-  width: 100dvw;
+@supports (height: 100dvh) {
+  .h-screen {
+    height: 100dvh;
+  }
 }
-.h-screen {
-  height: 100dvh;
+@supports (width: 100dvw) {
+  .w-screen {
+    width: 100dvw;
+  }
 }
 </style>
diff --git a/src/pages/index-new.page.vue b/src/pages/index-new.page.vue
index 7f73ec9..0b910a0 100644
--- a/src/pages/index-new.page.vue
+++ b/src/pages/index-new.page.vue
@@ -7,7 +7,7 @@ import {
 </script>
 
 <template>
-  <div class="p-4" style="height: 100dvh; width: 100dvw">
+  <div class="p-4 h-screen w-screen">
     <PatternBackground
       :animate="true"
       :direction="PATTERN_BACKGROUND_DIRECTION.TopRight"