基于VUE纯css编写步骤条

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

基于VUE纯css编写步骤条，供大家一起交流学习。先上图

步骤是根据 active显示的，上代码：

/* 进度条 / / 创建步骤数字计数器样式 */

.steps {
position: relative;
counter-reset: step;
margin: .05rem 0;
overflow: hidden;
margin-left: -.46rem;
padding-top: .3rem;
}

js

/* 步骤描述 */
.steps li {
    list-style-type: none;
    font-size: .14rem;
    text-align: center;
    width: 20%;
    position: relative;
    float: left;
    color: #29CAFE;
    /*height:80px;*/
    /*line-height :40px;*/
    padding: .1rem 0;

    & > div {
        font-size: .14rem;
        color: #fff;
        span{
            background: #20568B;
            padding: .07rem;
        }

    }
    & > div:nth-child(2){
        color: #29CAFE;
        margin-top: .1rem;
    }
}

/* 步骤数字 */
.steps li:before {
    display: block;
    content: counter(step); /* 设定计数器内容 */
    counter-increment: step; /* 计数器值递增 */
    width: .1rem;
    height: .1rem;
    background-color: #487CB7;
    line-height: .1rem;
    border-radius: .1rem;
    font-size: 0;
    color: #fff;
    text-align: center;
    font-weight: 600;
    margin: 0 auto .1rem auto;
}

/* 连接线 */
.steps li ~ li:after {
    content: '';
    width: 100%;
    height: .03rem;
    background-color: #487CB7;
    position: absolute;
    left: -48.6%;
    top: .14rem;
    z-index: 0;
}

/* 将当前/完成步骤之前的数字及连接线变绿 */
.steps li.active:before, .steps li.active:after {
    background-color:#30FFF8;
}