sl-sfy-safety/src/App.vue

<template>
  <div id="app" :style="{ backgroundImage: `url(${backgroundImg})` }">
    <Nav />
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { useRoute } from 'vue-router';
  import Nav from '@/components/Nav.vue';
  const route = useRoute();
  const backgroundImg = computed(() => {
    return route.path === '/home' ? '/src/assets/images/home/home-bg@1X.png' : '';
  });
</script>

<style scoped lang="scss">
  #app {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .content {
    flex: 1;
    overflow-y: auto;
  }
</style>