webapp/admin/src/components/home/HomeCard.vue

微信扫码关注公众号，代码整理好后第一时间通知你。

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