(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

相关推荐
Mintopia4 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
前端小巷子7 分钟前
跨域问题解决方案:CORS(跨域资源共享)
前端·网络协议·面试
大大。8 分钟前
van-tabbar-item选中active数据变了,图标没变
java·服务器·前端
Mintopia10 分钟前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
nc_kai10 分钟前
Flutter 之 每日翻译 PreferredSizeWidget
java·前端·flutter
来碗疙瘩汤13 分钟前
使用 Three.js 与 CSS3DRenderer 在 Vue3 中加载网页为 3D 模型
前端·javascript
满分观察网友z14 分钟前
富文本解析终极指南:从Quill到小程序,我如何用正则摆平所有坑?
前端
打野赵怀真15 分钟前
在TypeScript中装饰器有哪些应用场景?
前端·javascript
destinying17 分钟前
vite学习笔记
前端·javascript
LRH18 分钟前
JS基础 - 手写数组扁平化函数
前端·javascript