<template>
  <el-card class="box-card">
    <!-- 卡片头部 -->
    <div slot="header" class="header">
      <!-- 标题 -->
      <span>{{title}}</span>
      <!-- 标签 -->
      <span>
        <el-tag size="small" :type="titleTag">{{titleUnit}}</el-tag>
      </span>
    </div>
    <!-- 主体内容 -->
    <div class="content">
      <!-- 主要内容 -->
      {{content}}&nbsp;&nbsp;
      <!-- 单位 -->
      <span class="unit">{{contentUnit}}</span>
    </div>
    <!-- 底部信息 -->
    <div class="bottom">
      <!-- 左侧标题 -->
      <span>{{bottomTitle}}</span>
      <!-- 右侧内容 -->
      <span>
        {{bottomContent}}
        <!-- 图标 -->
        <i :class="bottomIcon"></i>
      </span>
    </div>
  </el-card>
</template>

<script>
export default {
  props: [
    "title", // 标题
    "titleTag", // 标题标签类型
    "titleUnit", // 标题单位
    "content", // 主要内容
    "contentUnit", // 内容单位
    "bottomTitle", // 底部标题
    "bottomContent", // 底部内容
    "bottomIcon" // 底部图标类名
  ]
};
</script>

<style lang="scss" scoped>
.box-card {
  margin-right: 10px; // 卡片之间的间距
  .header {
    display: flex; // 使用弹性布局
    justify-content: space-between; // 水平分布
    align-items: center; // 垂直居中
  }
  .content {
    font-size: 30px; // 主内容字体大小
    font-weight: bold; // 加粗
    color: #666; // 字体颜色
    text-align: center; // 文字居中
    .unit {
      font-size: 16px; // 单位字体大小
    }
  }
  .bottom {
    display: flex; // 使用弹性布局
    justify-content: space-between; // 水平分布
    align-items: center; // 垂直居中
    margin-top: 10px; // 上方间距
  }
}
</style>