123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- .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;
- }
|