wallet_app/src/App.vue

<template>
  <van-nav-bar
    v-if="route.meta.navbar"
    :left-arrow="route.meta.leftArrow"
    @click-left="goBack()"
    :title="$t(route.meta.title)"
    class="app-bar-header"
    :style="notchStyle"
  />
  <RouterView :style="mainStyle" />
</template>

<script setup>
import { appStart } from "@/hooks/updataApp";
import { getNotchHeight } from "@/utils/statusBar";
const route = useRoute();
const router = useRouter();

const notchStyle = ref({});
const mainStyle = ref({});

const goBack = () => {
  if (route.meta.navbar) {
    router.back();
  }
};

onBeforeMount(async () => {
  const height = await getNotchHeight();
  notchStyle.value = { 
    paddingTop: `${height}px`,
  };

  if (route.meta.navbar) {
    mainStyle.value.marginTop = `0 px`;
  } else {
    mainStyle.value = {
      marginTop: `${height}px`,
    };
  }

  appStart()
});
</script>

<style lang="less">
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  background-color: @bg-color2;
}
 
</style>

<style scoped lang="less">
.app-bar-header {
  :deep(.van-nav-bar__title){
    font-weight: 500;
  }
  :deep(.van-icon){
    color: @font-color3;
  }
}
</style>