<template>
  <div class="count-item">
    <div class="flex align-center">
      <img src="@/assets/images/dian.svg" />
      <span class="label">{{ label }}</span>
    </div>
    <div class="count">
      <img class="bg" src="@/assets/images/count-bg.svg" />
      <div class="flex align-center">
        <countup class="value" :end-val="count" />
        <span class="suffix">{{ suffix }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
  import countup from 'vue-countup-v3'
  let props = defineProps({
    label: {
      type: Number,
      default: ''
    },
    count: {
      type: Number,
      default: 0
    },
    suffix: {
      type: String,
      default: ''
    }
  })
</script>

<style scoped lang="scss">
  .count-item {
    flex: 1;
    .label {
      font-weight: 400;
      font-size: vw(14);
      margin-left: vw(4);
      color: rgba(255, 255, 255, 0.9);
    }
    .count {
      position: relative;
      margin-top: vh(10);
      z-index: 1;
      .value {
        padding-left: vw(20);
        font-weight: bold;
        font-size: vw(28);
        color: #02f9fa;
      }
      .suffix {
        margin-top: vh(4);
        font-weight: bold;
        font-size: vw(12);
        color: #02f9fa;
      }
      .bg {
        width: 100%;
        height: vh(40);
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
      }
    }
  }
</style>
