<template>
  <div class="wh-full" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="加载中..."
    element-loading-background="rgba(122, 122, 122, 1 )">
    <Header />
    <section class="app-main">
      <router-view>
        <template #default="{ Component, route }">
          <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
            <keep-alive :include="['ProcessMain', 'ProSteps']">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </template>
      </router-view>
    </section>
    <!-- 左侧消息弹框 -->
    <RealTimeMsg />
  </div>
</template>

<script setup>
import Header from "@/layout/components/header.vue";
const fullscreenLoading = ref(false);
provide("fullscreenLoading", fullscreenLoading);
</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>
