将进度条的宽度动态控制,通过css的transition动画来控制
<template>
<div class="container">
<div class="base-progress">
<div class="inner" :style="{ width: w + '%' }">
<div class="text">
<span>{{ w }}</span>
<span>%</span>
</div>
</div>
</div>
</div>
</template>
<script>
import floatBtn from '@/components/floatBtn.vue'
export default {
components:{
floatBtn
},
name: 'houselist-page',
data () {
return {
w:20,
img: require("@/assets/nav1.png")
}
},
methods: {
}
}
</script>
<style>
.container{
width:100%;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
}
.base-progress {
height: 26px;
width: 260px;
border-radius: 15px;
background-color: #e6e4e4;
border: 2px solid #999;
box-sizing: border-box;
}
.inner {
width: 20px;
height: 100%;
border-radius: 12px;
text-align: right;
position: relative;
background-color: #409eff;
background-size: 20px 20px;
box-sizing: border-box;
transition: all 1s;
}
.inner .text{
position: absolute;
right: -10px;
bottom: 0px;
}
</style>