<template>
  <div class="w-full h-full" v-loading="isLoading">
    <el-container class="flex flex-row h-full">
      <el-header class="bg-sky-800 leading-10 flex flex-row justify-between">
        <Header></Header>
      </el-header>
      <el-main>
        <router-view v-slot="{ Component }">
          <transition name="router_animate">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import Header from '@/pages/header/header.vue';
import { nextTick, onMounted, ref } from 'vue';
const isLoading = ref(true);

onMounted(async () => {
  await nextTick();
  isLoading.value = false;
});
</script>

<style scoped lang="scss">
.el-main {
  padding: 0;
  flex: 1;
  overflow: auto;
  background: $backColor;
}
</style>
