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

feat(mp): design-handoff 产出的页面样式和组件优化

Browse Source 
- 首页/商城/医生端/积分/家庭档案等页面 SCSS + TSX 更新
- TabFilter 组件样式优化
- points service 接口调整
- app.config 路由注册更新
This commit is contained in:
iven
2026-05-18 02:12:41 +08:00
parent 2698c98888
commit e555496528
26 changed files with 1887 additions and 1428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
apps/miniprogram/src/pages/index/index.scss
View File

@@ -298,7 +298,7 @@
}
/* ═══════════════════════════════════════
访客首页
访客首页 — 对齐原型 docs/design/mp-14-guest-home.html
═══════════════════════════════════════ */
.guest-page {
@@ -308,7 +308,7 @@
/* ─── 轮播图 ─── */
.guest-swiper {
width: 100%;
height: 400px;
height: 200px;
}
.guest-slide {
@@ -340,124 +340,162 @@
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--tk-gap-2xl) var(--tk-gap-xl);
padding: 0 var(--tk-gap-xl);
}
.guest-slide-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-h1);
font-size: 24px;
font-weight: 700;
color: $white;
display: block;
margin-bottom: var(--tk-gap-xs);
margin-bottom: 6px;
}
.guest-slide-desc {
font-size: var(--tk-font-body-sm);
color: rgba(255, 255, 255, 0.85);
color: rgba(255, 255, 255, 0.8);
display: block;
}
/* ─── 健康资讯 ─── */
.guest-section {
padding: var(--tk-gap-lg) var(--tk-gap-lg) 0;
padding: var(--tk-gap-lg) var(--tk-page-padding) 0;
}
.guest-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--tk-gap-md);
}
.guest-section-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-body);
font-weight: bold;
font-size: var(--tk-font-nav);
font-weight: 700;
color: $tx;
display: block;
margin-bottom: var(--tk-gap-md);
}
.guest-section-more {
font-size: var(--tk-font-cap);
color: $tx3;
&:active {
opacity: var(--tk-touch-feedback-opacity);
}
}
.guest-articles {
display: flex;
flex-direction: column;
gap: var(--tk-gap-sm);
gap: 10px;
}
// 文章卡片 — 左图标 + 右标题/日期
.guest-article-card {
overflow: hidden;
background: $card;
border-radius: $r;
padding: var(--tk-gap-md);
box-shadow: $shadow-sm;
display: flex;
align-items: center;
gap: 14px;
&:active {
opacity: var(--tk-touch-feedback-opacity);
}
}
.guest-article-cover {
width: 100px;
height: 80px;
.guest-article-icon {
width: 64px;
height: 64px;
border-radius: $r-sm;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
.guest-article-card--pri & { background: $pri-l; }
.guest-article-card--acc & { background: $acc-l; }
.guest-article-card--wrn & { background: $wrn-l; }
}
.guest-article-icon-char {
font-size: 22px;
line-height: 1;
.guest-article-card--pri & { color: $pri; }
.guest-article-card--acc & { color: $acc; }
.guest-article-card--wrn & { color: $wrn; }
}
.guest-article-body {
padding: var(--tk-gap-sm);
flex: 1;
min-width: 0;
}
.guest-article-title {
font-size: var(--tk-font-body-sm);
font-size: 15px;
font-weight: 600;
color: $tx;
display: block;
margin-bottom: var(--tk-gap-2xs);
margin-bottom: 4px;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.guest-article-summary {
font-size: var(--tk-font-cap);
color: var(--tk-text-secondary);
.guest-article-date {
font-size: var(--tk-font-micro);
color: $tx3;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.guest-empty {
padding: var(--tk-gap-2xl) 0;
/* ─── 底部注册引导卡片 ─── */
.guest-cta-card {
margin: var(--tk-gap-lg) var(--tk-page-padding);
background: $card;
border-radius: $r;
padding: var(--tk-section-gap);
box-shadow: $shadow-sm;
text-align: center;
}
.guest-empty-text {
font-size: var(--tk-font-cap);
color: var(--tk-text-secondary);
.guest-cta-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-body);
font-weight: 700;
color: $tx;
display: block;
margin-bottom: 6px;
}
/* ─── 底部登录引导 ─── */
.guest-login-prompt {
margin: var(--tk-gap-lg) var(--tk-gap-lg) 0;
display: flex;
align-items: center;
gap: var(--tk-gap-md);
}
.guest-login-text {
flex: 1;
.guest-cta-desc {
font-size: var(--tk-font-cap);
color: $tx2;
display: block;
margin-bottom: var(--tk-gap-md);
line-height: 1.5;
}
.guest-login-btn {
height: var(--tk-input-height);
padding: 0 var(--tk-card-padding-lg);
.guest-cta-btn {
height: 48px;
border-radius: 24px;
background: var(--tk-pri);
border-radius: $r-pill;
@include flex-center;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--tk-shadow-btn);
&:active {
opacity: var(--tk-touch-feedback-opacity);
}
}
.guest-login-btn-text {
font-size: var(--tk-font-h2);
.guest-cta-btn-text {
font-size: var(--tk-font-body);
font-weight: 600;
color: $white;
}

79
apps/miniprogram/src/pages/index/index.tsx
View File

@@ -85,6 +85,15 @@ function GuestHome({ modeClass }: { modeClass: string }) {
const slides = banners.length > 0 ? banners : FALLBACK_SLIDES;
const ARTICLE_ICONS = ['♥', '◇', '✦'];
const ARTICLE_COLORS = ['pri', 'acc', 'wrn'] as const;
const formatDate = (dateStr?: string) => {
if (!dateStr) return '';
const d = new Date(dateStr);
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
};
return (
<PageShell padding="none" safeBottom={false} scroll={false} className={`guest-page ${modeClass}`}>
<Swiper
@@ -114,59 +123,71 @@ function GuestHome({ modeClass }: { modeClass: string }) {
))}
</Swiper>
{/* 健康资讯 */}
<View className='guest-section'>
<Text className='guest-section-title'>健康资讯</Text>
<View className='guest-section-header'>
<Text className='guest-section-title'>健康资讯</Text>
<Text
className='guest-section-more'
onClick={() => Taro.switchTab({ url: '/pages/health/index' })}
>
查看全部 ›
</Text>
</View>
{articles.length > 0 ? (
<View className='guest-articles'>
{articles.map((article) => (
<ContentCard
{articles.map((article, i) => (
<View
key={article.id}
onPress={() => safeNavigateTo(`/pages/article/detail/index?id=${article.id}`)}
activeFeedback="opacity"
padding="none"
className={`guest-article-card guest-article-card--${ARTICLE_COLORS[i % 3]}`}
onClick={() => safeNavigateTo(`/pages/article/detail/index?id=${article.id}`)}
>
{article.cover_image && (
<Image className='guest-article-cover' src={article.cover_image} mode='aspectFill' lazyLoad />
)}
<View className='guest-article-icon'>
<Text className='guest-article-icon-char'>{ARTICLE_ICONS[i % 3]}</Text>
</View>
<View className='guest-article-body'>
<Text className='guest-article-title'>{article.title}</Text>
<Text className='guest-article-summary'>
{article.summary || '点击查看详情'}
</Text>
<Text className='guest-article-date'>{formatDate(article.published_at)}</Text>
</View>
</ContentCard>
</View>
))}
</View>
) : (
<View className='guest-articles'>
<ContentCard padding="none">
<View className='guest-article-card guest-article-card--pri'>
<View className='guest-article-icon'><Text className='guest-article-icon-char'>♥</Text></View>
<View className='guest-article-body'>
<Text className='guest-article-title'>健康数据管理</Text>
<Text className='guest-article-summary'>记录并追踪您的体征数据</Text>
<Text className='guest-article-date'>记录并追踪您的体征数据</Text>
</View>
</ContentCard>
<ContentCard padding="none">
</View>
<View className='guest-article-card guest-article-card--acc'>
<View className='guest-article-icon'><Text className='guest-article-icon-char'>◇</Text></View>
<View className='guest-article-body'>
<Text className='guest-article-title'>智能预约排班</Text>
<Text className='guest-article-summary'>在线预约透析和治疗</Text>
<Text className='guest-article-title'>积分商城</Text>
<Text className='guest-article-date'>签到赚积分，好礼兑不停</Text>
</View>
</ContentCard>
<ContentCard padding="none">
</View>
<View className='guest-article-card guest-article-card--wrn'>
<View className='guest-article-icon'><Text className='guest-article-icon-char'>✦</Text></View>
<View className='guest-article-body'>
<Text className='guest-article-title'>AI 健康分析</Text>
<Text className='guest-article-summary'>个性化健康趋势解读</Text>
<Text className='guest-article-title'>专业科普文章</Text>
<Text className='guest-article-date'>权威健康知识推送</Text>
</View>
</ContentCard>
</View>
</View>
)}
</View>
<ContentCard variant="elevated">
<Text className='guest-login-text'>登录后即可使用完整健康管理服务</Text>
<View className='guest-login-btn' onClick={navigateToLogin}>
<Text className='guest-login-btn-text'>立即登录</Text>
{/* 底部注册引导 */}
<View className='guest-cta-card'>
<Text className='guest-cta-title'>加入我们</Text>
<Text className='guest-cta-desc'>注册后即可使用签到、积分商城等全部功能</Text>
<View className='guest-cta-btn' onClick={navigateToLogin}>
<Text className='guest-cta-btn-text'>注册 / 登录</Text>
</View>
</ContentCard>
</View>
</PageShell>
);
}