cfc/cfc-frontend/components/FamilyEmptyState/FamilyEmptyState.vue

<template>
  <view class="family-empty-state" :class="['family-empty-' + type]">
    <view class="empty-icon">{{ iconChar }}</view>
    <view class="empty-title">{{ title }}</view>
    <view v-if="desc" class="empty-desc">{{ desc }}</view>
  </view>
</template>

<script>
export default {
  name: 'FamilyEmptyState',
  props: {
    type: { type: String, default: 'card' },
    title: { type: String, default: '暂无数据' },
    desc: { type: String, default: '' }
  },
  computed: {
    iconChar: function() {
      return this.type === 'card' ? '🏠' : '👨‍👩‍👧'
    }
  }
}
</script>

<style lang="scss" scoped>
.family-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 16rpx;
}
.family-empty-card { padding: 24rpx 16rpx; }
.family-empty-block { padding: 60rpx 24rpx; }
.family-empty-list { padding: 40rpx 16rpx; }
.empty-icon { font-size: 48rpx; margin-bottom: 12rpx; }
.empty-title { font-size: 28rpx; color: #333; margin-bottom: 8rpx; }
.empty-desc { font-size: 24rpx; color: #999; margin-bottom: 16rpx; }
</style>