<template>
  <div class="nums card">
    <div class="n-left">
      <p>{{data.name}}</p>
      <p>{{data.sum}}<span>{{data.danwei}}</span></p>
    </div>
    <div class="n-right">
      <img :src="require(`@/assets/img/${data.icon}`)" alt="">
    </div>
  </div>
</template>
<script>
export default {
  props: ['data']
}
</script>
<style scoped>
  .nums{
    width: 100%;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
  }
  .n-left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .n-left p{
    font-size: 32px;
    font-weight: bold;
  }

  .n-left p:first-of-type{
    color: rgba(0, 0, 0, 0.38);
    line-height: 32px;
    font-size: 16px;
  }
  .n-left span{
    font-size: 16px;
    margin-left: 8px;
  }

  .n-right{

  }

  .n-right >img{
    width: 96px;
  }
</style>
