Home Explore Help
Register Sign In
zhuliu
/
xiaoshi-wx
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 4a6e7cc1fb
Branches Tags
xiaoshi-wx
/
node_modules
/
wux-weapp
/
example
/
dist
/
timeline-item
/
index.wxss

index.wxss 2.0 KB
History Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 
  1. .wux-timeline-item {
    2. 

  2.   position: relative;
    3. 

  3.   padding: 0 0 24rpx;
    4. 

  4.   margin: 0;
    5. 

  5.   font-size: 28rpx;
    6. 

  6.   box-sizing: border-box
    7. 

  7. }
    8. 

  8. .wux-timeline-item__tail {
    9. 

  9.   height: 100%;
    10. 

  10.   border-left: 4rpx solid #e8e8e8;
    11. 

  11.   position: absolute;
    12. 

  12.   left: 10rpx;
    13. 

  13.   top: 0;
    14. 

  14.   box-sizing: border-box
    15. 

  15. }
    16. 

  16. .wux-timeline-item__dot {
    17. 

  17.   width: 24rpx;
    18. 

  18.   height: 24rpx;
    19. 

  19.   background-color: #fff;
    20. 

  20.   border-radius: 50%;
    21. 

  21.   border: 4rpx solid #387ef5;
    22. 

  22.   position: absolute;
    23. 

  23.   color: #387ef5;
    24. 

  24.   box-sizing: border-box
    25. 

  25. }
    26. 

  26. .wux-timeline-item__dot--custom {
    27. 

  27.   margin-left: 2rpx!important;
    28. 

  28.   left: 10rpx;
    29. 

  29.   top: 16rpx;
    30. 

  30.   border: 0;
    31. 

  31.   border-radius: 0;
    32. 

  32.   width: auto;
    33. 

  33.   height: auto;
    34. 

  34.   background-color: transparent;
    35. 

  35.   text-align: center;
    36. 

  36.   transform: translate(-50%,-50%)
    37. 

  37. }
    38. 

  38. .wux-timeline-item__content {
    39. 

  39.   padding: 0 0 20rpx 40rpx;
    40. 

  40.   position: relative;
    41. 

  41.   top: -10rpx;
    42. 

  42.   width: 100%;
    43. 

  43.   box-sizing: border-box
    44. 

  44. }
    45. 

  45. .wux-timeline-item--last .wux-timeline-item__tail,
    46. 

  46. .wux-timeline-item--pending .wux-timeline-item__tail--pending {
    47. 

  47.   display: none
    48. 

  48. }
    49. 

  49. .wux-timeline-item--last.wux-timeline-item--pending .wux-timeline-item__tail {
    50. 

  50.   display: block;
    51. 

  51.   border-left-style: dotted
    52. 

  52. }
    53. 

  53. .wux-timeline-item--right .wux-timeline-item__tail {
    54. 

  54.   left: 100%
    55. 

  55. }
    56. 

  56. .wux-timeline-item--right .wux-timeline-item__dot {
    57. 

  57.   left: 100%;
    58. 

  58.   margin-left: -10rpx
    59. 

  59. }
    60. 

  60. .wux-timeline-item--right .wux-timeline-item__content {
    61. 

  61.   text-align: right;
    62. 

  62.   right: 0;
    63. 

  63.   left: -40rpx
    64. 

  64. }
    65. 

  65. .wux-timeline-item--alternate.wux-timeline-item--left .wux-timeline-item__tail,
    66. 

  66. .wux-timeline-item--alternate.wux-timeline-item--right .wux-timeline-item__tail {
    67. 

  67.   left: 50%
    68. 

  68. }
    69. 

  69. .wux-timeline-item--alternate.wux-timeline-item--left .wux-timeline-item__dot,
    70. 

  70. .wux-timeline-item--alternate.wux-timeline-item--right .wux-timeline-item__dot {
    71. 

  71.   left: 50%;
    72. 

  72.   margin-left: -10rpx
    73. 

  73. }
    74. 

  74. .wux-timeline-item--alternate.wux-timeline-item--right .wux-timeline-item__content {
    75. 

  75.   text-align: right;
    76. 

  76.   right: 50%;
    77. 

  77.   width: 50%
    78. 

  78. }
    79. 

  79. .wux-timeline-item--alternate.wux-timeline-item--left .wux-timeline-item__content {
    80. 

  80.   text-align: left;
    81. 

  81.   left: 50%;
    82. 

  82.   width: 50%
    83. 

  83. }
    84.