<script setup lang="ts">
import { computed } from 'vue';

interface CarModuleProp {
  icon: Icon
  number: number
  text: string
}

const props = defineProps<CarModuleProp>()

</script>

<template>
  <div class="car-module">
    <div class="image">
      <img :src="props.icon.src" :style="{width: props.icon.width, height: props.icon.height}"  alt="车辆">
    </div>
    <div class="data">
        <div class="number">{{props.number}}</div>
        <div class="text">{{props.text}}</div>
    </div>
  </div>
</template>

<style scoped lang="less">
@import url("@/assets/css/common.less");
.car-module {
  .flex(flex-start);
  width: 10.1vw;
  height: 6.4vh;
  background: url("@/assets/images/car-module-bg.png") no-repeat;
  background-size: 100% 100%;
  .image {
    width: 5vw;
  }
  .data {
    .flex();
    flex-direction: column;
    .number {
      font-size: 1.3vw;
      font-weight: 900;
      background-image:-webkit-linear-gradient(bottom,#ffe295,#f0ffff); 
      -webkit-background-clip:text; 
      -webkit-text-fill-color:transparent;
    }
    .text {
      color: #aeeeff;
      font-size: 0.6vw;
    }
  }
}
</style>
