pt

src/components/AppBar.vue

@@ -135,6 +135,17 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+#navBar {
+    .van-nav-bar__content {
+        padding-top: var(--safe-top);
+    }
+    .van-nav-bar__left {
+        top: var(--safe-top) !important;
+    }
+    .van-nav-bar {
+        line-height: initial !important;
+    }
+}
 .back {
     padding-right: 12px;
 }

src/styles/app.less

@@ -296,3 +296,6 @@ input:-webkit-autofill {
         height: 124%;
     }
 }
+.padding-safe-top {
+    padding-top: var(--safe-top);
+}

src/views/Index.vue

@@ -2,7 +2,7 @@
     <div class="index">
         <router-view v-slot="{ Component }">
             <keep-alive :include="keeps.value">
-                <component :is="Component"/>
+                <component :is="Component" />
             </keep-alive>
         </router-view>
         <van-tabbar
@@ -69,25 +69,26 @@ export default {
 </script>
 
 <style lang="less" scoped>
-    .container {
-        box-sizing: border-box;
-        flex-grow: 1;
-        background-color: @bg;
-    }
-    .index {
-        padding-top: 0 !important;
-    }
-    .van-tabbar{
-        background: @bg;
-    }
-    /deep/ [class*=van-hairline]:after{
-        border: none;
-    }
-    /deep/ .van-tabbar-item__icon img{
-        width: 25px;
-        height: 24px;
-    }
-    /deep/ .van-tabbar-item__text{
-        font-size: 12px;
-    }
+.container {
+    box-sizing: border-box;
+    flex-grow: 1;
+    background-color: @bg;
+}
+.index {
+    // padding-top: 0 !important;
+    padding-top: var(--safe-top)!important;
+}
+.van-tabbar {
+    background: @bg;
+}
+/deep/ [class*='van-hairline']:after {
+    border: none;
+}
+/deep/ .van-tabbar-item__icon img {
+    width: 25px;
+    height: 24px;
+}
+/deep/ .van-tabbar-item__text {
+    font-size: 12px;
+}
 </style>