效果:
<view class='progress-block'>
<text wx:if="{{ count < 5 }}">{{ count }}/5</text>
<image src='http://dtsimg.dinghu.com/xcx/try_drink/mine_icon_finish@2x.png' wx:else></image>
<view class='progress-content'>
<view class='progress'></view>
<view class="progress progress-active {{ count < 5 ? '' : 'progress-active-full' }}" style="width:{{ 32 * count }}rpx"></view>
</view>
</view>
.progress-block {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
color: #fff;
font-size: 28rpx;
font-weight: 500;
}
.progress-block text {
margin-right: 14rpx;
}
.progress-block image {
width: 28rpx;
height: 28rpx;
margin-right: 10rpx;
}
.progress-content {
position: relative;
}
.progress {
width: 160rpx;
height: 26rpx;
background: rgba(255, 255, 255, 0.7);
border-radius: 13rpx;
box-sizing: border-box;
}
.progress-active {
background: #ffdf4e;
position: absolute;
left: 0;
top: 0;
border-radius: 13rpx 0rpx 0rpx 13rpx;
}
.progress-active-full {
border-radius: 13rpx;
}
data: {
count: 0
},