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

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

<style lang="less">
@import '@/style/flex.less';
.custom-layout {
  height: 100%;
  .dj();
  flex-direction: column;
  height: 100vh;
  background: #181818;
  .custom-content {
    flex: 1;
    max-height: calc(100vh - 67px);
    overflow: auto;
    .center-box {
      margin: 0 auto;
      // min-width: 90vw;
      max-width: 1597px;
      box-sizing: border-box;
      padding: 0 30px;
      height: 100%;
    }
  }
}
</style>
