tip:逻辑是这么个逻辑,需要好看的可以自己修改css。
<template>
<view >
<view class="jindutiaoBox">
<view class="jindutiao">
<view class="left" :style="{width:this.num+'%'}">
<text style='float: right;color: white;'>{{this.num}}%</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
num:20
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.jindutiaoBox{
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.jindutiao{
height: 20px;
width: 90vw;
border-radius: 25px;
display: flex;
background-color: #d6d6d6;
}
.left{
height: 20px;
border-radius: 25px;
background-color: #2baeff;
}
.right{
}
</style>