hb_sis_zhfx/src/components/coms/cards/card-1.vue

<template>
  <div class="card-1">
    <div class="card-icon svg-icon svg-shadow" :class="'svg-icon-' + color">
      <svg-icon :svgid="shieldIcon" />
    </div>
    <div class="card-info">
      <div class="card-title">
        {{ title }}
      </div>
      <div class="card-value">
        <span class="value-text">
          {{ value }}
        </span>
        <span class="svg-icon" :class="'svg-icon-' + color">
          <svg-icon class="increase-icon" :svgid="IncreaseIcon" />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
// 百分比card2
// 使用位置 驾驶舱首页 计划电量完成情况 中的百分比卡片
import SvgIcon from "../icon/svg-icon.vue";
export default {
  components: {
    SvgIcon,
  },
  props: {
    // 标题
    title: {
      type: String,
      default: "及时并网增发电量",
    },
    // 是否增加 true 增加 false 降低
    // 判断图标 及 显示颜色
    isIncrease: {
      type: Boolean,
      default: true,
    },
    // 值
    value: {
      type: Number,
      default: 100,
    },
  },
  computed: {
    percent() {
      return (this.ActualValue / this.TotalValue) * 100;
    },
    IncreaseIcon() {
      return this.isIncrease ? "svg-arrow-up-1" : "svg-arrow-dpwn-1";
    },
    shieldIcon() {
      return this.isIncrease ? "svg-shield-right" : "svg-shield-error";
    },
    color() {
      return this.isIncrease ? "green" : "yellow";
    },
  },
};
</script>

<style lang="less">
.card-1 {
  display: flex;
  align-items: center;

  .card-icon svg {
    width: 36px;
    height: 36px;
  }

  .card-info {
    flex: auto;
    align-self: center;
    margin-left: 8px;

    .card-title {
      width: 100%;
      font-size: 12px;
      color: @font-color;
    }

    .card-value {
      margin-top: 4px;
      font-size: 16px;

      .value-text {
        margin-right: 0.741vh;
        font-family: @font-family-num;
      }

      .increase-icon {
        width: 1.1111vh;
        height: 1.1111vh;
      }
    }

    .card-text {
      font-size: @fontsize;
    }
  }
}
</style>