<template>
  <el-container class="app-container">
    <el-header class="layout-header">
      <layout-header />
    </el-header>
    <el-main class="layout-main">
      <slot />
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import LayoutHeader from './components/Header/index.vue'
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;

  .layout-header {
    @apply sticky top-0 w-full;
    --el-header-padding: 0;
    z-index: 1999;
    height: var(--nav-height);
    border-bottom: 1px solid var(--el-border-color-extra-light);
    background: var(--el-bg-color);
  }

  .layout-main {
    @apply bg-page flex-1 min-h-0;
    @apply md:px-[4%] lg:px-[8%] xl:px-[12%] px-[1rem];
    --el-main-padding: 0;
  }
}
</style>
