FE_sandTable/src/layout/index.vue

<template>
  <div class="min-h-full bg-[url('@/assets/images/1.png')] bg-[length:100%_100%] bg-no-repeat">
    <app-header />
    <app-sidebar v-if="!hideNav"
                 class="sidebar fixed w-sidebar h-full px-5 overflow-hidden transition-width duration-300 z-40" />
    <div class="main h-[calc(100vh-95px)] transition-margin duration-300 overflow-auto"
         :class="{ 'md:ml-sidebar': !hideNav }">
      <app-main />
    </div>
    <!-- <Panel /> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useRoute } from 'vue-router';
import Setting from '@/settings';
import { AppSidebar, AppHeader, AppMain } from './components';
import useResizeHandler from './composables/useResizeHandler';
// import Panel from '@/components/Panel/index.vue';

export default defineComponent({
  name: 'Layout',
  components: { AppSidebar, AppHeader, AppMain },
  setup() {
    const route = useRoute();
    // 是否隐藏左侧导航
    const hideNav = computed(() => {
      return Setting.hideNavPath.includes(route.path);
    });

    useResizeHandler();
    return {
      hideNav,
    };
  },
});
</script>

<style lang="scss" scoped>
.body {
  background: url(../assets/images/1.png) 0 0/100% auto no-repeat;
  @apply bg-gray-100;
}
</style>