vue实现进度条带指针

效果最终

复制代码
function calculatePointerPosition(value) {
    if (value < 2.6) return 12.5;  // 非常差位置
    if (value < 5.1) return 37.5;  // 较差位置
    if (value < 7.1) return 62.5;  // 良好位置
    return 90;  // 非常满意位置
}

function getStatusText(value) {
    if (value < 2.6) return '非常差';
    if (value < 5.1) return '较差';
    if (value < 7.1) return '良好';
    return '非常满意';
}

function getStatusColor(value) {
    if (value < 2.6) return '#F2F2F2';
    if (value < 5.1) return '#FF4D4F';
    if (value < 7.1) return '#FFAB2C';
    return '#67C23A';
}

function getProgressBackground(value) {
    if (value < 2.6) return 'linear-gradient(90deg, rgba(242,242,242,0) 0%, #F2F2F2 100%)';
    if (value < 5.1) return 'linear-gradient(90deg, rgba(255,77,79,0) 0%, #FF4D4F 100%)';
    if (value < 7.1) return 'linear-gradient(90deg, rgba(255,171,44,0) 0%, #FFAB2C 100%)';
    return 'linear-gradient(90deg, rgba(103,194,58,0) 0%, #67C23A 100%)';
}

function getStatusImage(value) {
    if (value < 2.6) return new URL(
        "../../../assets/images/tijian/gray.png",
        import.meta.url
    ).href;
    if (value < 5.1) return new URL(
        "../../../assets/images/tijian/error.png",
        import.meta.url
    ).href;
    if (value < 7.1) return new URL(
        "../../../assets/images/tijian/waring.png",
        import.meta.url
    ).href;
    return new URL(
        "../../../assets/images/tijian/success.png",
        import.meta.url
    ).href;
}

<!-- 进度条组件 -->
                <div style="padding: 20px; background: #fff; border-radius: 8px; margin-top: 20px;">
                    <!-- 指针在上方 -->
                    <div style="position: relative; height: 50px; margin-bottom: -5px;">
                        <img
                            :style="{
                                position: 'absolute',
                                left: `${(score/10)*100}%`,
                                bottom: '10px',
                                width: '60px',
                                height: '28px',
                                transform: 'translateX(-50%)'
                            }"
                            :src="getStatusImage(score)"
                        />
                    </div>
                    <!-- 进度条 -->
                    <div style="position: relative; height: 10px; background: #f0f0f0; border-radius: 5px;">
                        <div :style="{
                            position: 'absolute',
                            height: '100%',
                            width: `${(score/10)*100}%`,
                            borderRadius: '5px',
                            background: getProgressBackground(score)
                        }">
                        </div>
                    </div>
                    <!-- 状态值在下方 -->
                    <div style="margin-top: 10px; display: flex; justify-content: space-between;">
                        <span>非常差</span>
                        <span>较差</span>
                        <span>良好</span>
                        <span>非常满意</span>
                    </div>

                    <div style="margin-top: 30px; text-align: center; font-size: 14px;">
                        当前状态: <span :style="{ color: getStatusColor(score) }">{{ getStatusText(score) }}</span>
                    </div>
                </div>
相关推荐
东东2334 分钟前
前端开发中如何取消Promise操作
前端·javascript·promise
掘金安东尼9 分钟前
官方:什么是 Vite+?
前端·javascript·vue.js
柒崽10 分钟前
ios移动端浏览器,vh高度和页面实际高度不匹配的解决方案
前端
渣哥26 分钟前
你以为 Bean 只是 new 出来?Spring BeanFactory 背后的秘密让人惊讶
javascript·后端·面试
烛阴35 分钟前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua
大猫会长44 分钟前
tailwindcss出现could not determine executable to run
前端·tailwindcss
Moonbit1 小时前
MoonBit Pearls Vol.10:prettyprinter:使用函数组合解决结构化数据打印问题
前端·后端·程序员
533_1 小时前
[css] border 渐变
前端·css
云中雾丽1 小时前
flutter的dart语言和JavaScript的消息循环机制的异同
前端
地方地方1 小时前
Vue依赖注入:provide/inject 问题解析与最佳实践
前端·javascript·面试