微信小程序时间轴
1.wxml
<view class="flow-item">
<view class="timeline-circle2"></view>
<view class="timeline-item2">
<view class="timeline-name">标题文案</view>
<view class="timeline-content">内容文案文案文案文案</view>
<view class="timeline-blank"></view>
</view>
<view class="timeline-circle"></view>
<view class="timeline-item">
<view class="timeline-name">标题文案</view>
<view class="timeline-content">内容文案文案文案文案</view>
<view class="timeline-blank"></view>
</view>
<!-- 固定底部样式 -->
<view class="timeline-circle"></view>
</view>
2.wxss
.flow-item {
background: #FFFFFF;
margin-top: 22rpx;
width: 100%;
padding: 40rpx 60rpx;
box-sizing: border-box;
}
.timeline-item {
margin-left: 18rpx;
border-left: 2px solid #E5E5E5;
/* height: 110rpx; */
width: 100%;
display: flex;
flex-direction: column;
padding-left: 56rpx;
box-sizing: border-box;
}
.timeline-item2 {
margin-left: 18rpx;
border-left: 2px solid #1677FF;
/* height: 110rpx; */
width: 100%;
display: flex;
flex-direction: column;
padding-left: 56rpx;
box-sizing: border-box;
}
.timeline-circle {
margin-left: 8rpx;
border: 2px solid #000;
border-radius: 50%;
width: 16rpx;
height: 16rpx;
border-color: #E5E5E5;
background: #E5E5E5;
}
.timeline-circle2 {
border: 1px solid #000;
border-radius: 50%;
width: 36rpx;
height: 36rpx;
border-color: #1677FF;
background: #1677FF;
}
.timeline-name {
width: 100%;
height: 48rpx;
font-size: 34rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 48rpx;
}
.timeline-content {
margin-top: 4rpx;
width: 100%;
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 42rpx;
}
.timeline-blank{
height: 80rpx;
width: 100%;
}