feat(leaderboard): 新增耐力榜(全局单次最久 top10) + 领奖台日期两行 + 顶部哲理文案

- 云函数支持 endurance 周期:遍历全部 records 取 max(duration) 及 bestDate
- 客户端新增耐力榜 tab(maxRank=10),未上榜时在底部 my-bar 显示最佳成绩+产生时间
- 领奖台底座(耐力榜)单次日期拆成「日期+时间」两行,统一三阶底座高度修复第3名贴顶
- 领奖台顶部新增哲理文案,配置进 config.js(leaderboardPodiumSlogan),斜体金句卡片样式
This commit is contained in:
2026-07-31 09:30:30 +08:00
parent fca3e32d04
commit 1589d6c387
5 changed files with 174 additions and 30 deletions
+41 -6
View File
@@ -69,6 +69,23 @@
opacity: 0.6;
}
/* 耐力榜领奖台顶部文案:哲理注脚,主色呼应 + 金句卡片质感 */
.podium-slogan {
position: relative;
margin: 8rpx 32rpx 4rpx;
padding: 22rpx 28rpx 24rpx;
text-align: center;
font-size: 24rpx;
line-height: 1.65;
color: var(--text);
font-weight: 500;
font-style: italic;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.10), rgba(var(--primary-rgb), 0.03));
border: 1rpx solid rgba(var(--primary-rgb), 0.16);
border-radius: 18rpx;
box-shadow: 0 4rpx 14rpx rgba(var(--primary-rgb), 0.10);
}
/* ---- podium (top 3) ---- */
.podium {
display: flex;
@@ -194,14 +211,32 @@
stepped base heights (the podium itself is bottom-aligned via flex-end). */
.podium-base__label {
position: absolute;
left: 0;
right: 0;
bottom: 10rpx;
left: 4rpx;
right: 4rpx;
bottom: 6rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: 22rpx;
font-weight: 700;
color: var(--text);
line-height: 1;
line-height: 1.15;
}
/* 耐力榜副标签(单次日期)在领奖台底座上拆成「日期 + 时间」两行。
缩小字号 + 抬高最矮的第 3 名底座(48→64rpx),三阶统一为 96/80/64,
让两行文字在各级底座内都垂直居中、不贴顶(含微信字体缩放余量)。 */
.podium-base__date {
font-size: 18rpx;
line-height: 1.15;
}
.podium-base__time {
font-size: 16rpx;
line-height: 1.1;
opacity: 0.85;
margin-top: 2rpx;
}
.podium-dur {
@@ -232,12 +267,12 @@
box-shadow: 0 6rpx 18rpx rgba(250, 140, 22, 0.30), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.45);
}
.podium-base--second {
height: 64rpx;
height: 80rpx;
background: linear-gradient(180deg, rgba(201, 205, 212, 0.50), rgba(140, 140, 140, 0.16));
box-shadow: 0 6rpx 18rpx rgba(140, 140, 140, 0.22), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.45);
}
.podium-base--third {
height: 48rpx;
height: 64rpx;
background: linear-gradient(180deg, rgba(232, 160, 106, 0.50), rgba(212, 107, 8, 0.16));
box-shadow: 0 6rpx 18rpx rgba(212, 107, 8, 0.22), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.45);
}