根据设计需求,需要实现双色动态的进度条,发现还没有相关文章,在这里记录一下,主要就是对 el-progress 的样式进行修改,有更好的意见可以留言呀
更新更新!!
发现有一个api适用,可以直接使用
1.底色
2.高度
----------------------------旧------------------------------
最终样式如下:
template部分代码如下
<div class="process">
<div class="des">
<div class="div">
<div>模式1</div>
<div class="num1">{{ precent }}%</div>
</div>
<div class="div">
<div class="num2">{{ lastPrecent }}%</div>
<div>模式2</div>
</div>
</div>
<el-progress :percentage="precent" :show-text="false"></el-progress>
</div>
js
<script setup>
import { ref } from "vue";
//动态展示进度条百分比
const precent = ref(45);
const lastPrecent = ref(100 - precent.value);
</script>
css
<style>
.des {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: normal;
line-height: 20px;
color: #cecece;
margin-bottom: 4px;
}
.process {
width: 300px;
background-color: #070f16;
padding: 2rem;
}
.div {
display: flex;
gap: 5px;
}
.num1 {
color: #129bff;
}
.num2 {
color: #f2994a;
}
.el-progress-bar__outer {
height: 10px !important;
background-color: #f2994a !important;
}
</style>