SaaS-DataScreen/src/views/hui-jia/components/work-card.vue

<template>
  <div class="work-card">
    <div class="work-card-item" v-for="item in dataList" :key="item.title">
      <div class="card-header">
        <!-- <i class="iconfont" :class="iconName"></i> -->
        <span class="card-title">{{ item.title }}</span>
      </div>
      <div class="card-content">
        <div class="card-subtitle">{{ item.subtitle }}</div>
        <div class="card-value">{{ formatNumber(item.value) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "WorkCard",
    props: {
      iconName: {
        type: String,
        required: true,
        default: "icon-enterprise",
      },
      title: {
        type: String,
        required: true,
      },
      subtitle: {
        type: String,
        required: true,
      },
      value: {
        type: [Number, String],
        required: true,
        default: 0,
      },
    },
    data() {
      return {
        dataList: [
          {
            title: "数电票业务",
            subtitle: "已开发票数",
            value: 345345,
          },
          {
            title: "道闸系统",
            subtitle: "设备数量",
            value: 453,
          },
          {
            title: "智慧二维码",
            subtitle: "配置数量",
            value: 45,
          },
          {
            title: "短信业务",
            subtitle: "销售数量",
            value: 3456,
          },
          {
            title: "房屋租售",
            subtitle: "发布资产数",
            value: 887,
          },
          {
            title: "业委会",
            subtitle: "开通数量",
            value: 34,
          },
        ],
      }
    },
    methods: {
      // 格式化数字显示
      formatNumber(num) {
        if (typeof num === "string") {
          return num
        }
        // 如果数字是整数，直接返回字符串形式
        return num.toString()
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/theme.scss";

  .work-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
  }

  .work-card-item {
    background: var(--content-bg);
    border-radius: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 20px;
    background: var(--title-bg);

    .iconfont {
      font-size: 24px;
      margin-right: 10px;
      // 根据不同图标使用不同颜色
      color: var(--primary-color, #409eff);
    }

    .card-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--title-primary);
    }
  }

  .card-content {
    display: flex;
    align-items: flex-end;
    padding: 20px;
    .card-subtitle {
      font-size: 14px;
      color: #82d1f6;
    }

    .card-value {
      margin-left: 12px;
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 1px;
    }
  }
</style>