ucard-person-app-front/src/components/EmptyState.vue

<template>
    <div class="empty-state">
        <i :class="icon"></i>
        <p>{{ text }}</p>
    </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
    icon?: string
    text?: string
}>(), {
    icon: 'i-mdi-receipt-text-outline',
    text: '暂无数据'
})
</script>

<style scoped lang="scss">
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: var(--gray);

    i {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
        color: var(--main-yellow);
    }

    p {
        font-size: var(--font-size-14);
    }
}
</style>