实现效果：

实现过程：

组件代码：

<!-- component-name -->
<template>
  <div class="steeps">
    <div class="step_item" v-for="(v, i) in stepData" :key="i">
      <div
        class="step_line"
        :class="[i < active ? 'step_line_focus' : '']"
        v-if="i != stepData.length - 1"
      ></div>
      <div class="step_head">
        <div
          :class="[
            active == i ? 'step_icon step_focus' : 'step_success',
            active < i ? 'step_wait' : '',
          ]"
        >
          <div
            :class="[
              active == i ? 'step_text step_text_focus' : 'step_text_success',
              active < i ? 'step_text_wait' : '',
            ]"
          >
            <i
              v-if="i < active"
              class="el-step__icon-inner is-status el-icon-check"
            ></i>
            <span v-else>{{ i + 1 }}</span>
          </div>
        </div>
      </div>
      <div class="step_content">
        <div
          :class="[
            active == i ? 'step_focus_title' : 'step_title',
            active < i ? 'step_title_wait' : '',
          ]"
        >
          {{ v.title }}
        </div>
        <div
          :class="[
            active == i ? 'step_focus_desc' : 'step_desc',
            active < i ? 'step_desc_wait' : '',
          ]"
        >
          {{ v.desc }}
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>
export default {
  name: "component-name",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    stepData: {
      type: Array,
      default: [
        { title: "第一步", desc: "作业项目选择" },
        { title: "第二步", desc: "上传附件" },
        { title: "第三步", desc: "基础信息填写" },
        { title: "第四步", desc: "上传申请表" },
      ],
    },
    active: {
      type: Number,
      default: 3,
    },
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
// 带focus的为正在该步骤的，带success的为走过的步骤，带wait的为还未走的步骤
.steeps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .step_item {
    position: relative;
    display: flex;
    width: 25%;
    // 线条
    .step_line {
      position: absolute;
      border-color: inherit;
      background-color: #f2f2f2;
      height: 1px;
      width: 76%;
      top: 50%;
      left: 35%;
      margin-top: -10px;
    }
    // 有颜色的线
    .step_line_focus {
      background-color: #096dd9;
    }
    // 圆圈
    .step_head {
      .step_icon {
        padding: 3px;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 50%;
        .step_text {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 32px;
          height: 32px;
          font-size: 14px;
          box-sizing: border-box;
          background: #096dd9;
          transition: 0.15s ease-out;
          border-radius: 50%;
          color: #fff;
          font-size: 16px;
        }
        // 激活的
        .step_text_focus {
          transform: rotate(-45deg);
        }
      }
      // 激活的
      .step_focus {
        border-top: 1px solid #096dd9;
        transform: rotate(45deg);
      }
      // 激活后的
      .step_success {
        border: 1px solid #096dd9;
        background: #fff;
        border-radius: 50%;
        .step_text_success {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 31px;
          height: 31px;
          font-size: 14px;
          box-sizing: border-box;
          background: #fff;
          transition: 0.15s ease-out;
          border-radius: 50%;
          color: #096dd9;
          font-size: 16px;
        }
      }
      // 未激活的
      .step_wait {
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 50%;
        .step_text_wait {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 31px;
          height: 31px;
          font-size: 14px;
          box-sizing: border-box;
          background: #fff;
          transition: 0.15s ease-out;
          border-radius: 50%;
          color: #bbb;
          font-size: 16px;
        }
      }
    }
    .step_content {
      margin-top: 5px;
      margin-left: 10px;
      .step_title {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        color: #333333;
        margin-bottom: 10px;
      }
      .step_focus_title {
        color: #096dd9;
        font-family: MicrosoftYaHei;
        font-size: 16px;
        margin-bottom: 10px;
      }
      .step_title_wait {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        margin-bottom: 10px;
        color: #bbbbbb;
      }
      .step_desc {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #999999;
      }
      .step_focus_desc {
        font-size: 14px;
        color: #096dd9;
      }
      .step_desc_wait {
        font-size: 14px;
        color: #bbbbbb;
      }
    }
  }
  .step_item:last-child {
    width: 13%;
  }
}
</style>

使用：

<steeps :stepData="stepData" :active="active"></steeps>


import steeps from "@/components/steeps/steeps.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { steeps },
  data() {
    //这里存放数据
    return {
      stepData: [
        { title: "第一步", desc: "作业项目选择" },
        { title: "第二步", desc: "上传附件" },
        { title: "第三步", desc: "基础信息填写" },
        { title: "第四步", desc: "上传申请表" },
      ],
      active:2
    };
  },
}