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

场景:

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啦,如果有更优的方法,再优化