结构
<view class="progress-bar-box">
<view class="progress-bar" :style="{ width: ((值1 / 值2 ) * 100).toFixed(2) + '%' }">
</view>
<view class="progress-bar-item">
<view class="item" v-for="( item, index ) in 44 " :key="index"> </view>
</view>
</view>
css
.progress-bar-box {
display: flex;
position: relative;
width: 451rpx;
background-color: #135E5A;
transform: skewX(-21deg);
margin: 15rpx;
.progress-bar {
height: 16rpx;
background-color: var(--color-dot);
}
.progress-bar-item {
position: absolute;
top: 0;
left: 0;
display: flex;
}
.item {
height: 16rpx;
width: 3rpx;
background-color: #0a050c;
margin-left: 8rpx;
}
}