进度条界面实现

 一、实现一个项目进度界面

<!-- 进度条start -->
    <div v-show="nodeList.length>0" class="steps" style="display: flex;">  
      <div v-for="(item,index) in nodeList" style="display: flex;flex: 1;">
        <div class="zt-con"><div class="zt" style="min-width: 100px;"></div></div>
        <div class="middle" :class="item.status">
          {{ item.status=='finish'?'已完成':item.status=='process'?'进行中':'未开始' }}
          <div class="desc">{{ item.node_name }}</div>
        </div>
      </div>

      <div class="top">
        <div style="display: flex;">
          <div style="display: flex;align-items: center;"><div class="zt" style="width: 100px;"></div></div>
          <div class="triangle-con"><div class="triangle"></div></div>
        </div>
      </div>
    
    </div>
    <!-- 进度条end -->

样式

.steps{
  width: calc(100% - 30px);
  margin: 0 0 70px 15px;

  .zt-con{
    display: flex;
    align-items: center;
    width: calc(100% - 50px);
  }
  .middle{
    height: 70px;
    width: 70px;
    border-radius: 50%;
    border: 1px solid #333;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;

    .desc{
        position: absolute;
        top: 70px;
        text-align: center;
        border-radius: 3px;
        font-weight: 600;
        padding: 3px;

        background-color: #f2f2f2;
        width: 130px;
      }
  }
  .top{
    display: flex;
    justify-content: center;
    .triangle-con{
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
    }
    /* 头部三角 */
    .triangle{
      border-style: solid;
      border-width: 25px 25px 25px 25px;
      border-color:  transparent  transparent  transparent rgb(79 173 234);
      width: 0px;
      height: 0px;
      border-radius: 5px;
    }
  
  }
  .zt{
      height: 10px;
      width: 100%;
      background-color: rgb(79 173 234);
    }
  .finish{
    background-color: rgb(86 143 240);
    .desc{
      background-color: rgb(86 143 240);
      color: #fff;
    }
  }
  .process{
    background-color: #b5c649;
    .desc{
      background-color: #b5c649;
    }
  }
}

 效果

二、实现一个进度条

<div :class="record.project_schedule.match(/\d+/)[0]>60?'nomal':'warning'" style="display: flex;align-items: center;">
          <div class="process">
            <div style="overflow: hidden;border-radius: 100px;">
              <div class="act-num" :style="{width:calculateWidth(record.project_schedule)}"></div>
            </div>
            <div class="over" v-if="record.project_schedule.match(/\d+/)[0]>60"></div>
            <div v-else class="noover" ></div>
          </div>
          <div class="process-num">{{ record.project_schedule }}</div>
        </div>

 样式

  .nomal,.warning{
    .process-num{
      padding-left: 3px;
      font-weight: 500;
    }
  }

  .process{
    position: relative;
    flex: 1;
    height: 12px;
    background-color: #EBEBEB;
    border-radius: 100px;
    .act-num{
      background-color: rgb(44 146 236);
      height: 12px;
      border-radius: 100px;
    }
    
    
  }
  .nomal{
    .over{
      position: absolute;
      left: 60%;
      top: 0;
      width: 1px;
      height: 12px;
      background-color: #fff;
    }
    .process-num{
      color: rgb(44 146 236);
    }
  }

  .warning{
    .process-num{
      color: rgb(255 40 83);
    }
    .act-num{
      background-color: rgb(255 40 83);
    }
    .noover{
      position: absolute;
      left: 60%;
      bottom: 0;
      width: 10px;
      height: 21px;
      background-image: url("../../../../assets/flag.png");
      background-size: cover;
    }
  }

效果：

可根据进度数值改变样式

1 进度大于60，蓝色；进度小于60，红色

2 在60处有红旗标注或白线