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 />
    <Back v-if="hidePanel"
          class="mx-3"
          name="金融产品设计及数字化营销沙盘系统后台管理系统"
          :isLogout="true" />
    <app-sidebar v-if="!hideNav"
                 class="sidebar fixed h-full px-5 overflow-hidden transition-width duration-300 z-40" />
    <div class="main h-[calc(100vh-86px)] transition-margin duration-300 overflow-auto"
         :class="{ 'ml': !hideNav }"
         id="appMain">
      <app-main />
    </div>
    <Panel />
  </div>
</template>

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

export default defineComponent({
  name: 'Layout',
  components: { AppSidebar, AppHeader, AppMain, Panel, Back },
  setup() {
    const route = useRoute();
    const isConfig = computed(() => route.path.startsWith('/config'));
    // 是否隐藏左侧导航
    const hideNav = computed(() => {
      // return Settings.hideNavPath.includes(route.path);
      return route.path.startsWith('/finance');
    });
    // 是否隐藏实验面板
    const hidePanel = computed(() => {
      return Settings.hidePanelPath.includes(route.path);
    });

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

<style lang="scss" scoped>
.body {
  background: url(../assets/images/1.png) 0 0/100% auto no-repeat;
  @apply bg-gray-100;
}
.sidebar {
  @apply w-sidebar lg:w-[160px];
}
.ml {
  @apply ml-sidebar lg:ml-[144px];
}
</style>