diff --git a/TUICallKit-Vue3/pages/training/metronome.vue b/TUICallKit-Vue3/pages/training/metronome.vue index a2c9eb94..997c18ff 100644 --- a/TUICallKit-Vue3/pages/training/metronome.vue +++ b/TUICallKit-Vue3/pages/training/metronome.vue @@ -17,9 +17,9 @@ - + - + @@ -426,35 +431,41 @@ $shadow-md: 0 12rpx 28rpx rgba(15, 23, 42, 0.08); * ============================================================ */ .walker { width: 100%; - height: 220rpx; + height: 240rpx; display: flex; justify-content: center; align-items: center; } -.walker-clip { - /* 圆形蒙版裁掉 video 的灰白边 + 隐藏右上角原生小窗按钮 - 外圈柔化阴影颜色等于页面背景,圆形边缘自然消融到背景里 - 视觉上不再有硬切感的"边框" - */ - width: 220rpx; - height: 220rpx; - border-radius: 50%; +.walker-box { + /* 矩形容器,小人完整显示,不再裁切 + background 跟页面色一致,让 video 灰白渐变边自然融入背景 */ + position: relative; + width: 280rpx; + height: 240rpx; + background: $bg-color; + border-radius: 24rpx; overflow: hidden; - box-shadow: - 0 0 0 6rpx $bg-color, - 0 0 30rpx 12rpx $bg-color; } .runner-video { width: 100%; height: 100%; - /* scale 1.4: 把 video 内容放大,让自带的灰白渐变边和右上角原生 - PIP/小窗按钮全部被推到圆形外,被 overflow:hidden 切掉 */ - transform: scale(1.4); background: transparent; } +/* 覆盖在 video 右上角原生 PIP/小窗按钮上的色块 + 仅小程序端有效(cover-view 是小程序唯一能盖住 native 组件的元素) */ +.pip-mask { + position: absolute; + top: 0; + right: 0; + width: 86rpx; + height: 64rpx; + background: $bg-color; + border-bottom-left-radius: 24rpx; +} + /* ============================================================ * 三档位推荐 * ============================================================ */