Design sketch:

 

Introduction:

Considering the size limit of the applet, I introduce it on demand. The operation is as follows:

Download the Lin UI source code directly through git, and copy the dist directory (Lin UI component library) to your project.

git clone https://github.com/TaleLin/lin-ui.git

In this example, I put the folders of steps and step in the dist directory into the components file in my project:

components

        |-steps

        |-step

Then, create a new index (page) page in the project pages folder:

index.json:

{
  "navigationBarTitleText": "A brief history of time",
  "usingComponents": {
    "l-steps": "/components/steps/index",
    "l-step": "/components/step/index"
  }
}

index.wxml:

<!--pages/index/index/.wxml-->
<view class='item-box'>
  <l-steps  type="dot" direction="column" active-index='{{detailList.length}}'>
    <block wx:for="{{detailList}}">
      <l-step custom>
        <view class='item-view'>
          <view class='item-main'>
            <view class='item-name'>{{item.name}}</view>
            <view class='item-date'>{{item.days}}</view>
            <view class='item-state'>{{item.state}}</view>
          </view>
        </view>
      </l-step>
    </block>
  </l-steps>
</view>

index.js:

Page({  
    data: {
        detailList:[  //Analog data
          { name: 'Guo Fu Cheng', days: '2019-10-10 10:59', state: "Certification" },
          { name: 'Zhang Xue You', days: '2019-10-11 12:40', state: "Certified" },
          { name: 'Liu Dehua', days: '2019-10-12 13:30', state:"Pending authentication"},
        ],
    },
})

index.wxss:

.item-box{
  width:100%;
  height:auto;
  padding-top:120rpx;
}
.item-view{
  width:40rpx;
  height:40rpx;
  border-radius: 50%;
  position: relative;
  background: #267DFF;
}
.item-main{
  position: absolute;
  left:60rpx;
  top:-56rpx;
  width:600rpx;
  height:140rpx;
  background: #fff;
  border-radius: 16rpx;
  line-height: 60rpx;
  color:#333;
  font-size: 28rpx;
  padding:10rpx 40rpx;
  box-sizing: border-box;
}
.item-name{
  font-weight: blod;
}
.item-date{
  line-height: 48rpx;  
}
.item-state{
  position: absolute;
  right:30rpx;
  top:10rpx;
  color:#267DFF;  
}

In fact, it is mainly realized by positioning. In addition, Lin UI is really easy to use. Thank you. There is wind in the forest. More functions of the open source project developed by the team will be examined and used by everyone.