123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- .steps-index {
- display: block;
- height: initial;
- }
- @import "../common/index.acss";
- .steps-index .van-steps {
- overflow: hidden;
- background-color: #fff;
- background-color: var(--steps-background-color, #fff);
- }
- .steps-index .van-steps--horizontal {
- padding: 10px;
- }
- .steps-index .van-steps--horizontal .van-step__wrapper {
- position: relative;
- display: -webkit-flex;
- display: flex;
- overflow: hidden;
- }
- .steps-index .van-steps--vertical {
- padding-left: 10px;
- }
- .steps-index .van-steps--vertical .van-step__wrapper {
- padding: 0 0 0 20px;
- }
- .steps-index .van-step {
- position: relative;
- -webkit-flex: 1;
- flex: 1;
- font-size: 14px;
- font-size: var(--step-font-size, 14px);
- color: #969799;
- color: var(--step-text-color, #969799);
- }
- .steps-index .van-step--finish {
- color: #323233;
- color: var(--step-finish-text-color, #323233);
- }
- .steps-index .van-step__circle {
- border-radius: 50%;
- width: 5px;
- width: var(--step-circle-size, 5px);
- height: 5px;
- height: var(--step-circle-size, 5px);
- background-color: #969799;
- background-color: var(--step-circle-color, #969799);
- }
- .steps-index .van-step--horizontal {
- padding-bottom: 14px;
- }
- .steps-index .van-step--horizontal:first-child .van-step__title {
- -webkit-transform: none;
- transform: none;
- }
- .steps-index .van-step--horizontal:first-child .van-step__circle-container {
- padding: 0 8px 0 0;
- -webkit-transform: translate3d(0, 50%, 0);
- transform: translate3d(0, 50%, 0);
- }
- .steps-index .van-step--horizontal:last-child {
- position: absolute;
- right: 0;
- width: auto;
- }
- .steps-index .van-step--horizontal:last-child .van-step__title {
- text-align: right;
- -webkit-transform: none;
- transform: none;
- }
- .steps-index .van-step--horizontal:last-child .van-step__circle-container {
- right: 0;
- padding: 0 0 0 8px;
- -webkit-transform: translate3d(0, 50%, 0);
- transform: translate3d(0, 50%, 0);
- }
- .steps-index .van-step--horizontal .van-step__circle-container {
- position: absolute;
- bottom: 6px;
- z-index: 1;
- -webkit-transform: translate3d(-50%, 50%, 0);
- transform: translate3d(-50%, 50%, 0);
- background-color: #fff;
- background-color: var(--white, #fff);
- padding: 0 8px;
- padding: 0 var(--padding-xs, 8px);
- }
- .steps-index .van-step--horizontal .van-step__title {
- display: inline-block;
- -webkit-transform: translate3d(-50%, 0, 0);
- transform: translate3d(-50%, 0, 0);
- font-size: 12px;
- font-size: var(--step-horizontal-title-font-size, 12px);
- }
- .steps-index .van-step--horizontal .van-step__line {
- position: absolute;
- right: 0;
- bottom: 6px;
- left: 0;
- height: 1px;
- -webkit-transform: translate3d(0, 50%, 0);
- transform: translate3d(0, 50%, 0);
- background-color: #ebedf0;
- background-color: var(--step-line-color, #ebedf0);
- }
- .steps-index .van-step--horizontal.van-step--process {
- color: #323233;
- color: var(--step-process-text-color, #323233);
- }
- .steps-index .van-step--horizontal.van-step--process .van-step__icon {
- display: block;
- line-height: 1;
- font-size: 12px;
- font-size: var(--step-icon-size, 12px);
- }
- .steps-index .van-step--vertical {
- padding: 10px 10px 10px 0;
- line-height: 18px;
- }
- .steps-index .van-step--vertical:after {
- border-bottom-width: 1px;
- }
- .steps-index .van-step--vertical:last-child:after {
- border-bottom-width: none;
- }
- .steps-index .van-step--vertical:first-child:before {
- position: absolute;
- top: 0;
- left: -15px;
- z-index: 1;
- width: 1px;
- height: 20px;
- content: "";
- background-color: #fff;
- background-color: var(--white, #fff);
- }
- .steps-index .van-step--vertical .van-step__circle,
- .steps-index .van-step--vertical .van-step__icon,
- .steps-index .van-step--vertical .van-step__line {
- position: absolute;
- top: 19px;
- left: -14px;
- z-index: 2;
- -webkit-transform: translate3d(-50%, -50%, 0);
- transform: translate3d(-50%, -50%, 0);
- }
- .steps-index .van-step--vertical .van-step__icon {
- line-height: 1;
- font-size: 12px;
- font-size: var(--step-icon-size, 12px);
- }
- .steps-index .van-step--vertical .van-step__line {
- z-index: 1;
- width: 1px;
- height: 100%;
- -webkit-transform: translate3d(-50%, 0, 0);
- transform: translate3d(-50%, 0, 0);
- background-color: #ebedf0;
- background-color: var(--step-line-color, #ebedf0);
- }
|