小程序的时间轴（简约版）

时间轴

wxml

<view class="time-axis">
  <view class="ivestment-c">
    <view class="ivestment-i" wx:for="{{3}}" wx:key="index" wx:for-item="item" wx:for-index="index">
      <view class="invest-l">
        <view class="invest-b invest-line">
          <!-- <text decode="{{true}}" space="{{true}}">&nbsp;</text> -->
        </view>
        <view class="demo-flex-1 date">123123123</view>
      </view>
      <view class="invest-l">
        <view class="invest-b invest-line2">
          <!-- <text decode="{{true}}" space="{{true}}">&nbsp;</text> -->
        </view>
        <view class="demo-flex-1">
          <view wx:for="{{3}}" class="card-box">
            <view>123123</view>
            <view>456</view>
            <view>456</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

wxss

.time-axis{
  padding: 0 30rpx;
  box-sizing: border-box;
}
.ivestment-c{
  /* position: relative; */
  background-color: #fff;
  width: 100%;
  max-height: 500px;
  overflow-y: auto;
  height: auto;
  box-sizing:border-box;
}
/* .ivestment-i{
  position: relative;  
} */
.invest-l{
  width: 100%;  
  display: flex;
  align-items: center;
  text-align: left;  
  position: relative;
}
 
.demo-flex-1{
  flex:1;
  margin-left: 40rpx;
}
.invest-b{
  position: absolute;
  top:0;
  left: 0;
  width: 20rpx;
  height: 100%;
  text-align: center;
}
.invest-line::before{
  position: absolute;
  display: inline-block;
  top:50%;
  left: 50%;
  content: " ";
  transform: translate(-9rpx,-9rpx);
  width:18rpx;
  height:18rpx;
  background:#398af4;
  border-radius:50%;
  z-index: 10;
}
.invest-line::after{
  position: absolute;
  display: inline-block;
  top: 0;
  left: 50%;
  content: " ";
  margin-left: -1rpx;
  width: 2rpx;
  height: 100%;
  background-color: #398af4;
  z-index: 5;
}
.invest-line2::after{
  position: absolute;
  display: inline-block;
  top: 0;
  left: 50%;
  content: " ";  
  width: 2rpx;
  margin-left: -1rpx;
  height: 100%;
  background-color: #398af4;
  z-index: 5;
}
.ivestment-i:nth-child(1) .invest-line::after{
  top: 36rpx;
}
.card-box{
  margin-bottom: 20rpx;
  border: 1rpx solid #ccc;
}
.date{
  height: 56rpx;
  line-height: 56rpx;
}

一个可以随意改动的时间轴 – 大宝