index.acss 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. .steps-index {
  2. display: block;
  3. height: initial;
  4. }
  5. @import "../common/index.acss";
  6. .steps-index .van-steps {
  7. overflow: hidden;
  8. background-color: #fff;
  9. background-color: var(--steps-background-color, #fff);
  10. }
  11. .steps-index .van-steps--horizontal {
  12. padding: 10px;
  13. }
  14. .steps-index .van-steps--horizontal .van-step__wrapper {
  15. position: relative;
  16. display: -webkit-flex;
  17. display: flex;
  18. overflow: hidden;
  19. }
  20. .steps-index .van-steps--vertical {
  21. padding-left: 10px;
  22. }
  23. .steps-index .van-steps--vertical .van-step__wrapper {
  24. padding: 0 0 0 20px;
  25. }
  26. .steps-index .van-step {
  27. position: relative;
  28. -webkit-flex: 1;
  29. flex: 1;
  30. font-size: 14px;
  31. font-size: var(--step-font-size, 14px);
  32. color: #969799;
  33. color: var(--step-text-color, #969799);
  34. }
  35. .steps-index .van-step--finish {
  36. color: #323233;
  37. color: var(--step-finish-text-color, #323233);
  38. }
  39. .steps-index .van-step__circle {
  40. border-radius: 50%;
  41. width: 5px;
  42. width: var(--step-circle-size, 5px);
  43. height: 5px;
  44. height: var(--step-circle-size, 5px);
  45. background-color: #969799;
  46. background-color: var(--step-circle-color, #969799);
  47. }
  48. .steps-index .van-step--horizontal {
  49. padding-bottom: 14px;
  50. }
  51. .steps-index .van-step--horizontal:first-child .van-step__title {
  52. -webkit-transform: none;
  53. transform: none;
  54. }
  55. .steps-index .van-step--horizontal:first-child .van-step__circle-container {
  56. padding: 0 8px 0 0;
  57. -webkit-transform: translate3d(0, 50%, 0);
  58. transform: translate3d(0, 50%, 0);
  59. }
  60. .steps-index .van-step--horizontal:last-child {
  61. position: absolute;
  62. right: 0;
  63. width: auto;
  64. }
  65. .steps-index .van-step--horizontal:last-child .van-step__title {
  66. text-align: right;
  67. -webkit-transform: none;
  68. transform: none;
  69. }
  70. .steps-index .van-step--horizontal:last-child .van-step__circle-container {
  71. right: 0;
  72. padding: 0 0 0 8px;
  73. -webkit-transform: translate3d(0, 50%, 0);
  74. transform: translate3d(0, 50%, 0);
  75. }
  76. .steps-index .van-step--horizontal .van-step__circle-container {
  77. position: absolute;
  78. bottom: 6px;
  79. z-index: 1;
  80. -webkit-transform: translate3d(-50%, 50%, 0);
  81. transform: translate3d(-50%, 50%, 0);
  82. background-color: #fff;
  83. background-color: var(--white, #fff);
  84. padding: 0 8px;
  85. padding: 0 var(--padding-xs, 8px);
  86. }
  87. .steps-index .van-step--horizontal .van-step__title {
  88. display: inline-block;
  89. -webkit-transform: translate3d(-50%, 0, 0);
  90. transform: translate3d(-50%, 0, 0);
  91. font-size: 12px;
  92. font-size: var(--step-horizontal-title-font-size, 12px);
  93. }
  94. .steps-index .van-step--horizontal .van-step__line {
  95. position: absolute;
  96. right: 0;
  97. bottom: 6px;
  98. left: 0;
  99. height: 1px;
  100. -webkit-transform: translate3d(0, 50%, 0);
  101. transform: translate3d(0, 50%, 0);
  102. background-color: #ebedf0;
  103. background-color: var(--step-line-color, #ebedf0);
  104. }
  105. .steps-index .van-step--horizontal.van-step--process {
  106. color: #323233;
  107. color: var(--step-process-text-color, #323233);
  108. }
  109. .steps-index .van-step--horizontal.van-step--process .van-step__icon {
  110. display: block;
  111. line-height: 1;
  112. font-size: 12px;
  113. font-size: var(--step-icon-size, 12px);
  114. }
  115. .steps-index .van-step--vertical {
  116. padding: 10px 10px 10px 0;
  117. line-height: 18px;
  118. }
  119. .steps-index .van-step--vertical:after {
  120. border-bottom-width: 1px;
  121. }
  122. .steps-index .van-step--vertical:last-child:after {
  123. border-bottom-width: none;
  124. }
  125. .steps-index .van-step--vertical:first-child:before {
  126. position: absolute;
  127. top: 0;
  128. left: -15px;
  129. z-index: 1;
  130. width: 1px;
  131. height: 20px;
  132. content: "";
  133. background-color: #fff;
  134. background-color: var(--white, #fff);
  135. }
  136. .steps-index .van-step--vertical .van-step__circle,
  137. .steps-index .van-step--vertical .van-step__icon,
  138. .steps-index .van-step--vertical .van-step__line {
  139. position: absolute;
  140. top: 19px;
  141. left: -14px;
  142. z-index: 2;
  143. -webkit-transform: translate3d(-50%, -50%, 0);
  144. transform: translate3d(-50%, -50%, 0);
  145. }
  146. .steps-index .van-step--vertical .van-step__icon {
  147. line-height: 1;
  148. font-size: 12px;
  149. font-size: var(--step-icon-size, 12px);
  150. }
  151. .steps-index .van-step--vertical .van-step__line {
  152. z-index: 1;
  153. width: 1px;
  154. height: 100%;
  155. -webkit-transform: translate3d(-50%, 0, 0);
  156. transform: translate3d(-50%, 0, 0);
  157. background-color: #ebedf0;
  158. background-color: var(--step-line-color, #ebedf0);
  159. }