getBottomNotchHeight

index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,  viewport-fit=cover"
     />
     <title>Angel Token</title>
     <style type="text/css">

src/layout/app/index.vue

@@ -20,12 +20,11 @@
 </template>
 
 <script setup> 
-import { getNotchHeight } from "@/utils/statusBar";
+import { getNotchHeight} from "@/utils/statusBar";
 
 const route = useRoute(); 
 const mainStyle = ref({});
-
-const active = ref(route.name);
+ 
 
 const tabbarOptions = [
   {
@@ -55,6 +54,9 @@ const tabbarOptions = [
   },
 ];
 
+
+
+
 onBeforeMount(async () => {
   const height = await getNotchHeight();
   if (route.meta.navbar) {
@@ -63,7 +65,7 @@ onBeforeMount(async () => {
     mainStyle.value = {
       marginTop: `${height}px`,
     };
-  }
+  } 
 });
 </script>
 
@@ -73,7 +75,9 @@ onBeforeMount(async () => {
   height: 25px;
 }
 .van-tabbar--fixed{
-  padding: 10px 0 4px 0;
+  height: 70px;
+  // padding: 10px 0 20px 0;
+  padding-top: 10px;
   box-sizing: border-box;
 } 
 </style>

src/utils/statusBar.js

@@ -1,4 +1,6 @@
  import { Device } from '@capacitor/device';
+ 
+
 
 // 获取刘海高度（改进版）
 export const  getNotchHeight = async () => {
@@ -30,4 +32,10 @@ export const  getNotchHeight = async () => {
   const info = await Device.getInfo();
   return info.platform === 'ios' ? 44 : info.platform === 'android' ? 24 : 0;
 };
- 
+ 
+
+
+// 获取底部安全区域高度
+export const getSafeAreaInsets = async () => {
+ 
+}