index.wxss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. .wux-timeline-item {
  2. position: relative;
  3. padding: 0 0 24rpx;
  4. margin: 0;
  5. font-size: 28rpx;
  6. box-sizing: border-box
  7. }
  8. .wux-timeline-item__tail {
  9. height: 100%;
  10. border-left: 4rpx solid #e8e8e8;
  11. position: absolute;
  12. left: 10rpx;
  13. top: 0;
  14. box-sizing: border-box
  15. }
  16. .wux-timeline-item__dot {
  17. width: 24rpx;
  18. height: 24rpx;
  19. background-color: #fff;
  20. border-radius: 50%;
  21. border: 4rpx solid #387ef5;
  22. position: absolute;
  23. color: #387ef5;
  24. box-sizing: border-box
  25. }
  26. .wux-timeline-item__dot--custom {
  27. margin-left: 2rpx!important;
  28. left: 10rpx;
  29. top: 16rpx;
  30. border: 0;
  31. border-radius: 0;
  32. width: auto;
  33. height: auto;
  34. background-color: transparent;
  35. text-align: center;
  36. transform: translate(-50%,-50%)
  37. }
  38. .wux-timeline-item__content {
  39. padding: 0 0 20rpx 40rpx;
  40. position: relative;
  41. top: -10rpx;
  42. width: 100%;
  43. box-sizing: border-box
  44. }
  45. .wux-timeline-item--last .wux-timeline-item__tail,
  46. .wux-timeline-item--pending .wux-timeline-item__tail--pending {
  47. display: none
  48. }
  49. .wux-timeline-item--last.wux-timeline-item--pending .wux-timeline-item__tail {
  50. display: block;
  51. border-left-style: dotted
  52. }
  53. .wux-timeline-item--right .wux-timeline-item__tail {
  54. left: 100%
  55. }
  56. .wux-timeline-item--right .wux-timeline-item__dot {
  57. left: 100%;
  58. margin-left: -10rpx
  59. }
  60. .wux-timeline-item--right .wux-timeline-item__content {
  61. text-align: right;
  62. right: 0;
  63. left: -40rpx
  64. }
  65. .wux-timeline-item--alternate.wux-timeline-item--left .wux-timeline-item__tail,
  66. .wux-timeline-item--alternate.wux-timeline-item--right .wux-timeline-item__tail {
  67. left: 50%
  68. }
  69. .wux-timeline-item--alternate.wux-timeline-item--left .wux-timeline-item__dot,
  70. .wux-timeline-item--alternate.wux-timeline-item--right .wux-timeline-item__dot {
  71. left: 50%;
  72. margin-left: -10rpx
  73. }
  74. .wux-timeline-item--alternate.wux-timeline-item--right .wux-timeline-item__content {
  75. text-align: right;
  76. right: 50%;
  77. width: 50%
  78. }
  79. .wux-timeline-item--alternate.wux-timeline-item--left .wux-timeline-item__content {
  80. text-align: left;
  81. left: 50%;
  82. width: 50%
  83. }