sl-sfy-safety/src/App.vue

<template>
  <div id="app">
    <el-watermark class="viewport-watermark" :content="[username, realname]" :font="font" :width="90" :gap="[200, 200]">
      <Nav v-if="!isFixedScreen" />
      <div class="content" :class="{ 'fixed-screen': isFixedScreen }">
        <router-view />
      </div>
    </el-watermark>
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { computed, reactive } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useUserStore } from '@/store/modules/user';
  import Nav from '@/components/Nav.vue';

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

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

  const font = reactive({
    color: 'rgba(0,0,0,.03)',
  });

  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;
  }
  .viewport-watermark {
    width: 100%;
    height: 100%;
  }
  .content {
    height: 100%;
    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>