home.vue 843 B

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <div class="w-full h-full" v-loading="isLoading">
  3. <el-container class="flex flex-row h-full">
  4. <el-header class="bg-sky-800 leading-10 flex flex-row justify-between">
  5. <Header></Header>
  6. </el-header>
  7. <el-main>
  8. <router-view v-slot="{ Component }">
  9. <transition name="router_animate">
  10. <component :is="Component" />
  11. </transition>
  12. </router-view>
  13. </el-main>
  14. </el-container>
  15. </div>
  16. </template>
  17. <script lang="ts" setup>
  18. import Header from '@/pages/header/header.vue';
  19. import { nextTick, onMounted, ref } from 'vue';
  20. const isLoading = ref(true);
  21. onMounted(async () => {
  22. await nextTick();
  23. isLoading.value = false;
  24. });
  25. </script>
  26. <style scoped lang="scss">
  27. .el-main {
  28. padding: 0;
  29. flex: 1;
  30. overflow: auto;
  31. background: $backColor;
  32. }
  33. </style>