From 5aa0cda25217ccc7e0272a03378f6b8834014c3c Mon Sep 17 00:00:00 2001
From: long <452591453@qq.com>
Date: Mon, 25 May 2026 18:17:59 +0800
Subject: [PATCH] =?UTF-8?q?fix(metronome):=20=E8=A7=86=E9=A2=91=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E6=B6=88=E9=99=A4=E9=BB=91=E8=BE=B9=20+=20PIP=20?=
 =?UTF-8?q?=E9=81=AE=E7=BD=A9=E8=9E=8D=E5=85=A5=E7=94=BB=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

黑边原因:容器 280×240 跟 video 内容 1:1 不匹配,
微信 native video 默认 #000 底色从两侧露出来。

修复:
- walker-box 改成 260×260 正方形,跟视频比例一致,
  contain 模式下视频撑满整个容器,左右没缝隙
- 容器和 video 的 background 都设成 #e8ecf2
  (匹配视频右上角浅灰白渐变),万一还有 1rpx 缝也不刺眼
- 容器加微妙的 box-shadow,跟下方档位卡片视觉对齐

PIP/小窗按钮遮罩融入视频画面:
- cover-view 颜色从页面色 #f8fafc 改成 #dde2eb
  (匹配视频右上角的浅灰渐变中间色)
- 盖在 video 上就像视频画面的一部分,看不出是色块
- 尺寸缩到 80×56 刚好覆盖 PIP 按钮,不多遮挡画面
- 左下加 18rpx 圆角让边缘柔和过渡

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

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;
 }
 
 /* ============================================================