refactor(mp): CSS 变量主题 + 登录页改造 — UI 优化 Phase 0-2
Phase 0: 建立 design token 体系 - tokens.scss 新增 --tk-pri/--tk-pri-l/--tk-pri-d/--tk-shadow-btn/--tk-shadow-tab - .doctor-mode 覆盖为靛蓝色系，.elder-mode 非线性放大字号 - variables.scss 新增医生端色彩 + 阴影变量 Phase 1: 组件库 + 页面全局替换 - 75 个页面 SCSS $pri → var(--tk-pri) 全量替换 - 11 个新 UI 组件（PrimaryButton/TabFilter/FormInput/ProgressRing 等） - 8 个现有组件 SCSS 更新 - 18 个医生端页面 useElderClass → useDoctorClass - PageHeader 匹配原型 NavBar 规格 Phase 2: 登录页重写 - Logo: 方形+ → 圆形渐变 H - 登录方式: 纯微信 → 账号密码 + 微信一键登录 - 新增 credentialLogin API + store action - 字号/间距严格匹配原型 mp-01-login.html
This commit is contained in:
iven
@@ -6,7 +6,7 @@
|
||||
═══════════════════════════════════════ */
|
||||
|
||||
.home-page {
|
||||
padding-bottom: calc(100px + env(safe-area-inset-bottom));
|
||||
padding-bottom: calc(var(--tk-tabbar-space) + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* ─── 问候区 ─── */
|
||||
@@ -27,7 +27,7 @@
|
||||
font-weight: 700;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: var(--tk-gap-2xs);
|
||||
}
|
||||
|
||||
.greeting-date {
|
||||
@@ -40,18 +40,18 @@
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: $r-pill;
|
||||
background: $pri-l;
|
||||
background: var(--tk-pri-l);
|
||||
@include flex-center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.greeting-bell-icon {
|
||||
font-size: var(--tk-font-body-sm);
|
||||
color: $pri-d;
|
||||
color: var(--tk-pri-d);
|
||||
}
|
||||
|
||||
.greeting-bell-dot {
|
||||
@@ -66,13 +66,13 @@
|
||||
|
||||
/* ─── 今日体征进度 ─── */
|
||||
.checkin-card {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--tk-gap-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: var(--tk-gap-md);
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -91,18 +91,18 @@
|
||||
font-weight: 600;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--tk-gap-xs);
|
||||
}
|
||||
|
||||
.checkin-capsules {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
gap: var(--tk-gap-2xs);
|
||||
}
|
||||
|
||||
.capsule {
|
||||
font-size: var(--tk-font-micro);
|
||||
padding: 3px 8px;
|
||||
padding: 3px var(--tk-gap-xs);
|
||||
border-radius: $r-pill;
|
||||
font-weight: 500;
|
||||
|
||||
@@ -117,9 +117,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 今日体征 2x2 ─── */
|
||||
/* ─── 今日体征 2x2（原型 padding:14px 16px, gap:10）─── */
|
||||
.vitals-section {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--tk-gap-md);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -134,7 +134,7 @@
|
||||
|
||||
.vital-card {
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,13 +142,13 @@
|
||||
font-size: var(--tk-font-cap);
|
||||
color: $tx2;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: var(--tk-gap-2xs);
|
||||
}
|
||||
|
||||
.vital-value-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: var(--tk-gap-2xs);
|
||||
}
|
||||
|
||||
.vital-value {
|
||||
@@ -173,10 +173,10 @@
|
||||
.vital-tag {
|
||||
font-size: var(--tk-font-micro);
|
||||
font-weight: 500;
|
||||
padding: 2px 8px;
|
||||
padding: 2px var(--tk-gap-xs);
|
||||
border-radius: $r-pill;
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
margin-top: var(--tk-gap-2xs);
|
||||
|
||||
&.tag-ok {
|
||||
background: $acc-l;
|
||||
@@ -196,10 +196,10 @@
|
||||
|
||||
/* ─── 智能提醒卡片 ─── */
|
||||
.reminder-card {
|
||||
background: linear-gradient(135deg, $pri 0%, $pri-d 100%);
|
||||
border-radius: $r;
|
||||
padding: 18px;
|
||||
margin-bottom: 16px;
|
||||
background: linear-gradient(135deg, var(--tk-pri) 0%, var(--tk-pri-d) 100%);
|
||||
border-radius: var(--tk-card-radius);
|
||||
padding: var(--tk-gap-md);
|
||||
margin-bottom: var(--tk-gap-md);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@@ -207,7 +207,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: var(--tk-gap-sm);
|
||||
}
|
||||
|
||||
.reminder-title {
|
||||
@@ -225,11 +225,11 @@
|
||||
.reminder-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
gap: var(--tk-gap-xs);
|
||||
padding: var(--tk-gap-xs) 0;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -239,7 +239,7 @@
|
||||
|
||||
.reminder-tag {
|
||||
font-size: var(--tk-font-micro);
|
||||
padding: 2px 6px;
|
||||
padding: 2px var(--tk-gap-2xs);
|
||||
border-radius: $r-xs;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
font-weight: 500;
|
||||
@@ -262,34 +262,34 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ─── 快捷操作 ─── */
|
||||
/* ─── 快捷操作（原型 gap:10, height:52, borderRadius:14）─── */
|
||||
.action-section {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
margin-top: var(--tk-gap-xs);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 52px;
|
||||
border-radius: $r-sm;
|
||||
height: var(--tk-btn-primary-h);
|
||||
border-radius: 14px;
|
||||
@include flex-center;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
background: $pri;
|
||||
background: var(--tk-pri);
|
||||
color: $white;
|
||||
box-shadow: 0 2px 8px rgba(196, 98, 58, 0.25);
|
||||
box-shadow: var(--tk-shadow-tab);
|
||||
}
|
||||
|
||||
.action-outline {
|
||||
background: transparent;
|
||||
color: $pri;
|
||||
border: 2px solid $pri;
|
||||
color: var(--tk-pri);
|
||||
border: 2px solid var(--tk-pri);
|
||||
}
|
||||
|
||||
.action-btn-text {
|
||||
@@ -302,13 +302,13 @@
|
||||
═══════════════════════════════════════ */
|
||||
|
||||
.guest-page {
|
||||
padding-bottom: calc(120px + env(safe-area-inset-bottom));
|
||||
padding-bottom: calc(var(--tk-tabbar-space) + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* ─── 轮播图 ─── */
|
||||
.guest-swiper {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.guest-slide {
|
||||
@@ -323,7 +323,7 @@
|
||||
inset: 0;
|
||||
|
||||
&--1 {
|
||||
background: linear-gradient(135deg, $pri-d 0%, $pri 60%, $pri-l 100%);
|
||||
background: linear-gradient(135deg, var(--tk-pri-d) 0%, var(--tk-pri) 60%, var(--tk-pri-l) 100%);
|
||||
}
|
||||
&--2 {
|
||||
background: linear-gradient(135deg, $acc 0%, $acc-d 60%, $acc-l 100%);
|
||||
@@ -340,7 +340,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 40px 32px;
|
||||
padding: var(--tk-gap-2xl) var(--tk-gap-xl);
|
||||
}
|
||||
|
||||
.guest-slide-title {
|
||||
@@ -349,7 +349,7 @@
|
||||
font-weight: 700;
|
||||
color: $white;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--tk-gap-xs);
|
||||
}
|
||||
|
||||
.guest-slide-desc {
|
||||
@@ -360,7 +360,7 @@
|
||||
|
||||
/* ─── 健康资讯 ─── */
|
||||
.guest-section {
|
||||
padding: 24px 24px 0;
|
||||
padding: var(--tk-gap-lg) var(--tk-gap-lg) 0;
|
||||
}
|
||||
|
||||
.guest-section-title {
|
||||
@@ -369,13 +369,13 @@
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--tk-gap-md);
|
||||
}
|
||||
|
||||
.guest-articles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: var(--tk-gap-sm);
|
||||
}
|
||||
|
||||
.guest-article-card {
|
||||
@@ -383,7 +383,7 @@
|
||||
display: flex;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -394,7 +394,7 @@
|
||||
}
|
||||
|
||||
.guest-article-body {
|
||||
padding: 12px 14px;
|
||||
padding: var(--tk-gap-sm);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -404,7 +404,7 @@
|
||||
font-weight: 600;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: var(--tk-gap-2xs);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -420,7 +420,7 @@
|
||||
}
|
||||
|
||||
.guest-empty {
|
||||
padding: 40px 0;
|
||||
padding: var(--tk-gap-2xl) 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -431,10 +431,10 @@
|
||||
|
||||
/* ─── 底部登录引导 ─── */
|
||||
.guest-login-prompt {
|
||||
margin: 24px 24px 0;
|
||||
margin: var(--tk-gap-lg) var(--tk-gap-lg) 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: var(--tk-gap-md);
|
||||
}
|
||||
|
||||
.guest-login-text {
|
||||
@@ -444,15 +444,15 @@
|
||||
}
|
||||
|
||||
.guest-login-btn {
|
||||
height: 56px;
|
||||
padding: 0 28px;
|
||||
background: $pri;
|
||||
height: var(--tk-input-height);
|
||||
padding: 0 var(--tk-card-padding-lg);
|
||||
background: var(--tk-pri);
|
||||
border-radius: $r-pill;
|
||||
@include flex-center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ import { usePageData } from '@/hooks/usePageData';
|
||||
import { useThrottledDidShow } from '@/hooks/useThrottledDidShow';
|
||||
import { api } from '@/services/request';
|
||||
import type { Article } from '@/services/article';
|
||||
import ProgressRing from '../../components/ProgressRing';
|
||||
import ProgressRing from '@/components/ui/ProgressRing';
|
||||
import Loading from '../../components/Loading';
|
||||
import PageShell from '@/components/ui/PageShell';
|
||||
import ContentCard from '@/components/ui/ContentCard';
|
||||
@@ -202,7 +202,7 @@ function HomeDashboard({ modeClass }: { modeClass: string }) {
|
||||
|
||||
<ContentCard variant="elevated" onPress={() => Taro.switchTab({ url: '/pages/health/index' })}>
|
||||
<View className='checkin-left'>
|
||||
<ProgressRing percent={progressPercent} />
|
||||
<ProgressRing progress={progressPercent / 100} />
|
||||
</View>
|
||||
<View className='checkin-right'>
|
||||
<Text className='checkin-title'>
|
||||
|
||||
Reference in New Issue
Block a user