实现步骤条

1.效果如图：

 

 

 2.html结构：

<template>
  <div class="overall">
    <!-- 步骤条盒子 -->
    <div class="steps-box">
      <!-- 步骤条 -->
      <div
        class="Article-steps"
        :class="stepList.length <= stepIndex ? 'step-over' : ''"
      >
        <!-- 步骤条背景进度条 -->
        <div
          class="line"
          v-for="(i, index) in stepList"
          :key="index"
          :class="
            stepIndex == i.stepIndex || i.stepIndex <= stepIndex
              ? 'line-active'
              : ''
          "
        >
          <span
            class="plan"
            :style="`width:${
              stepIndex * (100 / (stepList.length - 1)) -
              100 / (stepList.length - 1) / 2
            }%`"
          ></span>
        </div>

        <!-- 每步部分 -->
        <span
          class="step"
          v-for="(i, index) in stepList"
          :key="index"
          :class="
            stepIndex == i.stepIndex || i.stepIndex <= stepIndex
              ? 'step-active'
              : ''
          "
        >
          <p class="title">{{ i.name }}</p>
          <span class="step-num">
            <span class="num"></span>
          </span>
          <p class="title">{{ i.title }}</p>
        </span>
      </div>
    </div>
  </div>
</template>

3.data初始化

data() {
    return {
      stepIndex: 2, //当前进度条进度
      stepList: [
        //步骤条数据
        {
          stepIndex: 1,
          title: "2021-11",
          name:'步骤一'
        },
        {
          stepIndex: 2,
          title: "2021-12",
          name:'步骤二'
        },
        {
          stepIndex: 3,
          title: "2022-01",
          name:'步骤三'
        },
        {
          stepIndex: 4,
          title: "2022-02",
          name:'步骤四'
        },
      ],
    };

4.样式部分

.overall {
  .steps-box {
    user-select: none;
    margin-top: 20px;
    width: 100%;
    height: 400px;
    position: relative;

    // <!-- 步骤条背景进度条 -->
    .line {
      display: block;
      margin: 0 auto;
      position: absolute;
      top: 10.5%;
      left: 16%;
      background: #c0c0c0;
      width: 68%;
      height: 4px;
      overflow: hidden;
      //进度条选中的颜色
      .plan {
        position: absolute;
        top: 0;
        left: 0;
        height: 4px;
        transition: 0.5s;
        background: red;
      }
    }
    .Article-steps {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .step {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width:25%;
        .title {
          font-size: 14px;
          color: #c0c0c0;
          margin-top: 5px;
          width: 100%;
          text-align: center;
        }
        .step-num {
          width: 30px;
          height: 30px;
          display: inline-block;
          line-height: 30px;
          border-radius: 50%;
          background: #c0c0c0;
          // clip-path: polygon(50% 0, 100% 85%, 0 85%);
          color: #fff;
          font-weight: bold;
          transition: 0.5s;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 999;
          .num {
            width: 15px;
            height: 15px;
            display: inline-block;
            line-height: 15px;
            border-radius: 50%;
            background: #fff;
            z-index: 999;
            // transition: 0.5s;
            // display: inline-block;
          }
        }
      }
      //当前所在位置样式
      .step-active {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .step-num {
          width: 30px;
          height: 30px;
          display: inline-block;
          line-height: 30px;
          border-radius: 50%;
          background: red;
          // clip-path: polygon(50% 0, 100% 85%, 0 85%);
          color: #333;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: bold;
          transition: 0.5s;
          z-index: 9999;
          .num {
            width: 15px;
            height: 15px;
            display: inline-block;
            line-height: 15px;
            border-radius: 50%;
            background: #fff;
            z-index: 9999;
            // transition: 0.5s;
            // display: inline-block;
          }
        }
        .title {
          color: red !important;
          width: 100%;
        }
      }
    }

    //全部完成样式
    .step-over {
      .plan {
        background: red !important;
      }
      .step-num {
        background: red !important;
      }
      .title {
        color: red !important;
      }
    }
   
}

5.优化后添加按钮，上一步，下一步，加上三角形旋转动画

效果如图：

 

代码：

<template>
  <div class="overall">
    <!-- 步骤条盒子 -->
    <div class="steps-box">
      <!-- 步骤条 -->
      <div
        class="Article-steps"
        :class="stepList.length <= activeIndex ? 'step-over' : ''"
      >
        <!-- 步骤条背景进度条 -->
        <div class="line">
          <span
            class="plan"
            :style="`width:${
              activeIndex * (100 / (stepList.length - 1)) -
              100 / (stepList.length - 1) / 2
            }%`"
          ></span>
        </div>
        <!-- 每步部分 -->
        <span
          class="step"
          v-for="(i, index) in stepList"
          :key="index"
          :class="
            activeIndex == i.stepIndex || i.stepIndex <= activeIndex
              ? 'step-active'
              : ''
          "
        >
          <span class="step-num">
            <span class="num">{{ i.stepIndex }}</span>
          </span>
          <p class="title">{{ i.title }}</p>
        </span>
      </div>
      <!-- 步骤条对应内容 -->
      <div class="Article-content">
        <span
          class="btn"
          v-if="activeIndex != stepList.length"
          @click="nextStep()"
          >下一步</span
        >
        <span class="btn" v-if="activeIndex != 1" @click="lastStep()"
          >上一步</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //当前位置
      activeIndex: 1,
      //步骤条步数
      stepList: [
        {
          stepIndex: 1,
          title: "步骤1",
        },
        {
          stepIndex: 2,
          title: "步骤2",
        },
        {
          stepIndex: 3,
          title: "步骤3",
        },
        {
          stepIndex: 4,
          title: "完成",
        }
      ],
    };
  },
  methods: {
    //点击下一步
    nextStep() {
      this.activeIndex += 1;
    },
    //点击上一步
    lastStep() {
      this.activeIndex -= 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.steps-box {
  user-select: none;
  width: 100%;
  height: 400px;
  position: relative;
  // <!-- 步骤条背景进度条 -->
  .line {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 24px;
    left: 5%;
    background: #a1a3a6;
    width: 90%;
    height: 2px;
    overflow: hidden;
    .plan {
      position: absolute;
      top: 0;
      left: 0;
      height: 2px;
      transition: 0.5s;
      background: #ed1941;
    }
  }
  .Article-steps {
    display: flex;
    justify-content: space-between;
    .step {
      .title {
        font-size: 17px;
        font-weight: bold;
        color: #c0c0c0;
        margin-top: 5px;
      }
      .step-num {
        width: 50px;
        height: 50px;
        display: inline-block;
        line-height: 50px;
        background: #c0c0c0;
        clip-path: polygon(50% 0, 100% 85%, 0 85%);
        color: white;
        font-weight: bold;
        transition: 0.5s;
        .num {
          transition: 0.5s;
          display: inline-block;
        }
      }
    }
  }

  //当前所在位置样式
  .step-active {
    .step-num {
      background: #f58f98 !important;
      transform: rotate(90deg);
      .num {
        transform: rotate(-90deg);
      }
    }
    .title {
      color: #f58f98 !important;
    }
  }

  //全部完成样式
  .step-over {
    .plan {
      background: #bed742 !important;
    }
    .step-num {
      background: #bed742 !important;
    }
    .title {
      color: #bed742 !important;
    }
  }
  //对应内容
  .Article-content {
    padding: 20px;
    .btn {
      width: 100px;
      text-align: center;
      display: block;
      margin: 20px auto;
      margin-bottom: 10px;
      background: #f58f98;
      color: white;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
    }
  }
}
</style>