感觉以后可能还会用到,在此记录一下
场景:
elementui原有的样式:
目标样式:
实现:
html代码:
多加了个居中属性:align-center
<el-steps :active="active" class="steps" align-center finish-status="success">
<el-step title="注册帐号"></el-step>
<el-step title="资料完善" @click.native="handleStep(1)"></el-step>
<el-step title="资料审核" @click.native="handleStep(2)"></el-step>
</el-steps>
css代码:
<style scoped>
@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);
}
}
}
</style>
ok啦,如果有更优的方法,再优化