sl-sfy-safety/src/App.vue

<template>
  <div id="app">
     <WatermarkWrapper 
     v-if="username"
      :isFixedScreen="isFixedScreen"
      position="fixed"
      width="100vw"
      height="100vh"
      :zIndex="999"
      :username="username"
      :realname="realname"
    />
    <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';
  import WatermarkWrapper from '@/components/Waterwrapper.vue'

import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/modules/user';

const userStore = useUserStore();
const { getUserInfo } = storeToRefs(userStore);

const username = computed(() => getUserInfo.value.username);
const realname = computed(() => getUserInfo.value.realname);


  
  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>