<script setup lang="ts">
    defineProps({
        /**
         * 提示内容
         */
        tips: {
            type: String,
            default: '',
        },
        /**
         * 提示内容颜色
         */
        tipsColor: {
            type: String,
            default: '#9C9C9C',
        },
        /**
         * 背景颜色
         */
        bgColor: {
            type: String,
            default: 'transparent',
        },
    })
</script>

<template>
    <view class="empty" :style="{ background: bgColor }">
        <!-- 暂无数据/空数据 -->
        <image src="../../static/images/empty.png" />
        <!-- 提示内容 -->
        <view class="empty-tips" :style="{ color: tipsColor }">{{ tips }}</view>
    </view>
</template>

<style scoped>
    .empty {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .empty image {
        display: flex;
        width: 500rpx;
        height: 500rpx;
    }

    .empty .empty-tips {
        display: flex;
        font-size: 30rpx;
        color: #999;
    }
</style>
