进度条步骤

进度条

// 布局 
      <div class="important-work">
        <div class="workLi" v-for="(item, index) in workList" :key="index">
          <span>{{ item.name }}</span>
          <span
            ><i>{{ item.num1 }}</i
            >项</span
          >
          <span class="step-progess">
            <i v-for="(k, j) in item.colorStyle" :key="j" :class="item.initNum > j ? 'colorStyle' : ''"></i>
          </span>
          <span>{{ item.state }}</span>
          <span
            ><i>{{ item.num2 }}</i
            >项</span
          >
        </div>
      </div>


  data() {
    return {
      workList: [
        {
          name: '省级交办',
          num1: '10',
          state: '未完成',
          num2: '8',
          colorStyle: []
        },
        {
          name: '市级交办',
          num1: '19',
          state: '未完成',
          num2: '10',
          colorStyle: []
        },
        {
          name: '局领导交办',
          num1: '10',
          state: '未完成',
          num2: '10',
          colorStyle: []
        },
        {
          name: '其他',
          num1: '8',
          state: '未完成',
          num2: '6',
          colorStyle: []
        }
      ]
    }
  },


 // js
     // 处理进度条
    dealWorkList() {
      this.workList.forEach(item => {
        let percentum = Number(item.num2) / Number(item.num1)
        console.log(percentum, '+++++++++++++++++')
        let initNum = Math.floor(percentum * 20)
        console.log(initNum, '====')
        for (let i = 0; i < 20; i++) {
          let obj = {
            colorStyle: ''
          }
          item.colorStyle.push(obj)
          item.initNum = initNum
        }
      })
      console.log(this.workList, '--------------')
    }


// css 
.important-work {
    width: 100%;
    height: 100%;
    padding-left: 26px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;

    .workLi {
      width: 100%;
      display: flex;
      align-items: center;
      height: 34px;
      margin-top: 8px;

      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;

        i {
          font-size: 20px;
          font-family: DIN Condensed;
          font-weight: bold;
          font-style: normal;
        }
      }

      span:nth-of-type(1) {
        width: 19%;
      }

      span:nth-of-type(2) {
        width: 12%;

        i {
          color: rgba(255, 222, 0, 1);
        }
      }

      span:nth-of-type(4) {
        width: 12%;
        margin-left: 20px;
      }

      span:nth-of-type(5) {
        // width: 12%;

        i {
          color: rgba(0, 239, 240, 1);
        }
      }

      span.step-progess {
        width: 40%;
        display: flex;
        align-items: center;

        i {
          height: 18px;
          width: 6px;
          background: rgba(24, 61, 77, 1);
          margin-left: 6px;
        }

        i:first-of-type {
          margin-left: 0px;
        }

        .colorStyle {
          background: rgba(0, 255, 255, 0.8);
        }
      }
    }
  }