sl-sfy-safety/src/layout/FixedScreenLayout.vue

<template>
  <div class="fixed-screen-wrapper">
    <div id="init-box" class="init-box">
      <Nav :usePx="true" />
      <router-view />
    </div>
    <CustomNotice />
  </div>
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted } from 'vue';
  import { storeToRefs } from 'pinia';
  import usePageSizeStore from '@/hooks/usePageSizeStore';
  import Nav from '@/components/Nav.vue';
  import useViolationNoticeStore from '@/views/institute-safety/modules/safety-company-home/stores/use-violation-notice-store';
  import CustomNotice from '@/components/custom-notivue/index.vue';

  useViolationNoticeStore();

  const pageSize = usePageSizeStore();
  const { ratio, rotate } = storeToRefs(pageSize);
  const { computePageSize } = pageSize;

  onMounted(() => {
    computePageSize();
    window.addEventListener('resize', computePageSize);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', computePageSize);
  });
</script>

<style scoped lang="scss">
  .fixed-screen-wrapper {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transform: scale(v-bind('ratio')) rotate(v-bind(rotate));
  }

  .init-box {
    position: relative;
    width: 1920px;
    height: 1080px;
    background-color: #e7f1ff;
    overflow: hidden;
  }
</style>