wxml：
<view class='list'>
<view class='li1'>
<view class='img'></view>
<view class='text'>1</view>
<text class='data'>2018.01.01</text>
</view>
<view class='li2'>
<view class='img'></view>
<view class='text'>2</view>
<text class='data'>2018.01.01</text>
</view>
<view class='li1'>
<view class='img'></view>
<view class='text'>3</view>
<text class='data'>2018.01.01</text>
</view>
<view class='li2'>
<view class='img'></view>
<view class='text'>4</view>
<text class='data'>2018.01.01</text>
</view>
<view class='li1'>
<view class='img'></view>
<view class='text'>5</view>
<text class='data'>2018.01.01</text>
</view>
<view class='li2'>
<view class='img'></view>
<view class='text'>6</view>
<text class='data'>2018.01.01</text>
</view>
<view class='li1'>
<view class='img'></view>
<view class='text'>7</view>
<text class='data'>2018.01.01</text>
</view>
</view>
wxss:
.list{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
padding: 0 32rpx;
box-sizing: border-box;
}
.list::after{
position: absolute;
content: '';
width: 5rpx;
height: 100%;
background: #ccc;
top: -4rpx;
left: 50%;
border: 5rpx solid #fff;
}
.list .li1,.list .li2{
background: #999;
width: 50%;
height: 100rpx;
flex-shrink: 0;
line-height: 100rpx;
position: relative;
}
.list .li1{
border-radius: 100rpx 0 0 100rpx;
margin-bottom: 100rpx;
text-indent: 100rpx;
}
.list .li1:first-child{
margin-top: 0;
}
.list view:last-child{
margin-bottom: 0;
}
.list .li2{
border-radius: 0 100rpx 100rpx 0;
margin-top: 200rpx;
margin-bottom: 100rpx;
text-align: right;
padding-right: 100rpx;
box-sizing: border-box;
}
.list .li1::after,.list .li2::after{
width: 50rpx;
height: 50rpx;
position: absolute;
content: '';
right: 0;
background: green;
top: 15rpx;
border-radius: 50rpx;
border: 10rpx solid #fff;
z-index: 999;
}
.list .li1::after{
right: -44rpx;
}
.list .li2::after{
left: -44rpx;
}
.list .img{
position: absolute;
width: 80rpx;
height: 80rpx;
background: #fff;
border-radius: 80rpx;
margin: 10rpx;
}
.list .li2 .img{
right: 0rpx;
}
.list .data{
font-size: 28rpx;
position: absolute;
top: 0rpx;
line-height: 100rpx;
}
.list .li1 .data{
right: -200rpx;
}
.list .li2 .data{
left: -200rpx;
}