90 lines
1.3 KiB
SCSS
90 lines
1.3 KiB
SCSS
|
.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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|