<template>
  <div class="__item">
    <div class="number-bg">
      <div class="number">
        <CountTo  :startVal='0' :endVal='count' separator="" :duration='3000'/>
      </div>
    </div>
    <div class="name">{{title}}</div>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    count: {
      type: Number,
      default: 0
    },
  }
}
</script>


<style lang="less" scoped>
.__item {
  font-size: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  .name {
    font-size: 18px;
  }
  .number-bg {
    width: 120px;
    height: 100px;
    background: url("@/assets/images/number-bg2.png") no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10px;
    .number {
      font-weight: bold;
      background-image:-webkit-linear-gradient(bottom,#bf9b05,#f9f7d5); 
      -webkit-background-clip:text; 
      -webkit-text-fill-color:transparent;
    }
  }
}
</style>
