【UI】el-step的进度条颜色设置

参考了element-ui修改el-steps默认样式_sinat_42888557的博客-CSDN博客

// 已完成finish

/deep/

  .el-steps.el-steps--horizontal

  .el-step.is-horizontal.is-center

  .el-step__head.is-finish

  .el-step__icon {

  z-index: 1;

  color: #2b4b6b;

  border-color: #2b4b6b;

}

// 正在进行process

/deep/

  .el-steps.el-steps--horizontal

  .el-step.is-horizontal.is-center

  .el-step__head.is-process

  .el-step__icon {

  z-index: 1;

  color: chocolate;

  border-color: chocolate;

}

// 未完成

/deep/

  .el-steps.el-steps--horizontal

  .el-step.is-horizontal.is-center

  .el-step__head.is-wait

  .el-step__icon {

  z-index: 1;

  // color: #2b4b6b;

  // border-color: #2b4b6b;

}

// 进行中的文字颜色

/deep/

  .el-steps.el-steps--horizontal

  .el-step.is-horizontal.is-center

  .el-step__title.is-process {

  font-weight: 700;

  color: chocolate;

}

/* 完成finish title 颜色*/

/deep/

  .el-steps.el-steps--horizontal

  .el-step.is-horizontal.is-center

  .el-step__title.is-finish {

  color: #2b4b6b;

  font-weight: 700;

}

// /* is-process line连线粗细*/

// /deep/

//   .el-steps.el-steps--horizontal

//   .el-step.is-horizontal.is-center

//   .el-step__head.is-process

//   .el-step__line {

//   border-color: chocolate;

//   background-color: chocolate;

//   // margin-top: $el-step-icon-margin;

//   // border: $border-sizes solid;

// }

/* is-finish line连线粗细*/

/deep/

  .el-steps.el-steps--horizontal

  .el-step.is-horizontal.is-center

  .el-step__head.is-finish

  .el-step__line {

  position: absolute;

  border-color: #2b4b6b;

  background-color: #2b4b6b;

  // margin-top: $el-step-icon-margin;

  // border: $border-sizes solid;

}