.zan-steps--vsteps { color: #999; font-size: 14px; } .zan-steps--vsteps .zan-steps__step { position: relative; padding: 15px 0; } .zan-steps--vsteps .zan-steps__step--done { color: #44BB00; } .zan-steps--vsteps .zan-steps__line { position: absolute; top: 0; bottom: 0; left: 7px; width: 1px; background-color: #e5e5e5; } .zan-steps--vsteps .zan-steps__title { display: inline-block; line-height: 20px; padding-left: 27px; } .zan-steps--vsteps .zan-steps__title--desc { padding-left: 3px; } .zan-steps--vsteps .zan-steps__icons { position: absolute; left: 7px; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 3px 0; background-color: #fff; } .zan-steps--vsteps .zan-steps__circle { width: 5px; height: 5px; background-color: #cacaca; border-radius: 10px; } .zan-steps--vsteps .zan-steps__step--done .zan-steps__circle { width: 5px; height: 5px; background-color: #09bb07; } .zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle { width: 13px; height: 13px; background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png"); background-size: 13px 13px; border-radius:0; } .zan-steps--vsteps .zan-steps__icon--active { width: 13px; height: 13px; } .zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before { content: ''; position: absolute; top: 0; bottom: 50%; left: 7px; width: 1px; background-color: #fff; z-index: 1; } .zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after { content: ''; position: absolute; top: 50%; bottom: 0%; left: 7px; width: 1px; background-color: #fff; z-index: 1; }