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

<script>
export default {
	name: 'EmptyState',
	props: {
		// 空状态显示的图片，默认使用kong.png
		imageSrc: {
			type: String,
			default: '/static/common/kong.png'
		},
		// 空状态显示的文本
		message: {
			type: String,
			default: '暂无数据'
		}
	}
}
</script>

<style lang="scss">
.empty-state {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	animation: emptyFadeIn 0.5s ease-out;
}

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

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

@keyframes emptyFadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style> 