vue elementui 修改步骤条el-steps的样式

感觉以后可能还会用到，在此记录一下

场景：

elementui原有的样式：

目标样式：

实现： 

html代码：

多加了个居中属性：align-center

<el-steps :active="active" class="steps" align-center finish-status="success">
  <el-step title="注册帐号"></el-step>
  <el-step title="资料完善" @click.native="handleStep(1)"></el-step>
  <el-step title="资料审核" @click.native="handleStep(2)"></el-step>
</el-steps>

css代码：

<style lang="less" scoped>
@publicColor: #018736;
@publicHeight: 35px;
    .steps {
      width: 80%;
      margin: 20px auto 0;
      height: @publicHeight;
      ::v-deep .el-step{
        height: 100%;
        .el-step__line{
          background-color: rgba(0,0,0,0.15);
          margin-right: 30px !important;
          margin-left: 105px !important;
          top: 50%;
          height: 1px;
        }
        .el-step__icon{
          width: @publicHeight;
          height: @publicHeight;
          font-size: 16px;
          border: 1px solid;
          .el-step__icon-inner{
            font-weight: unset !important;
          }
        }
        .el-step__head.is-process{
          color: @publicColor;
          border-color: @publicColor;
        }
        .el-step__head.is-success{
          color: @publicColor;
          border-color: @publicColor;
        }
        .is-process .el-step__icon.is-text{
          background: @publicColor;
          color: #fff;
        }
        .el-step__title.is-process{
          color: @publicColor;
        }
        .el-step__title.is-success{
          color: #565656;
        }
        .el-step__title{
          position: absolute;
          top: calc((100% - @publicHeight)/2);
          left: calc(50% + 25px);
        }
      }
    }
</style>

 ok啦，如果有更优的方法，再优化