<template>
    <div class="LoadPage">
        <Loading size="24px" type="spinner" color="#0094ff" vertical>loading...</Loading>
    </div>
</template>

<script setup>
import gsap from 'gsap'
import { Loading, Icon } from 'vant'
import { loadImg } from '@/data/imgList'
import Preloader from '@/plugins/Preloader'

// 初始化
const emit = defineEmits(["LoadPage"]); // 声明触发事件，对应父组件上面的方法



onMounted(() => {
    Preloader(
        {
            name: '加载页资源',
            imgs: loadImg,
            callback: (progress) => console.log('进度：', progress)
        }
    ).then(
        res => {
            console.log('加载完成');
            gsap.to('.LoadPage', { duration: .5, autoAlpha: 0, onComplete: () => { emit("LoadPage", { action: 'hide' }) } })
        }
    )
})
</script>

<style lang="scss" scoped>
.LoadPage {
    @include fixed();
    @include flexCen();

    .brrage {
        width: 750px;
        height: 750px;
    }
}
</style>