- 建立 Lucide 子集 iconfont(49 字形),全站 emoji 替换为 fc-icon 组件 - 重塑 Design Token(冷中性近黑底 + Volt 荧光绿 #B6F24E),消除硬编码颜色 - 首页登录后个性化:我的计划 / 我的收藏 / 今日推荐(纯前端复用现有 API) - 后端 DEFAULT_EMOJI→Lucide 名,PALETTE 对齐 Kinetic Dark 语义色板 - 修复 person-standing 缺失字形;14 个官方组合 seed emoji 全部映射到现有字形
47 lines
2.3 KiB
Plaintext
47 lines
2.3 KiB
Plaintext
.page { min-height: 100vh; background: var(--bg-grad); }
|
|
.topbar { height: 88rpx; display: flex; align-items: center; position: relative; padding: 0 24rpx; }
|
|
.topbar__back { font-size: 56rpx; color: var(--gold); width: 60rpx; line-height: 1; }
|
|
.topbar__title { position: absolute; left: 0; right: 0; text-align: center; font-size: 34rpx; font-weight: 700; color: var(--text); }
|
|
|
|
.hero2 { padding: 12rpx 40rpx 28rpx; }
|
|
.hero2__eyebrow { color: var(--gold); font-size: 22rpx; letter-spacing: 4rpx; }
|
|
.hero2__title { font-size: 48rpx; font-weight: 700; margin-top: 12rpx; }
|
|
.hero2__sub { font-size: 26rpx; color: var(--text-2); margin-top: 12rpx; }
|
|
|
|
.group { margin-bottom: 36rpx; }
|
|
.group__label { margin-bottom: 18rpx; }
|
|
.group__chips { display: flex; flex-wrap: wrap; gap: 16rpx; }
|
|
.tgt {
|
|
display: inline-flex; align-items: center; gap: 10rpx;
|
|
background: var(--surface); border: 1rpx solid var(--line);
|
|
border-radius: 999rpx; padding: 16rpx 28rpx; font-size: 26rpx; color: var(--text);
|
|
}
|
|
.tgt--active { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-2); }
|
|
.tgt__count { font-size: 22rpx; color: var(--text-3); }
|
|
.tgt--active .tgt__count { color: var(--gold); }
|
|
|
|
.confirm {
|
|
position: fixed; left: 0; right: 0; bottom: 0;
|
|
padding: 20rpx 32rpx;
|
|
background: var(--bar-bg);
|
|
backdrop-filter: blur(12px);
|
|
border-top: 1rpx solid var(--line);
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
}
|
|
.confirm__bar { text-align: center; margin-bottom: 14rpx; }
|
|
.confirm__sel { color: var(--gold-2); font-size: 26rpx; }
|
|
.confirm__hint { color: var(--text-3); font-size: 26rpx; }
|
|
.cta {
|
|
display: flex; align-items: center; justify-content: center;
|
|
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
|
|
color: var(--accent-on); font-weight: 700; font-size: 32rpx;
|
|
border-radius: 999rpx; padding: 26rpx;
|
|
}
|
|
.cta__arrow { margin-left: 12rpx; font-size: 36rpx; }
|
|
|
|
.result-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20rpx; }
|
|
.result-head__title { font-size: 36rpx; font-weight: 700; color: var(--text); }
|
|
.result-head__count { font-size: 24rpx; color: var(--gold); }
|
|
.rlist { display: flex; flex-direction: column; gap: 20rpx; }
|
|
.empty { color: var(--text-3); font-size: 26rpx; text-align: center; padding: 80rpx 0; }
|