sl-sfy-safety/src/App.vue

<template>
  <div id="app">
    <Nav v-if="!isFixedScreen" />
    <div class="content" :class="{ 'fixed-screen': isFixedScreen }">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { computed } from 'vue';
  import Nav from '@/components/Nav.vue';

  const route = useRoute();
  const isFixedScreen = computed(
    () => route.matched.some((r) => r.meta?.fixedScreen === true) || route.path.startsWith('/institute-safety'),
  );
</script>

<style scoped lang="scss">
  #app {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
  }
  .content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    &.fixed-screen {
      overflow-y: hidden;
    }
  }
  @font-face {
    font-family: 'YouSheBiaoTiYuan';
    src: url('@/assets/fonts/YouSheBiaoTiYuan.otf');
  }
  @font-face {
    font-family: 'DINAlternate';
    src: url('@/assets/fonts/DINAlternate-Bold.ttf');
  }
</style>