<template>
  <el-card :shadow="shadow">
    <div>
      <span class="card-title">{{ title }}</span>
      <span class="card-value">{{ context }}</span>
      <span class="card-unit">{{ unit }}</span>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'SimpleCard',
  props: {
    title: {
      type: String,
      default: ''
    }, // 标题
    unit: {
      type: String,
      default: '个'
    }, // 单位
    context: {
      type: [String, Number],
      default: ''
    }, // 内容
    color: {
      type: String,
      default: '#40c9c6'
    }, // 图标颜色
    shadow: {
      type: String,
      default: 'never'
    } // 卡片阴影
  }
}
</script>

<style scoped>
.card-title {
  font-size: 16px;
}
.card-value {
  font-size: 20px;
  font-weight: bold ;
  margin: 0 10px;
}
</style>