Element 之 Steps 步骤条组件 simple 修改

简洁风格的步骤条  设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。

针对该情况，将简单的步骤条修改为简洁风格步骤条呈现

 <el-steps 
   :active="orderActive"  
   v-if="progresses.length > 0"  
   class="el-steps-sn reset-steps">
     <el-step 
       :title="item.title" 
       :description="item.date" 
       icon="el-icon-info"  
       v-for="(item,index) in progresses" 
       :key="index">
     </el-step>
 </el-steps>

.el-step.is-simple .el-step__title:hover {
  cursor: pointer;
}

.el-step.is-simple .el-step__title {
  font-size: 14px;
  margin-top: 5px;
  max-width: 100px !important;
  margin-left: 20px;
}

.el-steps--simple {
  background: transparent;
  padding: 30px 30px 35px;
}

.el-step.is-simple {
  display: block;
}

.el-step.is-simple .el-step__arrow {
  margin-top: -18px;
}

.el-step.is-simple .el-step__icon,
.el-step__main .el-step__title {
  width: 140px;
  text-align: center;
}
.el-step__title.is-finish {
  color: #5390e1;
  font-weight: 700;
}

.el-step__head.is-finish {
  color: #5390e1;
  border-color: #5390e1;
}
.el-step__line-inner {
  border-style: none;
}

.el-step__line {
  left: 9px !important;
}
.el-step__title.is-process,
.is-process .el-step__icon-inner.el-icon-info {
  color: #4255a2;
  //font-weight:normal;
}

.el-step__title.is-finish,
.is-finish .el-step__icon-inner.el-icon-info {
  color: #28bc79;
}

.el-step.is-simple:not(:last-of-type) .el-step__title {
  max-width: none;
}
.el-step__title {
  font-size: 12px;
  text-align: center !important;
}

.el-step__icon {
  width: 20px;
  height: 20px;
}

.el-steps--simple.el-steps-sn {
   padding: 0 !important;
}
.reset-steps {
  .el-step__head{
    width:140px;
  }
  .el-step__line {
    background-color: transparent;
    position: absolute;
    top: 10px;
    right:-14px !important;
    left: auto !important;
    .el-step__line-inner {
      &:before, &:after {
        content: '';
        display: inline-block;
        position: absolute;
        height: 15px;
        width: 1px;
        background: #c0c4cc;
      }
      &:before {
        -webkit-transform: rotate(-45deg) translateY(-4px);
        transform: rotate(-45deg) translateY(-4px);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
      }
      &:after {
        -webkit-transform: rotate(45deg) translateY(4px);
        transform: rotate(45deg) translateY(4px);
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
      }
    }
  }
  .el-step__main {
    .el-step__description.is-process,
    .el-step__description.is-finish,
    .el-step__description.is-wait {
      text-indent: 15px;
    }
  }
  .el-step__icon{background-color:transparent}
}

效果如下图：