vue elementui 修改步骤条el-steps的样式

03-20 4573阅读 0评论

感觉以后可能还会用到，在此记录一下

场景：

elementui原有的样式：

目标样式：

实现：

html代码：

多加了个居中属性：align-center

css代码：

@publicColor: #018736;
@publicHeight: 35px;
    .steps {
      width: 80%;
      margin: 20px auto 0;
      height: @publicHeight;
      ::v-deep .el-step{
        height: 100%;
        .el-step__line{
          background-color: rgba(0,0,0,0.15);
          margin-right: 30px !important;
          margin-left: 105px !important;
          top: 50%;
          height: 1px;
        }
        .el-step__icon{
          width: @publicHeight;
          height: @publicHeight;
          font-size: 16px;
          border: 1px solid;
          .el-step__icon-inner{
            font-weight: unset !important;
          }
        }
        .el-step__head.is-process{
          color: @publicColor;
          border-color: @publicColor;
        }
        .el-step__head.is-success{
          color: @publicColor;
          border-color: @publicColor;
        }
        .is-process .el-step__icon.is-text{
          background: @publicColor;
          color: #fff;
        }
        .el-step__title.is-process{
          color: @publicColor;
        }
        .el-step__title.is-success{
          color: #565656;
        }
        .el-step__title{
          position: absolute;
          top: calc((100% - @publicHeight)/2);
          left: calc(50% + 25px);
        }
      }
    }

ok啦，如果有更优的方法，再优化

相关阅读：

1、Python爱心代码

2、电子模块|心率血氧传感器模块MAX30102及其驱动代码

3、VISUAL STUDIO安装包闪退不进行的解决方法分享（错误代码0x0、0x1389）visual studio intaller

4、利用微软Bing AI语言大模型辅助提高写代码、阅读代码、解bug的效率

5、C# - 反射获取字段/属性/方法

免责声明

1、本网站属于个人的非赢利性网站，转载的文章遵循原作者的版权声明。
2、本网站转载文章仅为传播更多信息之目的，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所
提供信息的准确性及可靠性，但不保证信息的正确性和完整性，且不对因信息的不正确或遗漏导致的任何
损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务，本网站概不负责，亦不负任何法律责任。
4、本网站所刊发、转载的文章，其版权均归原作者所有，如其他媒体、网站或个人从本网下载使用，请在
转载有关文章时务必尊重该文章的著作权，保留本网注明的“稿件来源”，并白负版权等法律责任。

手机扫描二维码访问