steps.wxss 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. @charset "UTF-8";
  2. /* 需要放到文件最上面 */
  3. /* 水平间距 */
  4. /* 水平间距 */
  5. /*
  6. 以下变量是默认值,如不需要修改可以不用给下面的变量重新赋值
  7. */
  8. /* 水平间距 */
  9. .steps-lists {
  10. background: #fff;
  11. padding: 30rpx;
  12. }
  13. .steps-lists .steps-text {
  14. color: #08979c;
  15. margin: 0 2rpx;
  16. font-weight: 400;
  17. }
  18. .steps-lists .steps-item {
  19. position: relative;
  20. display: flex;
  21. }
  22. .steps-lists .steps-item .steps-state {
  23. width: 52rpx;
  24. height: 52rpx;
  25. background: #B9B9B9;
  26. border-radius: 50%;
  27. margin-right: 20rpx;
  28. margin-top: 16rpx;
  29. display: flex;
  30. align-items: center;
  31. justify-content: center;
  32. oversteps: hidden;
  33. color: #fff;
  34. }
  35. .steps-lists .steps-item .steps-content {
  36. flex: 1;
  37. width: 0;
  38. }
  39. .steps-lists .steps-item .steps-content .steps-name {
  40. height: 96rpx;
  41. display: flex;
  42. flex-direction: column;
  43. justify-content: center;
  44. }
  45. .steps-lists .steps-item .steps-content .steps-name .name {
  46. color: #B9B9B9;
  47. font-size: 32rpx;
  48. font-weight: 600;
  49. }
  50. .steps-lists .steps-item .steps-content .steps-name .date {
  51. font-size: 24rpx;
  52. color: #8c8c8c;
  53. display: flex;
  54. align-items: center;
  55. justify-content: space-between;
  56. }
  57. .steps-lists .steps-item .steps-content .steps-item-content {
  58. background-color: #ffffff;
  59. border-radius: 8px;
  60. box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
  61. padding: 10px;
  62. margin-bottom: 16rpx;
  63. position: relative;
  64. }
  65. .steps-lists .steps-item .steps-content .steps-item-content.last {
  66. margin-bottom: 0;
  67. }
  68. .steps-lists .steps-item .steps-content .steps-item-content .title {
  69. font-weight: 600;
  70. padding-bottom: 10rpx;
  71. }
  72. .steps-lists .steps-item .steps-content .steps-item-content .content {
  73. font-weight: 300;
  74. }
  75. .steps-lists .steps-item .steps-content .steps-item-content .right-icon {
  76. position: absolute;
  77. top: 50%;
  78. margin-top: -16rpx;
  79. right: 20rpx;
  80. }
  81. .steps-lists .steps-item .steps-line {
  82. width: 1px;
  83. border-left: 1px solid #B9B9B9;
  84. position: absolute;
  85. top: 68rpx;
  86. bottom: -16rpx;
  87. left: 26rpx;
  88. }
  89. .steps-lists .steps-item.success .steps-state {
  90. background: #389e0d;
  91. }
  92. .steps-lists .steps-item.success .steps-name .name {
  93. color: #389e0d;
  94. }
  95. .steps-lists .steps-item.success .steps-line {
  96. border-color: #389e0d;
  97. }