diff --git a/src/manifest.json b/src/manifest.json
index c38e717..35cc907 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -54,6 +54,7 @@
     "setting": {
       "urlCheck": false
     },
+    "styleIsolation": "shared",
     "usingComponents": true
   },
   "mp-alipay": {
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index f37a8c7..c1a2a88 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -17,6 +17,14 @@ import { useCountStore } from '@/store/count'
 
 const countStore = useCountStore()
 const title = ref('Hello')
+
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+console.log(safeAreaInsets)
+const rect = {
+  top: `${safeAreaInsets.top}px`,
+  bottom: `${safeAreaInsets.bottom}px`,
+}
 </script>
 
 <style>
@@ -25,6 +33,7 @@ const title = ref('Hello')
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding-top: v-bind('rect.top');
 }
 
 .logo {