原本样式

目标样式

效果实现

HTML

<el-steps :active="1" class="steps" finish-status="success">
  <el-step title="身份验证"></el-step>
  <el-step title="重置密码"></el-step>
</el-steps>

CSS

<style lang="scss" scoped>
//定义公共样式
$stepColor:'#1890ff';
.steps-box{
  width: 100%;
  margin-bottom: 64px;
  .steps {
    width: 100%;
    //padding: 20px;
    height: 35px;
    ::v-deep .el-step {
      height: 100%;
      // 设置图标和步骤条的行高
      .el-step__head {
        line-height: 35px;
      }
      // 已完成步骤条的边框色和字体颜色
      .el-step__head.is-success {
        color: $stepColor;
        border-color: $stepColor;
      }
      // 步骤条
      .el-step__line {
        background-color: rgba(0, 0, 0, 0.15);
        top: 50%;
        height: 1px;
      }

      .el-step__title.is-process {
        //未完成步骤的title
        color: #000;
      }
      .el-step__title.is-success {
        // 已完成步骤的title
        color: #000;
      }

      // 已完成图标背景色
      .el-step__icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
        border: 1px solid #6195f7;
        color: #000000;
        z-index: 99;
        // 已完成图标字体颜色
        .el-step__icon-inner {
          font-weight: unset !important;
          color: #6195f7;
        }
      }
      // 未完成图标背景色
      .is-process .el-step__icon.is-text {
        z-index: 99;
        background: #6195f7;
        // 未完成图标字体颜色
        .el-step__icon-inner {
          color: #fff;
        }
      }
      // title样式
      .el-step__title {
        z-index: 66;
        position: absolute;
        top: 0;
        left: calc(2%);
        width: 100px;
        font-size: 14px;
        z-index: 66;
        color: #000;
      }
      .el-step__title.is-process{
        // 防止最后一个title会加粗
        font-weight: normal !important;
      }
      // 描述样式
      .el-step__description {
        z-index: 66;
        position: absolute;
        top: 40px;
        width: 100%;
        color: #000;
      }
    }
    // 第一个步骤
    ::v-deep .el-step:first-child {
      flex-basis: 47% !important;
      .el-step__head.is-process {
        width: 79%;
        padding-left: 10px !important;
      }
      .el-step__head.is-success {
        width: 79%;
        padding-left: -10px !important;
      }
      .el-step__line {
        width: 40%;
        height: 2px;
        margin-left: 92% !important;
        background-color: #607EFF;
      }
      .el-step__description {
        left: calc(4% + 34px);
      }
      .el-step__title {
        padding-left: 39px !important;
      }
      .el-step__description {
        margin-left: -16px !important;
      }
    }
    // 第二个步骤
    ::v-deep .el-step:nth-child(2) {
      flex-basis: 30% !important;
      .el-step__line {
        width: 104%;
        margin-left: 28% !important;
      }
      .el-step__title {
        width: 90px;
        padding-left: 20px !important;
      }
      .el-step__description {
        margin-left: 30px !important;
      }
    }
    // 第三个步骤
    ::v-deep .el-step:last-child {
      padding-left: 10% !important;
      max-width: 10% !important;
      flex-basis: 50% !important;
      .el-step__title {
        padding-left: 34px !important;
        margin-left: 120% !important;
        z-index: 66;
      }
      .el-step__description {
        width: 110px;
        margin-left: 20px !important;
      }
    }
  }
}
</style>
```