<template>
    <view class="test-content">
        <view class="tds-phContent">
            <view class="contentTabs">
                <view class="tabsItems">
                    <!-- TDS图片（已完成，灰色） -->
                    <image class="tds"
                        src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/b9c5667e95ea48a1b4c10f2d9ee84db6Group%20348447426.webp"
                        mode="widthFix"></image>
                    <!-- pH图片（当前测试） -->
                    <image class="ph"
                        src="../image/phTest.png"
                        mode="widthFix"></image>
                </view>
            </view>
        </view>

        <!-- 操作说明卡片 -->
        <view class="instructions-card instructions-card-step0" v-if="props.currentStep === 0">
            <image class="card-bg"
                src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/87e28ba2f4764f33a36b0d1cfd47d74aRectangle%203589.webp"
                mode="scaleToFill"></image>
            <view class="card-content">
                <view class="card-title">操作说明</view>
                <view class="card-body">
                    <text class="instruction-text">点击"开始检测"按钮测试pH值</text>
                    <image class="ph-icon"
                        src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/32ac38db03994072aca53ae518b996eeGroup%20348447450.webp"
                        mode="heightFix"></image>
                </view>
            </view>
        </view>

        <!-- 检测中卡片 -->
        <view class="instructions-card instructions-card-detecting"
            v-else-if="props.currentStep === 1 && !showFinalResult">
            <view class="card-content">
                <view class="card-body">
                    <!-- 进度条 -->
                    <view class="progress-container">
                        <image class="progress-bg"
                            src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/7b21b166605d4c7c9bb4377280202da7Group%20348447442.webp"
                            mode="widthFix"></image>
                        <!-- 进度条填充动画 -->
                        <view class="progress-fill-container" :style="{ width: progressWidth + '%' }">
                            <image class="progress-fill"
                                src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/45cebdfeb99a44049d18ab3b04024ac2Group%20348447442.webp"
                                mode="heightFix"></image>
                        </view>
                    </view>

                    <!-- pH结果显示 -->
                    <view class="ph-display">
                        <!-- 污染水 -->
                        <view class="ph-item-box">
                            <view class="ph-item">
                                <view class="item">
                                    <text class="water-type">污染水</text>
                                    <text class="ph-value">
                                        pH值：{{ showPartialResult ? beforePH : '？？？' }}
                                    </text>
                                </view>
                                <!-- item-img在检测结果出来后才显示 -->
                                <view class="item-img" v-if="showPartialResult">
                                    <image
                                        src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp"
                                        mode="aspectFit" />
                                </view>
                            </view>
                        </view>

                        <!-- 净化水 -->
                        <view class="ph-item-box">
                            <view class="ph-item">
                                <view class="item">
                                    <text class="water-type">净化水</text>
                                    <text class="ph-value">
                                        pH值：{{ showPartialResult ? afterPH : '？？？' }}
                                    </text>
                                </view>
                                <!-- item-img在检测结果出来后才显示 -->
                                <view class="item-img" v-if="showPartialResult">
                                    <image
                                        src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e7e6a286a568480fada2cafab781cc3cFrame.webp"
                                        mode="aspectFit" />
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 检测完成卡片 -->
        <view class="instructions-card instructions-card-step2" v-else-if="props.currentStep === 2">
            <image class="card-bg"
                src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/87e28ba2f4764f33a36b0d1cfd47d74aRectangle%203589.webp"
                mode="scaleToFill"></image>
            <view class="card-content">
                <view class="card-title">检测结果</view>
                <view class="card-body">
                    <view class="completion-content">
                        <view class="top">
                            <view class="beforeContent">
                                <view class="text">前：</view>
                                <view class="beforePHValue" :style="{ color: getPHColor(beforePH) }">{{ beforePH }}</view>
                                <view class="type" :style="{ 
                                    background: getPHColor(beforePH),
                                    borderColor: getPHBorderColor(beforePH)
                                }">{{ getPHType(beforePH) }}</view>
                                <image :src="getPHIcon(beforePH)" :style="{ width: '36rpx', height: '36rpx' }" />
                            </view>
                            <view class="jiantou">-></view>
                            <view class="afterContent">
                                <view class="text">后：</view>
                                <view class="afterPHValue" :style="{ color: getPHColor(afterPH) }">{{ afterPH }}</view>
                                <view class="type" :style="{ 
                                    background: getPHColor(afterPH),
                                    borderColor: getPHBorderColor(afterPH)
                                }">{{ getPHType(afterPH) }}</view>
                                <image :src="getPHIcon(afterPH)" :style="{ width: '32rpx', height: '32rpx' }" />
                            </view>
                        </view>
                        <view class="center">
                            <view class="centerTop">
                                <!-- 污染水pH值指示器 -->
                                <view class="topItem" :style="{ left: getPHIndicatorPosition(beforePH) }">
                                    <image 
                                        src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/8756b9fccb61450a96f34e2b0e938552Group%20348447464.webp"
                                        mode="aspectFit" />
                                </view>
                                <!-- 净化水pH值指示器 -->
                                <view class="topItem" :style="{ left: getPHIndicatorPosition(afterPH) }">
                                    <image 
                                        src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/200ccfb61dce458799879093341107f9Group%20348447463.webp"
                                        mode="aspectFit" />
                                </view>
                            </view>
                            <view class="centerCen">
                                <image src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/3df0383e2218465c83af9aeeae10e1baGroup%20348447462.webp" />
                                <!-- pH刻度值 -->
                                <view class="ph-scale">
                                    <text class="scale-value" v-for="i in 15" :key="i" 
                                        :style="{ left: `${(i-1) * (100/14)}%` }">
                                        {{ i-1 }}
                                    </text>
                                </view>
                            </view>
                        </view>
                        <view class="bottom">
                            <view class="bottomLeft">酸碱度：<text class="phDegree" :style="{ color: improvementRate >= 80 ? '#b2c849' : '#ff6b35' }">{{ improvementRate >= 80 ? '已优化' : '需优化' }}</text></view>
                            <view class="bottomRight" :style="{ 
                                background: improvementRate >= 80 ? '#B2C849' : '#FF6B35',
                                borderColor: improvementRate >= 80 ? '#748A08' : '#D94A1B'
                            }">{{ improvementRate >= 80 ? '适合饮用' : '需净化' }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="tips-card">
            <view class="tips-header">
                <image class="bulb-icon"
                    src="https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d2a7b1b81bff44c2b9099a8d48d9d6f1Frame%282%29.webp"
                    mode="widthFix"></image>
                <text class="tips-title">你知道吗？</text>
            </view>
            <view class="tips-body">
                <text v-if="props.currentStep === 0">理想饮用水pH值应在6.5-8.5之间</text>
                <text v-else-if="props.currentStep === 1">pH试纸通过颜色变化判断酸碱性</text>
                <text v-else-if="props.currentStep === 2">pH值接近中性说明水质更适合人体饮用</text>
            </view>
        </view>

        <!--底部-->
        <view class="bottom-bar">
            <view class="test-status">当前测试: <text class="test-status-text">{{ testStatusText }}/2</text></view>
            <view class="start-btn-wrapper" @click="handleStartTest">
                <image class="startBtn" :src="getButtonImage()" alt="" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch, onUnmounted, computed } from 'vue';

const props = defineProps({
    currentStep: {
        type: Number,
        default: 0
    },
    isAllTestsCompleted: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['next-step', 'test-completed', 'show-completion-modal']);

const progressWidth = ref(0);
const showPartialResult = ref(false);
const showFinalResult = ref(false);
const isTesting = ref(false);
const testStatusText = ref(2); // pH测试时显示2/2

// 定义pH值
const beforePH = ref(5.2); // 污染水pH值（酸性）
const afterPH = ref(7.2);   // 净化水pH值（接近中性）

let progressTimer = null;

// pH值对应的颜色映射（根据pH试纸颜色）
const phColorMap = {
    // 强酸性：红色系
    0: { color: '#FF0000', border: '#CC0000', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp' },
    1: { color: '#FF3300', border: '#CC2900', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp' },
    2: { color: '#FF6600', border: '#CC5200', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp' },
    3: { color: '#FF9933', border: '#CC7A29', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp' },
    4: { color: '#FFCC00', border: '#CCA300', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp' },
    5: { color: '#FFFF00', border: '#CCCC00', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp' },
    // 弱酸性：橙黄色系
    6: { color: '#FFFF66', border: '#CCCC52', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/0c6358f526fd4a72a098e5e46c9a8759Frame%2017.webp' },
    // 中性：绿色系
    7: { color: '#00CC00', border: '#00A300', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp' },
    8: { color: '#00CC00', border: '#00A300', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp' },
    // 弱碱性：蓝色系
    9: { color: '#0099FF', border: '#007ACC', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp' },
    10: { color: '#0066FF', border: '#0052CC', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp' },
    // 强碱性：紫色系
    11: { color: '#6600CC', border: '#5200A3', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp' },
    12: { color: '#9900FF', border: '#7A00CC', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp' },
    13: { color: '#CC00FF', border: '#A300CC', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp' },
    14: { color: '#FF00FF', border: '#CC00CC', icon: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp' },
};

// 根据pH值获取颜色
const getPHColor = (ph) => {
    const roundedPH = Math.round(ph);
    return phColorMap[roundedPH]?.color || '#25334d';
};

// 根据pH值获取边框颜色
const getPHBorderColor = (ph) => {
    const roundedPH = Math.round(ph);
    return phColorMap[roundedPH]?.border || '#25334d';
};

// 根据pH值获取图标
const getPHIcon = (ph) => {
    const roundedPH = Math.round(ph);
    return phColorMap[roundedPH]?.icon || 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/dd15bc1646cb4fcb86670b2b1ae04809Group%20348447459.webp';
};

// 根据pH值获取类型文字
const getPHType = (ph) => {
    if (ph < 6.5) return '偏酸性';
    if (ph > 8.5) return '偏碱性';
    return '中性';
};

// 根据pH值获取指示器位置（0-14对应0-100%）
const getPHIndicatorPosition = (ph) => {
    // pH值0-14映射到0-100%
    const position = (ph / 14) * 100;
    // 确保在0-100%范围内
    return `calc(${Math.min(Math.max(position, 0), 100)}% - 17rpx)`;
};

// 计算改善程度
const improvementRate = computed(() => {
    // pH值从酸性(5.2)改善到接近中性(7.2)
    const maxImprovement = 7.2 - 5.2; // 最大改善值2.0
    const actualImprovement = afterPH.value - beforePH.value;
    const rate = (actualImprovement / maxImprovement) * 100;
    return Math.min(Math.round(rate * 10) / 10, 100); // 保留一位小数，不超过100%
});

// 按钮图片逻辑
const getButtonImage = () => {
    if (props.currentStep === 0) {
        return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/51e1fc432e2b406d9d00f1028213221bGroup%20348447439.webp';
    } else if (props.currentStep === 1 || props.currentStep === 2) {
        // 在pH测试完成时，如果所有测试都已完成，显示完成按钮
        if (props.currentStep === 2 && props.isAllTestsCompleted) {
            return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/f8df9974d93a478f8c6b760fd32e15aaGroup%20348447439.webp';
        }
        return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/92306739e0774318bbfc4bbf0a69cba5Group%20348447439.webp';
    } else {
        return 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/92306739e0774318bbfc4bbf0a69cba5Group%20348447439.webp';
    }
};

// 监听currentStep变化
watch(() => props.currentStep, (newStep) => {
    console.log('pH currentStep变化:', newStep);
    if (newStep === 1) {
        // 进入步骤1，开始自动检测
        startAutoDetection();
    } else if (newStep === 2) {
        // 进入步骤2，检测完成
        showFinalResult.value = true;
        resetDetection();
        // 通知父组件pH测试已完成
        emit('test-completed');
    }
}, { immediate: true });

// 开始自动检测
const startAutoDetection = () => {
    if (isTesting.value) return;

    console.log('开始pH自动检测');
    isTesting.value = true;
    progressWidth.value = 0;
    showPartialResult.value = false;
    showFinalResult.value = false;

    // 清除之前的定时器
    if (progressTimer) {
        clearInterval(progressTimer);
    }

    // 模拟检测过程
    let currentProgress = 0;
    const totalTime = 3000; // 总时长3秒
    const interval = 50; // 更新间隔50ms
    const increment = (interval / totalTime) * 100; // 每次增加的百分比

    progressTimer = setInterval(() => {
        currentProgress += increment;
        progressWidth.value = Math.min(currentProgress, 100);

        // 当进度达到50%时显示pH值
        if (currentProgress >= 50 && !showPartialResult.value) {
            console.log('显示pH部分结果');
            showPartialResult.value = true;
        }

        // 当进度达到100%时显示完成状态
        if (currentProgress >= 100) {
            showFinalResult.value = true;
            clearInterval(progressTimer);
            isTesting.value = false;
            console.log('pH检测完成');

            // 检测完成后延迟1秒自动进入下一步
            setTimeout(() => {
                console.log('自动进入pH结果页面');
                emit('next-step');
            }, 1000);
        }
    }, interval);
};

// 重置检测状态
const resetDetection = () => {
    isTesting.value = false;
    progressWidth.value = 0;
    showPartialResult.value = false;
    showFinalResult.value = false;

    if (progressTimer) {
        clearInterval(progressTimer);
        progressTimer = null;
    }
};

// 处理按钮点击
const handleStartTest = () => {
    console.log('pH按钮点击，当前步骤:', props.currentStep, '测试完成:', showFinalResult.value, '所有测试完成:', props.isAllTestsCompleted);

    if (props.currentStep === 0) {
        // 第一步：点击"开始检测"
        console.log('开始pH检测');
        emit('next-step');
    } else if (props.currentStep === 1) {
        // 第二步：检测中或检测完成
        if (showFinalResult.value) {
            // 检测已完成，可以点击按钮进入下一步
            console.log('pH检测完成，进入结果页面');
            emit('next-step');
        } else {
            console.log('pH检测中，点击无效');
        }
    } else if (props.currentStep === 2) {
        // 第三步：检测完成后的操作
        if (props.isAllTestsCompleted) {
            // 所有测试都已完成，点击完成按钮
            console.log('点击完成按钮，通知父组件显示弹窗');
            // 触发按钮点击事件，让父组件处理
            emit('handle-ph-button-click');
        } else {
            console.log('pH测试完成，但还有其他测试');
            emit('test-completed');
        }
    }
};

// 组件卸载时清理定时器
onUnmounted(() => {
    resetDetection();
});
</script>

<style scoped lang="scss">
.test-content {
    width: 100%;
    height: 45vh;
    flex-shrink: 0;
    border-radius: 24rpx 24rpx 0 0;
    border-top: 4rpx solid #728FAF;
    background: linear-gradient(180deg, #E0EBF6 0%, #C3D3E4 100%);
    box-shadow: 0 10rpx 0 0 #FFF inset;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    padding-bottom: env(safe-area-inset-bottom);

    .tds-phContent {
        .contentTabs {
            .tabsItems {
                margin-top: 32rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .tds {
                    width: 254rpx;
                    height: 84rpx;
                }

                .ph {
                    width: 254rpx;
                    height: 84rpx;
                    margin-left: 40rpx;
                }
            }
        }
    }

    // 步骤0的卡片样式（原始样式）
    .instructions-card-step0 {
        position: relative;
        width: 95%;
        height: 180rpx;
        margin: 40rpx auto;
        border-radius: 24rpx;
        border: 4rpx solid #457AAB;
        background: #BEDCF3;
        box-sizing: border-box;
        flex-shrink: 0;

        .card-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 98%;
            height: 94%;
            z-index: 0;
            display: block;
        }

        .card-content {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .card-title {
                text-align: center;
                font-size: 34rpx;
                font-weight: bold;
                color: #25334D;
            }

            .card-body {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 20rpx;

                .instruction-text {
                    font-size: 30rpx;
                    color: #25334D;
                    font-weight: 500;
                }

                .ph-icon {
                    width: 53.72rpx;
                    height: 158.96rpx;
                    margin-left: 20rpx;
                    margin-top: -12rpx;
                }
            }
        }
    }

    // 检测中卡片样式（无边框背景色）
    .instructions-card-detecting {
        width: 95%;
        height: 240rpx;
        margin: 40rpx auto;
        box-sizing: border-box;
        flex-shrink: 0;
        background: transparent;
        border: none;

        .card-content {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .card-body {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                padding: 0 20rpx;

                // 进度条样式（使用切图）
                .progress-container {
                    width: 90%;
                    height: 60rpx;
                    position: relative;
                    margin-bottom: 20rpx;
                    overflow: hidden;
                    border-radius: 10rpx;

                    .progress-bg {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                    }

                    .progress-fill-container {
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 0%;
                        overflow: hidden;
                        z-index: 2;
                        transition: width 0.1s linear;

                        .progress-fill {
                            height: 100%;
                            width: auto;
                            min-width: 100%;
                        }
                    }
                }

                // pH显示样式
                .ph-display {
                    display: flex;
                    width: 100%;
                    justify-content: space-around;
                    align-items: center;

                    // pH项目盒子（带边框）
                    .ph-item-box {
                        background: linear-gradient(180deg, #FAFBFD 0%, #DCEEFD 100%);
                        border: 2rpx solid #FFF;
                        border-radius: 24rpx;
                        width: 328rpx;
                        height: 140rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

                        .ph-item {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width: 100%;
                            padding: 0 20rpx;

                            .item {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;

                                .water-type {
                                    font-size: 26rpx;
                                    color: #25334D;
                                    font-weight: 500;
                                    margin-bottom: 8rpx;
                                }

                                .ph-value {
                                    font-size: 32rpx;
                                    color: #3481c8;
                                    font-weight: bold;
                                }
                            }

                            .item-img {
                                width: 92rpx;
                                height: 92rpx;
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                image {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 检测完成卡片样式
    .instructions-card-step2 {
        position: relative;
        width: 95%;
        height: 280rpx;
        margin: 40rpx auto;
        border-radius: 24rpx;
        border: 4rpx solid #457AAB;
        background: #BEDCF3;
        box-sizing: border-box;
        flex-shrink: 0;

        .card-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 98%;
            height: 94%;
            z-index: 0;
            display: block;
        }

        .card-content {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;

            .card-title {
                text-align: center;
                font-size: 34rpx;
                font-weight: bold;
                color: #25334D;
                margin-top: 15rpx;
            }

            .card-body {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 0 20rpx;
                position: relative;
                z-index: 99;

                // 完成内容样式
                .completion-content {
                    width: 100%;
                    padding: 12rpx 16rpx;
                    
                    .top {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 40rpx;

                        .beforeContent {
                            display: flex;
                            align-items: center;

                            .text {
                                color: #25334d;
                                font-size: 30rpx;
                                font-weight: 600;
                            }

                            .beforePHValue {
                                font-size: 30rpx;
                                font-weight: 600;
                                margin: 0 8rpx;
                            }

                            .type {
                                border-radius: 26rpx;
                                color: #ffffff;
                                text-align: center;
                                font-size: 16rpx;
                                font-weight: 500;
                                padding: 4rpx 12rpx;
                                margin: 0 8rpx;
                                border: 2rpx solid;
                            }

                            >image {
                                width: 36rpx;
                                height: 36rpx;
                            }
                        }

                        .jiantou {
                            color: #25334d;
                            font-size: 24rpx;
                            font-weight: bold;
                        }

                        .afterContent {
                            display: flex;
                            align-items: center;

                            .text {
                                color: #25334d;
                                font-size: 30rpx;
                                font-weight: 600;
                            }

                            .afterPHValue {
                                font-size: 30rpx;
                                font-weight: 600;
                                margin: 0 8rpx;
                            }

                            .type {
                                border-radius: 26rpx;
                                color: #ffffff;
                                text-align: center;
                                font-size: 16rpx;
                                font-weight: 500;
                                padding: 4rpx 12rpx;
                                margin: 0 8rpx;
                                border: 2rpx solid;
                            }

                            >image {
                                width: 32rpx;
                                height: 32rpx;
                            }
                        }
                    }

                    .center {
                        position: relative;
                        
                        .centerTop {
                            position: relative;
                            height: 40rpx;
                            width: 100%;
                            
                            .topItem {
                                position: absolute;
                                top: 0;
                                width: 34rpx;
                                height: 34rpx;
                                transition: left 0.3s ease;
                                
                                image {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                        
                        .centerCen {
                            position: relative;
                            
                            > image {
                                width: 100%;
                                height: 28rpx;
                                display: block;
                            }
                            
                            .ph-scale {
                                position: absolute;
                                // bottom: -25rpx;
                                left: 0;
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                
                                .scale-value {
                                    position: absolute;
                                    transform: translateX(-50%);
                                    font-size: 18rpx;
                                    color: #25334d;
                                    font-weight: 500;
                                    white-space: nowrap;
                                    
                                    &:nth-child(1) {
                                        left: 0% !important;
                                        transform: translateX(0);
                                    }
                                    
                                    &:nth-child(15) {
                                        left: 100% !important;
                                        transform: translateX(-100%);
                                    }
                                }
                            }
                        }
                    }

                    .bottom {
                        padding: 15rpx 40rpx 5rpx;
                        margin-top: 20rpx;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        
                        .bottomLeft {
                            color: #25334d;
                            font-size: 30rpx;
                            font-weight: 600;
                            
                            .phDegree {
                                font-size: 30rpx;
                                font-weight: 600;
                                margin-left: 10rpx;
                                -webkit-text-stroke-width: 2rpx;
                                -webkit-text-stroke-color: transparent;
                            }
                        }
                        
                        .bottomRight {
                            box-shadow: 0 0 8rpx 0 #FFF inset;
                            border-radius: 36rpx;
                            color: #ffffff;
                            -webkit-text-stroke-width: 2rpx;
                            -webkit-text-stroke-color: transparent;
                            font-size: 24rpx;
                            font-weight: 600;
                            text-align: center;
                            padding: 2rpx 20rpx;
                            border: 2rpx solid;
                            transition: all 0.3s ease;
                        }
                    }
                }
            }
        }
    }

    .tips-card {
        width: 95%;
        height: 116rpx;
        background: #BEDCF3;
        border-radius: 24rpx;
        border: 4rpx solid #457AAB;
        padding: 20rpx;
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
        margin: 0 auto;

        .tips-header {
            position: absolute;
            top: -24rpx;
            left: 20rpx;
            width: 234rpx;
            height: 56rpx;
            background: linear-gradient(180deg, #52A5D7 0%, #3E83CE 100%);
            border-radius: 48rpx;
            border: 4rpx solid #1B5CA3;
            box-shadow: 0 0 8rpx 0 #FFF inset;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            z-index: 10;

            .bulb-icon {
                position: absolute;
                left: -20rpx;
                bottom: -10rpx;
                width: 80rpx;
                height: 80rpx;
                z-index: 12;
            }

            .tips-title {
                color: #fff;
                font-size: 34rpx;
                font-weight: bold;
                margin-left: 30rpx;
            }
        }

        .tips-body {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 30rpx;
            color: #25334d;
            line-height: 1.3;
            padding: 30rpx 16rpx 10rpx 16rpx;
            border-radius: 24rpx;
            background: linear-gradient(180deg, #FFF 0%, #D9EBF7 100%);
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .bottom-bar {
        width: 100%;
        position: absolute;
        bottom: 0rpx;
        left: 0;
        background-image: url('https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/a681444d883d4fe29851d702703302b0Rectangle%203597.webp');
        background-repeat: no-repeat;
        background-size: 100% 105%;
        padding: 30rpx 0;
        box-sizing: border-box;
        display: flex;

        .test-status {
            padding: 0 100rpx;
            color: #000000;
            font-size: 34rpx;
            font-weight: 600;
            margin-top: 50rpx;

            .test-status-text {
                color: #3481c8;
                font-size: 34rpx;
            }
        }

        .start-btn-wrapper {
            position: absolute;
            top: 30rpx;
            right: 40rpx;

            .startBtn {
                width: 254rpx;
                height: 99rpx;
            }
        }
    }
}
</style>