<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>
