464 lines
14 KiB
Plaintext
464 lines
14 KiB
Plaintext
/* ===== 首页 · 暖白纸面 × 单一暖橙（按参考图设计语言重做） =====
|
||
参考图要点：
|
||
- 暖白纸面 + 纯白圆角卡片 + 米色发丝边，阴影极轻，几乎只靠留白分层
|
||
- 单一暖橙主色：实心按钮/标识走深一档，浅橙衬底承载图标与标签
|
||
- 大量圆角方形衬底 + 彩色线图标
|
||
- 大字号标题直接落在纸面上，不用整块色面板压首屏 */
|
||
|
||
page {
|
||
/* 暖橙主色阶：strong 是实心块/按钮（白字需 ≥4.5:1、白图标需 ≥3:1），
|
||
soft 是衬底，ink 是浅衬底上的文字与线图标 */
|
||
--brand: #F97316; /* 主色：仅装饰性小色块 */
|
||
--brand-strong: #C2410C; /* 实心按钮 / 选中态：白字 4.69:1，过 AA 正文 */
|
||
--brand-soft: #FFF4E8; /* 图标衬底、标签底 */
|
||
--brand-line: #FFE0C2; /* 浅橙衬底的描边 */
|
||
--brand-ink: #9A3412; /* 浅橙衬底上的文字/图标：6.8:1，过 AA */
|
||
|
||
/* 状态色：全页唯一的冷色，只用在「待服务订单」提醒条上。
|
||
作用是制造唯一焦点——整页暖橙平铺时需要一个"该看这里"的落点 */
|
||
--status-soft: #ECF7F4;
|
||
--status-line: #C7E5DF;
|
||
--status-ink: #0F766E; /* #ECF7F4 上 5.0:1，过 AA 正文 */
|
||
|
||
/* 中性：暖灰阶，与暖白纸面同温（冷灰会让白卡边缘发青） */
|
||
--ink: #2B2521;
|
||
--ink-2: #4A4038;
|
||
--muted: #7A7068; /* 白底 4.8:1，过 AA 正文 */
|
||
--faint: #A79C92; /* 仅用于非文字装饰 */
|
||
--line: #F0E9E0; /* 米色发丝边 */
|
||
--paper: #FAF6F0; /* 暖白纸面 */
|
||
--white: #FFFFFF;
|
||
|
||
--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.04);
|
||
--shadow-cta: 0 6rpx 16rpx rgba(194, 65, 12, 0.22);
|
||
}
|
||
|
||
.page-bg {
|
||
min-height: 100vh;
|
||
background: var(--paper);
|
||
}
|
||
|
||
.container {
|
||
padding: 0 32rpx 40rpx;
|
||
}
|
||
|
||
/* ===== 顶部品牌行 ===== */
|
||
.topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 120rpx 0 0;
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 品牌印记：实心暖橙圆角方块 + 白色品牌 Logo。
|
||
Logo 是白色线稿（心形 + 圆点）、透明底，必须压在有色底上才可见，
|
||
40rpx 是经真机像素验证后仍能辨认轮廓的最小尺寸 */
|
||
.brand-mark {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
border-radius: 16rpx;
|
||
background: var(--brand-strong);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(194, 65, 12, 0.22);
|
||
}
|
||
|
||
.brand-logo {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.brand-name {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
margin-left: 16rpx;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* 右上角胶囊标签：浅橙底 + 橙字，是参考图里「标签组件」的最小形态 */
|
||
.topbar-tag {
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 999rpx;
|
||
background: var(--brand-soft);
|
||
color: var(--brand-ink);
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* ===== ① 头部：大字标题直接落在纸面上 ===== */
|
||
.hero {
|
||
padding: 44rpx 0 0;
|
||
}
|
||
|
||
.hero-title {
|
||
display: block;
|
||
/* 52rpx(26px) 仍在 WCAG"大字"门槛(18pt/24px)之上：
|
||
深墨 #2B2521 压暖白纸面实测 13:1+，无论字重都稳过 AA */
|
||
font-size: 52rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 2rpx;
|
||
line-height: 1.36;
|
||
}
|
||
|
||
/* 不用逗号断句：靠「暖橙强调 + 深墨正文」的色差切分两个短句。
|
||
两段合计 11 字 × (52rpx + 2rpx 字距) + 10rpx 间隔 ≈ 604rpx，
|
||
小于容器内宽 686rpx（750 - 32×2 页边距），不会折行 */
|
||
.hero-title-accent {
|
||
color: var(--brand-strong); /* 暖白纸面上 5.0:1，过 AA */
|
||
}
|
||
|
||
.hero-title-main {
|
||
color: var(--ink);
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.hero-sub {
|
||
display: block;
|
||
margin-top: 20rpx;
|
||
font-size: 24rpx;
|
||
color: var(--muted);
|
||
line-height: 1.6;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* 主行动按钮：通栏胶囊，参考图的主按钮语言 */
|
||
.hero-cta {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 36rpx;
|
||
padding: 26rpx;
|
||
border-radius: 999rpx;
|
||
background: var(--brand-strong);
|
||
box-shadow: var(--shadow-cta);
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
.hero-cta:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.hero-cta-text {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: var(--white);
|
||
letter-spacing: 2rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
/* ===== ② 客服与联系 ===== */
|
||
.contact-row {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.contact-card {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 26rpx 22rpx;
|
||
border-radius: 28rpx;
|
||
background: var(--white);
|
||
/* 发丝边 + 紧阴影：白卡压在暖白纸面上时，仅靠阴影分不出边界 */
|
||
border: 2rpx solid var(--line);
|
||
box-shadow: var(--shadow-card);
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
.contact-card:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
/* 浅橙衬底的圆角方块：与参考图「软衬底 + 彩色线图标」一致 */
|
||
.contact-icon {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
border-radius: 20rpx;
|
||
background: var(--brand-soft);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* AI 品牌图标是位图（无图标字体可用），按「联系我们」的 32rpx 图标对齐 */
|
||
.contact-icon-img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.contact-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.contact-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.contact-en {
|
||
font-size: 24rpx;
|
||
color: var(--muted);
|
||
margin-top: 4rpx;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* ===== 通用区块 ===== */
|
||
.section {
|
||
margin-top: 56rpx;
|
||
}
|
||
|
||
.section-head {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-bottom: 22rpx;
|
||
}
|
||
|
||
/* 区块标识：单竖条。原「实心橙方块 + 白图标」在页面上已是第三、四个橙色实心块，
|
||
与顶部品牌印记撞语言，且 26rpx 的白图标过小看不清；改竖条后视觉更轻，
|
||
把重心让给下方的服务宫格与功能卡。条高与 34rpx 标题齐平，避免细条显单薄 */
|
||
.section-bar {
|
||
width: 8rpx;
|
||
height: 34rpx;
|
||
border-radius: 4rpx;
|
||
background: var(--brand-strong);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.section-title {
|
||
margin-left: 16rpx;
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* ===== ③ 陪诊服务 ===== */
|
||
.assist-card {
|
||
padding: 16rpx 8rpx 20rpx;
|
||
border-radius: 28rpx;
|
||
background: var(--white);
|
||
border: 2rpx solid var(--line);
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.assist-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.assist-item {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 26rpx 0;
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
.assist-item:active {
|
||
transform: scale(0.94);
|
||
}
|
||
|
||
/* 纤细线图标：24x24 网格、stroke-width 1.5、暖橙 #C2410C，base64 内嵌避免引入图标字体。
|
||
56rpx(28px) 是过 WCAG 非文本 3:1 后兼顾真机清晰度的尺寸。
|
||
图标直接落在白卡上、不加衬底方块：8 个同色浅橙方块平铺会让整页变得均匀寡淡 */
|
||
.assist-icon {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
margin-bottom: 20rpx;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
/* 1 全天陪诊：整圈表盘 + 指针 */
|
||
.assist-icon-1 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgNi42VjEybDMuOCAyLjIiLz48L3N2Zz4=");
|
||
}
|
||
|
||
/* 2 半天陪诊：半月形表盘，与 1 形成"全 / 半"对照 */
|
||
.assist-icon-2 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMy41YTguNSA4LjUgMCAwIDEgMCAxN1oiLz48cGF0aCBkPSJNMTIgMTJoNC42Ii8+PC9zdmc+");
|
||
}
|
||
|
||
/* 3 代问诊：对话气泡 + 医疗十字 */
|
||
.assist-icon-3 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMTQuNWEyLjUgMi41IDAgMCAxLTIuNSAyLjVIOGwtNCAzLjVWNmEyLjUgMi41IDAgMCAxIDIuNS0yLjVoMTFBMi41IDIuNSAwIDAgMSAyMCA2WiIvPjxwYXRoIGQ9Ik0xMiA3LjZ2NS4yTTkuNCAxMC4yaDUuMiIvPjwvc3ZnPg==");
|
||
}
|
||
|
||
/* 4 检查预约：日历 + 对勾 */
|
||
.assist-icon-4 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzLjUiIHk9IjUiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNS41IiByeD0iMi41Ii8+PHBhdGggZD0iTTggM3Y0TTE2IDN2NE0zLjUgOS41aDE3Ii8+PHBhdGggZD0ibTkuNCAxNSAxLjkgMS45IDMuNy00Ii8+PC9zdmc+");
|
||
}
|
||
|
||
/* 5 出入院代办：医院楼 + 地面 + 十字 */
|
||
.assist-icon-5 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNC41IDIwLjVWNi41YTIgMiAwIDAgMSAyLTJoMTFhMiAyIDAgMCAxIDIgMnYxNCIvPjxwYXRoIGQ9Ik0yLjUgMjAuNWgxOSIvPjxwYXRoIGQ9Ik0xMiA4LjZ2NU05LjUgMTEuMWg1Ii8+PC9zdmc+");
|
||
}
|
||
|
||
/* 6 跑腿服务：包裹箱 */
|
||
.assist-icon-6 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAuNSA4LjJ2Ny42YTEuNiAxLjYgMCAwIDEtLjg0IDEuNDJsLTYuOSAzLjhhMS42IDEuNiAwIDAgMS0xLjUyIDBsLTYuOS0zLjhBMS42IDEuNiAwIDAgMSAzLjUgMTUuOFY4LjJhMS42IDEuNiAwIDAgMSAuODQtMS40Mmw2LjktMy44YTEuNiAxLjYgMCAwIDEgMS41MiAwbDYuOSAzLjhBMS42IDEuNiAwIDAgMSAyMC41IDguMloiLz48cGF0aCBkPSJNMy45IDcuMyAxMiAxMS43bDguMS00LjRNMTIgMTEuN1YyMSIvPjwvc3ZnPg==");
|
||
}
|
||
|
||
/* 7 陪诊套餐：礼盒 */
|
||
.assist-icon-7 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzIiB5PSI3LjUiIHdpZHRoPSIxOCIgaGVpZ2h0PSI0LjUiIHJ4PSIxLjIiLz48cGF0aCBkPSJNNC41IDEydjcuNUExLjUgMS41IDAgMCAwIDYgMjFoMTJhMS41IDEuNSAwIDAgMCAxLjUtMS41VjEyIi8+PHBhdGggZD0iTTEyIDcuNVYyMSIvPjxwYXRoIGQ9Ik0xMiA3LjVIOS4yYTIuMyAyLjMgMCAxIDEgMC00LjZDMTAuNyAyLjkgMTIgNy41IDEyIDcuNVoiLz48cGF0aCBkPSJNMTIgNy41aDIuOGEyLjMgMi4zIDAgMSAwIDAtNC42QzEzLjMgMi45IDEyIDcuNSAxMiA3LjVaIi8+PC9zdmc+");
|
||
}
|
||
|
||
/* 8 买药套餐：胶囊 */
|
||
.assist-icon-8 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyLjUiIHk9IjkiIHdpZHRoPSIxOSIgaGVpZ2h0PSI2IiByeD0iMyIvPjxwYXRoIGQ9Ik0xMiA5djYiLz48L3N2Zz4=");
|
||
}
|
||
|
||
/* 宫格项名统一走 28rpx 标题档（与 .contact-name / .quick-name 同级）。
|
||
5 字项名「出入院代办」= 140rpx，小于列宽 167rpx，不折行 */
|
||
.assist-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: var(--ink-2);
|
||
}
|
||
|
||
/* ===== ④ 常用功能 ===== */
|
||
/* 全页唯一的状态色：这是唯一"需要用户行动"的信息，用它把视线钉住 */
|
||
.order-tip {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 22rpx 24rpx;
|
||
margin-bottom: 16rpx;
|
||
border-radius: 20rpx;
|
||
background: var(--status-soft);
|
||
border: 2rpx solid var(--status-line);
|
||
}
|
||
|
||
.order-tip:active {
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.order-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background: var(--status-ink);
|
||
margin-right: 14rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.order-tip-text {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: var(--status-ink);
|
||
}
|
||
|
||
/* 仅两个入口时，通栏列表右侧大面积留白；改为双列卡片，图标在上、文字在下 */
|
||
.quick-list {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.quick-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
padding: 24rpx;
|
||
border-radius: 28rpx;
|
||
background: var(--white);
|
||
border: 2rpx solid var(--line);
|
||
box-shadow: var(--shadow-card);
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
.quick-item:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.quick-icon {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
border-radius: 20rpx;
|
||
background: var(--brand-soft);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.quick-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.quick-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.quick-desc {
|
||
font-size: 24rpx;
|
||
color: var(--muted);
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
/* ===== ⑤ 页脚 ===== */
|
||
.page-footer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 64rpx;
|
||
padding-top: 32rpx;
|
||
border-top: 2rpx solid var(--line);
|
||
}
|
||
|
||
/* B 端合作文字链：低调但可读，点击转服务电话 */
|
||
.footer-links {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.footer-link {
|
||
font-size: 24rpx;
|
||
color: var(--muted); /* 暖白底 4.83:1，过 AA 正文 */
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.footer-link:active {
|
||
color: var(--brand-strong);
|
||
}
|
||
|
||
.footer-sep {
|
||
font-size: 24rpx;
|
||
color: var(--faint); /* 仅作装饰分隔，不承载信息 */
|
||
margin: 0 16rpx;
|
||
}
|
||
|
||
.footer-note {
|
||
font-size: 24rpx;
|
||
color: var(--muted);
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
/* 自定义 tabBar 是 fixed 脱离文档流的，这里补足它的高度，否则页脚会被盖住 */
|
||
.footer-space {
|
||
height: calc(140rpx + env(safe-area-inset-bottom));
|
||
} |