<template>
  <div class="__item">
    <div class="number">
      <CountTo  :startVal='0' :endVal='count' separator="" :duration='3000'/>
    </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 {
  width: 154px;
  height: 79px;
  margin: 20px 0px;
  font-size: 30px;
  background: url("@/assets/images/number-bg1.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  .name {
    font-size: 18px;
  }
  .number {
    font-weight: bold;
    background-image:-webkit-linear-gradient(bottom,#06a57f,#f0ffff); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent;
  }
}
</style>
