<template>
  <el-main
    class="layout-main wow animate__animated animate__fadeInUpBig"
    data-wow-duration=".5s"
    data-wow-delay=".3s"
  >
    <el-card>
      <router-view v-slot="{ Component, route }">
        <transition name="fade-transform" mode="out-in">
          <keep-alive>
            <component :is="Component" :key="route.path" />
          </keep-alive>
        </transition>
      </router-view>
    </el-card>
  </el-main>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
.layout-main {
  flex: 1;
  .el-card {
    height: 100%;
    :deep(.el-card__body) {
      overflow: hidden auto;
      height: 100%;

      @include scrollStyle(4px, 4px);
    }
  }
}
</style>
