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"
  />
  <div class="main" :style="appMainViewStyle">
    <RouterView  />
  </div>
</template>

<script setup>  
import { checkAndUpdate } from "@/updater/index";

import { getNotchHeight } from "@/utils/statusBar";
const route = useRoute();
const router = useRouter();

const height = ref(0);
const notchStyle = ref({}); 

const appMainViewStyle = computed(() => {
  let mainHeight = 0
  if (route.meta.navbar)  mainHeight = height.value + 46;
  if (route.meta.tabbar) mainHeight = mainHeight + 60
  return { 
    height: `calc(100vh - ${mainHeight}px)`
  };
});

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);
  }

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


 
});

onMounted(() => { 
  checkAndUpdate()
})
</script>

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

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