<template>
  <div class="custom-layout">
    <Header v-if="route.meta.header"></Header>
    <div class="custom-content">
      <router-view v-slot="{ Component }">
        <component :is="Component" />
      </router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from './header.vue';
import { useRoute } from 'vue-router';
const route = useRoute();
</script>

<style lang="less">
@import '@/style/flex.less';
.custom-layout {
  height: 100%;
  .dj();
  flex-direction: column;
  height: 100vh;
  .custom-content {
    flex: 1;
    background: #f9f9f9;
    max-height: calc(100vh - 60px);
    overflow: auto;
    padding: 40px 0;
    box-sizing: border-box;
    & > :first-child {
      width: 80%;
      min-width: 1000px;
      margin: 0 auto;
      height: 100%;
      background: white;
    }
  }
}
</style>
