vue 电池样式组件 css样式

效果如图：（背景图片自行替换）

 这是用纯css写的电池样式，获取数据后，找出最大值，并计算长条的宽度，从而完成样式。

话不多说上代码：

<!--
 * @Description:电池样式组件
 * @Author: 如意酱
 * @Date: 2022-01-08 13:31:37
 * @LastEditTime: 2023-06-26 17:08:17
-->
<template>
  <div class="battery" ref="battery">
    <div class="lastPosition-item" v-for="(item, index) in list" :key="index">
      <div class="lastPosition-name" :title="item.name">
        {{ item.name }}
      </div>
      <div class="line-bg">
        <div class="box" v-for="(item, index) in 200" :key="index"></div>
      </div>
      <div class="lastPosition-row" v-if="colorList.length > 0">
        <div
          class="line"
          :style="{
            width: (Number(item.num) / max) * 100 + '%',
            background:
              'linear-gradient(90deg, ' +
              colorList[index][0] +
              ', ' +
              colorList[index][1] +
              ')'
          }"
        ></div>
        <div
          class="num"
          :style="{
            color: colorList[index][1]
          }"
        >
          {{ item.num }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'battery',
  data() {
    return {
      max: 0, //最大值
      colorList: [] //颜色列表
    };
  },
  props: {
    //数据
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    //颜色
    color: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    list: {
      handler(newVal) {
        this.$nextTick(() => {
          let box = [];
          newVal.map(val => {
            box.push(val.num);
          });
          this.max = Math.max(...box); //计算最大值
        });
      },
      immediate: true
    },
    color: {
      handler(newVal) {
        this.$nextTick(() => {
          let i = 0;
          // 颜色循环
          for (let a = 0; a < this.list.length; a++) {
            if (i == 7) {
              i = 0;
            }
            this.colorList.push(newVal[i]);
            i++;
          }
        });
      },
      immediate: true
    }
  }
};
</script>

<style scoped lang="scss">
.battery {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  .lastPosition-item {
    width: 100%;
    margin-top: 11px;
    background-image: url('~@/assets/img/front/itemBg.png'); //替换图片
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    cursor: pointer;
    .lastPosition-name {
      width: 90%;
      height: 22px;
      line-height: 22px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #d9eaf5;
      padding-left: 6px;
      background-image: url('~@/assets/img/front/textBg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .line-bg {
      position: absolute;
      top: 28px;
      left: 0;
      width: calc(100% - 50px);
      height: 14px;
      margin-right: 10px;
      background-color: #10315363;
      overflow: hidden;
      .box {
        width: 3px;
        height: 100%;
        display: inline-block;
        margin-right: 3px;
        position: relative;
        background: #06152c;
        z-index: 3;
      }
    }
    .lastPosition-row {
      width: 100%;
      height: 22px;
      margin: 7px 0;
      display: flex;
      justify-content: space-between;
      .line {
        width: calc(100% - 40px);
        height: 13px;
        margin-right: 10px;
        z-index: 1;
      }
      .num {
        width: 44px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 14px;
        color: #06c8fa;
        text-align: right;
        padding-right: 10px;
      }
    }
  }
  .lastPosition-item:hover {
    background-color: #425e9424;
  }
}
</style>

 

【父组件调用】
<battery :list="linkList" :color="linkColor"></battery>

【数据格式】
//电池图列表
linkList: [
{ name: '冲压', num: 100 },
{ name: '焊接', num: 150 },
{ name: '涂装', num: 120 },
{ name: '总装', num: 190 },
{ name: '零配件', num: 160 },
{ name: '仓储', num: 100 }
],
//电池图颜色
linkColor: [
['#3A7BD5', '#00D2FF'],
['#F7971E', '#FFD200'],
['#8E54E9 ', '#4776E6'],
['#0CEBEB', '#29FFC6'],
['#EC008C', '#FF727C'],
['#8CA6DB', '#B993D6']
]