timeline.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. .cl-timeline {
  2. &-item {
  3. display: flex;
  4. width: 100%;
  5. position: relative;
  6. &__timestamp {
  7. font-size: 24rpx;
  8. margin: 0 20rpx;
  9. text-align: center;
  10. }
  11. &__date {
  12. display: block;
  13. font-size: 24rpx;
  14. text-align: right;
  15. }
  16. &__time {
  17. display: block;
  18. font-size: 22rpx;
  19. text-align: right;
  20. color: #666;
  21. }
  22. &__node {
  23. display: flex;
  24. justify-content: center;
  25. position: relative;
  26. width: 52rpx;
  27. &::after {
  28. content: "";
  29. display: block;
  30. height: calc(100% - 32rpx);
  31. width: 2px;
  32. background-color: #f2f2f2;
  33. transform: scaleX(1);
  34. position: absolute;
  35. top: 32rpx;
  36. border-radius: 10rpx;
  37. }
  38. &-box {
  39. display: flex;
  40. justify-content: center;
  41. align-items: center;
  42. height: 32rpx;
  43. width: 32rpx;
  44. }
  45. }
  46. &__dot {
  47. display: block;
  48. height: 16rpx;
  49. width: 16rpx;
  50. z-index: 9;
  51. border-radius: 18rpx;
  52. }
  53. &__icon {
  54. font-size: 40rpx;
  55. z-index: 2;
  56. position: relative;
  57. }
  58. &__content {
  59. font-size: 24rpx;
  60. flex: 1;
  61. margin: 0 20rpx;
  62. position: relative;
  63. padding-bottom: 60rpx;
  64. }
  65. &.show-line {
  66. .cl-timeline-item__node::after {
  67. display: none;
  68. }
  69. }
  70. }
  71. }