.cl-timeline { &-item { display: flex; width: 100%; position: relative; &__timestamp { font-size: 24rpx; margin: 0 20rpx; text-align: center; } &__date { display: block; font-size: 24rpx; text-align: right; } &__time { display: block; font-size: 22rpx; text-align: right; color: #666; } &__node { display: flex; justify-content: center; position: relative; width: 52rpx; color: #ccc; &::after { content: ""; display: block; height: calc(100% - 32rpx); width: 4rpx; background-image: linear-gradient( to bottom, currentColor 0%, currentColor 80%, transparent 50% ); background-size: 4rpx 18rpx; background-repeat: y-repeat; transform: scaleX(1); position: absolute; top: 32rpx; border-radius: 10rpx; } &-box { display: flex; justify-content: center; align-items: center; height: 32rpx; width: 32rpx; } } &__dot { display: block; height: 16rpx; width: 16rpx; z-index: 9; border-radius: 18rpx; } &__icon { font-size: 40rpx; z-index: 2; position: relative; } &__content { font-size: 24rpx; flex: 1; margin: 0 20rpx; position: relative; padding-bottom: 60rpx; } &.is-line { .cl-timeline-item__node::after { display: none; } } } }