zkxw/mobile-h5/components/van-empty/van-empty.vue

<template>
  <view class="v-empty">
    <view class="v-empty__card">
      <view class="v-empty__blob">
        <image
          class="v-empty__icon"
          src="/static/empty-inbox.svg"
          mode="aspectFit"
        />
      </view>
      <text class="v-empty__desc">{{ description || '暂无数据' }}</text>
      <text v-if="tip" class="v-empty__tip">{{ tip }}</text>
    </view>
  </view>
</template>

<script>
  /** H5 兼容：替代 @vant/weapp van-empty（方案 B 虚线软卡） */
  export default {
    name: 'VanEmptyShim',
    props: {
      description: { type: String, default: '' },
      tip: { type: String, default: '' }
    }
  }
</script>

<style scoped>
  .v-empty {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 16rpx 0;
  }

  .v-empty__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    padding: 44rpx 28rpx 40rpx;
    border-radius: 28rpx;
    background: linear-gradient(165deg, #eef9f3 0%, #ffffff 55%);
    border: 3rpx dashed #b7e5d0;
    box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.8);
  }

  .v-empty__blob {
    width: 128rpx;
    height: 128rpx;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff, #d8f3e7 70%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .v-empty__icon {
    width: 56rpx;
    height: 56rpx;
  }

  .v-empty__desc {
    font-size: 26rpx;
    color: #5d746a;
    text-align: center;
    line-height: 1.4;
  }

  .v-empty__tip {
    font-size: 22rpx;
    color: #8aa198;
    text-align: center;
    line-height: 1.4;
  }
</style>