(css)步骤条el-steps区分等待、进行中、完成三种状态的图片且居中

(css)步骤条el-steps区分等待、进行中、完成三种状态的图片

---

效果：

---

<el-row type="flex" justify="center" align="middle">
	<el-col :span="20">
		<el-steps :active="active" finish-status="success" class="steps" :align-center="true">
		  <el-step title="选择.."></el-step>
		  <el-step title="..规则"></el-step>
		  <el-step title="..参数"></el-step>
		  <el-step title="输出结果"></el-step>
		  <el-step title="..化"></el-step>
		</el-steps>
	</el-col>
</el-row>

css:

.steps{
  ::v-deep .el-step__title.is-process {
    color: #fff;//编辑时标题颜色
  }
  //process状态自定义图片
  ::v-deep .el-step__head.is-process {
    height: 24px;

    .el-step__icon.is-text {
      border: none; //不显示圆圈
      width: 26px;
      height: 26px;
      background: #2b7bf0;
      background-image: url('~@/assets/images/online/online-edit.png');
      background-size: 100% 100%;
      // background: transparent;
    }

    .el-step__icon-inner {
      display: none;
    }
  }
  ::v-deep .el-step__icon-inner {
      display: none; //不显示内部数字
  }

  //success状态
  ::v-deep .el-step__title.is-success {
    // color: #000;//标题颜色
  }

  ::v-deep .el-step__head.is-success {
    // border-color: #2b7bf0;//圈边及连线颜色

    .el-step__icon.is-text {
      border: none;
      background: #2b7bf0;
      background-image: url('~@/assets/images/online/online-ok.png');
      background-size: 100% 100%;

    }
  }

  //wait状态
  ::v-deep .el-step__head.is-wait {
    // border-color: #95c1fc;

    .el-step__icon.is-text {
      border: none;
      background: #95c1fc;
      background-image: url('~@/assets/images/online/online-time.png');
      background-size: 100% 100%;

      .el-step__icon-inner {
        // color: #95c1fc;
      }

    }
  }
}

---

解决参考：https://blog.csdn.net/weixin_43410997/article/details/135654669

解决参考2：https://www.cnblogs.com/5201314m/p/12356017.html