dvcp_v2_webapp/ui/dv/layout/AiDvSummary/components/Summary19.vue

<template>
  <div class="summary19">
    <div class="summary19-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
      <div class="label" v-text="item[keys]"/>
      <span v-text="item[value]" :unit="item.unit"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'summary19',

  props: {
    data: {
      type: Array,
      default: () => []
    },

    keys: {
      type: String,
      default: 'key'
    },

    value: {
      type: String,
      default: 'value'
    }
  },
}
</script>

<style lang="scss" scoped>
$theme-color: #23ECFD;
.summary19 {
  padding: 22px 14px;
  background: hsla(0, 0%, 100%, .04);
  margin: -16px 16px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 14px;

  div {
    box-sizing: border-box;
  }

  .summary19-item {
    width: 48%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: baseline;
    gap: 4px;

    span {
      font-family: D-DIN;
      font-size: 22px;
      color: $theme-color;
      min-width: 60px;
      margin-left: 8px;

      &:after {
        content: attr(unit);
        font-size: 14px;
      }
    }

    p {
      color: $theme-color;
    }

    .label {
      color: white;
      text-align: right;
    }
  }
}
</style>