vue+element-ui修改el-steps默认样式

ElementUI steps默认样式：

实线修改为虚线圆点
只需修改el-step__line：

/deep/.el-step__line{
  background: transparent;
  border-top: 5px dotted;
  .el-step__line-inner{
    border-width: 0 !important;
  }
}

拓展：

实现代码：其中绿色的Badge 标记可由step中的description来实现，通过修改.el-step__description类来修改样式
代码中的icon是我项目中用到的，复制代码的话要把icon的class类名替换成自己的。

<div class="stepOne">
      <el-steps :active="2" align-center>
        <el-step title="Submitted" icon="iconfont icon-submitted" description="1"></el-step>
        <el-step title="In Review" icon="iconfont icon-InReview" description="2"></el-step>
        <el-step title="Verified" icon="iconfont icon-verified" description="3"></el-step>
        <el-step title="Verified" icon="iconfont icon-Denied" description="4"></el-step>
      </el-steps>
</div>

.stepOne{
      padding-top: 30px;
      background: #f6f6f6;
      /deep/.el-step__icon{
        background: #f6f6f6;
      }
      /deep/.el-step__icon-inner{
        font-size: 36px;
      }
      /deep/.el-step__line{
        background: transparent;
        border-top: 5px dotted;
        .el-step__line-inner{
          border-width: 0 !important;
        }
      }
      /deep/.el-step{
        position: relative;
        .el-step__head.is-process {
          color: #C0C4CC;
          border-color: #C0C4CC;
        }
        .el-step__title.is-process{
          color: #C0C4CC;
          font-weight: unset;
        }
        .el-step__description{
          position: absolute;
          top: -16px;
          left: 49%;
          width: 20px;
          height: 16px;
          line-height: 16px;
          padding: 0;
          text-align: center;
          border-radius: 8px;
          background: #999;
          color: #fff;
        }
        .el-step__description.is-finish{
          background: #36BE1BFF;
        }
      }
    }