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

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


效果:


c 复制代码
<el-steps :active="active" finish-status="success" class="steps">
  <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>

css:

c 复制代码
.steps {
      // margin-top: 20px;

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

        .el-step__icon.is-text {
          border: none; //不显示圆圈
          position: absolute;
          top: -2px;
          left: -2px;
          width: 26px;
          height: 26px;
          background: #2b7bf0;
          // background-color: #000;
          background-image: url('~@/assets/images/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-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-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

相关推荐
hj5914_前端新手3 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法3 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku3 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode3 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu3 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu3 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu3 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu3 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu3 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在3 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net