<template>
  <div class="brief-container">
    <div v-for="item in list" :key="item.name">
      <img v-if="item.icon" :src="`@/assets/images/${item.icon}`" />
      <div :class="{ center: !item.icon }">
        <m-count class="count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export interface BriefProp {
  name: string
  value: number
  icon?: string
}
export default defineComponent({
  name: 'Brief',
  props: {
    list: {
      type: Array as PropType<BriefProp[]>,
      required: true,
    },
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.brief-container
  display flex
  justify-content space-around
  align-items center
  >div
    display flex
    align-items center
    >img
      width .22rem
      height @width
      margin-right .05rem
    >div
      font-weight bold
      .count
        font-size .13rem
        color $yellow
      p
        color #ccc
      &.center
        text-align center
</style>
