

<template>
  <div class="progress">
    <div class="progress-item" v-for="(item, index) in rate" :key="index">
      <BFC>
        <div class="percent" slot="right">
          {{ (item.val * 100).toFixed(0) }}
          <div class="unit">%</div>
        </div>
        <div class="info" slot="center">
          <div class="bar">
            <div class="bar-color">
              <div class="bf" :style="{ width: item.val * 100 + '%' }"></div>
            </div>
          </div>
          <div class="tit">
            {{ item.key }}
          </div>
        </div>
      </BFC>
    </div>
  </div>
</template>
<script>
import BFC from "../BFC.vue";
import { mapState } from 'vuex'
export default {
  name: "ProgressDesc",
  components: {BFC},
  computed: {
    ...mapState({
      info: state => state.system.info
    }),
    rate () {
      return this.info?.rate || []
    }
  }
}
</script>
<style scoped lang="less">
  .progress {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    .progress-item {
      width: 50%;
      height: 40px;
      box-sizing: border-box;
      padding: 0 4px;
      .percent {
        height: 40px;
        line-height: 40px;
        /** 文本1 */
        font-size: 28px;
        font-weight: 400;
        letter-spacing: 0px;
        color: rgba(255, 255, 255, 1);
        word-break: keep-all;
        margin-top: -10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .unit {
          /** 文本1 */
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 38.42px;
          color: rgba(255, 255, 255, 1);
          text-align: left;
          vertical-align: top;
        }
      }
      .tit {
        /** 文本1 */
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 21.95px;
        color: rgba(64, 204, 151, 1);
        text-align: left;
        vertical-align: top;
        margin-top: 5px;
      }
      .info {
        height: 40px;
        padding-right: 10px;
        padding-top: 10px;
        .bar {
          height: 3px;
          background: rgba(64, 204, 151, 0.3);
          position: relative;
          .bf {
            position: absolute;
            left: 0;
            top: -1px;
            height: 5px;
            background: rgba(64, 204, 151, 1);          ;
          }
        }
      }
    }
  }
</style>
