<view class="border-left" wx:for="{{customStepItems}}">
<view class="flex" style="margin-left: 30rpx;">
<van-icon name="passed" class="pass" wx:if="{{item.businessContent!='拒绝'||item.businessContent==null||item.businessContent==''}}"/>
<van-icon slot="icon" class="pass" name="close" wx:else style="color: red;background-color: white;"/>
<view>{{item.createDatetime}}</view>
</view>
<view class="flex jc-between margin-top-10 padding-bottom-10" style="margin-left: 30rpx;">
<view class="font-weight-700" style="color: black;">{{item.business}}</view>
<view>操作人:张三</view>
</view>
<view style="margin-left:30rpx;padding-bottom: 20rpx;">{{item.businessContent}}</view>
</view>
css样式
.border-left{
position: relative;
border-left: 2rpx solid rgb(12, 96, 223);
margin-left: 40rpx;
}
.pass{
position: absolute;
left: -16rpx;
background-color: #fff;
font-size: 34rpx;
color: green;
}
index.json引入
“van-icon”: “@vant/weapp/icon/index”,
参考
vant官网文档
也就完成了效果