iven/hms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mp): 修正 design token 字号对齐原型 + ContentCard margin prop

Browse Source 
- tokens.scss: 修正字号 token 对齐 18 份原型稿 fontSize 统计
  --tk-font-h1: 26→28px, --tk-font-h2: 24→22px
  --tk-font-body-lg: 28→18px, --tk-font-body: 22→16px
  --tk-font-body-sm: 16→14px
  elder-mode 同步重新计算比例系数
- ContentCard: 新增 margin prop ('none'|'md')，margin-bottom
  从 CSS 类移至 inline style，支持列表容器内无间距模式
- Profile 页: 用户卡片添加 profile-user-card flex 布局
  菜单组/积分卡片使用 margin="none"，修复布局对齐
- Login 页: SCSS 全部改为 design token 引用
This commit is contained in:
iven
2026-05-17 12:48:38 +08:00
parent 6841c45846
commit 551d19d921
6 changed files with 107 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/miniprogram/src/pages/login/index.scss
View File

@@ -1,8 +1,7 @@
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';
// 登录页使用原型精确数值，不走 design token
// 原型参考：docs/design/mp-01-login.html
// 登录页 — 全部使用 design token，原型参考 docs/design/mp-01-login.html
.login-page {
min-height: 100vh;
@@ -40,14 +39,14 @@
.login-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 28px;
font-size: var(--tk-font-h1);
font-weight: 700;
color: $tx;
margin-bottom: 8px;
}
.login-subtitle {
font-size: 14px;
font-size: var(--tk-font-body-sm);
color: $tx3;
}
@@ -56,7 +55,7 @@
height: 56px;
background: $card;
border: 1.5px solid $bd;
border-radius: 16px;
border-radius: $r;
display: flex;
align-items: center;
padding: 0 16px;
@@ -66,17 +65,17 @@
.login-input {
flex: 1;
height: 100%;
font-size: 16px;
font-size: var(--tk-font-body);
color: $tx;
}
.login-placeholder {
color: $tx3;
font-size: 16px;
font-size: var(--tk-font-body);
}
.login-eye {
font-size: 14px;
font-size: var(--tk-font-body-sm);
color: var(--tk-pri);
font-weight: 500;
padding: 6px 0;
@@ -86,7 +85,7 @@
/* ─── 登录按钮 ─── */
.login-submit {
height: 54px;
border-radius: 16px;
border-radius: $r;
background: var(--tk-pri);
@include flex-center;
margin-top: 12px;
@@ -99,7 +98,7 @@
}
.login-submit-text {
font-size: 18px;
font-size: var(--tk-font-body-lg);
font-weight: 600;
color: $white;
}
@@ -119,14 +118,14 @@
}
.login-divider-text {
font-size: 12px;
font-size: var(--tk-font-cap);
color: $tx3;
}
/* ─── 微信登录 ─── */
.login-wechat-btn {
height: 54px;
border-radius: 16px;
border-radius: $r;
background: $wechat;
display: flex;
align-items: center;
@@ -140,13 +139,13 @@
}
.login-wechat-icon {
font-size: 16px;
font-size: var(--tk-font-body);
color: $white;
font-weight: bold;
}
.login-wechat-text {
font-size: 18px;
font-size: var(--tk-font-body-lg);
font-weight: 600;
color: $white;
}
@@ -161,9 +160,9 @@
height: 54px;
background: var(--tk-pri);
color: $white;
font-size: 18px;
font-size: var(--tk-font-body-lg);
font-weight: 600;
border-radius: 16px;
border-radius: $r;
border: none;
@include flex-center;
box-shadow: 0 4px 16px rgba($pri, 0.25);
@@ -198,14 +197,14 @@
}
.agreement-check-mark {
font-size: 14px;
font-size: var(--tk-font-body-sm);
color: $white;
font-weight: bold;
line-height: 1;
}
.agreement-text {
font-size: 12px;
font-size: var(--tk-font-cap);
color: $tx3;
line-height: 1.8;
}
@@ -220,7 +219,7 @@
text-align: center;
padding: 12px;
border: 1px dashed $bd;
border-radius: 12px;
border-radius: $r-sm;
margin-top: 16px;
&:active {
@@ -229,6 +228,6 @@
}
.login-dev-btn-text {
font-size: 13px;
font-size: var(--tk-font-cap);
color: $tx3;
}

57
apps/miniprogram/src/pages/profile/index.scss
View File

@@ -1,6 +1,8 @@
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';
// 个人中心页 — 全部使用 design token，原型参考 docs/design/mp-redesign-home.html → ProfileA
.profile-page {
padding-bottom: calc(var(--tk-tabbar-space) + env(safe-area-inset-bottom));
}
@@ -16,7 +18,7 @@
.profile-avatar {
width: 60px;
height: 60px;
border-radius: $r-pill;
border-radius: 30px;
background: linear-gradient(135deg, var(--tk-pri-l) 0%, var(--tk-pri) 100%);
@include flex-center;
flex-shrink: 0;
@@ -24,9 +26,10 @@
.profile-avatar-char {
font-family: Georgia, 'Times New Roman', serif;
font-size: var(--tk-font-body-lg);
font-size: var(--tk-font-h1);
font-weight: 700;
color: $white;
line-height: 1;
}
.profile-user-info {
@@ -35,8 +38,8 @@
}
.profile-name {
@include serif-number;
font-size: var(--tk-font-body);
font-family: Georgia, 'Times New Roman', serif;
font-size: var(--tk-font-h2);
font-weight: 700;
color: $tx;
display: block;
@@ -44,20 +47,20 @@
}
.profile-phone {
font-size: var(--tk-font-cap);
color: var(--tk-text-secondary);
font-size: var(--tk-font-body-sm);
color: $tx3;
}
.profile-arrow {
font-size: var(--tk-font-body-sm);
color: var(--tk-text-secondary);
font-size: var(--tk-font-body);
color: $tx3;
flex-shrink: 0;
}
/* ─── 积分 + 打卡 ─── */
.profile-stats-row {
display: flex;
gap: var(--tk-gap-sm);
gap: 10px;
margin-bottom: var(--tk-gap-lg);
}
@@ -67,8 +70,8 @@
}
.stat-value {
@include serif-number;
font-size: var(--tk-font-body-lg);
font-family: Georgia, 'Times New Roman', serif;
font-size: var(--tk-font-h1);
font-weight: 700;
display: block;
margin-bottom: 2px;
@@ -83,27 +86,29 @@
}
.stat-unit {
font-size: var(--tk-font-body-sm);
font-size: var(--tk-font-body);
font-weight: 400;
}
.stat-label {
font-size: var(--tk-font-cap);
color: var(--tk-text-secondary);
color: $tx3;
margin-top: 2px;
display: block;
}
/* ─── 分组菜单 ─── */
.menu-group {
margin-bottom: var(--tk-gap-sm);
margin-bottom: 14px;
}
.menu-group-title {
font-size: var(--tk-font-cap);
font-size: var(--tk-font-body-sm);
font-weight: 600;
color: $tx2;
display: block;
margin-bottom: var(--tk-gap-xs);
padding-left: var(--tk-gap-2xs);
padding-left: 4px;
}
.menu-group-card {
@@ -113,9 +118,9 @@
.menu-item {
display: flex;
align-items: center;
gap: var(--tk-gap-sm);
padding: var(--tk-gap-md);
min-height: 48px;
gap: 14px;
padding: 14px var(--tk-gap-md);
min-height: var(--tk-touch-min);
position: relative;
&:active {
@@ -153,8 +158,8 @@
}
.menu-icon-text {
@include serif-number;
font-size: var(--tk-font-body-sm);
font-family: Georgia, 'Times New Roman', serif;
font-size: var(--tk-font-body);
font-weight: 700;
&.menu-icon-text--pri {
@@ -172,13 +177,13 @@
.menu-label {
flex: 1;
font-size: var(--tk-font-cap);
font-size: var(--tk-font-body);
color: $tx;
}
.menu-arrow {
font-size: var(--tk-font-cap);
color: var(--tk-text-secondary);
font-size: var(--tk-font-body-sm);
color: $tx3;
flex-shrink: 0;
}
@@ -207,6 +212,6 @@
}
.logout-text {
font-size: var(--tk-font-cap);
color: var(--tk-text-secondary);
font-size: var(--tk-font-body-sm);
color: $tx3;
}

23
apps/miniprogram/src/pages/profile/index.tsx
View File

@@ -135,7 +135,7 @@ export default function Profile() {
<PageShell padding="md" safeBottom={false} scroll={false} className={`profile-page ${modeClass}`}>
{/* 用户信息卡片 */}
{isGuest ? (
<ContentCard variant="elevated" onPress={navigateToLogin}>
<ContentCard variant="elevated" onPress={navigateToLogin} className="profile-user-card">
<View className='profile-avatar profile-avatar--guest'>
<Text className='profile-avatar-char'>?</Text>
</View>
@@ -147,7 +147,7 @@ export default function Profile() {
</ContentCard>
) : (
<>
<ContentCard variant="elevated">
<ContentCard variant="elevated" className="profile-user-card">
<View className='profile-avatar'>
<Text className='profile-avatar-char'>{displayInitial}</Text>
</View>
@@ -165,13 +165,17 @@ export default function Profile() {
<Loading />
) : (
<View className='profile-stats-row'>
<ContentCard padding="sm">
<Text className='stat-value stat-pri'>{(pointsAccount?.balance ?? 0).toLocaleString()}</Text>
<Text className='stat-label'>健康积分</Text>
<ContentCard padding="sm" margin="none">
<View className='stat-card'>
<Text className='stat-value stat-pri'>{(pointsAccount?.balance ?? 0).toLocaleString()}</Text>
<Text className='stat-label'>健康积分</Text>
</View>
</ContentCard>
<ContentCard padding="sm">
<Text className='stat-value stat-acc'>{checkinInfo?.consecutive_days ?? 0}<Text className='stat-unit'>天</Text></Text>
<Text className='stat-label'>连续打卡</Text>
<ContentCard padding="sm" margin="none">
<View className='stat-card'>
<Text className='stat-value stat-acc'>{checkinInfo?.consecutive_days ?? 0}<Text className='stat-unit'>天</Text></Text>
<Text className='stat-label'>连续打卡</Text>
</View>
</ContentCard>
</View>
)}
@@ -183,6 +187,7 @@ export default function Profile() {
<View className='menu-group'>
<ContentCard
padding="none"
margin="none"
onPress={() => Taro.navigateTo({ url: '/pages/pkg-profile/notifications/index' })}
>
<View className='menu-item'>
@@ -205,7 +210,7 @@ export default function Profile() {
{groups.map((group) => (
<View className='menu-group' key={group.title}>
<Text className='menu-group-title'>{group.title}</Text>
<ContentCard padding="none">
<ContentCard padding="none" margin="none">
{group.items.map((item, idx) => (
<View
className='menu-item'