e555496528
- 首页/商城/医生端/积分/家庭档案等页面 SCSS + TSX 更新 - TabFilter 组件样式优化 - points service 接口调整 - app.config 路由注册更新
502 lines
9.2 KiB
SCSS
502 lines
9.2 KiB
SCSS
@import '../../styles/variables.scss';
|
||
@import '../../styles/mixins.scss';
|
||
|
||
/* ═══════════════════════════════════════
|
||
登录后首页
|
||
═══════════════════════════════════════ */
|
||
|
||
.home-page {
|
||
padding-bottom: calc(var(--tk-tabbar-space) + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
/* ─── 问候区 ─── */
|
||
.greeting-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.greeting-left {
|
||
flex: 1;
|
||
}
|
||
|
||
.greeting-text {
|
||
@include serif-number;
|
||
font-size: var(--tk-font-h1);
|
||
font-weight: 700;
|
||
color: $tx;
|
||
display: block;
|
||
margin-bottom: var(--tk-gap-2xs);
|
||
}
|
||
|
||
.greeting-date {
|
||
font-size: var(--tk-font-cap);
|
||
color: var(--tk-text-secondary);
|
||
}
|
||
|
||
.greeting-bell {
|
||
position: relative;
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: $r-pill;
|
||
background: var(--tk-pri-l);
|
||
@include flex-center;
|
||
flex-shrink: 0;
|
||
|
||
&:active {
|
||
opacity: var(--tk-touch-feedback-opacity);
|
||
}
|
||
}
|
||
|
||
.greeting-bell-icon {
|
||
font-size: var(--tk-font-body-sm);
|
||
color: var(--tk-pri-d);
|
||
}
|
||
|
||
.greeting-bell-dot {
|
||
position: absolute;
|
||
top: 6px;
|
||
right: 6px;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: $r-xs;
|
||
background: $dan;
|
||
}
|
||
|
||
/* ─── 今日体征进度 ─── */
|
||
.checkin-card {
|
||
margin-bottom: var(--tk-gap-md);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--tk-gap-md);
|
||
|
||
&:active {
|
||
opacity: var(--tk-touch-feedback-opacity);
|
||
}
|
||
}
|
||
|
||
.checkin-left {
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.checkin-right {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.checkin-title {
|
||
font-size: var(--tk-font-body-sm);
|
||
font-weight: 600;
|
||
color: $tx;
|
||
display: block;
|
||
margin-bottom: var(--tk-gap-xs);
|
||
}
|
||
|
||
.checkin-capsules {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--tk-gap-2xs);
|
||
}
|
||
|
||
.capsule {
|
||
font-size: var(--tk-font-micro);
|
||
padding: 3px var(--tk-gap-xs);
|
||
border-radius: $r-pill;
|
||
font-weight: 500;
|
||
|
||
&.capsule-done {
|
||
background: $acc-l;
|
||
color: $acc;
|
||
}
|
||
|
||
&.capsule-pending {
|
||
background: $surface-alt;
|
||
color: $tx3;
|
||
}
|
||
}
|
||
|
||
/* ─── 今日体征 2x2（原型 padding:14px 16px, gap:10）─── */
|
||
.vitals-section {
|
||
margin-bottom: var(--tk-gap-md);
|
||
}
|
||
|
||
.section-title {
|
||
@include section-title;
|
||
}
|
||
|
||
.vitals-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
.vital-card {
|
||
&:active {
|
||
opacity: var(--tk-touch-feedback-opacity);
|
||
}
|
||
}
|
||
|
||
.vital-label {
|
||
font-size: var(--tk-font-cap);
|
||
color: $tx2;
|
||
display: block;
|
||
margin-bottom: var(--tk-gap-2xs);
|
||
}
|
||
|
||
.vital-value-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-bottom: var(--tk-gap-2xs);
|
||
}
|
||
|
||
.vital-value {
|
||
@include serif-number;
|
||
font-size: var(--tk-font-num);
|
||
font-weight: 700;
|
||
color: $tx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.vital-unit {
|
||
font-size: var(--tk-font-micro);
|
||
color: var(--tk-text-secondary);
|
||
margin-left: 3px;
|
||
}
|
||
|
||
.vital-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.vital-tag {
|
||
font-size: var(--tk-font-micro);
|
||
font-weight: 500;
|
||
padding: 2px var(--tk-gap-xs);
|
||
border-radius: $r-pill;
|
||
display: inline-block;
|
||
margin-top: var(--tk-gap-2xs);
|
||
|
||
&.tag-ok {
|
||
background: $acc-l;
|
||
color: $acc;
|
||
}
|
||
|
||
&.tag-warn {
|
||
background: $wrn-l;
|
||
color: $wrn;
|
||
}
|
||
|
||
&.tag-empty {
|
||
background: $surface-alt;
|
||
color: $tx3;
|
||
}
|
||
}
|
||
|
||
/* ─── 智能提醒卡片 ─── */
|
||
.reminder-card {
|
||
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;
|
||
}
|
||
|
||
.reminder-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--tk-gap-sm);
|
||
}
|
||
|
||
.reminder-title {
|
||
font-size: var(--tk-font-cap);
|
||
font-weight: 600;
|
||
color: $white;
|
||
}
|
||
|
||
.reminder-count {
|
||
font-size: var(--tk-font-micro);
|
||
opacity: 0.7;
|
||
color: $white;
|
||
}
|
||
|
||
.reminder-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--tk-gap-xs);
|
||
padding: var(--tk-gap-xs) 0;
|
||
|
||
&:active {
|
||
opacity: var(--tk-touch-feedback-opacity);
|
||
}
|
||
}
|
||
|
||
.reminder-item-border {
|
||
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.reminder-tag {
|
||
font-size: var(--tk-font-micro);
|
||
padding: 2px var(--tk-gap-2xs);
|
||
border-radius: $r-xs;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
font-weight: 500;
|
||
color: $white;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.reminder-text {
|
||
font-size: var(--tk-font-cap);
|
||
flex: 1;
|
||
color: $white;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.reminder-arrow {
|
||
opacity: 0.5;
|
||
color: $white;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ─── 快捷操作（原型 gap:10, height:52, borderRadius:14）─── */
|
||
.action-section {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: var(--tk-gap-xs);
|
||
}
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
height: var(--tk-btn-primary-h);
|
||
border-radius: 14px;
|
||
@include flex-center;
|
||
|
||
&:active {
|
||
opacity: var(--tk-touch-feedback-opacity);
|
||
}
|
||
}
|
||
|
||
.action-primary {
|
||
background: var(--tk-pri);
|
||
color: $white;
|
||
box-shadow: var(--tk-shadow-tab);
|
||
}
|
||
|
||
.action-outline {
|
||
background: transparent;
|
||
color: var(--tk-pri);
|
||
border: 2px solid var(--tk-pri);
|
||
}
|
||
|
||
.action-btn-text {
|
||
font-size: var(--tk-font-body-sm);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════
|
||
访客首页 — 对齐原型 docs/design/mp-14-guest-home.html
|
||
═══════════════════════════════════════ */
|
||
|
||
.guest-page {
|
||
padding-bottom: calc(var(--tk-tabbar-space) + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
/* ─── 轮播图 ─── */
|
||
.guest-swiper {
|
||
width: 100%;
|
||
height: 200px;
|
||
}
|
||
|
||
.guest-slide {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.guest-slide-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
|
||
&--1 {
|
||
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%);
|
||
}
|
||
&--3 {
|
||
background: linear-gradient(135deg, $wrn-d 0%, $wrn 60%, $wrn-l 100%);
|
||
}
|
||
}
|
||
|
||
.guest-slide-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 var(--tk-gap-xl);
|
||
}
|
||
|
||
.guest-slide-title {
|
||
font-family: 'Georgia', 'Times New Roman', serif;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: $white;
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.guest-slide-desc {
|
||
font-size: var(--tk-font-body-sm);
|
||
color: rgba(255, 255, 255, 0.8);
|
||
display: block;
|
||
}
|
||
|
||
/* ─── 健康资讯 ─── */
|
||
.guest-section {
|
||
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-nav);
|
||
font-weight: 700;
|
||
color: $tx;
|
||
}
|
||
|
||
.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: 10px;
|
||
}
|
||
|
||
// 文章卡片 — 左图标 + 右标题/日期
|
||
.guest-article-card {
|
||
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-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 {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.guest-article-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: $tx;
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
line-height: 1.4;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.guest-article-date {
|
||
font-size: var(--tk-font-micro);
|
||
color: $tx3;
|
||
display: block;
|
||
}
|
||
|
||
/* ─── 底部注册引导卡片 ─── */
|
||
.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-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-cta-desc {
|
||
font-size: var(--tk-font-cap);
|
||
color: $tx2;
|
||
display: block;
|
||
margin-bottom: var(--tk-gap-md);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.guest-cta-btn {
|
||
height: 48px;
|
||
border-radius: 24px;
|
||
background: var(--tk-pri);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: var(--tk-shadow-btn);
|
||
|
||
&:active {
|
||
opacity: var(--tk-touch-feedback-opacity);
|
||
}
|
||
}
|
||
|
||
.guest-cta-btn-text {
|
||
font-size: var(--tk-font-body);
|
||
font-weight: 600;
|
||
color: $white;
|
||
}
|