css 特殊进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
<style>
body {
background: rgba(44, 163, 255, 1);
}
.itembox {
width: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px 0px 16px 0px;
border: 4px solid #E3F3FF;
/* height: 40px; */
padding: 10px;
overflow: hidden;
display: flex;
flex-wrap: nowrap;
}
.flex-shrink0 {
-moz-flex-shrink: 0;
-ms-flex-shrink: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.item {
background: #7EC6FD;
width: 20px;
height: 40px;
margin-right: 10px;
transform: skewX(-40deg);
position: relative;
}
.item-progress {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
}
.btn {
border-radius: 10px;
display: inline-block;
padding: 10px;
margin-top: 20px;
color: #fff;
cursor: pointer;
border:1px solid #fff
}
.btn:hover {
opacity: 0.8;
}
.test{
font-size: 26px;
color: #fff;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="hello-vue" class="demo">
<div class="itembox">
<div v-for="item in RangeCount" :key="item" class="item flex-shrink0">
<div class="item-progress" v-if="item <=currentCount"> </div>
</div>
</div>
<div class="test"> {{currentCount}} {{count}} /{{countTol}}</div>
<div @click="aaaa" class="btn">增加进度哦</div>
</div>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!',
currentCount: 0,
RangeCount:14,
count: 0,
countTol: 100
}
},
methods: {
aaaa() {
if(this.count>=this.countTol){
return false
}
this.count += 10;
var p= this.count/this.countTol;
this.currentCount= Math.floor(this.RangeCount*p);
console.log('aaa ', p, this.RangeCount*p, this.currentCount);
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>
效果：
