556 lines
19 KiB
Plaintext
556 lines
19 KiB
Plaintext
/* ===== 首页 · 暖白纸面 × 单一暖橙（按参考图设计语言重做） =====
|
||
参考图要点：
|
||
- 暖白纸面 + 纯白圆角卡片 + 米色发丝边，阴影极轻，几乎只靠留白分层
|
||
- 单一暖橙主色：实心按钮/标识走深一档，浅橙衬底承载图标与标签
|
||
- 大量圆角方形衬底 + 彩色线图标
|
||
- 大字号标题直接落在纸面上，不用整块色面板压首屏 */
|
||
|
||
page {
|
||
/* 配色令牌已上移到 app.wxss（全站唯一来源，改配色只改那一处），本页不再留副本。
|
||
这里只剩本页专属的一样：「待服务订单」提醒条的状态色——全页唯一的冷色，
|
||
语义由 DESIGN.md §3 管，不随主色走 */
|
||
--status-soft: #ECF7F4;
|
||
--status-line: #C7E5DF;
|
||
--status-ink: #0F766E; /* #ECF7F4 上 5.0:1，过 AA 正文 */
|
||
}
|
||
|
||
.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 2rpx 8rpx rgba(184, 82, 10, 0.16);
|
||
}
|
||
|
||
.brand-logo {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.brand-name {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
margin-left: 16rpx;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* ===== ① 头部：大字标题直接落在纸面上 ===== */
|
||
/* 留白加码：44→56rpx 上、+16rpx 下（下方 .section 自带 56rpx，合计 72rpx 到"陪诊服务"）。
|
||
topbar 的 120rpx 不能动，那是给微信胶囊/状态栏让位的安全距，不是设计留白 */
|
||
.hero {
|
||
padding: 56rpx 0 16rpx;
|
||
}
|
||
|
||
.hero-title {
|
||
display: block;
|
||
/* 居中：与下方居中的信任条、通栏 CTA 共用一条视觉中轴，首屏呈海报式对称 */
|
||
text-align: center;
|
||
/* 48rpx(24px) 正好落在 WCAG"大字"门槛(18pt/24px)上，橙色半句的 AA 结论不变。
|
||
从 52 收到 48：52rpx 与下方 34rpx 区块标题之间是 1.53× 的空断层，
|
||
且 52rpx 全页只出现这一次，是首屏显重的三个来源之一 */
|
||
font-size: 50rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 3rpx;
|
||
/* 1.36 → 1.45：标题自身也松一口气，配合下方三段 gap 一起降密度 */
|
||
line-height: 1.45;
|
||
}
|
||
|
||
/* 不用逗号断句：靠「暖橙强调 + 深墨正文」的色差切分两个短句。
|
||
两段合计 11 字 × (48rpx + 2rpx 字距) + 10rpx 间隔 ≈ 560rpx，
|
||
小于容器内宽 686rpx（750 - 32×2 页边距），不会折行 */
|
||
.hero-title-accent {
|
||
color: var(--brand-strong); /* 暖白纸面上 4.66:1，过 AA（50rpx/700 属大字，3:1 门槛之上） */
|
||
}
|
||
|
||
.hero-title-main {
|
||
color: var(--ink);
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
/* 场景行：三项核心场景两行排布（场景词 + 补充），纯展示不点击。
|
||
场景词走暖橙 --brand-ink 做暖色标签，与标题深墨半句靠色相拉开层级，
|
||
避免两条深色带叠在一起；补充走 muted 保持安静。
|
||
28 → 40rpx：补充语由 8 字收到 5 字后横向已有空气，纵向再拉开一档 */
|
||
.scene-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.scene-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.scene-name {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
/* 暖橙 --brand-ink：与标题深墨半句「让就医更省心」同屏时靠色相拉开层级，
|
||
避免两段 ink+700 连排成"两条深色带"；比标题的 --brand-strong 低一档分量，
|
||
标题仍是首屏唯一的暖色焦点。纸面上 6.10:1，过 AA */
|
||
color: var(--brand-ink);
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.scene-desc {
|
||
margin-top: 6rpx;
|
||
font-size: 24rpx;
|
||
color: var(--muted);
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* 竖分隔线：仅装饰，不承载信息。
|
||
比 --line 加深一档，保证暖白纸面上仍可见 */
|
||
.scene-sep {
|
||
width: 2rpx;
|
||
height: 44rpx;
|
||
background: #E5DACC;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 主行动按钮：通栏胶囊，直达服务列表。
|
||
36 → 48rpx 上间距、26 → 30rpx 内边距：让它在松开的首屏里仍然"立得住"——
|
||
上一轮已把彩色阴影收到 0 2rpx 8rpx/16%，抓力更依赖自身色块，故用体量补回来 */
|
||
.hero-cta {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 48rpx;
|
||
padding: 30rpx;
|
||
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: 700;
|
||
color: var(--white);
|
||
letter-spacing: 2rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
/* ===== ② 陪诊服务：服务宫格 + 品类介绍卡 ===== */
|
||
/* 介绍卡：整卡走浅橙衬底，位于宫格下方，是本区块的尾部视觉锚点；
|
||
宫格保持白卡安静语言、紧贴标题。
|
||
纯内容展示卡（不可点），指南入口在区块标题行右侧 */
|
||
.intro-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 28rpx 26rpx;
|
||
/* 位于宫格下方，改为上间距；比原 20rpx 略大，与宫格拉开层级 */
|
||
margin-top: 24rpx;
|
||
border-radius: 28rpx;
|
||
background: var(--brand-soft);
|
||
border: 2rpx solid var(--brand-line);
|
||
}
|
||
|
||
/* 介绍卡定位句：一句（14 字）读完全卡主旨，比信任行更深一档做层级，
|
||
浅橙底 9.2:1 过 AA */
|
||
.intro-desc {
|
||
font-size: 26rpx;
|
||
line-height: 1.6;
|
||
color: var(--ink-2);
|
||
}
|
||
|
||
/* 信任行：三项信任背书单行小字，从首屏下沉至此，
|
||
在用户开始了解服务时补上信任背书；位于定位句下方，拉开 16rpx */
|
||
.intro-trust {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.intro-trust-item {
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
color: var(--brand-ink); /* 浅橙底 5.96:1，过 AA */
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* 分隔竖线：不能用 --brand-line(#FFE0C2)——它落在浅橙底 #FFF4E8 上只有 1.16:1，肉眼看不见。
|
||
改用 #E5DACC，与场景行、页脚的竖分隔线同一档，保证在浅橙底上也能看见 */
|
||
.intro-trust-sep {
|
||
width: 2rpx;
|
||
height: 20rpx;
|
||
background: #E5DACC;
|
||
margin: 0 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 信任行里唯一的可点项：「实名专业陪诊师」→ 陪诊师公示页。
|
||
用 padding 16rpx 把热区撑到 56rpx(28px)，再配等量负外边距抵消，
|
||
信任行的行高与另两项保持完全不变 */
|
||
.intro-trust-link {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16rpx 0;
|
||
margin: -16rpx 0;
|
||
}
|
||
|
||
.intro-trust-link:active {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.intro-trust-link .intro-trust-item {
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
/* ===== 通用区块 ===== */
|
||
.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;
|
||
}
|
||
|
||
/* 标题行右侧入口（如「服务指南」）：靠 margin-left:auto 右对齐。
|
||
走 muted 而非暖橙，把橙色焦点留给 hero 标题；24rpx 纸面 5.28:1 过 AA。
|
||
文字只有 24rpx 高，用 padding 把点击热区撑到 56rpx(28px)，
|
||
再用等量负外边距抵消，保证标题行的高度与上下间距不变 */
|
||
.section-link {
|
||
margin: -16rpx 0 -16rpx auto;
|
||
padding: 16rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.section-link:active {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.section-link-text {
|
||
font-size: 24rpx;
|
||
color: var(--muted);
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* 服务宫格：8 项服务白卡（区块主体，紧贴标题） */
|
||
.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;
|
||
}
|
||
|
||
/* 8 项服务：4 列 × 2 行正好排满 */
|
||
.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、暖橙 #B8520A，base64 内嵌避免引入图标字体。
|
||
60rpx(30px) 是过 WCAG 非文本 3:1 后兼顾真机清晰度、减少白卡空荡感的尺寸。
|
||
图标直接落在白卡上、不加衬底方块：衬底层级已让给上方主推卡，小宫格保持安静 */
|
||
.assist-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgNi42VjEybDMuOCAyLjIiLz48L3N2Zz4=");
|
||
}
|
||
|
||
/* 2 半天陪诊：整圈表盘 + 右半实心填充，与 1 的"空心全圈"形成"全 / 半"对照，
|
||
避免原半月形在小尺寸下被误读为字母 D */
|
||
.assist-icon-2 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgMy41YTguNSA4LjUgMCAwIDEgMCAxN1oiIGZpbGw9IiNCODUyMEEiIHN0cm9rZT0ibm9uZSIvPjwvc3ZnPg==");
|
||
}
|
||
|
||
/* 3 代问诊：对话气泡 + 医疗十字 */
|
||
.assist-icon-3 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMTQuNWEyLjUgMi41IDAgMCAxLTIuNSAyLjVIOGwtNCAzLjVWNmEyLjUgMi41IDAgMCAxIDIuNS0yLjVoMTFBMi41IDIuNSAwIDAgMSAyMCA2WiIvPjxwYXRoIGQ9Ik0xMiA3LjZ2NS4yTTkuNCAxMC4yaDUuMiIvPjwvc3ZnPg==");
|
||
}
|
||
|
||
/* 4 检查预约：日历 + 对勾 */
|
||
.assist-icon-4 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzLjUiIHk9IjUiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNS41IiByeD0iMi41Ii8+PHBhdGggZD0iTTggM3Y0TTE2IDN2NE0zLjUgOS41aDE3Ii8+PHBhdGggZD0ibTkuNCAxNSAxLjkgMS45IDMuNy00Ii8+PC9zdmc+");
|
||
}
|
||
|
||
/* 5 出入院代办：医院楼 + 地面 + 十字 */
|
||
.assist-icon-5 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNC41IDIwLjVWNi41YTIgMiAwIDAgMSAyLTJoMTFhMiAyIDAgMCAxIDIgMnYxNCIvPjxwYXRoIGQ9Ik0yLjUgMjAuNWgxOSIvPjxwYXRoIGQ9Ik0xMiA4LjZ2NU05LjUgMTEuMWg1Ii8+PC9zdmc+");
|
||
}
|
||
|
||
/* 6 跑腿服务：单据 + 对勾（**线形描边**，stroke 1.5，与 1~5/7/8 同档，不填充）。
|
||
语义定位：本项卖的是"**跑腿代办**"——你交代的事我替你办妥，**不是"快"**。
|
||
（副题里的"一小时"是时长规格，不是速度承诺，不能拿它当图形依据）
|
||
母题沿革（均已废弃，勿回退）：
|
||
① 奔跑人形——躯干前倾，60rpx 下读成"要摔倒"；
|
||
② 直立人 + 手持文件（粗轮廓 + 部分填充）——填充占比不足 15%，四肢描边仍主导观感，整体还是线稿；
|
||
③ 实心闪电——重量与其余 7 枚线形图标脱节，被否；
|
||
④ 线形闪电——形状本身没问题，但闪电只表"快"，与本项"代办"的实际卖点不符，被否。
|
||
与 4「检查预约」（日历 + 对勾）的区分点：本图是**右上折角**的单据（顶部无挂耳、无横贯分隔线），
|
||
4 是**顶部两个挂耳**的日历。两者不同行不同列，60rpx 下靠"折角 vs 挂耳"一眼分开。
|
||
备选（同样不撞车、同样线形）：运动鞋侧面——直接读"跑腿" */
|
||
.assist-icon-6 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgMy41SDZhMiAyIDAgMCAwLTIgMnYxM2EyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJWOS41WiIvPjxwYXRoIGQ9Ik0xNCAzLjV2Nmg2Ii8+PHBhdGggZD0ibTguOCAxNC40IDIuMiAyLjIgNC40LTQuOCIvPjwvc3ZnPg==");
|
||
}
|
||
|
||
/* 7 夜间陪诊：弯月，与 1/2 的"表盘"区分开，一眼读出"夜间" */
|
||
.assist-icon-7 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgM2E2IDYgMCAwIDAgOSA5IDkgOSAwIDEgMS05LTlaIi8+PC9zdmc+");
|
||
}
|
||
|
||
/* 8 取药快递：送货小车，与 6 的"闪电"（表速度）分工开，一眼读出"寄送" */
|
||
.assist-icon-8 {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTQgMThWNmEyIDIgMCAwIDAtMi0ySDRhMiAyIDAgMCAwLTIgMnYxMWExIDEgMCAwIDAgMSAxaDIiLz48cGF0aCBkPSJNMTUgMThIOSIvPjxwYXRoIGQ9Ik0xOSAxOGgyYTEgMSAwIDAgMCAxLTF2LTMuNjVhMSAxIDAgMCAwLS4yMi0uNjI0bC0zLjQ4LTQuMzVBMSAxIDAgMCAwIDE3LjUyIDhIMTQiLz48Y2lyY2xlIGN4PSIxNyIgY3k9IjE4IiByPSIyIi8+PGNpcmNsZSBjeD0iNyIgY3k9IjE4IiByPSIyIi8+PC9zdmc+");
|
||
}
|
||
|
||
/* 宫格项名统一走 28rpx 标题档（与 .quick-name 同级）。
|
||
4 列布局列宽 ≈ 167rpx，5 字项名「出入院代办」= 140rpx，不折行 */
|
||
.assist-name {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
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: 700;
|
||
color: var(--status-ink);
|
||
}
|
||
|
||
/* 双列卡片 + 图标左、文字右的横排结构；
|
||
第三张通栏卡靠换行落到第二行 */
|
||
.quick-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
/* 图标左、文字右的横排结构 */
|
||
.quick-item {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
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);
|
||
}
|
||
|
||
/* 通栏卡（联系我们）：两列网格 2+1 排布，第三张占满第二行。
|
||
必须显式 border-box：全局只有 .container 设了它，否则 width:100%
|
||
会再叠加自身 padding(24rpx×2) + 描边(2rpx×2)，整卡溢出容器。
|
||
同时兼作页面尾部的落点：下半区（宫格、功能卡）全是"白卡 + 28rpx 深墨标题"的同一语言，
|
||
视线落下去找不到第二处落点，"上重下平"由此而来。
|
||
这里借用陪诊服务区块尾部的浅橙介绍卡语言，让每个区块都收在暖色卡上；
|
||
浅橙底本身已能与纸面区分，故去掉阴影，与介绍卡保持一致 */
|
||
.quick-item-full {
|
||
width: 100%;
|
||
flex: none;
|
||
box-sizing: border-box;
|
||
background: var(--brand-soft);
|
||
border-color: var(--brand-line);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 浅橙衬底上不再叠浅橙衬底（同色叠同色等于没有衬底），让图标直接落在卡面上，
|
||
与陪诊服务宫格"图标不加衬底"的处理一致 */
|
||
.quick-item-full .quick-icon {
|
||
background: transparent;
|
||
}
|
||
|
||
/* 68 → 60rpx：两列卡右侧补了 chevron 后文字区被压缩，
|
||
衬底缩一档给 desc 让出宽度（60rpx/30px 仍在真机清晰区间内） */
|
||
.quick-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 18rpx;
|
||
background: var(--brand-soft);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 14rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.quick-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
}
|
||
|
||
.quick-name {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.quick-desc {
|
||
font-size: 24rpx;
|
||
color: var(--muted);
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
/* 每张卡右侧箭头：两列卡此前没有任何点击暗示，属于"无暗示的整卡可点"，
|
||
与通栏卡不一致；补齐后三张卡语言统一，通栏卡同时填补右半空白 */
|
||
.quick-arrow {
|
||
margin-left: auto;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* ===== ⑤ 页脚 ===== */
|
||
.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;
|
||
}
|
||
|
||
/* 文字只有 24rpx 高，用 padding 撑热区、等量负外边距抵消，不影响页脚原有行距 */
|
||
.footer-link {
|
||
padding: 16rpx 0;
|
||
margin: -16rpx 0;
|
||
font-size: 24rpx;
|
||
color: var(--muted); /* 纸面 5.28:1，过 AA 正文 */
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.footer-link:active {
|
||
color: var(--brand-strong);
|
||
}
|
||
|
||
/* 细竖线分隔：替代原中点字符，避免一行多点 */
|
||
.footer-sep {
|
||
width: 2rpx;
|
||
height: 20rpx;
|
||
background: var(--faint); /* 仅作装饰分隔，不承载信息 */
|
||
margin: 0 24rpx;
|
||
}
|
||
|
||
.footer-note {
|
||
font-size: 24rpx;
|
||
color: var(--muted);
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
/* 自定义 tabBar 是 fixed 脱离文档流的，这里补足它的高度，否则页脚会被盖住 */
|
||
.footer-space {
|
||
height: calc(100rpx + env(safe-area-inset-bottom));
|
||
} |