绿色完成图表引用的vant-weapp组件的图标组件
wxml代码
<view class="stepBox" wx:if="{{pitem.open}}">
<view class="box">
<view class="{{item.status ==='1' ? 'greenSigleStep' : 'sigleStep'}}" wx:for="{{steps}}" wx:for-item="item" wx:key="text">
<view class="topShelter" wx:if="{{item.first}}"></view>
<view class="gray" wx:if="{{item.status === '0'}}"></view>
<view class="green" wx:if="{{item.status === '1'}}">
<van-icon name="checked" size="24rpx" color="#00cf95"/>
</view>
<view class="stepConBox" style="color: {{item.status ==='1' ? '#00cf95' : '#969799'}}">
<view>第{{item.text}}期供应</view>
<view class="timebox">实供时间:{{ item.plan }}</view>
<view class="timebox">应供时间:{{ item.desc}}</view>
</view>
<view class="bottomShelter" wx:if="{{item.end}}"></view>
</view>
</view>
</view>
wxss代码
.stepBox{
padding: 8rpx 32rpx 32rpx 16rpx;
}
.box{
box-sizing: border-box;
width: 100%;
padding-left: 20rpx;
}
.stepsList{
box-sizing: border-box;
width: 100%;
}
.sigleStep{
box-sizing: border-box;
width: 100%;
padding: 0 0 0 28rpx;
border-left: 4rpx solid #c2c3c4;
position: relative;
}
.greenSigleStep{
box-sizing: border-box;
width: 100%;
padding: 0 0 0 28rpx;
border-left: 4rpx solid #00cf95;
position: relative;
}
.topShelter{
width: 20rpx;
height: 46rpx;
background-color: #ffffff;
position: absolute;
left: -10rpx;
top: 0;
z-index: 1;
}
.bottomShelter{
width: 20rpx;
height: 122rpx;
background-color: #ffffff;
position: absolute;
left: -10rpx;
bottom: 0;
z-index: 1;
}
.gray{
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color: #969799;
position: absolute;
top: 34rpx;
left: -6rpx;
}
.green{
position: absolute;
top: 18rpx;
left: -14rpx;
z-index: 2;
background-color: #fff;
}
.stepConBox{
box-sizing: border-box;
padding: 20rpx 20rpx 20rpx 0;
color: #969799;
font-size: 28rpx;
line-height: 36rpx;
border-bottom: 1rpx solid #fafafa;
}
.timebox{
margin-top: 8rpx;
font-size: 24rpx;
}
JS代码
steps: [
{
text: '1',
desc: "2022-07-12",
plan: "2022-07-12",
status: '1',
first: true,
},
{
text: '2',
desc: "2022-07-12",
plan: "2022-07-12",
status: '1'
},{
text: '3',
desc: "2022-07-12",
plan: "2022-07-12",
status: '0'
},
{
text: '4',
desc: "2022-07-12",
plan: "2022-07-12",
status: '0',
end: true,
}
],