From 9b6d9ce00700331bd0b50ff6fdf3644542ad8a38 Mon Sep 17 00:00:00 2001
From: long <452591453@qq.com>
Date: Mon, 25 May 2026 12:18:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor(metronome):=20=E6=95=B4=E4=BD=93?=
 =?UTF-8?q?=E8=A7=86=E8=A7=89=E9=87=8D=E8=AE=BE=E8=AE=A1=20-=20=E7=8E=B0?=
 =?UTF-8?q?=E4=BB=A3=E6=9E=81=E7=AE=80=E9=A3=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

脚印拟真化:
- 颜色 鲜绿 → 浅白(rgba 241,245,249,0.92),降低饱和不再卡通
- 形状更紧凑:脚趾紧贴脚掌、大小递减弧形排布(22→18→16→14→12rpx)
- 不规则 border-radius 模拟真实脚印轮廓
- 移除多余渐变和厚重 box-shadow

布局重组(卡片化):
- 走路区域 + 配速 badge + 状态提示  → walker-card 统一卡片
- BPM 调节 + 拍号选择            → control-card 统一卡片
- 卡片背景 rgba(255,255,255,0.035) + 1rpx 描边,有 backdrop-blur
- 移除独立 hint 区,合并到 walker-card 顶部

控件精修:
- BPM 步进按钮 高度 120→96rpx,字号 44→38rpx,圆角更小
- 拍号选择器改为 iOS 风药丸式 segmented control,放在右侧
- 主圆 460→420rpx,BPM 字号 200→180rpx,腾出空间给下方
- "速度"标签 → "BPM"(更专业)

配速 badge 智能变色:
- <100 BPM  绿(健走)
- 100-129  黄(快走)
- 130-169  橙(慢跑)
- ≥170     红(快跑)

设计 token 抽取:
- 在 SCSS 顶部定义 $bg-grad / $card-bg / $text-* / $brand 等变量
- 圆角统一:卡片 28rpx, 按钮 20rpx, 药丸 999rpx
- 间距统一:卡片间距 28rpx, 控件间隔 14rpx

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 TUICallKit-Vue3/pages/training/metronome.vue | 621 +++++++++++--------
 1 file changed, 354 insertions(+), 267 deletions(-)

diff --git a/TUICallKit-Vue3/pages/training/metronome.vue b/TUICallKit-Vue3/pages/training/metronome.vue
index 3a0aaa50..50c9b96b 100644
--- a/TUICallKit-Vue3/pages/training/metronome.vue
+++ b/TUICallKit-Vue3/pages/training/metronome.vue
@@ -1,15 +1,13 @@
 <template>
-    <view class="metronome-page" :style="rootStyle">
-        <view class="pulse-stage" @click="togglePlay">
-            <view class="pulse-ring" :class="{ playing: isPlaying }" />
-            <view class="pulse-ring pulse-ring-2" :class="{ playing: isPlaying }" />
-            <view
-                class="pulse-core"
-                :class="{ playing: isPlaying, accent: isAccent }"
-            >
+    <view class="page" :style="rootStyle">
+        <!-- ===== 主舞台:节拍器圆 ===== -->
+        <view class="stage" @click="togglePlay">
+            <view class="ring r1" :class="{ playing: isPlaying }" />
+            <view class="ring r2" :class="{ playing: isPlaying }" />
+            <view class="core" :class="{ playing: isPlaying, accent: isAccent }">
                 <text class="bpm-num">{{ bpm }}</text>
-                <text class="bpm-label">速度</text>
-                <view class="ctrl-icon">
+                <text class="bpm-label">BPM</text>
+                <view class="ctrl">
                     <view v-if="isPlaying" class="icon-pause">
                         <view class="bar" />
                         <view class="bar" />
@@ -19,66 +17,76 @@
             </view>
         </view>
 
-        <!-- 脚步行走动画:跟随 BPM 同步,1 拍 1 步 -->
-        <view class="walker" :class="{ playing: isPlaying }">
-            <view class="foot foot-left">
-                <view class="footprint">
-                    <view class="heel" />
-                    <view class="toe toe-1" />
-                    <view class="toe toe-2" />
-                    <view class="toe toe-3" />
-                    <view class="toe toe-4" />
-                    <view class="toe toe-5" />
+        <!-- ===== 配速 + 走路动画卡片 ===== -->
+        <view class="walker-card">
+            <view class="walker-header">
+                <view class="badge" :class="badgeClass">
+                    <view class="badge-dot" />
+                    <text>{{ walkerTip }}</text>
                 </view>
-                <view class="shadow" />
+                <text class="status">{{ statusHint }}</text>
             </view>
-            <view class="foot foot-right">
-                <view class="footprint">
-                    <view class="heel" />
-                    <view class="toe toe-1" />
-                    <view class="toe toe-2" />
-                    <view class="toe toe-3" />
-                    <view class="toe toe-4" />
-                    <view class="toe toe-5" />
-                </view>
-                <view class="shadow" />
-            </view>
-            <view class="ground" />
-            <text class="walker-tip">{{ walkerTip }}</text>
-        </view>
 
-        <view class="bpm-control">
-            <view class="step-btn big" @click="adjustBpm(-10)">
-                <text class="step-num">-10</text>
-            </view>
-            <view class="step-btn small" @click="adjustBpm(-1)">
-                <text class="step-num">-1</text>
-            </view>
-            <view class="step-btn small" @click="adjustBpm(1)">
-                <text class="step-num">+1</text>
-            </view>
-            <view class="step-btn big" @click="adjustBpm(10)">
-                <text class="step-num">+10</text>
+            <view class="walker" :class="{ playing: isPlaying }">
+                <view class="foot foot-left">
+                    <view class="footprint">
+                        <view class="heel" />
+                        <view class="toe toe-1" />
+                        <view class="toe toe-2" />
+                        <view class="toe toe-3" />
+                        <view class="toe toe-4" />
+                        <view class="toe toe-5" />
+                    </view>
+                    <view class="shadow" />
+                </view>
+                <view class="foot foot-right">
+                    <view class="footprint">
+                        <view class="heel" />
+                        <view class="toe toe-1" />
+                        <view class="toe toe-2" />
+                        <view class="toe toe-3" />
+                        <view class="toe toe-4" />
+                        <view class="toe toe-5" />
+                    </view>
+                    <view class="shadow" />
+                </view>
+                <view class="ground" />
             </view>
         </view>
 
-        <view class="meter-section">
-            <text class="section-label">每组拍数</text>
-            <view class="meter-options">
-                <view
-                    v-for="m in METER_OPTIONS"
-                    :key="m.value"
-                    class="meter-btn"
-                    :class="{ active: accentEvery === m.value }"
-                    @click="onMeterChange(m.value)"
-                >
-                    <text class="meter-label">{{ m.label }}</text>
+        <!-- ===== 控制卡片:BPM + 拍号 ===== -->
+        <view class="control-card">
+            <view class="bpm-row">
+                <view class="step-btn" @click="adjustBpm(-10)">
+                    <text class="step-num">−10</text>
+                </view>
+                <view class="step-btn" @click="adjustBpm(-1)">
+                    <text class="step-num">−1</text>
+                </view>
+                <view class="step-btn" @click="adjustBpm(1)">
+                    <text class="step-num">+1</text>
+                </view>
+                <view class="step-btn" @click="adjustBpm(10)">
+                    <text class="step-num">+10</text>
                 </view>
             </view>
-        </view>
 
-        <view class="hint">
-            <text>{{ statusHint }}</text>
+            <view class="divider" />
+
+            <view class="meter-row">
+                <text class="meter-label">每组拍数</text>
+                <view class="meter-options">
+                    <view
+                        v-for="m in METER_OPTIONS"
+                        :key="m.value"
+                        class="meter-btn"
+                        :class="{ active: accentEvery === m.value }"
+                        @click="onMeterChange(m.value)"
+                    >
+                        <text>{{ m.label }}</text>
+                    </view>
+                </view>
+            </view>
         </view>
     </view>
 </template>
@@ -89,9 +97,9 @@ import { onShow, onHide } from '@dcloudio/uni-app'
 import { useMetronome } from '@/hooks/useMetronome'
 
 const METER_OPTIONS = [
-    { label: '2 拍', value: 2 },
-    { label: '3 拍', value: 3 },
-    { label: '4 拍', value: 4 },
+    { label: '2', value: 2 },
+    { label: '3', value: 3 },
+    { label: '4', value: 4 },
 ]
 
 const metronome = useMetronome({
@@ -142,16 +150,22 @@ const statusHint = computed(() => {
         const cur = ((beatIndex.value - 1) % accentEvery.value) + 1
         return `第 ${cur} 拍 / 共 ${accentEvery.value} 拍`
     }
-    return '轻点圆圈开始'
+    return '轻点中央圆点开始'
 })
 
 const walkerTip = computed(() => {
-    if (!isPlaying.value) return '开始后跟节奏踏步'
-    if (bpm.value < 70) return '慢走 · 适合热身'
-    if (bpm.value < 100) return '健走 · 日常配速'
-    if (bpm.value < 130) return '快走 · 心率提升'
-    if (bpm.value < 170) return '慢跑 · 进入有氧'
-    return '快跑 · 高强度'
+    if (bpm.value < 70) return '慢走 · 热身'
+    if (bpm.value < 100) return '健走 · 日常'
+    if (bpm.value < 130) return '快走 · 提速'
+    if (bpm.value < 170) return '慢跑 · 有氧'
+    return '快跑 · 高强'
+})
+
+const badgeClass = computed(() => {
+    if (bpm.value < 100) return 'badge-mild'
+    if (bpm.value < 130) return 'badge-mid'
+    if (bpm.value < 170) return 'badge-strong'
+    return 'badge-hot'
 })
 
 onShow(() => {
@@ -171,52 +185,73 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.metronome-page {
+/* ============================================================
+ * 设计 token
+ * ============================================================ */
+$bg-grad: linear-gradient(180deg, #0a0f1c 0%, #141a2a 100%);
+$card-bg: rgba(255, 255, 255, 0.035);
+$card-border: rgba(255, 255, 255, 0.06);
+$text-1: #f1f5f9;
+$text-2: #cbd5e1;
+$text-3: #64748b;
+$brand: #22c55e;
+$brand-deep: #15803d;
+$accent: #f59e0b;
+$accent-deep: #b45309;
+$radius-card: 28rpx;
+$radius-btn: 20rpx;
+
+/* ============================================================
+ * 页面容器
+ * ============================================================ */
+.page {
     min-height: 100vh;
-    padding: 20rpx 32rpx 80rpx;
-    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
+    padding: 30rpx 28rpx 60rpx;
+    background: $bg-grad;
     display: flex;
     flex-direction: column;
     align-items: center;
-    color: #f1f5f9;
+    gap: 28rpx;
+    color: $text-1;
 }
 
-/* ===== 中心可点击圆 ===== */
-.pulse-stage {
+/* ============================================================
+ * 节拍器主舞台
+ * ============================================================ */
+.stage {
     position: relative;
-    width: 600rpx;
-    height: 600rpx;
-    margin: 40rpx 0 50rpx;
+    width: 540rpx;
+    height: 540rpx;
+    margin-top: 20rpx;
     display: flex;
     align-items: center;
     justify-content: center;
 
-    &:active .pulse-core {
+    &:active .core {
         transform: scale(0.97);
     }
 }
 
-.pulse-ring {
+.ring {
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    border: 4rpx solid rgba(34, 197, 94, 0.18);
+    border: 3rpx solid rgba(34, 197, 94, 0.14);
     pointer-events: none;
 
     &.playing {
         animation: ring-pulse var(--beat-duration, 750ms) ease-out infinite;
     }
-
-    &.pulse-ring-2 {
-        animation-delay: calc(var(--beat-duration, 750ms) * -0.4);
+    &.r2.playing {
+        animation-delay: calc(var(--beat-duration, 750ms) * -0.5);
     }
 }
 @keyframes ring-pulse {
     0% {
-        transform: scale(0.92);
-        opacity: 0.9;
-        border-color: rgba(34, 197, 94, 0.55);
+        transform: scale(0.94);
+        opacity: 0.85;
+        border-color: rgba(34, 197, 94, 0.45);
     }
     100% {
         transform: scale(1.18);
@@ -225,83 +260,59 @@ onUnmounted(() => {
     }
 }
 
-.pulse-core {
+.core {
     position: relative;
-    width: 460rpx;
-    height: 460rpx;
+    width: 420rpx;
+    height: 420rpx;
     border-radius: 50%;
-    background: linear-gradient(140deg, #22c55e 0%, #15803d 100%);
+    background: linear-gradient(140deg, $brand 0%, $brand-deep 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow:
-        inset 0 -20rpx 60rpx rgba(0, 0, 0, 0.18),
-        inset 0 20rpx 60rpx rgba(255, 255, 255, 0.12),
-        0 24rpx 60rpx rgba(34, 197, 94, 0.45);
-    transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
+        inset 0 -16rpx 50rpx rgba(0, 0, 0, 0.22),
+        inset 0 16rpx 50rpx rgba(255, 255, 255, 0.1),
+        0 20rpx 50rpx rgba(34, 197, 94, 0.32);
+    transition: transform 0.12s, background 0.18s, box-shadow 0.18s;
 
     &.playing {
         animation: core-beat var(--beat-duration, 750ms) ease-in-out infinite;
     }
 
     &.playing.accent {
-        background: linear-gradient(140deg, #fbbf24 0%, #b45309 100%);
+        background: linear-gradient(140deg, #fbbf24 0%, $accent-deep 100%);
         box-shadow:
-            inset 0 -20rpx 60rpx rgba(0, 0, 0, 0.18),
-            inset 0 20rpx 60rpx rgba(255, 255, 255, 0.18),
-            0 24rpx 60rpx rgba(245, 158, 11, 0.5);
+            inset 0 -16rpx 50rpx rgba(0, 0, 0, 0.22),
+            inset 0 16rpx 50rpx rgba(255, 255, 255, 0.18),
+            0 20rpx 50rpx rgba(245, 158, 11, 0.4);
     }
 
     .bpm-num {
-        font-size: 200rpx;
+        font-size: 180rpx;
         font-weight: 800;
         color: #fff;
         line-height: 1;
+        letter-spacing: -2rpx;
         font-variant-numeric: tabular-nums;
         text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.18);
     }
 
     .bpm-label {
-        font-size: 28rpx;
-        color: rgba(255, 255, 255, 0.7);
-        letter-spacing: 8rpx;
-        margin-top: 8rpx;
+        font-size: 22rpx;
+        color: rgba(255, 255, 255, 0.65);
+        letter-spacing: 6rpx;
+        margin-top: 10rpx;
+        font-weight: 600;
     }
 
-    /* ===== 中央播放/暂停 icon（CSS 几何绘制，跨机型一致） ===== */
-    .ctrl-icon {
-        margin-top: 36rpx;
-        width: 110rpx;
-        height: 90rpx;
+    .ctrl {
+        margin-top: 26rpx;
+        height: 76rpx;
         display: flex;
         align-items: center;
         justify-content: center;
     }
-
-    .icon-play {
-        width: 0;
-        height: 0;
-        border-left: 70rpx solid #fff;
-        border-top: 44rpx solid transparent;
-        border-bottom: 44rpx solid transparent;
-        margin-left: 16rpx;
-        filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.2));
-    }
-
-    .icon-pause {
-        display: flex;
-        gap: 22rpx;
-        height: 84rpx;
-
-        .bar {
-            width: 22rpx;
-            height: 100%;
-            background: #fff;
-            border-radius: 6rpx;
-            box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
-        }
-    }
 }
 @keyframes core-beat {
     0%,
@@ -309,55 +320,132 @@ onUnmounted(() => {
         transform: scale(1);
     }
     50% {
-        transform: scale(1.045);
+        transform: scale(1.04);
     }
 }
 
-/* ===== 脚步行走动画 ===== */
+/* 播放/暂停 icon (CSS 几何) */
+.icon-play {
+    width: 0;
+    height: 0;
+    border-left: 60rpx solid #fff;
+    border-top: 38rpx solid transparent;
+    border-bottom: 38rpx solid transparent;
+    margin-left: 14rpx;
+    filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.2));
+}
+.icon-pause {
+    display: flex;
+    gap: 18rpx;
+    height: 70rpx;
+
+    .bar {
+        width: 18rpx;
+        height: 100%;
+        background: #fff;
+        border-radius: 5rpx;
+        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
+    }
+}
+
+/* ============================================================
+ * 走路动画卡片
+ * ============================================================ */
+.walker-card {
+    width: 100%;
+    background: $card-bg;
+    border: 1rpx solid $card-border;
+    border-radius: $radius-card;
+    padding: 24rpx 28rpx 32rpx;
+    backdrop-filter: blur(20rpx);
+}
+
+.walker-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12rpx;
+}
+
+.badge {
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+    padding: 8rpx 20rpx;
+    background: rgba(34, 197, 94, 0.12);
+    border: 1rpx solid rgba(34, 197, 94, 0.3);
+    border-radius: 999rpx;
+    font-size: 24rpx;
+    color: $brand;
+    font-weight: 600;
+
+    .badge-dot {
+        width: 12rpx;
+        height: 12rpx;
+        border-radius: 50%;
+        background: currentColor;
+        box-shadow: 0 0 8rpx currentColor;
+    }
+
+    &.badge-mild {
+        background: rgba(34, 197, 94, 0.12);
+        border-color: rgba(34, 197, 94, 0.3);
+        color: #4ade80;
+    }
+    &.badge-mid {
+        background: rgba(251, 191, 36, 0.12);
+        border-color: rgba(251, 191, 36, 0.3);
+        color: #fbbf24;
+    }
+    &.badge-strong {
+        background: rgba(249, 115, 22, 0.12);
+        border-color: rgba(249, 115, 22, 0.3);
+        color: #fb923c;
+    }
+    &.badge-hot {
+        background: rgba(239, 68, 68, 0.14);
+        border-color: rgba(239, 68, 68, 0.32);
+        color: #f87171;
+    }
+}
+
+.status {
+    font-size: 24rpx;
+    color: $text-3;
+    letter-spacing: 1rpx;
+}
+
 .walker {
     position: relative;
     width: 100%;
-    height: 220rpx;
-    margin-bottom: 50rpx;
+    height: 200rpx;
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    overflow: hidden;
 }
 
 .walker .ground {
     position: absolute;
-    bottom: 36rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 480rpx;
-    height: 2rpx;
+    bottom: 18rpx;
+    left: 10%;
+    right: 10%;
+    height: 1rpx;
     background: linear-gradient(
         90deg,
-        transparent,
-        rgba(34, 197, 94, 0.45) 30%,
-        rgba(34, 197, 94, 0.45) 70%,
-        transparent
+        transparent 0%,
+        rgba(255, 255, 255, 0.18) 30%,
+        rgba(255, 255, 255, 0.18) 70%,
+        transparent 100%
     );
 }
 
-.walker .walker-tip {
-    position: absolute;
-    top: 12rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 28rpx;
-    color: #cbd5e1;
-    letter-spacing: 2rpx;
-    padding: 6rpx 24rpx;
-    background: rgba(255, 255, 255, 0.06);
-    border-radius: 24rpx;
-}
-
+/* ============================================================
+ * 拟真脚印(单色,内敛)
+ * ============================================================ */
 .foot {
     position: absolute;
-    bottom: 36rpx;
-    width: 110rpx;
+    bottom: 18rpx;
+    width: 100rpx;
     height: 130rpx;
 
     .footprint {
@@ -367,86 +455,84 @@ onUnmounted(() => {
         transform-origin: bottom center;
     }
 
-    /* 脚跟+脚掌:一颗椭圆形 */
+    /* 脚跟+脚掌一体椭圆,不规则更像真实脚印 */
     .heel {
         position: absolute;
-        bottom: 4rpx;
+        bottom: 0;
         left: 50%;
         transform: translateX(-50%);
-        width: 78rpx;
-        height: 90rpx;
-        background: linear-gradient(135deg, #22c55e, #16a34a);
-        border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
-        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
+        width: 72rpx;
+        height: 86rpx;
+        background: rgba(241, 245, 249, 0.92);
+        border-radius: 48% 48% 50% 50% / 56% 56% 44% 44%;
     }
 
-    /* 5 个脚趾(右脚视角:从左到右大→小) */
+    /* 5 个脚趾 - 紧贴脚掌,大小递减,呈弧形排布 */
     .toe {
         position: absolute;
-        background: #16a34a;
+        background: rgba(241, 245, 249, 0.92);
         border-radius: 50%;
     }
     .toe-1 {
+        /* 大脚趾,内侧最大 */
         width: 22rpx;
-        height: 24rpx;
-        bottom: 96rpx;
-        left: 18rpx;
+        height: 22rpx;
+        bottom: 86rpx;
+        left: 16rpx;
     }
     .toe-2 {
         width: 18rpx;
-        height: 20rpx;
-        bottom: 102rpx;
-        left: 40rpx;
+        height: 18rpx;
+        bottom: 92rpx;
+        left: 36rpx;
     }
     .toe-3 {
         width: 16rpx;
-        height: 18rpx;
-        bottom: 100rpx;
-        left: 58rpx;
+        height: 16rpx;
+        bottom: 92rpx;
+        left: 52rpx;
     }
     .toe-4 {
         width: 14rpx;
-        height: 16rpx;
-        bottom: 94rpx;
-        left: 72rpx;
+        height: 14rpx;
+        bottom: 88rpx;
+        left: 66rpx;
     }
     .toe-5 {
+        /* 小脚趾,外侧最小 */
         width: 12rpx;
-        height: 14rpx;
-        bottom: 86rpx;
-        left: 84rpx;
+        height: 12rpx;
+        bottom: 82rpx;
+        left: 78rpx;
     }
 
     .shadow {
         position: absolute;
-        bottom: -8rpx;
+        bottom: -6rpx;
         left: 50%;
-        transform: translateX(-50%) scaleX(1);
-        width: 90rpx;
-        height: 12rpx;
+        transform: translateX(-50%);
+        width: 76rpx;
+        height: 8rpx;
         background: radial-gradient(
             ellipse at center,
-            rgba(0, 0, 0, 0.4),
+            rgba(0, 0, 0, 0.45),
             transparent 70%
         );
         border-radius: 50%;
     }
 }
 
-/* 左脚:置左,内层 footprint 镜像翻转(大脚趾朝外侧) */
 .foot-left {
-    left: calc(50% - 130rpx);
+    left: calc(50% - 124rpx);
 }
 .foot-left .footprint {
     transform: scaleX(-1);
 }
-
-/* 右脚:置右 */
 .foot-right {
-    left: calc(50% + 20rpx);
+    left: calc(50% + 24rpx);
 }
 
-/* 跟节拍同步:1 拍 1 步,左右各占半周期(0.5 偏移) */
+/* 跟节拍同步:1 拍 1 步,左右各占半周期 */
 .walker.playing {
     .foot-left .footprint {
         animation: foot-step-left var(--step-duration, 750ms) ease-in-out infinite;
@@ -470,7 +556,7 @@ onUnmounted(() => {
         transform: translateY(0) rotate(0deg);
     }
     25% {
-        transform: translateY(-44rpx) rotate(8deg);
+        transform: translateY(-40rpx) rotate(8deg);
     }
     50% {
         transform: translateY(-2rpx) rotate(0deg);
@@ -479,15 +565,13 @@ onUnmounted(() => {
         transform: translateY(0) rotate(0deg);
     }
 }
-
-/* 左脚保留 scaleX(-1) 镜像 */
 @keyframes foot-step-left {
     0%,
     100% {
         transform: scaleX(-1) translateY(0) rotate(0deg);
     }
     25% {
-        transform: scaleX(-1) translateY(-44rpx) rotate(8deg);
+        transform: scaleX(-1) translateY(-40rpx) rotate(8deg);
     }
     50% {
         transform: scaleX(-1) translateY(-2rpx) rotate(0deg);
@@ -496,7 +580,6 @@ onUnmounted(() => {
         transform: scaleX(-1) translateY(0) rotate(0deg);
     }
 }
-
 @keyframes shadow-pulse {
     0%,
     100% {
@@ -504,105 +587,109 @@ onUnmounted(() => {
         transform: translateX(-50%) scaleX(1);
     }
     25% {
-        /* 抬脚最高时阴影最淡最小 */
-        opacity: 0.15;
-        transform: translateX(-50%) scaleX(0.55);
+        opacity: 0.18;
+        transform: translateX(-50%) scaleX(0.5);
     }
     50% {
-        /* 落地瞬间阴影最浓 */
         opacity: 0.7;
-        transform: translateX(-50%) scaleX(1.1);
+        transform: translateX(-50%) scaleX(1.08);
     }
 }
 
-/* ===== BPM 步进按钮 ===== */
-.bpm-control {
+/* ============================================================
+ * 控制卡片(BPM + 拍号)
+ * ============================================================ */
+.control-card {
     width: 100%;
+    background: $card-bg;
+    border: 1rpx solid $card-border;
+    border-radius: $radius-card;
+    padding: 28rpx;
+    backdrop-filter: blur(20rpx);
+}
+
+.bpm-row {
     display: flex;
-    justify-content: center;
-    gap: 20rpx;
-    margin-bottom: 60rpx;
+    gap: 14rpx;
 }
 
 .step-btn {
     flex: 1;
-    height: 120rpx;
-    border-radius: 24rpx;
-    background: rgba(255, 255, 255, 0.08);
-    border: 2rpx solid rgba(255, 255, 255, 0.12);
+    height: 96rpx;
+    border-radius: $radius-btn;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1rpx solid rgba(255, 255, 255, 0.08);
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: all 0.15s;
 
     &:active {
-        background: rgba(34, 197, 94, 0.25);
-        border-color: #22c55e;
+        background: rgba(34, 197, 94, 0.18);
+        border-color: rgba(34, 197, 94, 0.5);
+        transform: scale(0.96);
     }
 
     .step-num {
-        font-size: 44rpx;
-        color: #f1f5f9;
+        font-size: 38rpx;
+        color: $text-1;
         font-weight: 700;
         font-variant-numeric: tabular-nums;
-    }
-
-    &.big .step-num {
-        font-size: 48rpx;
+        letter-spacing: -1rpx;
     }
 }
 
-/* ===== 拍号 ===== */
-.meter-section {
-    width: 100%;
+.divider {
+    height: 1rpx;
+    background: rgba(255, 255, 255, 0.06);
+    margin: 24rpx 0;
 }
 
-.section-label {
-    display: block;
-    font-size: 28rpx;
-    color: #94a3b8;
-    margin-bottom: 20rpx;
-    text-align: center;
+.meter-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20rpx;
+}
+
+.meter-label {
+    font-size: 26rpx;
+    color: $text-3;
+    letter-spacing: 1rpx;
 }
 
 .meter-options {
     display: flex;
-    gap: 20rpx;
+    gap: 10rpx;
+    background: rgba(255, 255, 255, 0.04);
+    padding: 6rpx;
+    border-radius: 999rpx;
+    border: 1rpx solid rgba(255, 255, 255, 0.05);
+}
+
+.meter-btn {
+    min-width: 84rpx;
+    height: 60rpx;
+    padding: 0 20rpx;
+    border-radius: 999rpx;
+    display: flex;
+    align-items: center;
     justify-content: center;
+    transition: all 0.18s;
 
-    .meter-btn {
-        flex: 1;
-        max-width: 180rpx;
-        height: 100rpx;
-        background: rgba(255, 255, 255, 0.06);
-        border: 2rpx solid rgba(255, 255, 255, 0.1);
-        border-radius: 20rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+    text {
+        font-size: 30rpx;
+        color: $text-2;
+        font-weight: 600;
+    }
 
-        .meter-label {
-            font-size: 36rpx;
-            color: #cbd5e1;
-        }
+    &.active {
+        background: $brand;
+        box-shadow: 0 4rpx 12rpx rgba(34, 197, 94, 0.4);
 
-        &.active {
-            background: #22c55e;
-            border-color: #22c55e;
-
-            .meter-label {
-                color: #fff;
-                font-weight: 600;
-            }
+        text {
+            color: #fff;
         }
     }
 }
-
-/* ===== 状态提示 ===== */
-.hint {
-    text-align: center;
-    font-size: 26rpx;
-    color: #64748b;
-    margin-top: 32rpx;
-    height: 40rpx;
-}
 </style>