<script setup>
  const props = defineProps({
    name: {
      type: String,
      default: '暂无数据'
    },
    top: {
      type: Number,
      default: 10
    }
  })
</script>

<template>
  <view :style="{'margin-top': `${top}vh` }" class="cb-empty">
    <image
      src="/static/images/public/empty-icon.png"
      mode="scaleToFill"
      class="empty-icon"
    ></image>
    <text class="bottom-name">{{ props.name }}</text>
  </view>
</template>

<style lang="scss" scoped>
  .cb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .empty-icon {
      width: 285rpx;
      height: 285rpx;
      margin-bottom: 64rpx;
    }
    .bottom-name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #999999;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
</style>
