<template>
<div>
<p style="justify-content: space-between;">
<span><i :class="`${data.icon}`" :style="{ color: `${data.color}`}"></i>{{ data.name }}</span>
<span>{{data.count}}个</span>
</p>
<div class="progress-bar">
<div class="progress-inner" :style="{ width: `${data.value}%` , background: `${data.color}`}">
<div class="dot top" :style="{ background: `${data.color}`}"></div>
<div class="dot bottom" :style="{ background: `${data.color}`}"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "index",
props: {
data: {
type: Object,
default: {
value: 10,
color: '#fff',
icon: 'car',
name: '哈哈',
count: 20
}
}
}
}
</script>
<style lang="scss" scoped>
.progress-bar {
height: .08rem;
background: #fff;
}
.progress-inner {
position: relative;
width: 0;
height: 100%;
transition: width .2s;
.dot {
content: '';
position: absolute;
right: -0.01rem;
width: .02rem;
height: .04rem;
border-radius: 1rem;
&.top {
top: 0;
transform: translateY(-100%);
}
&.bottom {
bottom: 0;
transform: translateY(100%);
}
}
}
</style>
进度条组件
于 2022-09-09 15:40:42 首次发布