<template>
  <div class="card">
    <div
      class="item flex items-center"
      v-for="(item, index) in msgList"
      :key="index"
    >
      <img :src="item.icon" class="w-8 h-8" alt="" />
      <div>
        <div class="text-text-color font-normal">
          {{ item.title }}
        </div>
        <div class="text-title-color text-xl font-bold">
          {{ item.number }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue'

export default Vue.extend({
  props: {
    msgList: Array as PropType<
      {
        icon: string
        title: string
        number: number
      }[]
    >,
  },
})
</script>
<style scoped>
.card {
  width: 250px;
  height: 313px;
  background: #ffffff;
  box-shadow: 0px 9px 25px 0px rgba(31, 52, 112, 0.14);
  border-radius: 25px;
  padding-top: 20px;
}
.item {
  height: 69px;
  padding-left: 19px;
}
.item img {
  margin-right: 13px;
}
</style>
