版本：

• element-ui：2.15.13
• vue：2x
• node-sass: 4.14.1
• sass-loader: 7.1.0

注意：css样式可用less、sass，都支持嵌套

<style lang="less" scoped>
    // less定义公共样式
    @stepColor: #1890ff;
    @stepHeight: 40px;
    // 用法
    .steps {
        height: @stepHeight;
        color: @stepColor;
    }
</style>

<style lang="scss" scoped>
    // sass定义公共样式
    $stepColor: #1890ff;
    $stepHeight: 40px;
    // 用法
    .steps {
        height: $stepHeight;
        color: $stepColor;
    }
</style>

改造效果1：

DOM：

<el-steps :active="active" class="steps" finish-status="success">
    <el-step title="买家下单" description="2016-05-02 10:23"></el-step>
    <el-step title="卖家发货"></el-step>
    <el-step title="买家收货"></el-step>
</el-steps>

Scss：

<style lang="scss" scoped>
    // 可定义局部公共样式
    $stepColor:'#1890ff'

    .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: #1890ff;
          border-color: #1890ff;
        }
        // 步骤条
        .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: 20px;
          height: 20px;
          font-size: 12px;
          border: 1px solid #6195f7;
          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: 92px;
          font-size: 14px;
          background-color: #fff;
          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: 100%;
          margin-left: 25% !important;
        }
        .el-step__description {
          left: calc(4% + 34px);
        }
        .el-step__title {
          padding-left: 26px !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: 28px !important;
        }
      }
      // 第三个步骤
      ::v-deep .el-step:last-child {
        padding-left: 10% !important;
        max-width: 10% !important;
        flex-basis: 50% !important;
        .el-step__title {
          padding-left: 24px !important;
          margin-left: 100% !important;
          z-index: 66;
        }
        .el-step__description {
          width: 110px;
          margin-left: 24px !important;
        }
      }
    }
 </style>

改造效果2:

DOM：

    <div class="progress-bar">
      <el-steps :active="active" finish-status="success">
        <el-step title="00:00" />
        <el-step title="04:00" />
        <el-step title="08:00" />
        <el-step title="12:00" />
        <el-step title="16:00" />
        <el-step title="20:00" />
        <el-step title="24:00" />
      </el-steps>
    </div>

Scss：

<style lang="scss" scoped>
    .progress-bar {
      padding: 20px;
      ::v-deep .el-step {
        // 已完成步骤条的边框色和字体颜色
        .el-step__head.is-success {
          color: #1890ff;
          border-color: rgba(0, 0, 0, 0);
          cursor: pointer;
        }
        // 步骤条
        .el-step__line {
          background-color: rgba(0, 0, 0, 0.15);
          top: 50%;
          height: 1px;
        }

        // 已完成图标背景色
        .el-step__icon {
          width: 10px;
          height: 20px;
          font-size: 12px;
          border: 1px solid #6195f7;
          z-index: 99;
          background-color: #6195f7;
          // 已完成图标字体颜色
          .el-step__icon-inner {
            font-weight: unset !important;
            color: #fff;
            font-size: 0px;
          }
        }
        // 未完成图标背景色
        .is-process .el-step__icon.is-text {
          z-index: 99;
          background: #6195f7;
          // 未完成图标字体颜色
          .el-step__icon-inner {
            font-size: 0px;
            color: #fff;
          }
        }
        .el-step__title.is-process {
          // 防止某一个title会加粗
          font-weight: normal !important;
        }
        // title样式
        .el-step__title {
          cursor: pointer;
          color: #000;
        }
        .el-step__title.is-process {
          // 防止最后一个title会加粗
          font-weight: normal !important;
        }
      }
      ::v-deep .el-step:nth-child(even) {
        // title样式
        .el-step__title {
          position: absolute;
          bottom: 52px;
          cursor: pointer;
          color: #000;
        }
      }
    }
</style>