效果图：

 

先说引入：

考虑到小程序的大小限制，我是按需引的，操作如下：

直接通过git下载 Lin UI 源代码，并将 dist 目录（Lin-UI 组件库）拷贝到自己的项目中。

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

本例，我将 dist 目录 中的 steps 和 step 两个组件的文件夹，放到了自己的项目中的 components 文件中：

components

        |——steps

        |——step

然后，在项目pages文件夹中新建 index （ page）页面：

index.json:

{
  "navigationBarTitleText": "时间简史",
  "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:[  //模拟数据
          { name: '郭扶城', days: '2019-10-10 10:59', state: "认证中" },
          { name: '张学右', days: '2019-10-11 12:40', state: "已认证" },
          { name: '柳得花', days: '2019-10-12 13:30', state:"待认证"},
        ],
    },
})

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;  
}

其实，主要是用了定位实现的，另外 Lin UI 真的很好用，感谢林间有风团队组开发的这个开源项目，更多的功能也待大家体检和使用哈。