FE_sandTable/src/layout/index.vue

<template>
  <div class="min-h-full"
       :class="isIndex ? 'index' : 'body'">
    <app-header v-if="!isIndex" />
    <app-sidebar v-if="!hideNav && !isIndex"
                 class="sidebar fixed w-sidebar h-full px-5 overflow-hidden transition-width duration-300 z-40" />
    <div class="main min-h-[calc(100vh-85px)] transition-margin duration-300 overflow-auto"
         :class="{ 'md:ml-sidebar': !hideNav && !isIndex }">
      <app-main />
    </div>
  </div>
</template>

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

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

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

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