xJourney/wxapp_escort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页和服务列表定稿

Browse Source
This commit is contained in:
lik
2026-10-04 12:53:19 +08:00
parent c412964ab6
commit 5844272762
4 changed files with 399 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/escort/itemlist.js
+18 -7
View File
@@ -1,28 +1,39 @@
// 服务按"要办的事"分三组，而不是照后端返回顺序平铺。
// 组内是能直接比较的同质选项，组间是完全不同的决定；
// note 是每组末尾那块浅橙说明砖，只讲"什么情况适合选这一组"，不重复列服务。
// 标题只回答"这一组是什么"（陪同就医 / 就医代办 / 多次使用，统一 4 字），
// "什么情况该选这一组"整句交给下面的 note——标题与副题各管一头。
// 前两组刻意走国标口径：GB/T 47801—2026 的标题即《社会化陪同就医服务》，
// 3.1 定义与 3.5「陪同就医服务人员」都用「陪同就医」这个词。
// 第二组不叫「代办跑腿」——组内第四项的服务名就叫「跑腿服务」(services.js id 6)，
// 拿成员名当组名，另外三项会读成"剩下的"；用「就医代办」则不与任何一项重名，
// 也与组内已有的「出入院代办」共用同一个动作词。
// note 是每组标题下的一句副题（这组是给谁的），只讲"什么情况适合选这一组"，
// 不重复列服务；在页面上挂 .group-sub，是扁平小字而非卡片
// ids 对应 services.js 里的服务 id，取不到的项会被跳过
const SERVICE_GROUPS = [{
key: 'accompany',
title: '要有人陪着去',
title: '陪同就医',
note: '老人、异地就医，或不便独自就诊的情况都适合。陪诊师提前确认院区路线与科室位置，就诊当天全程在场。',
ids: [1, 2] // 全天陪诊 / 半天陪诊
},
{
key: 'errand',
title: '只要有人代办',
title: '就医代办',
note: '本人不必到场。排队取号、递送材料、取报告这些跑动的事都可以交给我们，办完的结果原样带回。',
ids: [3, 4, 5, 6] // 代问诊 / 检查预约 / 出入院代办 / 跑腿服务
},
{
key: 'pack',
// 原「打算长期使用」讲的是"买法"（打包更省），和前两组的"要办的事"不同轴。
// 拉回同一根轴，标题只说"要办的事"，优惠留给下面那块说明砖去讲
title: '要办很多次',
// 这一组本来就是"买法"（一次买多次），不是第三类服务。
// 前两组的标题是服务类型，这组 4 字里只能承认它是"用法"——
// 「多次使用」与它们字数、句法齐平，同屏看不出接缝（备选「长期使用」）。
// 沿革：这里放过「打算长期使用」，因与另外两组的"要办的事"不同轴被改回口语，
// 现在三组标题统一改成 4 字短语，它也就不再是异类
title: '多次使用',
note: '需要多次复诊或长期治疗时，一次买多次，省去反复下单的麻烦，每次按次使用。',
ids: [7, 8] // VIP 5次 半天陪诊 / VIP 5次代买药
// 注：条目改单行横排后名称不再被半栏宽度挤压，这两个"VIP 5次 XXX"已恢复原名，
// "买多次"由名称自己交代；组标题与说明砖仍负责讲清"什么情况选这一组"
// "买多次"由名称自己交代；组标题与副题仍负责讲清"什么情况选这一组"
}
]
pages/escort/itemlist.wxml
+56 -30
View File
@@ -1,68 +1,94 @@
<view class="page-bg">
<view class="container">
<!-- 页首不重复导航栏的「陪诊服务」大标题，改成一张说明卡：
短横色标 + 一句关键披露 + 发丝线 + 两个入口。
卡面走"白卡 + 发丝边 + 暖色紧阴影"，把首屏从纸面上拎起来 -->
<!-- 页首分两层：
① 纸面上一行「短横色标 + 一句引导」——导航栏已经写着「陪诊服务」，
所以这里不写页名，只让用户动手挑（下面三组就是可选项）；
记号沿用详情页页首那一支（64×8rpx 短横 + 22rpx 间距），
两页共用同一套页面级抬头语言；
② 一张说明白卡：城市与费用披露 → 发丝线 → 两个入口。
卡首不放短横色标——短横是页面级记号，区块级留给三个组头的竖条。
先给一句引导再读披露，首屏是"引导 → 声明 → 清单"三层。
卡面走"白卡 + 发丝边 + 紧阴影"（中性 --shadow-card，与首页白卡同值），
把首屏从纸面上拎起来；形状仍是内缩圆角卡，不改成通栏白条 -->
<view class="page-lead">
<view class="page-accent"></view>
<text class="page-lead-text">请选择相应的服务</text>
</view>
<view class="notice">
<view class="notice-tick"></view>
<text class="notice-text">全国接单，按次收费。费用不含挂号费、检查费、药费。</text>
<text class="notice-text">目前已开通北京、上海、天津。费用仅含人工服务费，不含就医费用。</text>
<view class="notice-hr"></view>
<view class="notice-links">
<view class="notice-link" bindtap="goToGuide">
<text class="notice-link-text">服务指南</text>
<t-icon name="chevron-right" size="24rpx" color="#6F655C" />
<t-icon name="chevron-right" size="26rpx" color="#9A3412" />
</view>
<view class="notice-sep"></view>
<view class="notice-link" bindtap="goToAgreement">
<text class="notice-link-text">用户协议</text>
<t-icon name="chevron-right" size="24rpx" color="#6F655C" />
<t-icon name="chevron-right" size="26rpx" color="#9A3412" />
</view>
</view>
</view>
<!-- 服务按"要办的事"分三组。组头是"表头"：竖条 + 40rpx 标题 + 通栏发丝线，
整页由此读成三章的价目表。条目一律一条一行：只有规则线、没有卡片。
从 2×2 价目表改为单行，是因为半栏只有 317rpx（说明要折行、名称要被迫缩短），
而这份数据里真正能横向比价的只有第一组（全天/半天）两格。
每行两列：左列名称 + 规格签 + 点线 + 价格（同一行）+ 说明；右列只剩一个预约按钮。
每组末尾压一块浅橙说明砖，交代"什么情况适合选这一组" -->
<!-- 服务按"要办的事"分三组，每组一块通栏白底：组头（竖条 + 36rpx 标题 +
一句副题）→ 通栏章线 → 清单，整页由此读成三张一体的价目表。
白底做成"通栏截面"：左右 -32rpx 顶到屏幕两侧，左右内距复用容器的 32rpx，
行的可用宽度因此仍是 686rpx、一分未变（原理详见 itemlist.wxss 的 .group）。
副题（原来压在组末的浅橙说明砖）搬到标题下并剥成扁平小字：
位置对了——读到标题就知道这组是给谁的；形状也对了——
它待在组头内部，"卡顶 → 组头 → 章线 → 行"的读法不断。
条目一律一条一行：规则线而已，卡只到"组"这一级。
每行分两层，不是左右两栏：
第一层 = 名称 +（规格签 · 价格 · 预约），四样同一横向中线，右区整体贴右边缘；
第二层 = 说明，独占一行、满宽 686rpx。
价格从右栏提回名称行，是为了与名称同基线（原先两栏垂直居中，
两行的行里价格会掉到说明那一行的高度）；说明因此拿到满宽，
「磁共振预约、CT预约、彩超等其他预约」与「送资料/代排队/买药/取报告等一小时陪诊服务」
这两条不再折行。
规格签放在价格左边而不是名称右边：时长与价格本来是一对（规格决定价格），
紧挨着读成「4小时/次 ¥300」；八行的签右侧也因此对齐成一列。
项间分隔线是虚线，横跨整行、拉到卡的内边缘；末行不画，收口交给卡底 -->
<view class="group" wx:for="{{ groups }}" wx:key="key">
<view class="group-head">
<view class="group-bar"></view>
<text class="group-title">{{ item.title }}</text>
<view class="group-head-row">
<view class="group-bar"></view>
<text class="group-title">{{ item.title }}</text>
</view>
<text class="group-sub">{{ item.note }}</text>
</view>
<view class="ledger">
<view class="ledger-row" wx:for="{{ item.items }}" wx:for-item="srv" wx:key="id">
<!-- 左列：名称 + 规格签 + 点线 + 价格同一行，下面接说明 -->
<view class="row-main">
<view class="row-name-wrap">
<text class="row-name">{{ srv.title }}</text>
<!-- 第一层：名称在左；规格签 → 价格 → 预约 三段贴右边缘，同一横向中线 -->
<view class="row-head">
<text class="row-name">{{ srv.title }}</text>
<view class="row-side">
<text class="unit-chip" wx:if="{{ srv.unit }}">{{ srv.unit }}</text>
<view class="row-leader"></view>
<view class="price">
<text class="price-sym">¥</text>
<text class="price-num">{{ srv.price }}</text>
</view>
<view class="book-btn" catchtap="goToBook" data-id="{{ srv.id }}">
<text class="book-btn-text">预约</text>
</view>
</view>
<text class="row-desc">{{ srv.desc }}</text>
</view>
<!-- 右列：只剩一个预约按钮，垂直居中 -->
<view class="book-btn" catchtap="goToBook" data-id="{{ srv.id }}">
<text class="book-btn-text">预约</text>
</view>
<!-- 第二层：说明独占一行，满宽 686rpx -->
<text class="row-desc">{{ srv.desc }}</text>
</view>
</view>
<view class="group-note">
<text class="group-note-text">{{ item.note }}</text>
</view>
</view>
<!-- 页脚：翻完三组仍未决定的兜底出口 -->
<!-- 页脚：翻完三组仍未决定的兜底出口。
做成一张浅橙收口卡——与首页「常用功能」区块尾部的「联系我们」卡
（.quick-item-full）同源：--brand-soft 底 + 2rpx --brand-line 描边 + 去阴影。
首页每个区块都收在暖色卡上，本页原先四张白面一张暖色面都没有，
暖色只剩"线"（竖条 / 按钮环 / 暖陶土字），整页因此比首页轻一档；
这张卡就是补回来的那张"面"，也是页尾唯一的暖色落点 -->
<view class="page-footer">
<text class="footer-text">没有合适的？</text>
<view class="footer-link" bindtap="goToContact">
pages/escort/itemlist.wxss
+317 -155
View File
@@ -1,25 +1,57 @@
/* pages/escort/itemlist.wxss
设计方向：本页是一张"按要办的事挑服务"的价目单，8 条服务同一个形状才方便扫读。
- 页首说明做成一张白卡（短横色标 → 关键披露 → 发丝线 → 两个入口），
让首屏从纸面上拎起一个落点，而不是三段裸字
- 八条服务按"要办的事"分三组，组头做成"表头"：竖条 + 40rpx 标题 + 通栏发丝线，
下面接清单，整页读起来像三章的价目表；组与组之间仍只用留白，不叠第二道横线
- 条目一律一条一行：只有规则线没有卡片。
- 页首分两层：纸面上一行「短横色标 + 一句引导」（让用户动手挑），
下面接说明白卡（城市与费用披露 → 发丝线 → 两个入口）。
先给一句引导再读披露，首屏是"引导 → 声明 → 清单"三层，
而不是一上来就撞条款；也让首屏从纸面上拎起一个落点，而不是三段裸字
- 八条服务按"要办的事"分三组，每组是一块通栏白底：组头（竖条 + 36rpx 标题 +
一句 28rpx 的副题）→ 通栏章线 → 清单，整页读起来像三张一体的价目表；
组与组之间是 36rpx 纸面留白，卡的边界由各自的发丝边与紧阴影承担
- 三块白底做成"通栏截面"：负外边距 -32rpx 顶到屏幕两侧，左右内距直接复用
页面容器已有的 32rpx——行的可用宽度因此仍是 686rpx，一分未变、零折行风险。
这是"白底 card"敢做的唯一方式：若卡内缩 32rpx 再自带 24rpx 内距，
内容宽会掉到 638rpx，最长名称「VIP 5次 半天陪诊」(249rpx) 当场折行（详见 .group）。
代价是形不再是"浮起的小卡"而是"一条白色章节带"，圆角因此为 0
（满宽块的圆角会切在屏幕边上）；与页首 .notice 那张内缩圆角卡是两种角色两种形
- 副题是扁平小字，不用浅橙砖：浅橙砖会和下一组的强组头贴在一起，
两个重元素相邻反而糊掉组界；也不留在橙砖形式，是因为它必须待在组头内部，
让"卡顶 → 组头 → 章线 → 行"这条读法不断
- 条目一律一条一行：只有规则线没有卡片（卡只到"组"这一级）。
原先是 2×2 价目表，但半栏只有 317rpx——说明句要折行、名称要被迫缩短，
而这份数据里真正能横向比价的只有第一组（全天/半天）两格，代价不值，故改单行
- 每行：左侧名称 + 规格签 + 点线 + 价格（同一行）+ 说明 / 右侧一个预约按钮
- 点线（--sep）把名称与价格之间的空档连起来，是这一页最像"价目单"的那一笔；
它 flex-basis 为 0，空间紧时自己缩到没有，不会把名称挤折行
- 按钮走 --brand-strong 描边（不填充）：与首页主 CTA 同一套按钮语言，
描边不构成 DESIGN.md §2.1 说的"实心大色块"，8 个也不会把暖橙铺成面
- 每行分两层，不是左右两栏：上层「名称 +（规格签 · 价格 · 预约）」一行、
四样同一横向中线、右区整体贴右边缘；下层说明独占、满宽 686rpx。
价格因此与名称同基线，说明也因此从 436rpx 拿到满宽
- 项间虚线挂在 .ledger-row 上、通栏到卡的内边缘；每组最后一行不画
（.ledger-row:last-child）——卡的底边已经替它收了口，留着会叠出
"虚线 + 28rpx + 卡边发丝线"的双线。章线开、卡边收，每章仍是一张闭合的表
- 按钮走"空心胶囊"：3rpx --brand-strong 环 + 满圆角 + 暖陶土字（纸面 6.89:1），
无填充无阴影，按下填 --brand-line。之所以不用填充，是因为按钮挪到价格左边后
与规格签撞了形——签是"浅橙底 + 小圆角"，按钮若也做成"浅橙底 + 圆角"，
同一行就出现两个同形物体，读起来是两个标签，分不清哪个能点。
现在签 = 暖陶土小字、按钮 = 满圆角空心环，一行只剩一个填充物。
字重也从 700 降到 500：可点性改由环承担，字不必再靠粗度喊话
（代价是 500 在部分 Android 上会落回常规，详见 .book-btn 注释）
- 价格按用户要求弱化：--muted + 字重 500（本页对 §2.1「价格数字」的例外，已登记）
- 字号阶梯：组标题 40 / 名称 30 / 说明 26 / 签与页脚 24（rpx）
- 形状锁定：说明砖 28rpx、页首说明卡 20rpx、预约按钮 12rpx、
规格签只在右侧 6rpx 做圆角（色标式），其余圆角一律不做 */
- 字号阶梯：正文对齐 agreement 页的 28rpx，本页据此排成
组标题 36 / 名称 · 价格 32 / 按钮 30 / 副题 · 说明 · 披露 · 入口 · 页脚 28 /
规格签 26（rpx）。比原来整页抬了一档，是为老人可读性；
全页最小字号因此从 24rpx(12px) 升到 26rpx(13px)
- 形状锁定：页首说明卡 28rpx（与首页白卡同值）、页脚浅橙卡 28rpx（与首页
.quick-item-full 同值）、预约按钮 28rpx（= 高 56rpx 的一半，成胶囊）、
规格签 6rpx（已按用户要求去掉左竖条）、分组白底 0（通栏块）；其余圆角一律不做
- 白面的托形语言全页一套，且与首页一致：白面走 2rpx --line + --shadow-card
（中性暖墨 0 2rpx 10rpx rgba(63,43,25,.07)）；页脚那张浅橙面走 2rpx
--brand-line、去阴影（与首页 intro-card / quick-item-full 相同）。
全页因此仍没有彩色阴影
- 与首页的对齐账（本轮）：① 区块竖条回到首页同一支（8×36，此前被放大到 12×48）；
② 页尾补一张浅橙收口卡，把"暖色只剩线、没有面"这一档补回来。
落差只剩一处，且是分工使然：首页「立即预约」是实心 --brand-strong 胶囊（1 个主 CTA），
本页「预约」是 3rpx 空心环（8 个并列动作）——8 个实心橙排一列会撞 §2.1，故不跟 */
page {
--brand-strong: #C2410C; /* 按钮描边/文字、区块竖条：纸面上 4.89:1，过 AA 与非文本 3:1 */
--brand-soft: #FFF4E8; /* 浅橙衬底，暖色的第二档；也是按钮按下态 */
--brand-line: #FFE0C2; /* 浅橙衬底描边 */
--brand-strong: #C2410C; /* 按钮环、区块竖条：纸面上 4.89:1，过 AA 与非文本 3:1 */
--brand-soft: #FFF4E8; /* 浅橙衬底，暖色的第二档；也是规格签的底 */
--brand-line: #FFE0C2; /* 浅橙衬底描边；也是按钮按下时的填充 */
--brand-ink: #9A3412; /* 浅橙衬底/纸面上的文字链：6.8:1，过 AA */
--ink: #2B2521;
@@ -31,6 +63,11 @@ page {
--paper: #FAF8F5;
--white: #FFFFFF;
/* 白卡托形阴影：与首页 --shadow-card 同值，全站一套。
用中性暖墨而不是暖橙——DESIGN.md §2.3 把彩色阴影登记给"浅橙块托形"，
白面一律走中性；暖橙阴影会让白卡边缘泛出一圈暖晕，与首页的白卡不是同一种东西 */
--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07);
background-color: var(--paper);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@@ -44,32 +81,58 @@ page {
padding: 0 32rpx calc(40rpx + env(safe-area-inset-bottom));
}
/* ===== 说明卡：页首第一块 =====
页内大标题与导航栏的「陪诊服务」重复，不重复写；
说明做成一张白卡（发丝边 + 暖色紧阴影 = DESIGN.md §2.3 的托形写法），
卡内三段：短横色标 → 一句关键披露 → 发丝线 → 两个入口 */
.notice {
/* ===== 页首引导：纸面上一行 =====
页名已经在导航栏的「陪诊服务」上，所以这行不写页名，只让用户动手挑——
下面三组就是可选项，对着自己的情况挑一行就行。
记号沿用详情页页首那一支：64×8rpx 短横色标（--brand-strong）+ 22rpx 间距，
两页共用同一套"页面级抬头"语言。短横是页面级的记号，区块级留给三个组头的竖条——
本页原先那条 .notice-tick（48×6rpx）是同一支记号走散了的版本，已一并删掉。
字号 32rpx/700/--ink：本页是价目单，真正的主结构是三个 36rpx 的组标题，
这行是导语，刻意压在组标题下一档、不跟它抢层级；但比 28rpx 的副题档重，
落在纸面上仍读得出"页面从这里开始"。
位置在说明卡之上、纸面上：先给一句引导，再读卡里的城市与费用披露，
首屏因此是"引导 → 声明 → 清单"三层，而不是一上来就撞条款 */
.page-lead {
margin-top: 32rpx;
padding: 30rpx 28rpx 14rpx;
background: var(--white);
border: 2rpx solid var(--line);
border-radius: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(194, 65, 12, 0.08);
}
/* 短横色标：与详情页页首同一种品牌标记语言，比区块竖条更"抬头" */
.notice-tick {
width: 48rpx;
height: 6rpx;
border-radius: 3rpx;
.page-accent {
width: 64rpx;
height: 8rpx;
border-radius: 4rpx;
background: var(--brand-strong);
}
.page-lead-text {
display: block;
margin-top: 22rpx;
font-size: 32rpx;
font-weight: 700;
color: var(--ink);
letter-spacing: 1rpx;
}
/* ===== 说明卡：页首第二块 =====
页内大标题与导航栏的「陪诊服务」重复，不重复写；
说明做成一张白卡（发丝边 + 紧阴影），卡内三段：一句关键披露 → 发丝线 → 两个入口。
圆角与阴影按用户要求对齐首页的白卡语言：28rpx + 中性 --shadow-card
（首页带阴影的白卡 .assist-card / .quick-item 都是这两个值）。
形状仍是"内缩圆角卡"，不改通栏白条：上方 32rpx 纸面缺口只有配圆角才成立——
方角通栏顶上留一道纸，会读成"这条被切掉了一截" */
.notice {
margin-top: 32rpx;
padding: 20rpx 28rpx 8rpx;
background: var(--white);
border: 2rpx solid var(--line);
border-radius: 28rpx;
box-shadow: var(--shadow-card);
}
/* 这句是费用披露，不是可有可无的说明，所以白卡上给 --ink-2 而不是 --muted */
.notice-text {
display: block;
margin-top: 18rpx;
font-size: 26rpx;
font-size: 28rpx;
color: var(--ink-2);
line-height: 1.7;
}
@@ -82,20 +145,24 @@ page {
}
/* 入口另起一行：细竖线分隔，与首页场景行同一套写法
（2rpx × 20rpx、#E5DACC，不用中点字符）。
链接语言对齐首页 .section-link：muted + 右侧 chevron，不用橙色下划线。
行距不另加上边距——.notice-link 自己的 padding 就是与分隔线之间的空隙 */
（2rpx 竖线、#E5DACC，不用中点字符）。
文字用 --brand-ink + 700，和页脚的文字链同一套语言——
上面那句披露是 --ink-2 常规字重的"要读的内容"，这两个入口是"能点的动作"，
靠暖色 + 字重与正文拉开，避免它们被读成又一行元信息 */
.notice-links {
display: flex;
align-items: center;
}
/* 文字只有 26rpx 高，用 padding 撑热区到 58rpx(29px)，再用等量负外边距抵消，行距不变 */
/* 上下各 22rpx 是真实行距，不再用负外边距抵消：
原来那套 padding 16rpx + margin -16rpx 只撑热区、不占高度，
视觉上两个入口贴着上方发丝线与卡的底边，太挤。
现在热区 22+36+22 = 80rpx(40px)，比原来的 58rpx 更好点；
与卡底边之间是 22rpx + 卡的 8rpx 下内距 = 30rpx，和卡顶的 30rpx 对称 */
.notice-link {
display: flex;
align-items: center;
padding: 16rpx 0;
margin: -16rpx 0;
padding: 22rpx 0;
}
.notice-link:active {
@@ -104,59 +171,117 @@ page {
.notice-link-text {
margin-right: 4rpx;
font-size: 26rpx;
color: var(--muted);
font-size: 28rpx;
font-weight: 700;
color: var(--brand-ink);
letter-spacing: 1rpx;
}
.notice-sep {
width: 2rpx;
height: 20rpx;
margin: 0 20rpx;
height: 24rpx;
margin: 0 24rpx;
background: var(--sep);
}
/* ===== 分组 =====
组头做成"表头"：竖条 + 大号标题 + 通栏发丝线，给这 2~4 条服务一个明确的"章"边界。
组与组之间仍只用留白（与首页 .section 同一种分离方式），不叠第二道横线 */
/* ===== 分组：每组一块通栏白底 =====
白面走"发丝边 + 紧阴影"，阴影与说明卡、与首页白卡同一个 --shadow-card（中性暖墨）。
组头做成"表头"：竖条 + 标题，下面接一句副题（这组是给谁的），
再压一条通栏章线，线下面直接是清单第一行——"章线 → 行"的读法不断。
白底卡的做法：左右 -32rpx 负外边距顶到屏幕两侧，再用等量 padding 补回来。
目的只有一个——让白面变宽而不让行宽变宽：行仍落在容器原有的 686rpx 上。
这是唯一可行解，因为这一行已经没有余量：
686 − 16(右区外边距) − 122(最长签) − 12 − 104(价格槽) − 24 − 128(按钮)
= 280rpx 可用，最长名称 249rpx，只剩 31rpx；
卡只要自带 24rpx 左右内距就吃掉 48rpx，最长那条名称当场折行。
代价是圆角为 0——满宽块的圆角会切在屏幕边上，留下纸色缺口。
组界：卡与卡之间只留 36rpx 纸面。原先是 68rpx 的"两条通栏线夹白"，
现在两侧各有发丝边与阴影托形，不需要那么宽的留白来分段；
36rpx 也够把两张卡的边线读成"上一张的边 + 纸面 + 下一张的边"，
而不会读成一条粗双线。卡上下的 28rpx 内距给组头与末行留出呼吸，
它比原来的组界留白（68rpx）小，净高度因此只增约 24rpx/组。
对比度：行内所有文字与色值由纸面移到了白卡上，对比度各高一档——
--muted 5.28→5.69:1、--brand-ink 6.89→7.31:1、--brand-strong 4.89→5.18:1。
下文各处标注的"纸面上 x:1"是沿革里的历史值，落到白卡上只增不减，
AA 与"非文本 3:1"的结论全部不变，因此不再逐处改写 */
.group {
margin-top: 64rpx;
box-sizing: border-box;
margin: 36rpx -32rpx 0;
padding: 28rpx 32rpx;
background: var(--white);
border-top: 2rpx solid var(--line);
border-bottom: 2rpx solid var(--line);
box-shadow: var(--shadow-card);
}
/* 表头 = 标题行 + 副题 + 章线。三样合成一块，章线因此落在副题之下、紧贴第一行。
全页三条线分工固定（都落在白卡上，比落在纸面时略清楚一点）：
卡边 2rpx solid --line ← 最轻，只托卡的边界
章线 3rpx solid --sep ← 最重
行线 3rpx dashed --sep ← 同宽同色，但虚线读起来轻
行线色 --sep 比卡边色 --line 深，所以实线的重音给章线（--sep 3rpx solid）、
轻音给行线（--sep 3rpx dashed），层级交由实/虚区分，不靠继续加深线色。
原先还有第四条"页脚 2rpx solid --line"收尾；页脚改成浅橙收口卡后，
那道发丝线由卡自己的 --brand-line 描边接替，线种从四收成三 */
.group-head {
padding-bottom: 18rpx;
border-bottom: 3rpx solid var(--sep);
}
.group-head-row {
display: flex;
align-items: center;
padding-bottom: 18rpx;
border-bottom: 2rpx solid var(--line);
}
/* 区块标识：单竖条，与首页 .section-bar 同形（这里随 40rpx 标题一起放大） */
/* 副题：原先压在组末的浅橙说明砖挪到这里，剥掉底、描边与阴影，只留一行小字。
扁平处理是刻意的——它必须待在组头内部，才能在"卡顶 → 组头 → 章线 → 行"
这条读法中间不插入第二个方块 */
.group-sub {
display: block;
margin-top: 14rpx;
font-size: 28rpx;
color: var(--muted);
line-height: 1.7;
}
/* 区块标识：单竖条，与首页 .section-bar 是同一支记号（8rpx 宽、圆角 4rpx）。
规则是"竖条高 = 标题字号"：首页 8×34rpx 配 34rpx 标题，本页标题 36rpx 故取 36。
沿革：8×40 → 12×48 → 回到 8×36。中间那次放大是为了给全页补一个实心暖橙锚点
（那时主色只出现在 8 个按钮环上，页面偏"文档感"）；现在页尾补上了浅橙收口卡
（.page-footer），暖色锚点由它承担，竖条就还给首页那一支——
两页标题只差 2rpx，记号若差 1.5 倍，读起来就不是同一套 */
.group-bar {
width: 8rpx;
height: 40rpx;
height: 36rpx;
border-radius: 4rpx;
background: var(--brand-strong);
flex-shrink: 0;
}
/* 组标题抬到 40rpx：与服务名 30rpx 拉开一档，页面由此有了"章 / 条"两级，
而不是通篇一个字号 */
/* 组标题 40 → 36rpx（按用户要求收小）：与服务名 32rpx 拉开一档，
页面由此保住"章 / 条"两级，而不是通篇一个字号。
36rpx 是本页下限——再降一级只剩 2rpx 的差，章/条两层会塌成一层 */
.group-title {
margin-left: 16rpx;
font-size: 40rpx;
font-size: 36rpx;
font-weight: 700;
color: var(--ink);
letter-spacing: 1rpx;
}
/* ===== 价格：按用户要求弱化，只作信息展示 =====
--muted + 字重 500：比说明只靠字号（32 vs 26rpx）与字重分开一档，
既不抢名称的重心，也不走 --brand-strong。
这是本页对 DESIGN.md §2.1「价格数字」用途的例外，已在页首注释登记 */
这是本页对 DESIGN.md §2.1「价格数字」用途的例外，已在页首注释登记。
min-width 104rpx + justify-content:flex-end 是"固定槽"：
八行的价格右边缘对齐成一列，同时把左边规格签的右边缘也钉在同一位置。
不固定的话，3 位数价格(约 80rpx)与 4 位数(约 100rpx)差 18rpx，
签会跟着左右抖——那种"差不多对齐"比明显不对齐更难看 */
.price {
display: flex;
align-items: baseline;
min-width: 0;
justify-content: flex-end;
min-width: 104rpx;
margin-left: 12rpx;
}
.price-sym {
@@ -172,172 +297,209 @@ page {
color: var(--muted);
}
/* ===== 规格签：色标式（左侧暖橙竖条 + 浅橙底 + 右侧圆角） =====
整圈描边会让每行出现两个橙框（签 + 按钮），右侧橙色密度过高；
改成色标后只留一道左竖条，辨识靠"条 + 暖陶土字"，视觉更安静。
底仍是 --brand-soft（落在暖白纸面上约 1:1，托不出形状），
形状由 4rpx 的 --brand-strong 左竖条给出（纸面上 4.89:1，过非文本 3:1），
字用 --brand-ink（6.8:1，过 AA）。只在右侧做 6rpx 圆角，已写进页首的形状锁 */
/* ===== 规格签：暖陶土小字（按用户要求去掉左竖条） =====
沿革：整圈描边 → 4rpx 左竖条 + 浅橙底（色标式）→ 现在只剩字 + 一层极浅的底。
去竖条的原因：页面上已经有一套竖条语言——三个组头的 8×36rpx 实心竖条。
每行再插一道 4rpx 小竖条，全页竖向重音就从 3 处涨到 11 处，与组头抢同一个记号。
签退回纯文字后，每行的竖条只剩组头一处，记号重新变回"章"级。
代价要记住：底仍是 --brand-soft，它落在白卡上只有 1.08:1（纸面上 1.02:1），
实际都看不出来——签现在是"暖陶土字 + 一层几乎不可见的暖底"，
辨识全部由字色承担。这也正是它当初选 --brand-ink（白卡 7.31:1）而不是
--brand-strong 的原因。
若日后想要一个看得见的签形，两条路：
① 底换 --brand-line（白卡上 1.26:1，比现在明显）；② 底整个删掉，承认它就是一段暖色小字。
位置在价格左边（与价格成对、整体右对齐），因此补 flex-shrink:0
与 white-space:nowrap，保证八行的签不被压扁、右边缘对齐成一列 */
.unit-chip {
padding: 2rpx 10rpx;
border-left: 4rpx solid var(--brand-strong);
border-radius: 0 6rpx 6rpx 0;
flex-shrink: 0;
white-space: nowrap;
padding: 2rpx 8rpx;
border-radius: 6rpx;
background: var(--brand-soft);
font-size: 24rpx;
font-size: 26rpx;
color: var(--brand-ink);
letter-spacing: 1rpx;
line-height: 1.3;
}
/* ===== 清单：一条一行，只有规则线没有卡片 ===== */
/* ===== 清单：一条一行，只有规则线没有卡片（卡只到"组"这一级） ===== */
.ledger {
display: flex;
flex-direction: column;
}
/* 每行两列：左列是"名称 + 规格签 + 价格"一行 + 说明，右列只剩预约按钮。
价格不再单独占一行，行高因此由左列决定；上下 padding 按用户
"过于紧凑"的反馈由 24rpx 放开到 32rpx，行高约 158rpx。
align-items:center 让按钮在行内垂直居中 */
/* 一行分两层，不是左右两栏：
第一层 .row-head —— 名称在左；右区（规格签 → 价格 → 预约）整体贴右边缘，
四样对齐在同一横向中线上；
第二层 .row-desc —— 说明独占一行，满宽 686rpx。
为什么把价格从右栏提回名称行、说明改成独占一行：
① 价格与名称同基线，扫价格时眼睛不用跨行去找。原先两栏是行内垂直居中，
两行的行里价格会落到说明那一行的高度上，名称与价格被拆开；
② 说明因此从 436rpx 拿到满宽 686rpx，全页少折两行——按 28rpx 估算，
「磁共振预约、CT预约、彩超等其他预约」约 504rpx、
「送资料/代排队/买药/取报告等一小时陪诊服务」约 588rpx，原先都在 436rpx 里折成两行；
③ 去掉"右栏"这一层后，一行只回答一件事：上行是"是什么 / 买多久 / 多少钱 / 就选它"，
下行是补充说明。
代价：名称行的行盒被按钮撑开（按钮 56rpx，比名称行本身还高），
每行比原先的两栏版高约 11rpx。
上下内距与项间分隔虚线都放在这一层，虚线因此横跨整行、一直拉到卡的内边缘
（组变成白底卡之后，虚线不再顶到屏幕边——卡本身已经框住了这一列）。
每组最后一行的虚线由 :last-child 撤掉：组的底边已经由卡的发丝边收口，
留着会叠成"虚线 + 卡内距 28rpx + 卡边发丝线"的双线。
于是每章的读法是：卡顶发丝边 → 组头 → 章线 → 各行（行间虚线）→ 卡底发丝边，
章线开、卡边收，仍是一张闭合的小表 */
.ledger-row {
display: flex;
align-items: center;
padding-top: 32rpx;
padding-bottom: 32rpx;
border-bottom: 2rpx solid var(--line);
border-bottom: 3rpx dashed var(--sep);
}
/* 最后一行不封底：下面的说明砖已经把它收住了 */
/* 末行不封底：收口交给卡底的发丝边，避免双线 */
.ledger-row:last-child {
border-bottom: none;
}
/* 左列：名称 + 说明。min-width:0 让长名称与长说明正常折行，不撑破行宽 */
.row-main {
flex: 1;
min-width: 0;
}
/* 名称 + 规格签在左，价格 margin-left:auto 顶到最右 */
.row-name-wrap {
/* 第一层：名称 + 右区。名称 flex:1 吸走全部余量，右区因此被顶到右边缘，
八行的签、价格、按钮自然各成一列，不用给任何一列写死宽度 */
.row-head {
display: flex;
align-items: center;
}
/* 名称给 min-width:0 兜底：名称过长时折行，不会把后面的签与价格挤出去 */
/* 名称给 min-width:0 兜底：过长时折行，不会把右区挤出去。
字号 30 → 32rpx（与价格数字同档），字距收到 0——
32rpx 的粗体中文本来就不需要额外字距，最长那行能退回约 11rpx。
可用宽度约 280rpx：
686 − 16(本行右区外边距) − 122(最长签「8小时/次」，已去左竖条)
− 12 − 104(价格固定槽) − 24(与按钮的间距，按用户要求由 12 加到 24) − 128(按钮)。
最长名称「VIP 5次 半天陪诊」约 249rpx，余量约 31rpx。
真机若仍折行，下一顺位是把 .price-num 从 32rpx 降到 28rpx（约让出 8rpx） */
.row-name {
flex: 0 1 auto;
flex: 1;
min-width: 0;
font-size: 30rpx;
font-size: 32rpx;
font-weight: 700;
color: var(--ink);
letter-spacing: 1rpx;
letter-spacing: 0;
}
.row-name-wrap .unit-chip {
/* 右区：规格签 → 价格 → 预约，三段整体贴右边缘，同一横向中线。
签之所以摆在价格左边而不是名称右边：时长与价格本来就是一对（规格决定价格），
紧挨着读成「4小时/次 ¥300」；同时八行的签右侧能借此对齐成一列。
签若跟名称走，它的右边缘会随名称长短在 96～249rpx 之间游走，不成列 */
.row-side {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: 12rpx;
}
/* 价格顶到左列最右侧，8 条价格因此对齐成一列，不再跟着名称长短漂移。
与签之间的空隙交给下面的 .row-leader，这里不再自己留 padding */
.row-name-wrap .price {
flex-shrink: 0;
margin-left: auto;
}
/* 菜单点线：把名称/规格与价格之间的空档连起来，这是本页最像"价目单"的一笔。
flex-basis 为 0、min-width 为 0，空间紧时它自己缩到没有（VIP 那行就是），
所以不会把名称挤到折行；两条 8rpx 外边距是它缩没之后仍保留的最小间隙。
align-self:flex-end + margin-bottom 让点线落在文字基线附近，而不是穿过文字中线。
最长的一行（VIP 5次 半天陪诊 + 4小时/次 + ¥1350）约 499rpx，左列可用 518rpx，
余量约 19rpx 正好被点线吃掉——真机若折行，把 .price-num 从 32rpx 降到 28rpx */
.row-leader {
flex: 1 1 0;
min-width: 0;
height: 0;
margin: 0 8rpx 10rpx;
border-bottom: 2rpx dotted var(--sep);
align-self: flex-end;
margin-left: 16rpx;
}
/* 说明：独占一行，满宽。
虚线用 --sep（分隔线专用，比 --line 深一档，浅橙底上也能看见）。
线宽 3rpx 而非 2rpx：2rpx 的虚线在真机强光下几乎看不见，
加粗到 3rpx 让它稳稳承担"行边界"，不靠加深线色来解决 */
.row-desc {
display: block;
margin-top: 12rpx;
font-size: 26rpx;
font-size: 28rpx;
color: var(--muted);
line-height: 1.6;
line-height: 1.7;
}
/* ===== 预约：--brand-strong 描边，不填充 =====
与首页主 CTA（实心胶囊）同一套按钮语言，但描边形式比实心安静一档，
8 个并排也不会像实心块那样把主色铺开。
描边与文字都用 --brand-strong（纸面上 4.89:1，过 AA 与非文本 3:1）；
按下落 --brand-soft（DESIGN.md §2.1 指定）。
尺寸按用户要求调成"扁一点、宽一点"：高 80 → 72rpx(36px)、
最小宽 128 → 144rpx。注意 36px 低于 iOS 44px 的建议触控高度。
margin-left 与左列拉开距离，垂直位置由 .ledger-row 的 align-items:center 居中 */
/* ===== 预约：空心胶囊（鲜橙环 + 暖陶土字） =====
沿革：描边版 → 实心 --brand-strong → 软色块 → 现在这版空心胶囊，第四次调整。
为什么又回到"无填充"：上一版软色块本身没问题，问题是它挪到价格左边之后，
和紧邻的规格签撞了形——签是"浅橙底 + 暖陶土字 + 小圆角"，按钮也是
"浅橙底 + 暖陶土字 + 圆角"，两个同形物体在同一行相距 450rpx，读起来像两个标签。
签和按钮的身份不同：签是标签（静态、可无边界），按钮是控件（必须一眼看出能点）。
两者只能靠"形"分开，靠"深浅"分不开。于是这里把按钮做成一行里唯一的"环"：
签 = 浅橙底 + 暖陶土字，无框，也不再有左竖条；
按钮 = 满圆角空心环，无底。
同时它也不再是行内第二个浅色实心块，一行只剩一个填充物（签），主次不再打架。
为什么是满圆角：圆角 6rpx 是签的语言，12rpx 与签仍在同一族；
28rpx（= 高度 56rpx 的一半）让它成为胶囊，轮廓与签一眼可分。
为什么环 3rpx 而不是 2rpx：按钮是本页唯一的转化入口，56rpx 高度下 2rpx 的环
在真机强光里发虚；3rpx 的 --brand-strong 在纸面上 4.89:1，稳稳过非文本 3:1。
字走 --brand-ink（纸面上 6.89:1），比环的 --brand-strong（4.89:1）再稳一档：
环承担"这是动作"的色，字承担"读得清"的对比度。
去掉填充与阴影：原先的暖色紧阴影是为了把 1.02:1 的浅橙底托出形状，
没有底就不需要拖形，8 圈阴影一并撤掉，整页顺带更轻。
按下把胶囊填上 --brand-line：同色阶、可感知（1.19:1→填充可见），
暖陶土字在其上 5.80:1，仍过 AA。不引入新色。
注意"淡"仍不能走"提亮填充 + 白字"——白字对 #EA6A2E 只剩约 3.2:1、
对 #F97316 约 2.8:1，都不达 AA。
与 DESIGN.md §3 的禁用态不撞：禁用是 --muted 字 + --sep 描边 + 透明底，
本按钮是暖陶土字 + 鲜橙环，字色与环色两个维度都不同，不会被读成不可点。
真机若觉得环太空、抓力不够，下一顺位是只把 background 换成 --brand-line
（就是现在的按下色），形不动——那是一步就能上的台阶，不必换风格。
字重按用户要求 700 → 500。要记住 500 在中文里不稳定：iOS 的苹方有 Medium(500)，
但不少 Android 的系统中文只有"常规/粗体"两档，500 会落回常规——同一份代码
在两种机器上不是同一个结果。敢降，是因为这个按钮的可点性已经不由字重承担了：
3rpx 的环 + 满圆角轮廓已经足够说明"这是一个控件"，字只负责读得清。
若日后发现轮廓的抓力也不够，优先把字重调回 700，而不是加深字色。
box-sizing 保持 border-box：3rpx 的环画在框内，外框尺寸不变（128×56rpx）。
尺寸按用户要求再收一档：高 64 → 56rpx(28px)，圆角随高度取半 28rpx。
最小宽 128rpx、左右内距 24rpx 不变；字号 30rpx 不并入说明那一档(28rpx)。
副作用是行高跟着降：按钮是 .row-head 里最高的元素，64 → 56rpx 之后
每行随之矮约 8rpx，8 行共矮约 64rpx，正好抵掉上一轮"说明改满宽"带来的一部分增高。
代价是 28px 明显低于 iOS 44px 的建议触控高度，这是"视觉更轻"换来的。
要让手指更容易点中而视觉不变，可以加一个透明伪元素（::after，四边各外扩 6rpx）
把热区撑回 68rpx，形不动——需要时再加，别提前加。
水平位置由 .row-side 决定，与左侧价格之间的 24rpx 由 margin-left 给出
（按用户要求由 12rpx 加大）；垂直位置由 .row-side 的 align-items:center 居中 */
.book-btn {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 144rpx;
height: 72rpx;
padding: 0 30rpx;
min-width: 128rpx;
height: 56rpx;
padding: 0 24rpx;
margin-left: 24rpx;
border: 2rpx solid var(--brand-strong);
border-radius: 12rpx;
border: 3rpx solid var(--brand-strong);
border-radius: 28rpx;
background: transparent;
flex-shrink: 0;
transition: background-color 0.15s ease;
}
.book-btn:active {
background: var(--brand-soft);
background: var(--brand-line);
}
.book-btn-text {
font-size: 28rpx;
font-weight: 700;
color: var(--brand-strong);
font-size: 30rpx;
font-weight: 500;
color: var(--brand-ink);
letter-spacing: 1rpx;
}
/* ===== 组说明砖：浅橙衬底 + 暖色紧阴影（DESIGN.md §2.3 指定写法） =====
浅橙底与暖白纸面只差约 1.03:1，光靠底色托不出形状，
再补一道暖色紧阴影把这块砖拎起来 */
.group-note {
margin-top: 32rpx;
padding: 28rpx;
border-radius: 28rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
box-shadow: 0 2rpx 10rpx rgba(194, 65, 12, 0.08);
}
.group-note-text {
font-size: 26rpx;
color: var(--ink-2);
line-height: 1.7;
}
/* ===== 页脚 ===== */
/* ===== 页脚：浅橙收口卡 =====
它就是首页「常用功能」区块尾部的「联系我们」卡（.quick-item-full），
同一套做法：--brand-soft 底 + 2rpx --brand-line 描边 + 去阴影 + 28rpx 圆角。
为什么页尾要有一张暖色面：首页的节奏是"白卡 … 白卡 … 一张浅橙卡收口"
（陪诊服务收在介绍卡上，常用功能收在联系我们上）。本页原先 4 张白面
一张暖色收口都没有，暖色只剩"线"——竖条、按钮环、暖陶土字，
整页因此比首页轻一大截；这张卡就是补回来的那一张"面"。
浅橙底与纸面的填充差只有约 1.03:1，但面积够大，大面积暖色自身可辨，
再配 --brand-line 描边就够，与首页那张一样不加阴影 */
.page-footer {
display: flex;
align-items: center;
justify-content: center;
margin-top: 64rpx;
padding-top: 28rpx;
border-top: 2rpx solid var(--line);
margin-top: 36rpx;
padding: 24rpx 28rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
border-radius: 28rpx;
}
.footer-text {
font-size: 24rpx;
font-size: 28rpx;
color: var(--muted);
}
/* 文字只有 24rpx 高，用 padding 撑热区到 56rpx(28px)，再用等量负外边距抵消，行高不变 */
/* 文字 28rpx，用 padding 16rpx 把热区撑到约 72rpx(36px)，再用等量负外边距抵消，行高不变 */
.footer-link {
display: flex;
align-items: center;
@@ -350,7 +512,7 @@ page {
}
.footer-link-text {
font-size: 24rpx;
font-size: 28rpx;
font-weight: 700;
color: var(--brand-ink);
}