<script setup>
</script>

<template>
    <div class="w-full h-screen relative flex justify-center items-center">
        <img class="w-full h-full absolute left-0 top-0 -z-10 object-cover" src="../../assets/images/BG.png" alt=""/>

        <router-view v-slot="{ Component, route }">
            <transition name="fade">
                <component :is="Component" :key="route.path"/>
            </transition>
        </router-view>
    </div>
</template>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
    position: relative;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    position: absolute;
}
</style>
