简单实现进度条效果（vue2）

如果用echarts或者其他图表来写个进度条有点大材小用，所以直接简单html、js写一下就可以；

以下代码基于vue2，

部分代码来自国内直连GPT/Claude镜像站

<template><div class="progress-container"><div class="progress-item" v-for="(item, index) in progressData" :key="index"><div class="label">{{ item.label }}</div><div class="progress-bar"><div class="progress" :style="{ width: item.value + '%', backgroundColor: item.color }"><span class="value">{{ item.value }}%</span></div></div></div></div>
</template><script>
export default {name: 'ProgressChart',data() {return {progressData: [{ label: '当前值', value: 15, color: '#ff4757' },{ label: '设计值', value: 8, color: '#2ed573' }]}},
}
</script><style scoped>
.progress-container {background-color: #1e3a5f;padding: 10px;
}
.progress-item {display: flex;align-items: center;margin-bottom: 10px;
}
.label {width: 60px;color: #fff;font-size: 14px;
}
.progress-bar {flex-grow: 1;height: 20px;background-color: #2c4d6f;margin: 0 10px;position: relative;
}
.progress {height: 100%;transition: width 0.5s ease-in-out;position: relative;
}
.value {position: absolute;right: 5px;top: 50%;transform: translateY(-50%);color: #fff;font-size: 14px;
}
</style>