<template>
  <div class="wh-full">
    <Header />
    <section class="app-main">
      <router-view>
        <template #default="{ Component, route }">
          <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </transition>
        </template>
      </router-view>
    </section>
  </div>
</template>

<script setup>
import Header from "@/layout/components/header.vue";
</script>

<style lang="scss" scoped>
.app-main {
  position: relative;
  width: 100%;
  min-height: calc(100vh - $navbar-height);
  overflow: hidden;
  // background-color: var(--el-bg-color-page);
  background-color: #f1f3f5;
}

.main-container {
  height: calc(100vh - $navbar-height);
  overflow: auto;
}
</style>
