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

默认样式：

 <template>
                <div>
                  <el-steps :active=values space="400px" align-center>
                    <el-step :title="item.title" :description="item.date" v-for="(item,index) in stepsData" :key="index">
                    </el-step>
                  </el-steps>
                </div>
          </div>
        </template>
        <script>
      export default {
        data() {
          return {
            stepsData: [
              {
                title: '启动',
                date: ''
              },
              {
                title: '发布',
                date: ''
              },
              {
                title: '洽谈',
                date: ''
              },
              {
                title: '规划',
                date: ''
              },
              {
                title: '签约',
                date: ''
              },
              {
                title: '落项',
                date: ''
              },
            ],
            values: 3
          }
        }
      }
    </script>

修改后样式：

代码只修改样式
代码如下：

    <style  scoped>
 /*---------步骤条样式---start------*/
$border-sizes: 3px;
$background_color: #C0C4CC;
$el-step-icon-height: 40px;
$el-step-icon-width: 40px;
$el-step-icon-font-size: 24px;
$el-step-icon-background: #FFF;
$el-step-icon-margin: 2.5%;
$is-finish-background: #EB6F67;
$el-step_title_is-process: #666666;
$el-step__description_is-finish: #999999;
/*---------步骤条样式---end------*/
  .text-color {
    color: white;
  }

  /*步骤条样式修改------------start----------*/
  /*is-finish 圆圈颜色*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish {
    color: $is-finish-background !important;
    border-color: $is-finish-background !important;
  }

  /*is-process 圆圈颜色*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process {
    color: $background_color;
    border-color: $background_color;
  }

  /*is-wait 圆圈颜色*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait {
    color: $background_color;
    border-color: $background_color;
  }

  /*is-finish title 颜色*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__title.is-finish {
    color: $el-step_title_is-process;
    font-weight: 700;
  }
   /*is-process  title 颜色*/
  .el-steps.el-steps--horizontal[data-v-9ebad220] .el-step.is-horizontal.is-center /deep/ .el-step__title.is-process {
    font-weight: 700;
    color:$el-step_title_is-process;
  }
  /*description 颜色*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__description.is-finish {
    color: $el-step__description_is-finish;
  }
  /*is-finish 进程结束，is-process 状态颜色非加粗*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__title.is-process {
    font-weight: 700;
    color: $el-step_title_is-process;
  }

  /* is-finish line连线粗细*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish /deep/ .el-step__line {
    position: absolute;
    border-color: inherit;
    background-color: $is-finish-background;
    margin-top: $el-step-icon-margin;
    border: $border-sizes solid;
  }

  /* is-process line连线粗细*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process /deep/ .el-step__line {
    border-color: inherit;
    background-color: $background_color;
    margin-top: $el-step-icon-margin;
    border: $border-sizes solid;
  }

  /* is-wait line连线粗细*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait /deep/ .el-step__line {
    border-color: inherit;
    background-color: $background_color;
    margin-top: $el-step-icon-margin;
    border: $border-sizes solid;
  }

  /* 已完成 圆圈大小修改*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish /deep/ .el-step__icon {
    z-index: 1;
    width: $el-step-icon-width;
    height: $el-step-icon-height;
    font-size: $el-step-icon-font-size;
    border: $border-sizes solid;
    background: $el-step-icon-background;
  }

  /* 过度点 圆圈大小修改*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process /deep/ .el-step__icon {
    z-index: 1;
    width: $el-step-icon-width;
    height: $el-step-icon-height;
    border: $border-sizes solid;
    font-size: $el-step-icon-font-size;
    background:$el-step-icon-background;
    color: $is-finish-background !important;
    border-color: $is-finish-background !important;
  }

  /* 未完成 圆圈大小修改*/
  .el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait /deep/ .el-step__icon {
    z-index: 1;
    width: $el-step-icon-width;
    height: $el-step-icon-height;
    font-size: $el-step-icon-font-size;
    border: $border-sizes solid;
    background:$el-step-icon-background;
  }

  /*步骤条样式修改------------end----------*/
</style>

---

能力不足水平有限
有问题别说脏话
来学习交流就好
有问必答
email:1848199654@qq.com

---