style: screensafearea

2024-12-04 00:01:51 +08:00
parent 6f57d5f56c
commit 135a8a00fc
1 changed files with 15 additions and 1 deletions
@@ -1,5 +1,19 @@
+<script setup lang="ts">
+import { useScreenSafeArea } from '@vueuse/core'
+
+const { top, right, bottom, left } = useScreenSafeArea()
+</script>
+
 <template>
-  <main text="gray-700 dark:gray-200" h-full font-sans>
+  <main
+    text="gray-700 dark:gray-200" h-full font-sans
+    :style="{
+      paddingTop: `${top.value}px`,
+      paddingRight: `${right.value}px`,
+      paddingBottom: `${bottom.value}px`,
+      paddingLeft: `${left.value}px`,
+    }"
+  >
    <RouterView />
  </main>
 </template>