billd-live/src/layout/pc/index.vue

<template>
  <n-dialog-provider>
    <div class="layout">
      <div class="fixed-mask"></div>
      <HeadCpt></HeadCpt>
      <router-view v-slot="{ Component }">
        <component :is="Component"></component>
      </router-view>
      <ModalCpt></ModalCpt>
      <SidebarCpt v-if="MODULE_CONFIG_SWITCH.sidebar"></SidebarCpt>
      <LoginModal v-if="appStore.showLoginModal"></LoginModal>
    </div>
  </n-dialog-provider>
</template>

<script lang="ts" setup>
import { MODULE_CONFIG_SWITCH } from '@/constant';
import { useAppStore } from '@/store/app';

import HeadCpt from './head/index.vue';
import ModalCpt from './modal/index.vue';
import SidebarCpt from './sidebar/index.vue';

document.body.style.minWidth = '1200px';
const appStore = useAppStore();
</script>

<style lang="scss" scoped>
.layout {
  box-sizing: border-box;
  padding-top: $header-height;
  min-height: 100vh;
  .fixed-mask {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    width: 400px;
    height: 300px;
    background-color: #ffd700;
    background-image: linear-gradient(239deg, #ffd700 0%, #ffffff 100%);
    opacity: 0.2;
    filter: blur(70px);
    pointer-events: none;
  }
}
</style>