diff --git a/TUICallKit-Vue3/pages/training/metronome.vue b/TUICallKit-Vue3/pages/training/metronome.vue
index 997c18ff..be4cf91f 100644
--- a/TUICallKit-Vue3/pages/training/metronome.vue
+++ b/TUICallKit-Vue3/pages/training/metronome.vue
@@ -431,39 +431,45 @@ $shadow-md: 0 12rpx 28rpx rgba(15, 23, 42, 0.08);
  * ============================================================ */
 .walker {
     width: 100%;
-    height: 240rpx;
+    height: 260rpx;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .walker-box {
-    /* 矩形容器,小人完整显示,不再裁切
-       background 跟页面色一致,让 video 灰白渐变边自然融入背景 */
+    /* 1:1 矩形,跟 video 内容比例一致,消除左右黑边
+       background 设成 video 内容右上角的浅灰白色,
+       万一还有 1rpx 缝隙也不会出现刺眼黑边 */
     position: relative;
-    width: 280rpx;
-    height: 240rpx;
-    background: $bg-color;
+    width: 260rpx;
+    height: 260rpx;
+    background: #e8ecf2;
     border-radius: 24rpx;
     overflow: hidden;
+    box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.06);
 }
 
 .runner-video {
     width: 100%;
     height: 100%;
-    background: transparent;
+    /* 微信 native video 自身默认是 #000 黑底,父容器 bg 在 web 看不到,
+       只能让 video 占满 + 让父 bg 跟 video 内容色融合 */
+    background: #e8ecf2;
 }
 
 /* 覆盖在 video 右上角原生 PIP/小窗按钮上的色块
+   颜色取 video 内容右上角的浅灰白渐变(#dde2eb 左右),让色块融入视频画面
    仅小程序端有效(cover-view 是小程序唯一能盖住 native 组件的元素) */
 .pip-mask {
     position: absolute;
     top: 0;
     right: 0;
-    width: 86rpx;
-    height: 64rpx;
-    background: $bg-color;
-    border-bottom-left-radius: 24rpx;
+    width: 80rpx;
+    height: 56rpx;
+    background-color: #dde2eb;
+    border-bottom-left-radius: 18rpx;
+    border-top-right-radius: 24rpx;
 }
 
 /* ============================================================