/* 使用弹性居中布局让所有分部居中水平排列 */
 .steps {
     position: relative;
    padding: 20px;
    display: flex;
    justify-content: center;
    top: 47px;
}

/* 进度线宽，3份，33% */
.step {
    width: 33%;
    height: 20px;
}

/* 进度线和序号，使用弹性居中布局让序号和进度线居中 */
.step-progress {
    display: flex;
    justify-content: center;
}

/* 文本居中 */
.step-text {
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

/* 进度线 */
.step-line {
    width: 100%;
    height: 5px;
    margin-top: 9px;
    background-color: #cccccc;
}

/* 数字序号 */
.step-num {
    width: 18px;
    height: 18px;
    line-height: 17px;
    /* 圆角背景 */
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    /* 序号居中显示 */
    text-align: center;
    background-color: #cccccc;
    border: 2px solid #cccccc;
    /* 使用相对于父元素定位，强行回到原来的位置 */
    position: absolute;
}

/* 使用渐变背景处理两边 */
.step-progress.right div{
    background: linear-gradient(to right, #cccccc 0%, #cccccc 50%, transparent 51%, transparent 100%);
}

.step-progress.left div{
    background: linear-gradient(to left, #cccccc 0%, #cccccc 50%, transparent 51%, transparent 100%);
}

/* 完成效果 */
.step-progress.done div{
    background: #81CB54;
}
.step-progress.done span{
    background-color: #81CB54;
    border: 2px solid #81CB54;
}

/* 完成效果左右两边特制 */
.step-progress.right.done div{
    background: linear-gradient(to right, #81CB54 0%, #81CB54 50%, transparent 51%, transparent 100%);
}

.step-progress.left.done div{
    background: linear-gradient(to left, #81CB54 0%, #81CB54 50%, transparent 51%, transparent 100%);
}