fix(metronome): 顶部色协调 + 视频边缘柔化 + 节拍音加大
NavBar 颜色协调: - 节拍器页 navigationBarBackgroundColor 从 #0f172a 暗色 改为 #f8fafc,跟页面背景纯色一致,顶部不再撕裂 - 文字色改 black,补 backgroundColor 防止下拉露出底色 视频边缘柔化(去掉硬切感): - 页面背景从渐变改为纯色 #f8fafc,让 box-shadow 颜色稳定 - walker-clip 加 box-shadow 0 0 30rpx 12rpx #f8fafc 圆形外圈"消融"到背景里,不再有硬边框感 - video transform: scale(1.1) → 1.4 让 video 自带的灰白渐变边和右上角原生 PIP/小窗按钮 全部被推到圆外,被 overflow:hidden 切掉 节拍音重做(响度+音色): - 时长从 0.13s 缩到 0.085s,去掉衰减尾巴更干脆 - 加 5ms white-noise burst 模拟敲击瞬间的"tk"音头 - volume 拉到 6 倍 + alimiter 限 0.98 防爆音 - 实测峰值从 -13.5dB 推到 0dB(满量程), mean 从 -26dB 提到 -19dB,听感响度约翻倍 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -80,8 +80,9 @@
|
||||
"path": "pages/training/metronome",
|
||||
"style": {
|
||||
"navigationBarTitleText": "节拍器",
|
||||
"navigationBarBackgroundColor": "#0f172a",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#f8fafc",
|
||||
"navigationBarTextStyle": "black",
|
||||
"backgroundColor": "#f8fafc",
|
||||
"disableScroll": true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -255,7 +255,7 @@ onUnmounted(() => {
|
||||
/* ============================================================
|
||||
* 设计 token —— 浅色清爽
|
||||
* ============================================================ */
|
||||
$bg-grad: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
|
||||
$bg-color: #f8fafc;
|
||||
$card-bg: #ffffff;
|
||||
$card-border: rgba(15, 23, 42, 0.06);
|
||||
$text-1: #0f172a;
|
||||
@@ -279,7 +279,7 @@ $shadow-md: 0 12rpx 28rpx rgba(15, 23, 42, 0.08);
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 28rpx 80rpx;
|
||||
background: $bg-grad;
|
||||
background: $bg-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -433,17 +433,25 @@ $shadow-md: 0 12rpx 28rpx rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.walker-clip {
|
||||
/* 圆形蒙版裁掉 video 的灰白边 + 隐藏右上角原生小窗按钮 */
|
||||
/* 圆形蒙版裁掉 video 的灰白边 + 隐藏右上角原生小窗按钮
|
||||
外圈柔化阴影颜色等于页面背景,圆形边缘自然消融到背景里
|
||||
视觉上不再有硬切感的"边框"
|
||||
*/
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 0 0 6rpx $bg-color,
|
||||
0 0 30rpx 12rpx $bg-color;
|
||||
}
|
||||
|
||||
.runner-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scale(1.1);
|
||||
/* scale 1.4: 把 video 内容放大,让自带的灰白渐变边和右上角原生
|
||||
PIP/小窗按钮全部被推到圆形外,被 overflow:hidden 切掉 */
|
||||
transform: scale(1.4);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user