wm
b94eb706ff
- 建立 Lucide 子集 iconfont（49 字形），全站 emoji 替换为 fc-icon 组件 - 重塑 Design Token（冷中性近黑底 + Volt 荧光绿 #B6F24E），消除硬编码颜色 - 首页登录后个性化：我的计划 / 我的收藏 / 今日推荐（纯前端复用现有 API） - 后端 DEFAULT_EMOJI→Lucide 名，PALETTE 对齐 Kinetic Dark 语义色板 - 修复 person-standing 缺失字形；14 个官方组合 seed emoji 全部映射到现有字形
85 lines
3.4 KiB
Plaintext
85 lines
3.4 KiB
Plaintext
.page { min-height: 100vh; background: var(--bg-grad); }
|
|
|
|
/* 未登录 */
|
|
.login {
|
|
min-height: 70vh; display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; padding: 60rpx;
|
|
}
|
|
.login__logo {
|
|
width: 160rpx; height: 160rpx; border-radius: 999rpx;
|
|
background: var(--gold-soft); border: 1rpx solid var(--gold-line);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 88rpx;
|
|
}
|
|
.login__title { font-size: 38rpx; font-weight: 700; margin-top: 32rpx; color: var(--text); }
|
|
.login__sub { font-size: 26rpx; color: var(--text-2); margin-top: 14rpx; }
|
|
.login__btn {
|
|
margin-top: 56rpx; width: 420rpx;
|
|
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: 24rpx;
|
|
}
|
|
.login__btn::after { border: none; }
|
|
|
|
/* 个人中心 */
|
|
.center { padding: 32rpx; }
|
|
.profile {
|
|
background: linear-gradient(135deg, var(--accent-soft), var(--surface));
|
|
border: 1rpx solid var(--gold-line);
|
|
border-radius: var(--radius); padding: 36rpx;
|
|
}
|
|
.profile__head { display: flex; align-items: center; gap: 28rpx; }
|
|
.profile__info { flex: 1; min-width: 0; }
|
|
.profile__name { font-size: 40rpx; font-weight: 700; color: var(--gold); }
|
|
.profile__edit { font-size: 26rpx; color: var(--text-2); margin-top: 10rpx; }
|
|
|
|
.stats { display: flex; margin-top: 36rpx; }
|
|
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; }
|
|
.stat + .stat { border-left: 1rpx solid var(--line); }
|
|
.stat__n { font-size: 44rpx; font-weight: 700; color: var(--text); }
|
|
.stat__l { font-size: 24rpx; color: var(--text-2); margin-top: 8rpx; }
|
|
|
|
.menu { margin-top: 28rpx; padding: 8rpx 28rpx; }
|
|
.cell {
|
|
display: flex; align-items: center; gap: 24rpx;
|
|
padding: 30rpx 0; border-bottom: 1rpx solid var(--line);
|
|
}
|
|
.cell:last-child { border-bottom: none; }
|
|
.cell__icon { font-size: 38rpx; width: 48rpx; text-align: center; }
|
|
.cell__label { flex: 1; font-size: 30rpx; color: var(--text); }
|
|
.cell__arrow { font-size: 40rpx; color: var(--gold); line-height: 1; }
|
|
|
|
.logout {
|
|
margin-top: 40rpx; text-align: center;
|
|
font-size: 28rpx; color: var(--text-3);
|
|
}
|
|
|
|
/* 头像选择弹层 */
|
|
.sheet {
|
|
position: fixed; inset: 0; z-index: 80;
|
|
background: var(--scrim);
|
|
display: flex; align-items: flex-end;
|
|
}
|
|
.sheet__panel {
|
|
width: 100%; background: var(--surface);
|
|
border-top-left-radius: 32rpx; border-top-right-radius: 32rpx;
|
|
padding: 36rpx 32rpx calc(36rpx + env(safe-area-inset-bottom));
|
|
}
|
|
.sheet__title { font-size: 30rpx; font-weight: 700; color: var(--text); }
|
|
.emoji-row { white-space: nowrap; margin-top: 24rpx; }
|
|
.emoji {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 88rpx; height: 88rpx; margin-right: 16rpx;
|
|
border-radius: 20rpx; background: var(--surface-2);
|
|
border: 1rpx solid var(--line); font-size: 48rpx;
|
|
}
|
|
.emoji--active { border-color: var(--gold); background: var(--gold-soft); }
|
|
.sheet__nick { margin-top: 24rpx; font-size: 28rpx; color: var(--text-2); text-align: center; }
|
|
.sheet__actions { display: flex; gap: 20rpx; margin-top: 28rpx; }
|
|
.sheet__btn {
|
|
flex: 1; text-align: center; padding: 24rpx; border-radius: 999rpx;
|
|
font-size: 30rpx; font-weight: 700;
|
|
}
|
|
.sheet__btn--ghost { background: var(--surface-2); color: var(--text); border: 1rpx solid var(--line); }
|
|
.sheet__btn--gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%); color: var(--accent-on); }
|