feat(ui): 记录页月份联动与多项 UI 美化/修复
- records: 底部列表与月份选择器联动,新增 [本月|最近] 分段控件;标题/空态随模式切换 - leaderboard: 领奖台布局(冠军居中+皇冠)、次数标注于底座且三档水平对齐;头像 cloud:// 批量预解析提速(云函数需重新部署) - index/timer: 主色底图标改白色变体修复隐形;目标数字按微信字体缩放补偿真机遮挡 - settings: 配色方案横滑渐变色卡;头像上传前压缩至 200px - theme: 新增 teal 主题;暗黑背景统一对齐 - 圆形头像双保险(image 自身 border-radius)修复月/年榜方图 注: cloudfunctions/leaderboard 改动须在开发者工具重新部署才生效。
This commit is contained in:
+24
-12
@@ -54,8 +54,11 @@
|
||||
.streak-num {
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
line-height: 1.1;
|
||||
/* On the gradient hero card --text cascades to white; on any plain card it
|
||||
stays dark, so var(--text) reads correctly in both contexts. We must NOT
|
||||
use var(--primary) here — that would be orange-on-orange and invisible. */
|
||||
color: var(--text);
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.streak-label {
|
||||
@@ -114,7 +117,9 @@
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary), var(--primary-light));
|
||||
/* On the gradient hero card --on-primary (white) overrides the fallback,
|
||||
so the fill stays visible instead of blending into the orange card. */
|
||||
background: var(--on-primary, linear-gradient(90deg, var(--primary), var(--primary-light)));
|
||||
border-radius: 4rpx;
|
||||
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
@@ -126,9 +131,9 @@
|
||||
top: -4rpx;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: var(--primary);
|
||||
background: var(--on-primary, var(--primary));
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10rpx var(--primary);
|
||||
box-shadow: 0 0 10rpx var(--on-primary, var(--primary));
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
@@ -167,20 +172,27 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.02));
|
||||
border: 4rpx solid rgba(var(--primary-rgb), 0.15);
|
||||
margin-bottom: 16rpx;
|
||||
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.10), rgba(var(--primary-rgb), 0.03));
|
||||
border: 6rpx solid rgba(var(--primary-rgb), 0.18);
|
||||
box-shadow: 0 0 0 14rpx rgba(var(--primary-rgb), 0.05);
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.target-time {
|
||||
font-size: 64rpx;
|
||||
font-weight: 700;
|
||||
font-size: 84rpx;
|
||||
font-weight: 800;
|
||||
color: var(--primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -1rpx;
|
||||
line-height: 1;
|
||||
max-width: 240rpx;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.target-unit {
|
||||
|
||||
Reference in New Issue
Block a user