<template>
    <view class="loading-state">
        <image class="loading-image" :src="imageSrc" mode="aspectFit"></image>
        <text class="loading-text">{{ message }}</text>
    </view>
</template>

<script>
export default {
    name: 'LoadingData',
    props: {
        // 空状态显示的图片，默认使用kong.png
        imageSrc: {
            type: String,
            default: '/static/app-plus/index_login.gif'
        },
        // 空状态显示的文本
        message: {
            type: String,
            default: '努力加载中'
        }
    }
}
</script>

<style lang="scss">
.loading-state {
    width: 100%;
    height: 100%;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: emptyFadeIn 0.5s ease-out;
    // background-color: #F7F7F7;
  
}

.loading-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
}

.loading-text {
    font-size: 28rpx;
    color: #999999;
}

@keyframes emptyFadeIn {
    from {
        opacity: 0;
        transform: translateY(20rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>