feat(mp): design-handoff 产出的页面样式和组件优化
- 首页/商城/医生端/积分/家庭档案等页面 SCSS + TSX 更新 - TabFilter 组件样式优化 - points service 接口调整 - app.config 路由注册更新
This commit is contained in:
iven
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user