<template>
  <div class="container flex items-center justify-start">
    <img class="icon" src="@/assets/polygon40@3x.png" alt="" />
    <div class="title text-white">项目总人数</div>
    <div class="counting-board flex justify-between">
      <div class="num" v-for="item in countChars" :key="item">{{ item }}</div>
    </div>
  </div>
</template>
<script setup>
import { ref, toRefs } from "vue";
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
const { data } = toRefs(props);
const countChars = ref([]);
countChars.value = `${parseInt(data.value.PROJECTCOUNT)}`.split("");
for (let i = countChars.value.length; i < 4; i++) {
  countChars.value.unshift("0");
}
</script>
<style lang="scss" scoped>
.container {
  width: 465px;
  height: 90px;
  background-image: linear-gradient(
    180deg,
    rgba(4, 53, 99, 0.6) 0%,
    rgba(4, 53, 99, 0.19) 100%
  );
  .icon {
    margin-left: 16px;
    width: 18px;
    height: 18px;
  }
  .title {
    margin-left: 10px;
    font-family: PingFangSC-Regular;
    font-size: 20px;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 30px;
    text-shadow: 0 0 9px #158eff;
    font-weight: 400;
  }
  .counting-board {
    margin-left: 30px;
    .num {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 48px;
      height: 56px;
      opacity: 0.72;
      background-image: linear-gradient(
        180deg,
        rgba(26, 101, 171, 0.88) 0%,
        rgba(26, 101, 171, 0.48) 47%,
        #1a65ab 100%
      );
      font-family: Impact;
      font-size: 38px;
      color: #f2f6fa;
      letter-spacing: 0;
      line-height: 30px;
      font-weight: 900;
      &:not(:last-child) {
        margin-right: 24px;
      }
    }
  }
}
</style>
