<template>
  <div class="card">
    <div
      class="item flex items-center"
      v-for="(item, index) in msgList"
      :key="index"
    >
      <img :src="item.icon" style="width: 52px; height: 52px;" alt="" />
      <div>
        <div class="text-text-color font-normal">
          {{ item.title }}
        </div>
        <div class="text-title-color font-bold" style="font-size: 32px;">
          {{ 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: 400px;
  height: 500px;
  background: #ffffff;
  box-shadow: 0px 9px 25px 0px rgba(31, 52, 112, 0.14);
  border-radius: 40px;
  padding-top: 30px;
}
.item {
  height: 110px;
  padding-left: 19px;
}
.item img {
  margin-right: 20px;
}
</style>
