(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

相关推荐
sunbyte2 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊3 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君5 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED6 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程6 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常6 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程