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 />
</template>

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

const notchStyle = ref({});
 
 
const goBack = () => {
  if (route.meta.navbar) {
    if (route.meta.to) {
      router.push({
        path: route.meta.to,
      });
      return
    }
    router.back();
  }
};

onBeforeMount(async () => {
  const getLoadingNode = document.getElementById('Loading')
  const { body } = document
  if (getLoadingNode) {
    body.removeChild(getLoadingNode)
  }

  const height = await getNotchHeight();
  notchStyle.value = { 
    paddingTop: `${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>