1,![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f7959779af580bf1387f10c3902ad48c.png#pic_center)
2,html
<view class="data_title__39vye">
<view class="data_progress__1PKMR">
<view class="data_proLeft__1gtzQ" :style="{width:pressWidth}"></view>
</view>
</view>
3, css
.data_progress__1PKMR{
width: 100%;
height:20rpx;
margin-top: 10rpx;
background: #067ee7;
border-radius: 16rpx;
overflow: hidden;
.data_proLeft__1gtzQ{
width: 55%;
height: 100%;
background: linear-gradient(-45deg,transparent 7px,#F15D5D 0);
border-top-left-radius: 16rpx;
border-bottom-left-radius:16rpx;
}
}
4,js 部分
export default {
data(){
return{
pressWidth: '0%',
}
}
},
methods: {
value: function(e) {
this.pressWidth = '60%'
}
},
}