17638755181/fitness-coach
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Kinetic Dark 设计语言 + Lucide 图标迁移 + 首页轻量个性化

Browse Source 
- 建立 Lucide 子集 iconfont（49 字形），全站 emoji 替换为 fc-icon 组件
- 重塑 Design Token（冷中性近黑底 + Volt 荧光绿 #B6F24E），消除硬编码颜色
- 首页登录后个性化：我的计划 / 我的收藏 / 今日推荐（纯前端复用现有 API）
- 后端 DEFAULT_EMOJI→Lucide 名，PALETTE 对齐 Kinetic Dark 语义色板
- 修复 person-standing 缺失字形；14 个官方组合 seed emoji 全部映射到现有字形
This commit is contained in:
王明
2026-07-22 21:38:56 +08:00
parent ca0af6f7d2
commit b94eb706ff
64 changed files with 1572 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
miniprogram/pages/index/index.wxss
View File

@@ -2,59 +2,92 @@
.hero {
padding: 20rpx 40rpx 48rpx;
background: linear-gradient(150deg, #1C2A22 0%, #0E1110 70%);
background: linear-gradient(160deg, var(--surface) 0%, var(--bg) 70%);
border-bottom-left-radius: 48rpx;
border-bottom-right-radius: 48rpx;
}
.hero__eyebrow { color: var(--gold); font-size: 22rpx; letter-spacing: 4rpx; }
.hero__title { font-size: 56rpx; font-weight: 700; letter-spacing: 2rpx; margin-top: 14rpx; color: var(--text); }
.hero__sub { font-size: 26rpx; color: var(--text-2); margin-top: 14rpx; }
.hero__eyebrow { color: var(--accent); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-semibold); }
.hero__title { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: var(--ls-title); margin-top: 14rpx; color: var(--text); }
.hero__sub { font-size: var(--fs-sm); color: var(--text-2); margin-top: 14rpx; }
.search-pill {
margin-top: 36rpx;
display: flex; align-items: center;
background: var(--surface); border: 1rpx solid var(--line);
border-radius: 999rpx; padding: 22rpx 30rpx;
border-radius: var(--radius-pill); padding: 22rpx 30rpx;
}
.search-pill__icon { font-size: 30rpx; margin-right: 16rpx; }
.search-pill__ph { color: var(--text-3); font-size: 28rpx; }
.search-pill__ph { color: var(--text-3); font-size: var(--fs-base); }
.cta {
margin-top: 24rpx;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
color: #0E1110; font-weight: 700; font-size: 32rpx;
border-radius: 999rpx; padding: 28rpx;
box-shadow: 0 12rpx 30rpx rgba(217,179,108,0.28);
color: var(--accent-on); font-weight: 700; font-size: var(--fs-lg);
border-radius: var(--radius-pill); padding: 28rpx;
box-shadow: var(--shadow-glow);
}
.cta__icon { margin-right: 12rpx; }
.cta__arrow { margin-left: 12rpx; font-size: 36rpx; }
.quick__grid { display: flex; flex-wrap: wrap; gap: 18rpx; }
.quick__grid { display: flex; flex-wrap: wrap; gap: 16rpx; }
.quick__tile {
width: calc((100% - 36rpx) / 3);
width: calc((100% - 32rpx) / 3);
background: var(--surface); border: 1rpx solid var(--line);
border-radius: var(--radius); padding: 28rpx 18rpx;
display: flex; flex-direction: column; align-items: center;
position: relative; overflow: hidden;
transition: background var(--motion-fast) var(--ease);
}
.quick__tile:active { background: var(--surface-2); }
.quick__tile::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 0%, var(--gold-soft), transparent 70%);
}
.quick__emoji { font-size: 48rpx; position: relative; z-index: 1; }
.quick__label { font-size: 26rpx; margin-top: 12rpx; color: var(--text); position: relative; z-index: 1; }
/* ===== 为你准备（个性化） ===== */
.personal__head { display: flex; align-items: center; justify-content: space-between; }
.personal__hi { font-size: var(--fs-xl); font-weight: 600; color: var(--text); margin-top: 6rpx; }
.personal__sub { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; margin: 28rpx 0 16rpx; }
.plan-row { display: flex; flex-direction: column; gap: 12rpx; }
.plan-chip {
display: flex; align-items: center; gap: 16rpx;
background: var(--surface); border: 1rpx solid var(--line);
border-radius: var(--radius); padding: 20rpx 24rpx;
}
.plan-chip:active { background: var(--surface-2); }
.plan-chip__body { display: flex; flex-direction: column; }
.plan-chip__name { font-size: var(--fs-base); color: var(--text); font-weight: 600; }
.plan-chip__meta { font-size: 22rpx; color: var(--text-3); margin-top: 4rpx; }
.rec-row { display: flex; flex-direction: column; gap: 12rpx; }
.rec-item {
display: flex; align-items: center; justify-content: space-between;
background: var(--surface); border: 1rpx solid var(--line);
border-radius: var(--radius); padding: 20rpx 24rpx;
}
.rec-item:active { background: var(--surface-2); }
.rec-item__body { display: flex; flex-direction: column; }
.rec-item__name { font-size: var(--fs-base); color: var(--text); font-weight: 600; }
.rec-item__reason { font-size: 22rpx; color: var(--accent); margin-top: 4rpx; }
.fav-scroll { white-space: nowrap; margin-top: 4rpx; }
.fav-card { display: inline-flex; flex-direction: column; width: 200rpx; margin-right: 16rpx; vertical-align: top; }
.fav-card__img {
width: 200rpx; height: 200rpx; border-radius: var(--radius);
background: var(--surface-2); border: 1rpx solid var(--line);
}
.fav-card__name { font-size: 24rpx; color: var(--text-2); margin-top: 10rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hscroll { white-space: nowrap; margin-top: 8rpx; }
.hscroll__item { display: inline-block; width: 300rpx; margin-right: 20rpx; vertical-align: top; }
.chip-scroll { white-space: nowrap; margin-top: 8rpx; }
.prog {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
min-width: 160rpx; padding: 24rpx 28rpx; margin-right: 18rpx;
min-width: 160rpx; padding: 24rpx 28rpx; margin-right: 16rpx;
border-radius: var(--radius-sm); border: 1rpx solid;
}
.prog__emoji { font-size: 44rpx; }
.prog__name { font-size: 26rpx; font-weight: 700; margin-top: 10rpx; }
.bp-grid { display: flex; flex-wrap: wrap; gap: 16rpx; }
@@ -70,9 +103,9 @@
.eq {
display: inline-flex; align-items: center; gap: 12rpx;
background: var(--surface-2); border: 1rpx solid var(--line);
border-radius: 999rpx; padding: 16rpx 28rpx; margin-right: 16rpx;
border-radius: var(--radius-pill); padding: 16rpx 28rpx; margin-right: 16rpx;
}
.eq__name { font-size: 26rpx; color: var(--text); }
.eq__count { font-size: 22rpx; color: var(--gold); }
.eq__count { font-size: 22rpx; color: var(--accent); }
.empty { color: var(--text-3); font-size: 26rpx; text-align: center; padding: 40rpx 0; }
.empty { color: var(--text-3); font-size: var(--fs-sm); text-align: center; padding: 40rpx 0; }