<template>
  <div class="border border-solid border-[#f0f0f0] inline-block w-286px rounded-8px p-20px flex">
    <SvgIcon :name="data.icon" :size="40" color="transparent" />
    <div class="ml-16px">
      <div class="text-14px text-[#828fa2]"> {{ data.title }}</div>
      <div class="mt-4px">
        <span class="text-36px font-medium">{{ data.value }}</span>
        <span class="text-14px ml-10px">个</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  // import { Ref, ref, watch } from 'vue';
  import { SvgIcon } from '/@/components/Icon/index';
  defineProps({
    loading: Boolean,
    data: {
      type: Object,
      default: () => {},
    },
  });
</script>

<style scoped></style>
