element-plus/进度条样式替换_iapp进度条样式-CSDN博客

本文链接：https://blog.csdn.net/zhu_menglu/article/details/146168979

<el-steps :active="step" align-center>
                    <el-step :class="step > 1 ? 'isHave' : ''" title="考试信息" />
                    <el-step :class="step > 2 ? 'isHave' : ''" title="案例选择" />
                    <el-step :class="step > 3 ? 'isHave' : ''" title="预览确认" />
                </el-steps>

.stepDom {
            padding: 16px 0;
            :deep(.el-step__line) {
                top: 13px;
                height: 14px;
                background-color: #eeeeee;
                .el-step__line-inner {
                    height: 14px;
                    background-color: #b2e4fa;
                    border: 0;
                    position: relative;
                }
                .el-step__line-inner::before {
                    content: '';
                    position: absolute;
                    height: 6px;
                    background-color: #01a7f0;
                    top: 3.5px;
                    left: 0;
                    width: 100%;
                }
            }
            :deep(.el-step__icon) {
                width: 40px;
                height: 40px;
                border: 6px solid #eeeeee;
            }
            .isHave {
                :deep(.el-step__icon) {
                    border: 6px solid #b2e4fa;
                    background-color: #01a7f0;
                    position: relative;
                    &::before {
                        position: absolute;
                        content: '✔';
                        width: 100%;
                        text-align: center;
                        color: #ffffff;
                        font-size: 18px;
                    }
                }
            }
        }