front/src/components/EvaluationCard/index.vue

<template>
  <el-card class="evaluation-card-container">
    <div
      class="evaluation-card-main"
      :style="{ cursor: pointerEnable ? 'pointer' : 'default' }"
    >
      <div class="evaluation-card-row">
        <div class="evaluation-card-title" :title="title">{{ title }}</div>
        <el-image v-if="pointerEnable"
          class="evaluation-card-icon"
          :src="require('@/assets/images/icon_rightArrow.png')"
        ></el-image>
      </div>
      <div class="evaluation-card-row">
        <div v-if="subTitle" class="evaluation-card-subTitle">{{ subTitle }}</div>
        <div v-if="thirdTitle" class="evaluation-card-subTitle">
          {{ thirdTitle }}
        </div>
        <div class="evaluation-card-stateGroup">
          <span
            class="evaluation-card-state-item"
            v-for="opt in stateOptions"
            :key="opt"
            :class="{
              'evaluation-card-stateActive': isStateActive(state, opt),
            }"
            >{{ opt }}</span
          >
        </div>
        <div class="evaluation-card-proportion">{{ proportion }}</div>
      </div>
    </div>
    <div class="evaluation-card-extra">
      <slot></slot>
    </div>
  </el-card>
</template>
<script>
export default {
  props: {
    pointerEnable: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "",
    },
    subTitle: {
      type: String|Boolean,
      default: "",
    },
    thirdTitle: {
      type: String,
      default: "",
    },
    stateOptions: {
      type: Array,
      default: () => [],
    },
    state: {
      type: String,
      default: "",
    },
    stateMatchFunc: {
      type: Function,
      default: (state, option) => state == option,
    },
    proportion: {
      type: String,
      default: "",
    },
  },
  computed: {},
  methods: {
    isStateActive: function (state, option) {
      return this.stateMatchFunc(state, option);
    },
  },
};
</script>
<style scoped>
.evaluation-card-container {
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);

  display: flex;
  flex-direction: column;
}
.evaluation-card-main {
  height: 50px;
  background: rgb(255, 255, 255);
  color: rgb(48, 49, 51);
  cursor: pointer;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.evaluation-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.evaluation-card-icon {
  width: 16px;
  height: 16px;
}
.evaluation-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 20px;

  flex: 1;
}
.evaluation-card-subTitle {
  font-size: 14px;
  flex: 1;
  display: flex;
  align-items: center;
}
.evaluation-card-stateGroup {
  font-size: 14px;
  color: #cccccc;
  text-align: center;
  flex: 3;
}
.evaluation-card-state-item {
  margin-right: 10px;
}
.evaluation-card-stateActive {
  color: #30b08f;
}
.evaluation-card-proportion {
  font-size: 14px;
  color: #999999;
  text-align: right;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/deep/ .el-card__body {
  padding: 15px;
}
</style>