<script setup lang="ts">

interface StatisticsItemProp {
  icon: Icon // 图标
  title: string // 标题
  number: number // 数量
  unit: string // 单位
}

const props = defineProps<StatisticsItemProp>()

</script>

<template>
  <div class="statistics-item">
    <div>
      <img :src="props.icon.src" :style="{ width: props.icon.width, height: props.icon.height }" alt="图标">
    </div>
    <div class="info">
      <div class="title">{{props.title}}</div>
      <div class="data">{{props.number}}<span class="unit">{{props.unit}}</span></div>
    </div>
  </div>
</template>

<style scoped lang="less">
@import url("@/assets/css/common.less");
.statistics-item {
  .flex(flex-start);
  
  .info {
    margin-left: .2vw;
    .title {
      color: #aeeeff;
      font-size: -.3vw;
    }
    .data {
      background-image:-webkit-linear-gradient(bottom,#2999fd,#f0ffff); 
      -webkit-background-clip:text; 
      -webkit-text-fill-color:transparent;
      font-size: 1.3vw;
      font-weight:500;
    }
  }
}
</style>