cfc/cfc-frontend/components/BaseEmpty.vue

<template>
  <view class="base-empty" :class="{ 'base-empty--compact': compact }">
    <view class="base-empty__icon" v-if="icon || $slots.icon">
      <slot name="icon">
        <text class="base-empty__emoji">{{ icon }}</text>
      </slot>
    </view>
    <text class="base-empty__title" v-if="title">{{ title }}</text>
    <text class="base-empty__description" v-if="description">{{ description }}</text>
    <view class="base-empty__action" v-if="$slots.action">
      <slot name="action"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BaseEmpty',
  props: {
    icon: { type: String, default: '' },
    title: { type: String, default: '' },
    description: { type: String, default: '' },
    compact: { type: Boolean, default: false }
  }
}
</script>

<style scoped>
.base-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 32rpx;
  min-height: 400rpx;
}
.base-empty--compact {
  padding: 48rpx 32rpx;
  min-height: auto;
}
.base-empty__icon {
  margin-bottom: 24rpx;
}
.base-empty__emoji {
  font-size: 80rpx;
  display: block;
  text-align: center;
}
.base-empty__title {
  font-size: 30rpx;
  font-weight: 600;
  color: var(--text, #3D2E1E);
  margin-bottom: 12rpx;
  text-align: center;
}
.base-empty__description {
  font-size: 26rpx;
  color: var(--text-secondary, #6B5A4A);
  text-align: center;
  line-height: 1.6;
  max-width: 500rpx;
}
.base-empty__action {
  margin-top: 32rpx;
}
</style>