feat(training): 握力环训练全面优化 - 音效集成 + 沉浸式画布 + Canvas 2D

## 主要改动 ### 1. 音效集成 - 集成 4 个捏碎音效(鸡蛋/核桃/易拉罐/气球) - 集成背景音乐 BGM + 右上角开关按钮 - 修复音效 URL 空值时的崩溃问题 - useMetronome 新增 volume 参数(默认 1.0) - 节拍音量调小至 0.35,避免木鱼声过大 ### 2. 画布升级到 Canvas 2D 接口 - 解决微信小程序 canvas-id 接口的警告 - 支持同层渲染,可与其他元素正常叠加 - 使用 requestAnimationFrame 替代 setTimeout - DPR 自适应,Retina 屏幕高清渲染 ### 3. 粒子特效差异化升级 - 4 种物品各自独立配色和形状 - 🥚 鸡蛋: 蛋黄黄+白色,圆形,中速 - 🌰 核桃: 4 种棕色,方形/三角/长方形,重粒 - 🥫 易拉罐: 5 种银色,长方形,快速 - 🎈 气球: 8 色彩虹,小颗粒,飘浮(低重力) - 新增双层冲击波效果 - 粒子旋转动画(方形/三角形/长方形) - 多形状粒子绘制(circle/square/triangle/rect) ### 4. 沉浸式画布重新设计 - 画布占屏幕 60vh(min 720rpx, max 900rpx) - 背景与页面无缝融合(#f8fafc) - 中心 1400rpx 大放射光晕,营造空间感 - 握力环放大至 520rpx,内圈 280rpx - 完全移除浮动气泡(性能优化) ### 5. 视觉与体验优化 - 主题色改回青绿色(#14b8a6),握力环保持粉色突出 - 训练完成卡片大改造: - 大号 emoji 跳动动画 - 统计项加入图标(💪⏱️🔥) - 食物对照可视化(emoji + 数量,最多 3 个) - 食物库扩展到 7 种(糖果/饼干/巧克力/苹果/香蕉/米饭/可乐) - BPM 数字大号显示(80rpx 深粉色) - 实时统计栏增加分隔线和顶部彩色高光 ### 6. 性能优化(低配机器友好) - 静态背景渐变(0 性能消耗) - 单层中心光晕(无动画) - 外发光仅在播放时启用 - GPU 加速(will-change + transform/opacity) - 移除 backdrop-filter(高消耗) ### 7. Bug 修复 - crush-canvas 的 \$scope of null 错误 - 进入页面时音效预热不再发声(静音预热) - 修复 walnut emoji 错用花生(🥜→🌰) - 弹窗遮挡粒子动画(延迟 1200ms 显示弹窗) ### 8. 文档 - 新增音效采集清单(grip-ring-audio-shopping-list.md) ## 修改文件 - grip-ring.vue: 主页面,音效集成、UI 重设计、食物对照 - grip-ring-canvas.vue: 沉浸式画布、握力环主体 - crush-canvas.vue: Canvas 2D 升级、差异化粒子系统 - useMetronome.ts: 音量参数支持 - dev-training-entry/index.vue: 入口配置微调 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-28 11:35:43 +08:00
parent 3ebe3c58c8
commit c3e4dfa479
6 changed files with 1095 additions and 289 deletions
@@ -8,6 +8,11 @@
                :is-playing="isPlaying"
                @toggle-play="onTogglePlay"
            />
+
+            <!-- BGM 开关按钮 -->
+            <view class="bgm-toggle" @click="toggleBgm">
+                <text class="bgm-icon">{{ bgmEnabled ? '🎵' : '🔇' }}</text>
+            </view>
        </view>

        <!-- ===== 实时统计 ===== -->
@@ -54,27 +59,52 @@

        <!-- ===== 训练完成卡片 ===== -->
        <view v-if="showSummary" class="completion-card">
-            <text class="completion-title">训练完成 🎉</text>
+            <view class="completion-header">
+                <text class="completion-emoji">🎉</text>
+                <text class="completion-title">训练完成</text>
+                <text class="completion-subtitle">辛苦啦,休息一下吧</text>
+            </view>

            <view class="completion-content">
+                <!-- 核心统计 -->
                <view class="stats-grid">
                    <view class="stat-item">
-                        <text class="stat-label">总次数</text>
+                        <text class="stat-icon">💪</text>
                        <text class="stat-value">{{ totalReps }}</text>
+                        <text class="stat-label">总次数</text>
                    </view>
                    <view class="stat-item">
-                        <text class="stat-label">总时长</text>
+                        <text class="stat-icon">⏱️</text>
                        <text class="stat-value">{{ formatTime(elapsedSeconds) }}</text>
+                        <text class="stat-label">总时长</text>
                    </view>
                    <view class="stat-item">
-                        <text class="stat-label">消耗糖分</text>
+                        <text class="stat-icon">🔥</text>
                        <text class="stat-value">{{ totalSugar.toFixed(1) }}g</text>
+                        <text class="stat-label">消耗糖分</text>
                    </view>
                </view>

-                <view class="sugar-card">
-                    <text class="sugar-label">相当于消耗了</text>
-                    <text class="sugar-comparison">{{ sugarComparison }}</text>
+                <!-- 食物对照 -->
+                <view v-if="sugarComparisons.length > 0" class="food-comparison-card">
+                    <view class="food-comparison-header">
+                        <text class="food-comparison-title">相当于消耗了</text>
+                        <text class="food-comparison-hint">这些食物的糖分 🍭</text>
+                    </view>
+
+                    <view class="food-list">
+                        <view
+                            v-for="(food, idx) in sugarComparisons"
+                            :key="idx"
+                            class="food-item"
+                        >
+                            <text class="food-emoji">{{ food.emoji }}</text>
+                            <view class="food-info">
+                                <text class="food-count">{{ food.count }}</text>
+                                <text class="food-name">{{ food.unit }}{{ food.name }}</text>
+                            </view>
+                        </view>
+                    </view>
                </view>
            </view>

@@ -130,16 +160,16 @@ const REWARDS: RewardConfig[] = [
        title: '捏碎鸡蛋',
        desc: '握力不错！',
        itemType: 'egg',
-        sound: '', // 音效文件暂未上传
+        sound: 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/202605280937077bad76716.mp3',
        minReps: 8,
        maxReps: 12
    },
    {
-        emoji: '🥜',
+        emoji: '🌰',
        title: '捏碎核桃',
        desc: '力量惊人！',
        itemType: 'walnut',
-        sound: '', // 音效文件暂未上传
+        sound: 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/20260528093707b021f5794.mp3',
        minReps: 15,
        maxReps: 20
    },
@@ -148,7 +178,7 @@ const REWARDS: RewardConfig[] = [
        title: '捏扁易拉罐',
        desc: '太强了！',
        itemType: 'can',
-        sound: '', // 音效文件暂未上传
+        sound: 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/20260528093707ebd4d5733.mp3',
        minReps: 25,
        maxReps: 30
    },
@@ -157,19 +187,24 @@ const REWARDS: RewardConfig[] = [
        title: '捏爆气球',
        desc: '完美！',
        itemType: 'balloon',
-        sound: '', // 音效文件暂未上传
+        sound: 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/20260528093707016f07427.mp3',
        minReps: 40,
        maxReps: 50
    },
 ]

+// 背景音乐 URL
+const BGM_URL = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260528/20260528093709c669f4659.mp3'
+
 // 食物糖分对照表 (每100g含糖量)
 const FOOD_SUGAR_TABLE = [
-    { name: '苹果', sugar: 10.3, unit: '个', weight: 200 }, // 1个苹果约200g
-    { name: '香蕉', sugar: 12.2, unit: '根', weight: 120 }, // 1根香蕉约120g
-    { name: '米饭', sugar: 25.9, unit: '碗', weight: 150 }, // 1碗米饭约150g
-    { name: '巧克力', sugar: 51.5, unit: '块', weight: 50 }, // 1块巧克力约50g
-    { name: '可乐', sugar: 10.6, unit: '罐', weight: 330 }, // 1罐可乐330ml
+    { emoji: '🍬', name: '糖果', sugar: 95.0, unit: '颗', weight: 5 },     // 1颗糖果约5g
+    { emoji: '🍪', name: '饼干', sugar: 65.0, unit: '块', weight: 10 },    // 1块饼干约10g
+    { emoji: '🍫', name: '巧克力', sugar: 51.5, unit: '块', weight: 50 },  // 1块巧克力约50g
+    { emoji: '🍎', name: '苹果', sugar: 10.3, unit: '个', weight: 200 },   // 1个苹果约200g
+    { emoji: '🍌', name: '香蕉', sugar: 12.2, unit: '根', weight: 120 },   // 1根香蕉约120g
+    { emoji: '🍚', name: '米饭', sugar: 25.9, unit: '碗', weight: 150 },   // 1碗米饭约150g
+    { emoji: '🥤', name: '可乐', sugar: 10.6, unit: '罐', weight: 330 },   // 1罐可乐330ml
 ]

 const currentPreset = ref<PresetId>('medium')
@@ -178,6 +213,8 @@ const showRewardPopup = ref(false)
 const showSummary = ref(false)
 const currentReward = ref<RewardConfig>(REWARDS[0])
 const crushAudioCtx = ref<UniApp.InnerAudioContext | null>(null)
+const bgmAudioCtx = ref<UniApp.InnerAudioContext | null>(null)
+const bgmEnabled = ref(true) // BGM 开关

 // 训练统计
 const totalReps = ref(0) // 总次数
@@ -196,6 +233,7 @@ const currentBpm = computed(() => preset.value.bpm)
 const metronome = useMetronome({
    initialBpm: currentBpm.value,
    accentEvery: 2,
+    volume: 0.35, // 节拍音音量调小,避免木鱼声太大
    onBeat: onBeat,
 })
 const { isPlaying } = metronome
@@ -206,19 +244,29 @@ const rootStyle = computed(() => ({
    '--beat-duration': `${intervalMs.value}ms`,
 }))

-// 糖分对比
-const sugarComparison = computed(() => {
-    if (totalSugar.value === 0) return ''
+// 糖分对比 - 返回多个食物对照(显示用)
+const sugarComparisons = computed(() => {
+    if (totalSugar.value === 0) return []
+
+    const results: Array<{ emoji: string; name: string; count: string; unit: string }> = []

    for (const food of FOOD_SUGAR_TABLE) {
        const foodSugar = (food.sugar * food.weight) / 100
        const count = totalSugar.value / foodSugar
-        if (count >= 0.3 && count <= 10) {
-            return `${count.toFixed(1)} ${food.unit}${food.name}的糖分`
+
+        // 选择 0.1 ~ 50 范围内的食物展示
+        if (count >= 0.1 && count <= 50) {
+            results.push({
+                emoji: food.emoji,
+                name: food.name,
+                count: count >= 10 ? Math.round(count).toString() : count.toFixed(1),
+                unit: food.unit,
+            })
        }
    }

-    return `${totalSugar.value.toFixed(1)}g 糖分`
+    // 最多展示 3 个
+    return results.slice(0, 3)
 })

 // 节拍回调
@@ -260,15 +308,10 @@ function triggerReward() {
    const reward = REWARDS[rewardIndex.value]
    currentReward.value = reward

-    // 触发粒子特效
+    // 立即触发粒子特效和音效
    gripCanvasRef.value?.triggerCrushEffect(reward.itemType)
-
-    // 播放碎裂音效
    playCrushSound(reward.sound)

-    // 显示奖励弹窗
-    showRewardPopup.value = true
-
    // 递进到下一个奖励等级
    rewardIndex.value++

@@ -278,6 +321,11 @@ function triggerReward() {
        const range = nextReward.maxReps - nextReward.minReps
        nextRewardAt.value = totalReps.value + nextReward.minReps + Math.floor(Math.random() * (range + 1))
    }
+
+    // 延迟 1200ms 显示弹窗,让粒子动画先完整播放
+    setTimeout(() => {
+        showRewardPopup.value = true
+    }, 1200)
 }

 function closeRewardPopup() {
@@ -304,6 +352,48 @@ function playCrushSound(sound: string) {
    } catch (_) {}
 }

+// 启动背景音乐
+function startBgm() {
+    if (!bgmEnabled.value) return
+
+    // 如果已存在,直接 play
+    if (bgmAudioCtx.value) {
+        try {
+            bgmAudioCtx.value.play()
+        } catch (_) {}
+        return
+    }
+
+    bgmAudioCtx.value = uni.createInnerAudioContext()
+    bgmAudioCtx.value.src = BGM_URL
+    bgmAudioCtx.value.loop = true
+    bgmAudioCtx.value.obeyMuteSwitch = false
+    bgmAudioCtx.value.volume = 0.4 // 背景音乐音量较低,不抢戏
+
+    try {
+        bgmAudioCtx.value.play()
+    } catch (_) {}
+}
+
+// 停止背景音乐
+function stopBgm() {
+    if (bgmAudioCtx.value) {
+        try {
+            bgmAudioCtx.value.pause()
+        } catch (_) {}
+    }
+}
+
+// 切换 BGM 开关
+function toggleBgm() {
+    bgmEnabled.value = !bgmEnabled.value
+    if (bgmEnabled.value && isPlaying.value) {
+        startBgm()
+    } else {
+        stopBgm()
+    }
+}
+
 // 档位切换
 function onPresetTap(id: PresetId) {
    if (isPlaying.value) return
@@ -316,6 +406,7 @@ function onTogglePlay() {
    if (isPlaying.value) {
        // 暂停 - 显示总结
        metronome.stop()
+        stopBgm()
        stopTimer()
        uni.setKeepScreenOn({ keepScreenOn: false })
        showSummary.value = true
@@ -330,6 +421,7 @@ function onTogglePlay() {
        }

        metronome.start()
+        startBgm()
        startTimer()
        uni.setKeepScreenOn({ keepScreenOn: true })
    }
@@ -340,6 +432,7 @@ function onRestart() {
    showSummary.value = false
    resetStats()
    metronome.start()
+    startBgm()
    startTimer()
    uni.setKeepScreenOn({ keepScreenOn: true })
 }
@@ -386,6 +479,7 @@ onShow(() => {
 onHide(() => {
    if (isPlaying.value) {
        metronome.stop()
+        stopBgm()
        stopTimer()
        uni.setKeepScreenOn({ keepScreenOn: false })
    }
@@ -394,6 +488,12 @@ onHide(() => {
            crushAudioCtx.value.destroy()
        } catch (_) {}
    }
+    if (bgmAudioCtx.value) {
+        try {
+            bgmAudioCtx.value.destroy()
+        } catch (_) {}
+        bgmAudioCtx.value = null
+    }
 })
 </script>

@@ -407,9 +507,9 @@ $card-border: rgba(15, 23, 42, 0.06);
 $text-1: #0f172a;
 $text-2: #475569;
 $text-3: #94a3b8;
-$brand: #22c55e;
-$brand-soft: #d1fae5;
-$brand-deep: #047857;
+$brand: #14b8a6;        /* 主品牌色:青绿(健康主题) */
+$brand-soft: #ccfbf1;   /* 浅青绿背景 */
+$brand-deep: #0f766e;   /* 深青绿文字 */
 $radius-card: 24rpx;
 $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);

@@ -436,8 +536,12 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
    width: 100vw;
    margin-left: -28rpx;
    margin-right: -28rpx;
+    margin-top: -30rpx; /* 向上拉,贴近导航栏 */
    flex-shrink: 0;
-    height: 600rpx;
+    /* 占主屏 60%,确保下方统计栏和档位可见 */
+    height: 60vh;
+    min-height: 720rpx;
+    max-height: 900rpx;
    display: flex;
    justify-content: center;
    align-items: center;
@@ -445,6 +549,37 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
    position: relative;
 }

+/* ============================================================
+ * BGM 开关按钮
+ * ============================================================ */
+.bgm-toggle {
+    position: absolute;
+    top: 32rpx;
+    right: 32rpx;
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow:
+        0 4rpx 16rpx rgba(0, 0, 0, 0.1),
+        0 0 0 2rpx rgba(20, 184, 166, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 20;
+    transition: all 0.2s ease;
+
+    &:active {
+        transform: scale(0.92);
+        background: #f0fdfa;
+    }
+}
+
+.bgm-icon {
+    font-size: 36rpx;
+    line-height: 1;
+}
+
 /* ============================================================
 * 进度显示
 * ============================================================ */
@@ -483,32 +618,61 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
    width: 100%;
    background: $card-bg;
    border-radius: $radius-card;
-    padding: 20rpx 24rpx;
-    box-shadow: $shadow-sm;
+    padding: 24rpx 28rpx;
+    box-shadow:
+        0 4rpx 16rpx rgba(15, 23, 42, 0.04),
+        0 1rpx 2rpx rgba(15, 23, 42, 0.04);
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 16rpx;
+    border: 2rpx solid rgba(20, 184, 166, 0.08);
+    position: relative;
+    overflow: hidden;
+}
+
+.stats-bar::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3rpx;
+    background: linear-gradient(90deg, transparent, $brand, transparent);
 }

 .stat-item-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
-    gap: 6rpx;
+    gap: 8rpx;
+    flex: 1;
+    position: relative;
+}
+
+.stat-item-inline:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    right: -8rpx;
+    top: 20%;
+    bottom: 20%;
+    width: 2rpx;
+    background: linear-gradient(to bottom, transparent, $card-border, transparent);
 }

 .stat-label-inline {
    font-size: 22rpx;
    color: $text-3;
    font-weight: 500;
+    letter-spacing: 1rpx;
 }

 .stat-value-inline {
-    font-size: 28rpx;
+    font-size: 32rpx;
    color: $brand-deep;
-    font-weight: 700;
+    font-weight: 800;
    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
 }

 /* ============================================================
@@ -565,8 +729,8 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
        background: $brand-soft;
        border-color: $brand;
        box-shadow:
-            0 8rpx 20rpx rgba(16, 185, 129, 0.18),
-            inset 0 0 0 2rpx rgba(16, 185, 129, 0.4);
+            0 8rpx 20rpx rgba(20, 184, 166, 0.18),
+            inset 0 0 0 2rpx rgba(20, 184, 166, 0.4);

        .preset-name {
            color: $brand-deep;
@@ -608,7 +772,7 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);

 .reward-popup {
    width: 560rpx;
-    background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
+    background: linear-gradient(135deg, #fff 0%, #f0fdfa 100%);
    border-radius: 32rpx;
    padding: 48rpx 32rpx;
    display: flex;
@@ -674,12 +838,12 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
    border-radius: 999rpx;
    font-size: 30rpx;
    font-weight: 600;
-    box-shadow: 0 8rpx 20rpx rgba(34, 197, 94, 0.3);
+    box-shadow: 0 8rpx 20rpx rgba(20, 184, 166, 0.3);
    transition: all 0.2s;

    &:active {
        transform: scale(0.97);
-        box-shadow: 0 4rpx 12rpx rgba(34, 197, 94, 0.2);
+        box-shadow: 0 4rpx 12rpx rgba(20, 184, 166, 0.2);
    }
 }

@@ -688,29 +852,66 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
 * ============================================================ */
 .completion-card {
    width: 100%;
-    background: linear-gradient(135deg, #dbeafe, #ede9fe);
+    background: linear-gradient(135deg, #f0fdfa, #ecfeff);
    border-radius: $radius-card;
-    padding: 32rpx 24rpx;
+    padding: 40rpx 28rpx 32rpx;
    display: flex;
    flex-direction: column;
-    gap: 24rpx;
+    gap: 28rpx;
    align-items: center;
-    box-shadow: $shadow-sm;
+    box-shadow:
+        0 8rpx 32rpx rgba(20, 184, 166, 0.08),
+        0 2rpx 8rpx rgba(15, 23, 42, 0.04);
+    border: 2rpx solid rgba(20, 184, 166, 0.1);
+}
+
+.completion-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+}
+
+.completion-emoji {
+    font-size: 80rpx;
+    line-height: 1;
+    margin-bottom: 8rpx;
+    animation: emoji-bounce 1.5s ease-in-out infinite;
+}
+
+@keyframes emoji-bounce {
+    0%, 100% {
+        transform: scale(1) rotate(0deg);
+    }
+    25% {
+        transform: scale(1.1) rotate(-5deg);
+    }
+    75% {
+        transform: scale(1.1) rotate(5deg);
+    }
 }

 .completion-title {
-    font-size: 30rpx;
+    font-size: 36rpx;
    color: $text-1;
-    font-weight: 700;
+    font-weight: 800;
+    letter-spacing: 2rpx;
+}
+
+.completion-subtitle {
+    font-size: 24rpx;
+    color: $text-3;
+    margin-top: 4rpx;
 }

 .completion-content {
    width: 100%;
    display: flex;
    flex-direction: column;
-    gap: 20rpx;
+    gap: 24rpx;
 }

+/* 核心统计网格 */
 .stats-grid {
    display: flex;
    gap: 16rpx;
@@ -719,48 +920,123 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);

 .stat-item {
    flex: 1;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 16rpx;
-    padding: 20rpx 12rpx;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 20rpx;
+    padding: 24rpx 12rpx 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
-    gap: 8rpx;
+    gap: 6rpx;
+    box-shadow:
+        0 4rpx 12rpx rgba(15, 23, 42, 0.04),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(8rpx);
+}
+
+.stat-icon {
+    font-size: 40rpx;
+    line-height: 1;
+    margin-bottom: 4rpx;
 }

 .stat-label {
-    font-size: 24rpx;
-    color: #64748b;
+    font-size: 22rpx;
+    color: $text-3;
+    font-weight: 500;
 }

 .stat-value {
-    font-size: 32rpx;
-    font-weight: 700;
+    font-size: 36rpx;
+    font-weight: 800;
    color: $text-1;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
 }

-.sugar-card {
-    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-    border-radius: 16rpx;
-    padding: 24rpx;
+/* ============================================================
+ * 食物对照卡片
+ * ============================================================ */
+.food-comparison-card {
+    background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
+    border-radius: 20rpx;
+    padding: 28rpx 24rpx;
+    width: 100%;
+    box-shadow:
+        0 4rpx 16rpx rgba(251, 191, 36, 0.1),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+    border: 2rpx solid rgba(251, 191, 36, 0.15);
+}
+
+.food-comparison-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4rpx;
+    margin-bottom: 24rpx;
+}
+
+.food-comparison-title {
+    font-size: 26rpx;
+    color: #92400e;
+    font-weight: 700;
+    letter-spacing: 1rpx;
+}
+
+.food-comparison-hint {
+    font-size: 22rpx;
+    color: #b45309;
+    opacity: 0.8;
+}
+
+.food-list {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 12rpx;
+}
+
+.food-item {
+    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
-    width: 100%;
+    padding: 16rpx 8rpx;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 16rpx;
+    transition: transform 0.3s ease;
 }

-.sugar-label {
-    font-size: 24rpx;
-    color: #065f46;
+.food-item:active {
+    transform: scale(0.95);
+}
+
+.food-emoji {
+    font-size: 56rpx;
+    line-height: 1;
+    filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
+}
+
+.food-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rpx;
+}
+
+.food-count {
+    font-size: 32rpx;
+    font-weight: 800;
+    color: #92400e;
+    line-height: 1.2;
+    font-variant-numeric: tabular-nums;
+}
+
+.food-name {
+    font-size: 20rpx;
+    color: #b45309;
    font-weight: 500;
-}
-
-.sugar-comparison {
-    font-size: 28rpx;
-    color: #047857;
-    font-weight: 700;
-    text-align: center;
+    letter-spacing: 1rpx;
 }

 .action-row {