<template>
  <div class='account' :style="{ background: props.item.background ? props.item.background : '#F6F6F6' }">
    <div class="csname">{{ props.item.title }}</div>
    <div class="csnum">
      <img :src='props.item.icon'>
      <span>{{ props.item.num }}</span>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  //背景颜色
  background: {
    type: String,
    default: '#F6F6F6'
  },
  item: {
    default: () => { },
    type: Object
  },

});
</script>

<style lang="scss" scoped>
.account {
  width: 100%;
  height: 100%;
  padding: 10px 8px;
  border-radius: 5%;
  color: #000;
}

.csname {
  height: 22px;
  line-height: 18px;
  color: #666;
  font-size: 14px;
}

.csnum {

  height: 39px;
  line-height: 39px;
  display: flex;
  align-items: center;

  >span {
    display: inline-block;
    margin-left: 10px;
    font-weight: 400;
    font-size: 24px;
    color: #282D30;
  }

}
</style>
