vstep.wxss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. .zan-steps--vsteps {
  2. color: #999;
  3. font-size: 14px;
  4. }
  5. .zan-steps--vsteps .zan-steps__step {
  6. position: relative;
  7. padding: 15px 0;
  8. }
  9. .zan-steps--vsteps .zan-steps__step--done {
  10. color: #44BB00;
  11. }
  12. .zan-steps--vsteps .zan-steps__line {
  13. position: absolute;
  14. top: 0;
  15. bottom: 0;
  16. left: 7px;
  17. width: 1px;
  18. background-color: #e5e5e5;
  19. }
  20. .zan-steps--vsteps .zan-steps__title {
  21. display: inline-block;
  22. line-height: 20px;
  23. padding-left: 27px;
  24. }
  25. .zan-steps--vsteps .zan-steps__title--desc {
  26. padding-left: 3px;
  27. }
  28. .zan-steps--vsteps .zan-steps__icons {
  29. position: absolute;
  30. left: 7px;
  31. top: 50%;
  32. transform: translate(-50%, -50%);
  33. z-index: 2;
  34. padding: 3px 0;
  35. background-color: #fff;
  36. }
  37. .zan-steps--vsteps .zan-steps__circle {
  38. width: 5px;
  39. height: 5px;
  40. background-color: #cacaca;
  41. border-radius: 10px;
  42. }
  43. .zan-steps--vsteps .zan-steps__step--done .zan-steps__circle {
  44. width: 5px;
  45. height: 5px;
  46. background-color: #09bb07;
  47. }
  48. .zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle {
  49. width: 13px;
  50. height: 13px;
  51. background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
  52. background-size: 13px 13px;
  53. border-radius:0;
  54. }
  55. .zan-steps--vsteps .zan-steps__icon--active {
  56. width: 13px;
  57. height: 13px;
  58. }
  59. .zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before {
  60. content: '';
  61. position: absolute;
  62. top: 0;
  63. bottom: 50%;
  64. left: 7px;
  65. width: 1px;
  66. background-color: #fff;
  67. z-index: 1;
  68. }
  69. .zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after {
  70. content: '';
  71. position: absolute;
  72. top: 50%;
  73. bottom: 0%;
  74. left: 7px;
  75. width: 1px;
  76. background-color: #fff;
  77. z-index: 1;
  78. }