From 584427276255c6393e0344584538fde7bd047b5e Mon Sep 17 00:00:00 2001 From: lik Date: Sun, 4 Oct 2026 12:53:19 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=92=8C=E6=9C=8D=E5=8A=A1?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=AE=9A=E7=A8=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/DESIGN.md | 10 +- pages/escort/itemlist.js | 25 +- pages/escort/itemlist.wxml | 86 ++++--- pages/escort/itemlist.wxss | 472 +++++++++++++++++++++++++------------ 4 files changed, 399 insertions(+), 194 deletions(-) diff --git a/doc/DESIGN.md b/doc/DESIGN.md index a34d035..f26b29f 100644 --- a/doc/DESIGN.md +++ b/doc/DESIGN.md @@ -37,6 +37,8 @@ - `--brand-strong` 是唯一可以当"实心大色块"用的值。全页同类实心块建议不超过一处，避免主色泛滥。 - `--brand-soft` 只能当底，不能当文字色，也不能当描边色（它做描边时等于没有描边）。 - `--brand-ink` 是浅橙底上的首选强调字色。`--brand-strong` 落在 `--brand-soft` 上实测 4.77:1，过 AA 但余量小，浅橙底上的文字一律走 `--brand-ink`。 +- 例外（已登记）：`escort/itemlist` 的价目单里，价格数字为弱化表达改走 `--muted` + 字重 500，不走 `--brand-strong`，让「预约」空心胶囊按钮独占焦点。同一页价格列必须只用这一个色值、一种字重，不得混用。 +- `escort/itemlist` 的「预约」按钮走**空心胶囊**：3rpx `--brand-strong` 环 + 28rpx 满圆角（= 高 56rpx 的一半）+ `--brand-ink` 字 30rpx/500（纸面 6.89:1），无填充、无阴影，按下填 `--brand-line`。不用填充是因为它与同行的规格签撞形——签是「浅橙底 + 6rpx 圆角」，按钮若同族，一行里就是两个标签，分不清哪个能点。规则：**同一行只允许一个填充物（这里是签），按钮独占「环」这一形态**；可点性由环承担，字重因此可以降到 500（注意 500 在部分 Android 中文会落回常规）。该页因此不存在实心大色块，§2.1「同类实心块不超过一处」无需开口子。 ### 2.2 第二色：暖墨文字层 @@ -66,9 +68,13 @@ - 这两组线不是装饰，是**切分工具**，本身不表意。不要给它们上主色或状态色。 - `--line` 与 `--sep` 的分工是固定的：浅橙底上必须用 `--sep`，因为 `--brand-line` 落在 `--brand-soft` 上只有约 1.16:1，肉眼看不见；`--sep` 比 `--line` 深一档，专门负责在彩色底上还能被看到。 -- `--paper` 与 `--brand-soft` 的明度差只有约 1.03:1。所以浅橙块落在纸面上时，形状必须靠**暖色紧阴影**托出来，不能用更大的色差去解决。 +- `--paper` 与 `--brand-soft` 的明度差只有约 1.03:1。所以浅橙块落在纸面上时，形状必须靠 **2rpx `--brand-line` 描边**承担，不能用更大的色差去解决，也不加阴影——首页 `.intro-card` / `.quick-item-full` 与 `escort/itemlist` 的页脚收口卡都是"描边 + 去阴影"这一种做法。浅橙块靠大面自身可辨，不靠阴影托形。 +- **白卡一律走中性阴影**（`--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07)`，首页与 `escort/itemlist` 同值），圆角 28rpx。彩色（暖橙）阴影**不得用在 `--white` 面上**——白面加暖橙阴影会在卡边泛出一圈暖晕，与全站白卡不是同一种东西；它只允许出现在实心 CTA、品牌印记这类小体量元素上（如首页 `--shadow-cta: 0 2rpx 8rpx rgba(194, 65, 12, 0.16)`）。 +- 例外（已登记）：`escort/itemlist` 的三个服务分组做成**通栏白底块**——`--white` 面 + 上下各 2rpx `--line` 发丝边 + 上述中性 `--shadow-card`，**圆角为 0**。做法是 `margin: 36rpx -32rpx 0` 加等量 `padding: 28rpx 32rpx`，白面顶到屏幕两侧而行宽仍落在容器原有的 686rpx 上。这是该页唯一可行的"白底卡"解法：卡内缩 32rpx 再自带 24rpx 内距会把内容宽压到 638rpx，最长服务名「VIP 5次 半天陪诊」(249rpx) 当场折行。圆角必须为 0，否则满宽块的圆角会切在屏幕边上、露出纸色缺口。页首 `.notice` 仍是内缩 28rpx 圆角白卡（同上中性阴影），两者是"提示卡 / 章节带"两种角色，形不同不算同类撞形。白底块内每组的末行不画分隔虚线，收口交给卡底发丝边。 -浅橙块托形阴影（唯一允许的彩色阴影）： +例外（已登记）：`escort/itemlist` 的**页脚做成浅橙收口卡**——`--brand-soft` 底 + 2rpx `--brand-line` 描边 + 28rpx 圆角 + 去阴影，与首页 `.quick-item-full`（「联系我们」）同源。用途是把首页"每个区块都收在暖色卡上"的节奏带过来：该页其余四块都是白面，页脚若也走白，全页暖色就只剩"线"（竖条 / 按钮环 / 暖陶土字），比首页轻一档；这张"面"是补回来的暖色落点。 + +浅橙块不使用彩色阴影（按上条，靠描边托形）。以下值曾是"浅橙块托形阴影"的唯一候选，但首页与 `escort/itemlist` 实际都用描边，此值当前无使用位置，仅作登记——若将来确需给浅橙块托形，只能用它： ```css box-shadow: 0 2rpx 10rpx rgba(194, 65, 12, 0.08); diff --git a/pages/escort/itemlist.js b/pages/escort/itemlist.js index 03643f7..8e85d35 100644 --- a/pages/escort/itemlist.js +++ b/pages/escort/itemlist.js @@ -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"已恢复原名， - // "买多次"由名称自己交代；组标题与说明砖仍负责讲清"什么情况选这一组" + // "买多次"由名称自己交代；组标题与副题仍负责讲清"什么情况选这一组" } ] diff --git a/pages/escort/itemlist.wxml b/pages/escort/itemlist.wxml index 7e9de2d..8b5a9e1 100644 --- a/pages/escort/itemlist.wxml +++ b/pages/escort/itemlist.wxml @@ -1,68 +1,94 @@ - + + + + 请选择相应的服务 + + - - 全国接单，按次收费。费用不含挂号费、检查费、药费。 + 目前已开通北京、上海、天津。费用仅含人工服务费，不含就医费用。 服务指南 - + 用户协议 - + - + - - {{ item.title }} + + + {{ item.title }} + + {{ item.note }} - - - - {{ srv.title }} + + + {{ srv.title }} + {{ srv.unit }} - ¥ {{ srv.price }} + + 预约 + - {{ srv.desc }} - - - - 预约 + + {{ srv.desc }} - - {{ item.note }} - - - + 没有合适的？ diff --git a/pages/escort/itemlist.wxss b/pages/escort/itemlist.wxss index 715d40b..46e03d8 100644 --- a/pages/escort/itemlist.wxss +++ b/pages/escort/itemlist.wxss @@ -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); }