微信小程序简易时间轴样式

###html代码

       
            
                
                    
                    
                        
                             {{item.remark}}
                            {{item.created_at}}
                        
                    
                
            
        

##css代码

   .item-two{
    position: relative;
    width: 100%;
    min-height: 400rpx;
    box-sizing: border-box;
    padding: 0 32rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    padding-top: 26rpx;
    padding-bottom: 50rpx;
    font-size: 24rpx;
    margin-top: 60rpx;
}


.item-two .timeline:last-child .timeline-content{
    border: none !important;
}


.timeline{
    background: #fff;
    width: 100%;

}
.circle{
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    display: flex;
    background-color: rgba(51,186,99,1);
}

.timeline-content{
    position: relative;
    /* width: 100px; */
    margin-left: 7px;
    border-left: 1px solid rgba(51,186,99,1);
    min-height: 80px;
}

.ss{
    transform: translate(0,-50%);
    min-height: 50rpx;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}


.ss .remark{
    width:100%;
    padding-left: 55rpx;
    font-size:24rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(127,127,127,1);
}

.ss .created-at{
    width:100%;
    padding-left: 55rpx;
    height:33rpx;
    font-size:24rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(127,127,127,1);
    line-height:33rpx;
    margin-top: 5rpx;
}

###示例图: