<template>
  <div class="card">
    <div
      class="item flex items-center"
      v-for="(item, index) in msgList"
      :key="index"
    >
      <img :src="item.icon" style="width: 26px; height: 26px;" alt="" />
      <div>
        <div class="text-text-color font-normal text-xs">
          {{ item.title }}
        </div>
        <div class="text-title-color text-base 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: 200px;
  height: 250px;
  background: #ffffff;
  box-shadow: 0px 7px 20px 0px rgba(31, 52, 112, 0.14);
  border-radius: 20px;
  padding-top: 15px;
}
.item {
  height: 55px;
  padding-left: 15px;
}
.item img {
  margin-right: 13px;
}
</style>
