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

tmp

Browse Source
This commit is contained in:
lik
2026-10-06 21:19:20 +08:00
parent 40d0df3330
commit 509a10e4f1
12 changed files with 440 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/DESIGN.md
+3 -3
View File
@@ -70,7 +70,7 @@
- `--paper` 与 `--brand-soft` 明度差仅约 1.03:1，浅橙块落纸面须靠 **2rpx `--brand-line` 描边**托形，不加阴影。
- **白卡一律走中性阴影** `--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07)`，圆角 28rpx。彩色（暖橙）阴影不得用在 `--white` 面上；它只允许用于实心 CTA、品牌印记等小体量元素（`--shadow-cta: 0 2rpx 8rpx rgba(184, 82, 10, 0.16)`）。
- 例外（已登记）：`escort/itemlist` 两个服务分组做成**通栏白底块**——`--white` + 上下各 2rpx `--line` + `--shadow-card`，**圆角 0**；做法 `margin: 36rpx -32rpx 0` + `padding: 28rpx 32rpx`，行宽仍为 686rpx（若内缩，卡的左右内距会白吃 48rpx 行宽，长名称 + 右区更易挤出）。圆角必须为 0，否则满宽块的圆角会切在屏幕边上。页首 `.notice` 仍是内缩 28rpx 圆角白卡。
- 例外（已登记）：`escort/itemlist` 页脚做**浅橙收口卡**（`--brand-soft` + 2rpx `--brand-line` + 28rpx 圆角 + 去阴影），与首页 `.quick-item-full` 同源，补回该页"暖色只剩线、没有面"的那一档。
- 例外（已登记）：`escort/itemlist` 的**人工客服旁路卡**做浅橙面（`--brand-soft` + 2rpx `--brand-line` + 28rpx 圆角 + 去阴影），与首页 `.quick-item-full` 同源，补回该页"暖色只剩线、没有面"的那一档。位置在**页首披露卡下方、清单上方**（原为页尾的"收口卡"，已上移）：文案走本页"情形 + 动作"两段式（muted「不想线上预约？」+ 暖橙链「直接联系人工客服」）。页尾不设卡，改由一行**文档级元信息**收尾——细竖线分隔的「服务指南 │ 用户协议」（从页首披露卡下移，不加卡、不加 chevron，文字链自身即点击暗示）；披露卡因此退回纯声明，只留城市与费用披露。
- 例外（已登记）：`mine/about` 的「联系我们」做成**浅橙入口卡**（`--brand-soft` + 2rpx `--brand-line` + 28rpx 圆角 + 去阴影，同首页 `.quick-item-full` 配方），是该页尾部唯一的暖色面。卡内**不再平铺联系方式**——热线/微信/邮箱/工作时间四项与 `mine/contact` 页逐项重合，平铺即"同一意图两个入口"；只留「联系我们」+ 一行摘要（「人工客服」，与首页同卡同文案）+ muted chevron，整卡可点跳 `mine/contact`。另注：该页品牌印记（`home-w.png` 白色线稿）必须落 `--brand-strong` 实心底，不能用 `--brand-soft`，白色线稿在浅橙底上看不见。
- 例外（已登记）：`mine/mine` 的菜单与「退出登录」做成**通栏白底块**（`--white` + 上下各 2rpx `--line` + `--shadow-card`，圆角 0）。其中「退出登录」是**动作而非导航**，与菜单行不同族：单独一块、一行居中、**无图标无 chevron**、字色 `--muted`。状态色不得用于按钮（§三），退出因此不走红/橙，区分只靠结构与位置。
@@ -120,10 +120,10 @@
| 范围 | 现状 | 替换为 |
|---|---|---|
| `mine/addressedit.wxml`（`switch` 属性） | 旧金色 | `#B8520A`（属性值需硬编码） |
| `health/profilelist.js`（`confirmColor`） | 旧金色 | `#B8520A` |
| `health/profilelist.wxss`、`profileedit.wxss` | `#D4A853` 系 | 暖橙令牌 |
| `hospital/contact.wxss`、`hospital/ranking.wxss` | 底 `#F5F7F6`、字 `#1F2937`、绿灰系 | 整体并入暖橙体系 |
已完成（2026-10-06）：`health/profilelist`、`health/profileedit` 已按本节并入暖橙体系——两页 `.wxss` 的旧金色 `#D4A853` 连同冷灰文字 `#1F2937`/`#374151`/`#6B7280`/`#9CA3AF`、冷灰线 `#F3F4F6`、旧底 `#FAF6F1`/`#FDF8EE` 一并换成暖橙令牌与暖墨阶。列表页改「浅橙说明砖 + 通栏白块」，每条主体整块可点进编辑（补 chevron 点击暗示，删除动作下沉到卡内操作行、走 `--muted`），空态与「邮寄地址」同语言（`--faint` 图标 + `--muted` 说明）；表单页改通栏白块，标签左走 `--muted`、值右走 `--ink` 700，性别选中态用软橙底 + 实心橙描边，健康备注独立一块。两页 `page{}` 均不留令牌副本；`profilelist.js` 的 `confirmColor` 硬编码改 `#B8520A`，`profilelist.json` 补注册既已使用的 `t-loading`（原只在 `.wxml` 里引用、未注册，渲染为空）。
已完成（2026-10-06）：`escort/guide` 已按本节并入暖橙体系——`.wxss` 里的 page 级令牌副本（停在旧值 `#C2410C` / `#9A3412`）整块删除，改用 `app.wxss` 唯一来源；`.wxml` 四处 `t-icon` 硬编码随之改值（三个卡片头图标 `#FFFFFF`→`#9B4508`、底部客服 `call` `#9A3412`→`#9B4508`）。同页三处收口：卡片头标识由「实心橙方块 + 白图标」改「`--brand-soft` + 2rpx `--brand-line` 描边 + 暖橙图标」，实心块只留底部 CTA 一处（§2.1）；CTA 阴影由 `0 6rpx 16rpx rgba(194,65,12,.22)` 收为 `--shadow-cta`；三处 `font-weight: 600` 改 `700`（中文系统字体只有 400/700 两档）。内容同步：服务流程与 `services.js` 各服务的 flow 对齐（预约 → 沟通信息 → 支付费用 → 准备资料 → 全程陪诊 → 服务完成），删去不在任何 flow 里的「选择陪诊师」；温馨提示的改期句统一为「如需改期或取消，请至少提前4小时联系客服」。
已完成（2026-10-06）：`escort/agreement.wxss` 已按本节并入暖橙体系——底 `#FAF6F1` 转 `--paper`，顶部白→暖白渐变去掉（直接落纸面），#`D4A853` 系连三处同色渐变与同色大阴影一并换掉：文件图标衬底转 `--brand-strong` + `--shadow-cta`（白色图标需深底），章节序号转「`--brand-soft` 衬底 + 2rpx `--brand-line` 描边 + `--brand-ink` 字」（全页实心块只留顶部一个），圆点转 `--brand-strong`；冷灰文字 `#1F2937`/`#4B5563`/`#6B7280` 转 `--ink`/`--ink-2`/`--muted`，冷线 `#F0E6D8`/`#E5E7EB` 转 `--line`/`--sep`（浅橙底上用 `--sep`）；正文块改通栏白底块（上下 2rpx `--line` + 圆角 0 + `--shadow-card`）。违约金表表头不再铺色（`--brand-line` 只作描边）。另删 7 条死规则 `flow-steps`/`flow-step`/`step-badge`/`step-info`/`step-title`/`step-desc`/`step-line`——WXML 无任何引用。
images/wechat_code.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 164 KiB

pages/escort/itemlist.wxml
+30 -23
View File
@@ -6,7 +6,8 @@
所以这里不写页名，只让用户动手挑（下面两组就是可选项）；
记号沿用详情页页首那一支（64×8rpx 短横 + 22rpx 间距），
两页共用同一套页面级抬头语言；
② 一张说明白卡：城市与费用披露 → 发丝线 → 两个入口。
② 一张说明白卡：只放城市与费用披露（原"披露 → 发丝线 → 两个条款入口"
三段中的后两段已下移到页尾文档行）。
卡首不放短横色标——短横是页面级记号，区块级留给两个组头的竖条。
先给一句引导再读披露，首屏是"引导 → 声明 → 清单"三层。
卡面走"白卡 + 发丝边 + 紧阴影"（中性 --shadow-card，与首页白卡同值），
@@ -18,17 +19,23 @@
<view class="notice">
<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="26rpx" color="#9B4508" />
</view>
<view class="notice-sep"></view>
<view class="notice-link" bindtap="goToAgreement">
<text class="notice-link-text">用户协议</text>
<t-icon name="chevron-right" size="26rpx" color="#9B4508" />
</view>
</view>
<!-- 人工客服旁路：紧接披露卡、压在清单上方，翻到清单前就给它一个出口。
原来是页尾那张浅橙"收口卡"，现上移为"不想线上预约"的旁路——
语句也从"没有合适的？"（扫完清单后的兜底）换成"不想线上预约？"（未看先问的情形）。
形状与页首披露卡同为内缩圆角卡，但走暖色面。
为什么仍要有这一张暖色面：首页的节奏是"白卡 … 白卡 … 一张浅橙卡"
（陪诊服务收在介绍卡、常用功能收在联系我们）；本页原先四张白面
一张暖色面都没有，暖色只剩"线"（竖条 / 按钮环 / 暖橙字），整页比首页轻一档，
这张卡就是补回来的那张"面"。
浅橙底与纸面的填充差只有约 1.03:1，但面积够大、大面积暖色自身可辨，
再配 --brand-line 描边就够，与首页 .quick-item-full 同源、同样不加阴影 -->
<view class="contact-card">
<text class="contact-ask">不想线上预约？</text>
<view class="contact-link" bindtap="goToContact">
<text class="contact-link-text">直接联系人工客服</text>
<t-icon name="chevron-right" size="22rpx" color="#9B4508" />
</view>
</view>
@@ -85,17 +92,17 @@
</view>
<!-- 页脚：翻完两组仍未决定的兜底出口。
做成一张浅橙收口卡——与首页「常用功能」区块尾部的「联系我们」卡
（.quick-item-full）同源：--brand-soft 底 + 2rpx --brand-line 描边 + 去阴影。
首页每个区块都收在暖色卡上，本页原先四张白面一张暖色面都没有，
暖色只剩"线"（竖条 / 按钮环 / 暖橙字），整页因此比首页轻一档；
这张卡就是补回来的那张"面"，也是页尾唯一的暖色落点 -->
<view class="page-footer">
<text class="footer-text">没有合适的？</text>
<view class="footer-link" bindtap="goToContact">
<text class="footer-link-text">联系人工客服</text>
<t-icon name="chevron-right" size="22rpx" color="#9B4508" />
<!-- 页尾文档行：服务指南 / 用户协议，从页首披露卡下移到此处。
不做卡——清单已由末组的卡边收口，页尾只补一行"文档级"元信息，重量压到最低；
细竖线分隔（与首页场景行、页脚元信息行同一套写法），不用中点字符。
文字链自身即点击暗示，不再加 chevron -->
<view class="doc-links">
<view class="doc-link" bindtap="goToGuide">
<text class="doc-link-text">服务指南</text>
</view>
<view class="doc-sep"></view>
<view class="doc-link" bindtap="goToAgreement">
<text class="doc-link-text">用户协议</text>
</view>
</view>
pages/escort/itemlist.wxss
+53 -51
View File
@@ -1,7 +1,7 @@
/* pages/escort/itemlist.wxss
设计方向：本页是一张"按要办的事挑服务"的价目单，8 条服务同一个形状才方便扫读。
- 页首分两层：纸面上一行「短横色标 + 一句引导」（让用户动手挑），
下面接说明白卡（城市与费用披露 → 发丝线 → 两个入口）。
下面接说明白卡（只放城市与费用披露；两枚条款入口已下移到页尾文档行）。
先给一句引导再读披露，首屏是"引导 → 声明 → 清单"三层，
而不是一上来就撞条款；也让首屏从纸面上拎起一个落点，而不是三段裸字
- 八条服务按"要办的事"分两组，每组是一块通栏白底：组头（竖条 + 36rpx 标题 +
@@ -34,18 +34,18 @@
（代价是 500 在部分 Android 上会落回常规，详见 .book-btn 注释）
- 价格按用户要求弱化：--muted + 字重 500（本页对 §2.1「价格数字」的例外，已登记）
- 字号阶梯：正文对齐 agreement 页的 28rpx，本页据此排成
组标题 36 / 名称 · 价格 32 / 按钮 30 / 副题 · 说明 · 披露 · 入口 · 页脚 28 /
组标题 36 / 名称 · 价格 32 / 按钮 30 / 副题 · 说明 · 披露 · 入口 · 客服卡 28 /
规格签 26（rpx）。比原来整页抬了一档，是为老人可读性；
全页最小字号因此从 24rpx(12px) 升到 26rpx(13px)
- 形状锁定：页首说明卡 28rpx（与首页白卡同值）、页脚浅橙卡 28rpx（与首页
.quick-item-full 同值）、预约按钮 28rpx（= 高 56rpx 的一半，成胶囊）、
- 形状锁定：页首说明卡与客服卡 28rpx（与首页白卡 / .quick-item-full 同值）、
预约按钮 28rpx（= 高 56rpx 的一半，成胶囊）、
规格签 6rpx（已按用户要求去掉左竖条）、分组白底 0（通栏块）；其余圆角一律不做
- 白面的托形语言全页一套，且与首页一致：白面走 2rpx --line + --shadow-card
（中性暖墨 0 2rpx 10rpx rgba(63,43,25,.07)）；页脚那张浅橙面走 2rpx
（中性暖墨 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 {
@@ -78,8 +78,10 @@ page {
落在纸面上仍读得出"页面从这里开始"。
位置在说明卡之上、纸面上：先给一句引导，再读卡里的城市与费用披露，
首屏因此是"引导 → 声明 → 清单"三层，而不是一上来就撞条款 */
/* 首屏前言区（引导 → 披露卡 → 客服卡）三处上下间隙由 32 收到 24rpx：
前言是页级说明，比下面的章节（.group 的 36rpx 纸面留白）紧一档是刻意的 */
.page-lead {
margin-top: 32rpx;
margin-top: 24rpx;
}
.page-accent {
@@ -100,14 +102,16 @@ page {
/* ===== 说明卡：页首第二块 =====
页内大标题与导航栏的「陪诊服务」重复，不重复写；
说明做成一张白卡（发丝边 + 紧阴影），卡内三段：一句关键披露 → 发丝线 → 两个入口。
说明做成一张白卡（发丝边 + 紧阴影），卡内只放一句关键披露——
原"披露 → 发丝线 → 两个条款入口"三段里的后两段已下移到页尾文档行。
圆角与阴影按用户要求对齐首页的白卡语言：28rpx + 中性 --shadow-card
（首页带阴影的白卡 .assist-card / .quick-item 都是这两个值）。
形状仍是"内缩圆角卡"，不改通栏白条：上方 32rpx 纸面缺口只有配圆角才成立——
形状仍是"内缩圆角卡"，不改通栏白条：上方 24rpx 纸面缺口只有配圆角才成立——
方角通栏顶上留一道纸，会读成"这条被切掉了一截" */
.notice {
margin-top: 32rpx;
padding: 20rpx 28rpx 8rpx;
margin-top: 24rpx;
/* 上下内距对称：原先 20/8 是给卡底的入口行让位，入口行撤走后收回 24/24 */
padding: 24rpx 28rpx;
background: var(--white);
border: 2rpx solid var(--line);
border-radius: 28rpx;
@@ -117,55 +121,48 @@ page {
/* 这句是费用披露，不是可有可无的说明，所以白卡上给 --ink-2 而不是 --muted */
.notice-text {
display: block;
margin-top: 18rpx;
font-size: 28rpx;
color: var(--ink-2);
line-height: 1.7;
}
/* 卡内的横向分隔线，与入口行之间那根竖分隔线不是同一个东西 */
.notice-hr {
height: 2rpx;
margin-top: 20rpx;
background: var(--line);
}
/* 入口另起一行：细竖线分隔，与首页场景行同一套写法
（2rpx 竖线、#E5DACC，不用中点字符）。
文字用 --brand-ink + 700，和页脚的文字链同一套语言——
上面那句披露是 --ink-2 常规字重的"要读的内容"，这两个入口是"能点的动作"，
靠暖色 + 字重与正文拉开，避免它们被读成又一行元信息 */
.notice-links {
/* ===== 页尾文档行 =====
服务指南 / 用户协议两枚链接，从页首披露卡下移到这里。
不做卡：清单已由末组的卡边收口，页尾只补一行"文档级"元信息，重量压到最低。
细竖线分隔（2rpx 宽 × 20rpx 高，--sep #E5DACC），与首页场景行、页脚元信息行
同一套写法，不用中点字符（一行多点违规）。
文字走 --brand-ink + 700——与上方说明的 --muted 常规字重拉开，读成"能点的动作"
而不是又一行元信息；文字链自身即点击暗示，不再挂 chevron。
上距 40rpx 与容器底部内距 40rpx 对称，把末组与页脚之间撑开 */
.doc-links {
display: flex;
align-items: center;
justify-content: center;
margin-top: 40rpx;
}
/* 上下各 22rpx 是真实行距，不再用负外边距抵消：
原来那套 padding 16rpx + margin -16rpx 只撑热区、不占高度，
视觉上两个入口贴着上方发丝线与卡的底边，太挤。
现在热区 22+36+22 = 80rpx(40px)，比原来的 58rpx 更好点；
与卡底边之间是 22rpx + 卡的 8rpx 下内距 = 30rpx，和卡顶的 30rpx 对称 */
.notice-link {
/* 文字 28rpx，用 padding 16rpx 撑到约 72rpx(36px) 热区，再以等量负外边距抵消，行高不变 */
.doc-link {
display: flex;
align-items: center;
padding: 22rpx 0;
padding: 16rpx 0;
margin: -16rpx 0;
}
.notice-link:active {
.doc-link:active {
opacity: 0.7;
}
.notice-link-text {
margin-right: 4rpx;
.doc-link-text {
font-size: 28rpx;
font-weight: 700;
color: var(--brand-ink);
letter-spacing: 1rpx;
}
.notice-sep {
.doc-sep {
width: 2rpx;
height: 24rpx;
height: 20rpx;
margin: 0 24rpx;
background: var(--sep);
}
@@ -207,8 +204,8 @@ page {
行线 3rpx dashed --sep ← 同宽同色，但虚线读起来轻
行线色 --sep 比卡边色 --line 深，所以实线的重音给章线（--sep 3rpx solid）、
轻音给行线（--sep 3rpx dashed），层级交由实/虚区分，不靠继续加深线色。
原先还有第四条"页脚 2rpx solid --line"收尾；页脚改成浅橙收口卡后，
那道发丝线由卡自己的 --brand-line 描边接替，线种从四收成三 */
原先还有第四条"页脚 2rpx solid --line"收尾；页脚已撤销（客服卡上移到披露卡下），
页面由末组的卡边（--line 发丝边）收尾，线种仍是三 */
.group-head {
padding-bottom: 18rpx;
border-bottom: 3rpx solid var(--sep);
@@ -233,8 +230,8 @@ page {
/* 区块标识：单竖条，与首页 .section-bar 是同一支记号（8rpx 宽、圆角 4rpx）。
规则是"竖条高 = 标题字号"：首页 8×34rpx 配 34rpx 标题，本页标题 36rpx 故取 36。
沿革：8×40 → 12×48 → 回到 8×36。中间那次放大是为了给全页补一个实心暖橙锚点
（那时主色只出现在 8 个按钮环上，页面偏"文档感"）；现在页尾补上了浅橙收口卡
（.page-footer），暖色锚点由它承担，竖条就还给首页那一支——
（那时主色只出现在 8 个按钮环上，页面偏"文档感"）；现在有了浅橙客服卡
（.contact-card）承担暖色锚点，竖条就还给首页那一支——
两页标题只差 2rpx，记号若差 1.5 倍，读起来就不是同一套 */
.group-bar {
width: 8rpx;
@@ -460,44 +457,49 @@ page {
letter-spacing: 1rpx;
}
/* ===== 页脚：浅橙收口卡 =====
/* ===== 人工客服：浅橙旁路卡 =====
它就是首页「常用功能」区块尾部的「联系我们」卡（.quick-item-full），
同一套做法：--brand-soft 底 + 2rpx --brand-line 描边 + 去阴影 + 28rpx 圆角。
为什么页尾要有一张暖色面：首页的节奏是"白卡 … 白卡 … 一张浅橙卡收口"
位置：紧接页首披露卡、压在清单上方。原是守在页尾的"收口卡"，
现上移为"不想线上预约"的旁路——页尾因此不再设卡，由末组的卡边收尾。
文案是本页的"情形 + 动作"两段式：muted 情形问句 + 暖橙动作链，
情形从"没有合适的？"（扫完清单后的兜底）换成"不想线上预约？"（未看先问）。
为什么保留这一张暖色面：首页的节奏是"白卡 … 白卡 … 一张浅橙卡收口"
（陪诊服务收在介绍卡上，常用功能收在联系我们上）。本页原先 4 张白面
一张暖色收口都没有，暖色只剩"线"——竖条、按钮环、暖橙字，
一张暖色面都没有，暖色只剩"线"——竖条、按钮环、暖橙字，
整页因此比首页轻一大截；这张卡就是补回来的那一张"面"。
浅橙底与纸面的填充差只有约 1.03:1，但面积够大，大面积暖色自身可辨，
再配 --brand-line 描边就够，与首页那张一样不加阴影 */
.page-footer {
再配 --brand-line 描边就够，与首页那张一样不加阴影。
上距 24rpx 与页首两层之间的节奏同值；到清单的 36rpx 由后面 .group 自己给出 */
.contact-card {
display: flex;
align-items: center;
justify-content: center;
margin-top: 36rpx;
margin-top: 24rpx;
padding: 24rpx 28rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
border-radius: 28rpx;
}
.footer-text {
.contact-ask {
font-size: 28rpx;
color: var(--muted);
}
/* 文字 28rpx，用 padding 16rpx 把热区撑到约 72rpx(36px)，再用等量负外边距抵消，行高不变 */
.footer-link {
.contact-link {
display: flex;
align-items: center;
padding: 16rpx 0;
margin: -16rpx 0;
}
.footer-link:active {
.contact-link:active {
opacity: 0.7;
}
.footer-link-text {
.contact-link-text {
font-size: 28rpx;
font-weight: 700;
color: var(--brand-ink);
pages/health/profileedit.wxml
+22 -18
View File
@@ -1,14 +1,18 @@
<view class="container">
<!-- 基本信息：通栏白块（白面 + 上下 2rpx 发丝线 + 中性阴影，圆角 0），
行内标签左走 --muted、值右走 --ink 700，与「个人信息」「邮寄地址」同一表单语言 -->
<view class="form-card">
<view class="form-item">
<text class="form-label">姓名<text class="required">*</text></text>
<input class="form-input" value="{{form.name}}" placeholder="请输入就诊人姓名" placeholder-class="input-placeholder"
<view class="form-row">
<text class="form-label">姓名</text>
<input class="form-input" value="{{form.name}}" placeholder="请输入就诊人姓名" placeholder-class="form-placeholder"
maxlength="20" data-field="name" bindinput="onFieldInput" />
</view>
<view class="form-item">
<view class="form-row">
<text class="form-label">性别</text>
<!-- 选中态用软橙底 + 实心橙描边（项目既有档），未选中是纸面底 + 发丝边，
不引入第二个色相 -->
<view class="sex-wrap">
<view class="sex-tag {{form.sex === item.value ? 'sex-tag-active' : ''}}" wx:for="{{sexOptions}}" wx:key="value"
data-sex="{{item.value}}" bindtap="onSexSelect">
@@ -17,46 +21,46 @@
</view>
</view>
<view class="form-item">
<view class="form-row">
<text class="form-label">出生年月</text>
<picker mode="date" value="{{form.birth}}" start="1900-01-01" end="{{today}}" bindchange="onBirthChange">
<picker class="form-picker" mode="date" value="{{form.birth}}" start="1900-01-01" end="{{today}}" bindchange="onBirthChange">
<view class="picker-value {{form.birth ? '' : 'picker-placeholder'}}">
{{form.birth || '请选择出生年月'}}
</view>
</picker>
</view>
<view class="form-item">
<text class="form-label">联系电话<text class="required">*</text></text>
<input class="form-input" value="{{form.mobile}}" type="number" placeholder="用于陪诊师联系您" placeholder-class="input-placeholder"
<view class="form-row">
<text class="form-label">联系电话</text>
<input class="form-input" value="{{form.mobile}}" type="number" placeholder="用于陪诊师联系您" placeholder-class="form-placeholder"
maxlength="11" data-field="mobile" bindinput="onFieldInput" />
</view>
<view class="form-item">
<view class="form-row form-row-last">
<text class="form-label">证件号</text>
<input class="form-input" value="{{form.idnumber}}" placeholder="选填，用于医院建档取号" placeholder-class="input-placeholder"
<input class="form-input" value="{{form.idnumber}}" placeholder="选填，用于医院建档取号" placeholder-class="form-placeholder"
maxlength="30" data-field="idnumber" bindinput="onFieldInput" />
</view>
</view>
<!-- 健康备注：多行输入无法与标签同排，单独一块——标签在上、文本域在下、字数右下 -->
<view class="form-card">
<view class="form-item form-item-remark">
<view class="form-remark">
<text class="form-label">健康备注</text>
<textarea class="form-textarea" value="{{form.remark}}" placeholder="选填，如过敏史、慢病、行动不便等情况，便于陪诊师提前准备"
placeholder-class="input-placeholder" maxlength="200" data-field="remark" bindinput="onFieldInput" />
placeholder-class="form-placeholder" maxlength="200" data-field="remark" bindinput="onFieldInput" />
<text class="remark-count">{{form.remark.length}}/200</text>
</view>
</view>
<view class="tips">
<t-icon name="lock-on" size="26rpx" color="#B0B7C3" />
<t-icon name="lock-on" class="tips-icon" size="26rpx" />
<text class="tips-text">信息仅用于陪诊服务，我们会严格保密</text>
</view>
<!-- 保存是本页唯一的实心暖橙块，独占「全页同类实心块不超过一处」的额度 -->
<view class="footer-bar">
<view class="submit-btn {{saving ? 'submit-btn-disabled' : ''}}" bindtap="onSave">
<text class="submit-btn-text">保存</text>
</view>
<button class="primary-btn {{saving ? 'primary-btn-disabled' : ''}}" bindtap="onSave">保存</button>
</view>
</view>
</view>
pages/health/profileedit.wxss
+109 -79
View File
@@ -1,77 +1,94 @@
page {
background-color: #FAF6F1;
/* 配色令牌来自 app.wxss（全站唯一来源），本页不留副本 */
background-color: var(--paper);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.container {
min-height: 100vh;
padding: 24rpx 24rpx 200rpx;
box-sizing: border-box;
/* 底部留出固定保存栏的高度 + 安全区，避免最后一行被盖住 */
padding: 40rpx 32rpx calc(180rpx + env(safe-area-inset-bottom));
}
/* ===== 通栏白块 =====
白面 + 上下各 2rpx 发丝线 + 中性阴影，圆角 0；
负向 margin 抵消容器 32rpx 内距后左右顶到屏幕两侧，
行内再用 32rpx 内距回到同一左基线，行分隔线因此自动通到底 */
.form-card {
background: #FFFFFF;
border-radius: 20rpx;
padding: 8rpx 28rpx;
margin-bottom: 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
margin: 0 -32rpx;
background: var(--white);
border-top: 2rpx solid var(--line);
border-bottom: 2rpx solid var(--line);
box-shadow: var(--shadow-card);
}
.form-item {
/* 两块之间用 24rpx 纸面留白分界（与「我的」页菜单组间距同值） */
.form-card + .form-card {
margin-top: 24rpx;
}
/* 行高约 87rpx（28rpx×1.4 + 上下 24rpx），贴近 iOS 44pt 触控目标 */
.form-row {
display: flex;
align-items: center;
min-height: 108rpx;
border-bottom: 1rpx solid #F3F4F6;
justify-content: space-between;
padding: 24rpx 32rpx;
border-bottom: 2rpx solid var(--line);
}
.form-item:last-child {
.form-row-last {
border-bottom: none;
}
.form-item-remark {
flex-direction: column;
align-items: stretch;
padding: 28rpx 0;
}
/* 标签走 --muted、值走 --ink 700：层级靠明度与字重拉开，
不给可点性上色（DESIGN.md §2.2「三档只表示文字层级」） */
.form-label {
width: 160rpx;
flex-shrink: 0;
margin-right: 24rpx;
font-size: 28rpx;
color: #374151;
}
.required {
color: #EF4444;
margin-left: 4rpx;
color: var(--muted);
letter-spacing: 1rpx;
}
.form-input {
flex: 1;
font-size: 28rpx;
color: #1F2937;
min-width: 0;
text-align: right;
font-size: 28rpx;
font-weight: 700;
color: var(--ink);
}
.input-placeholder {
color: #C4C9D2;
.form-placeholder {
color: var(--muted);
font-weight: 400;
}
/* picker 需占满剩余宽度，值才能靠右对齐 */
.form-picker {
flex: 1;
min-width: 0;
}
.picker-value {
flex: 1;
font-size: 28rpx;
color: #1F2937;
display: block;
text-align: right;
font-size: 28rpx;
font-weight: 700;
color: var(--ink);
}
.picker-placeholder {
color: #C4C9D2;
color: var(--muted);
font-weight: 400;
}
/* 性别选择 */
/* ===== 性别选择 =====
未选中是纸面底 + 发丝边 + --muted 字，
选中翻转成软橙底 + 实心橙描边 + --brand-ink 字 */
.sex-wrap {
flex: 1;
display: flex;
justify-content: flex-end;
gap: 20rpx;
}
@@ -79,87 +96,100 @@ page {
display: flex;
align-items: center;
justify-content: center;
width: 120rpx;
height: 64rpx;
border-radius: 32rpx;
background: #F3F4F6;
transition: all 0.2s;
}
.sex-tag-active {
background: #FDF8EE;
border: 2rpx solid #D4A853;
min-width: 120rpx;
padding: 12rpx 0;
border-radius: 999rpx;
background: var(--paper);
border: 2rpx solid var(--line);
}
.sex-text {
font-size: 28rpx;
color: #6B7280;
color: var(--muted);
}
.sex-tag-active {
background: var(--brand-soft);
border-color: var(--brand-strong);
}
.sex-tag-active .sex-text {
color: #D4A853;
font-weight: 600;
color: var(--brand-ink);
font-weight: 700;
}
/* ===== 健康备注 ===== */
.form-remark {
display: flex;
flex-direction: column;
padding: 24rpx 32rpx;
}
/* 健康备注 */
.form-textarea {
width: 100%;
height: 160rpx;
margin-top: 16rpx;
font-size: 28rpx;
color: #1F2937;
color: var(--ink);
line-height: 1.6;
}
/* 24rpx 是中文最小字号下限 */
.remark-count {
align-self: flex-end;
font-size: 22rpx;
color: #C4C9D2;
font-size: 24rpx;
color: var(--muted);
}
/* 隐私提示 */
/* ===== 隐私提示 ===== */
.tips {
display: flex;
align-items: center;
padding: 0 12rpx;
margin-top: 24rpx;
}
.tips-icon {
flex-shrink: 0;
color: var(--muted);
}
.tips-text {
margin-left: 10rpx;
font-size: 24rpx;
color: #B0B7C3;
color: var(--muted);
}
/* 底部固定保存按钮 */
/* ===== 底部固定保存栏 =====
纸面与白面填充差只有 1.05:1，靠一道小偏移小模糊的上向暖墨阴影托住边界 */
.footer-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 20rpx 24rpx calc(20rpx + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.05);
padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
background: var(--white);
box-shadow: 0 -2rpx 8rpx rgba(63, 43, 25, 0.07);
}
.submit-btn {
display: flex;
align-items: center;
justify-content: center;
height: 88rpx;
border-radius: 44rpx;
background: #D4A853;
}
.submit-btn:active {
opacity: 0.85;
}
.submit-btn-disabled {
opacity: 0.6;
}
.submit-btn-text {
/* 保存是本页唯一的实心暖橙块，独占「全页同类实心块不超过一处」的额度 */
.primary-btn {
margin: 0;
padding: 24rpx 0;
border: none;
border-radius: 999rpx;
background: var(--brand-strong);
box-shadow: var(--shadow-cta);
color: var(--white);
font-size: 30rpx;
font-weight: 600;
color: #FFFFFF;
font-weight: 700;
letter-spacing: 2rpx;
line-height: 1.4;
}
.primary-btn::after {
border: none;
}
.primary-btn-disabled {
opacity: 0.6;
}
pages/health/profilelist.js
+2 -1
View File
@@ -101,7 +101,8 @@ Page({
wx.showModal({
title: '删除确认',
content: '删除后该就诊人信息将无法恢复，确定删除吗？',
confirmColor: '#D4A853',
// confirmColor 是属性值，读不到 CSS 变量，取值须与令牌同步（DESIGN.md §5.1）
confirmColor: '#B8520A',
success: (res) => {
if (!res.confirm) {
return
pages/health/profilelist.json
+3 -2
View File
@@ -1,8 +1,9 @@
{
"navigationBarTitleText": "就诊人",
"usingComponents": {
"t-icon": "tdesign-miniprogram/icon/icon"
"t-icon": "tdesign-miniprogram/icon/icon",
"t-loading": "tdesign-miniprogram/loading/loading"
},
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"
}
}
pages/health/profilelist.wxml
+46 -42
View File
@@ -1,50 +1,60 @@
<view class="container">
<!-- 顶部说明 -->
<view class="page-tip" wx:if="{{profiles.length > 0}}">
<t-icon name="info-circle" size="28rpx" color="#D4A853" />
<text class="page-tip-text">下单时可直接选择已保存的就诊人，无需重复填写</text>
<!-- 说明砖：浅橙底 + 2rpx --brand-line 描边托形（不加阴影），走全站「说明砖」档；
文案说明就诊人的用途 -->
<view class="tip-card" wx:if="{{profiles.length > 0}}">
<t-icon name="info-circle" class="tip-icon" size="28rpx" />
<text class="tip-text">下单时可直接选择已保存的就诊人，无需重复填写</text>
</view>
<!-- 就诊人列表 -->
<!-- 就诊人列表：通栏白块（白面 + 上下 2rpx 发丝线 + 中性阴影，圆角 0），
与「邮寄地址」列表同源。每条主体可点进编辑（右侧 chevron 是点击暗示），
不做无暗示的整卡可点；删除动作单独一行、走 --muted -->
<view class="profile-list" wx:if="{{profiles.length > 0}}">
<view class="profile-card" wx:for="{{profiles}}" wx:key="_id" data-id="{{item._id}}" bindtap="onEdit">
<view class="card-header">
<view class="name-wrap">
<text class="profile-name">{{item.name}}</text>
<text class="sex-tag" wx:if="{{item.sexText}}">{{item.sexText}}</text>
</view>
<view class="delete-btn" data-id="{{item._id}}" catchtap="onDelete">
<t-icon name="delete" size="32rpx" color="#9CA3AF" />
<view
class="profile-card {{index === profiles.length - 1 ? 'profile-card-last' : ''}}"
wx:for="{{profiles}}"
wx:key="_id"
>
<view class="profile-main" data-id="{{item._id}}" bindtap="onEdit" hover-class="profile-main-hover">
<view class="profile-info">
<view class="profile-top">
<text class="profile-name">{{item.name}}</text>
<text class="sex-tag" wx:if="{{item.sexText}}">{{item.sexText}}</text>
</view>
<view class="info-row">
<text class="info-label">出生年月</text>
<text class="info-value">{{item.birth || '未填写'}}</text>
</view>
<view class="info-row">
<text class="info-label">联系电话</text>
<text class="info-value">{{item.mobile || '未填写'}}</text>
</view>
<view class="info-row">
<text class="info-label">证件号</text>
<text class="info-value">{{item.idnumberText}}</text>
</view>
<view class="info-row" wx:if="{{item.remark}}">
<text class="info-label">健康备注</text>
<text class="info-value">{{item.remark}}</text>
</view>
</view>
<t-icon name="chevron-right" class="profile-arrow" size="32rpx" />
</view>
<view class="card-body">
<view class="info-row">
<text class="info-label">出生年月</text>
<text class="info-value">{{item.birth || '未填写'}}</text>
</view>
<view class="info-row">
<text class="info-label">联系电话</text>
<text class="info-value">{{item.mobile || '未填写'}}</text>
</view>
<view class="info-row">
<text class="info-label">证件号</text>
<text class="info-value">{{item.idnumberText}}</text>
</view>
<view class="info-row" wx:if="{{item.remark}}">
<text class="info-label">健康备注</text>
<text class="info-value">{{item.remark}}</text>
<view class="profile-actions">
<view class="profile-action" data-id="{{item._id}}" bindtap="onDelete">
<t-icon name="delete" class="profile-action-icon" size="32rpx" />
<text class="profile-action-text">删除</text>
</view>
</view>
</view>
</view>
<!-- 空状态 -->
<view class="empty-state" wx:if="{{!loading && profiles.length === 0}}">
<t-icon name="file-safety" size="120rpx" color="#D1D5DB" />
<text class="empty-text">还没有就诊人</text>
<text class="empty-subtext">添加就诊人后，下单时可一键带入信息</text>
<view class="profile-empty" wx:if="{{!loading && profiles.length === 0}}">
<t-icon name="user-checked" class="profile-empty-icon" size="80rpx" />
<text class="profile-empty-text">还没有就诊人，添加后下单即可一键带入</text>
</view>
<!-- 加载中 -->
@@ -52,15 +62,9 @@
<t-loading theme="circular" size="40rpx" text="加载中..." />
</view>
<!-- 底部留白，避免被固定按钮遮挡 -->
<view class="bottom-space"></view>
<!-- 新增按钮 -->
<!-- 底部固定操作栏 -->
<view class="footer-bar">
<view class="add-btn" bindtap="onAdd">
<t-icon name="add" size="34rpx" color="#FFFFFF" />
<text class="add-btn-text">新增就诊人</text>
</view>
<button class="primary-btn" bindtap="onAdd">新增就诊人</button>
</view>
</view>
</view>
pages/health/profilelist.wxss
+147 -93
View File
@@ -1,166 +1,220 @@
page {
background-color: #FAF6F1;
/* 配色令牌来自 app.wxss（全站唯一来源），本页不留副本 */
background-color: var(--paper);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.container {
min-height: 100vh;
box-sizing: border-box;
/* 底部留出固定操作栏的高度 + 安全区，避免最后一条被盖住 */
padding: 40rpx 32rpx calc(180rpx + env(safe-area-inset-bottom));
}
/* 顶部说明条 */
.page-tip {
/* ===== 说明砖 =====
浅橙底走「说明砖」档：--brand-soft + 2rpx --brand-line 描边托形、不加阴影。
--paper 与 --brand-soft 明度差仅约 1.03:1，不靠描边托不出形 */
.tip-card {
display: flex;
align-items: center;
margin: 24rpx 24rpx 0;
margin-bottom: 24rpx;
padding: 20rpx 24rpx;
border-radius: 16rpx;
background: #FDF8EE;
border-radius: 20rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
}
.page-tip-text {
/* t-icon 未传 color，用 CSS 变量着色即可（读不到变量的只有 color 属性写法） */
.tip-icon {
flex-shrink: 0;
color: var(--brand-ink);
}
.tip-text {
margin-left: 12rpx;
font-size: 24rpx;
color: #A1864B;
color: var(--brand-ink);
line-height: 1.5;
}
/* 就诊人列表 */
/* ===== 通栏白块 =====
白面 + 上下各 2rpx 发丝线 + 中性阴影，圆角 0；
负向 margin 抵消容器 32rpx 内距后左右顶到屏幕两侧，
卡内再用 32rpx 内距回到同一左基线，卡间发丝线因此通到底。
圆角必须为 0，否则满宽块的圆角会切在屏幕边上 */
.profile-list {
padding: 20rpx 24rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
margin: 0 -32rpx;
background: var(--white);
border-top: 2rpx solid var(--line);
border-bottom: 2rpx solid var(--line);
box-shadow: var(--shadow-card);
}
.profile-card {
background: #FFFFFF;
border-radius: 20rpx;
padding: 28rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
padding: 28rpx 32rpx;
border-bottom: 2rpx solid var(--line);
}
.profile-card:active {
background: #FDFCFA;
.profile-card-last {
border-bottom: none;
}
.card-header {
/* 主体整块可点进编辑，右侧 chevron 即点击暗示 */
.profile-main {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #F3F4F6;
}
.name-wrap {
display: flex;
align-items: center;
.profile-main-hover {
opacity: 0.7;
}
.profile-name {
font-size: 32rpx;
font-weight: 600;
color: #1F2937;
}
.sex-tag {
margin-left: 16rpx;
padding: 2rpx 14rpx;
border-radius: 8rpx;
background: #FDF8EE;
color: #D4A853;
font-size: 22rpx;
font-weight: 600;
}
.delete-btn {
padding: 8rpx 0 8rpx 24rpx;
}
.card-body {
.profile-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 16rpx;
}
.profile-top {
display: flex;
align-items: center;
margin-bottom: 12rpx;
}
/* 姓名是本页最重的字，走 --ink 700（标题档） */
.profile-name {
font-size: 32rpx;
font-weight: 700;
color: var(--ink);
}
/* 性别签：浅橙衬底档（--brand-soft + 2rpx --brand-line + --brand-ink），
字号 24rpx 是中文最小字号下限，不得再小 */
.sex-tag {
margin-left: 16rpx;
padding: 4rpx 12rpx;
border-radius: 6rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
font-size: 24rpx;
color: var(--brand-ink);
}
/* 标签走 --muted、值走 --ink-2：只表示文字层级，不给可点性上色 */
.info-row {
display: flex;
align-items: flex-start;
}
.info-row + .info-row {
margin-top: 8rpx;
}
.info-label {
font-size: 26rpx;
color: #9CA3AF;
width: 140rpx;
flex-shrink: 0;
width: 140rpx;
font-size: 26rpx;
color: var(--muted);
}
.info-value {
font-size: 26rpx;
color: #374151;
flex: 1;
min-width: 0;
font-size: 28rpx;
color: var(--ink-2);
word-break: break-all;
}
/* 空状态 */
.empty-state {
.profile-arrow {
flex-shrink: 0;
margin-left: 16rpx;
color: var(--muted);
}
/* 卡片操作行：与主体隔一条发丝线，删除靠右排（与「邮寄地址」卡同一位置） */
.profile-actions {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 24rpx;
padding-top: 20rpx;
border-top: 2rpx solid var(--line);
}
/* 文字只有 26rpx 高，用 padding 撑热区、等量负外边距抵消，不改变行高 */
.profile-action {
display: flex;
align-items: center;
padding: 16rpx 0;
margin: -16rpx 0;
}
.profile-action-icon {
margin-right: 10rpx;
color: var(--muted);
}
.profile-action-text {
font-size: 26rpx;
color: var(--muted);
}
/* ===== 空态 ===== */
.profile-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 200rpx;
padding: 140rpx 32rpx;
}
.empty-text {
font-size: 30rpx;
color: #9CA3AF;
/* --faint 仅用于非文字装饰（空态图标），不承载信息 */
.profile-empty-icon {
color: var(--faint);
}
.profile-empty-text {
margin-top: 24rpx;
font-size: 28rpx;
color: var(--muted);
}
.empty-subtext {
font-size: 26rpx;
color: #D1D5DB;
margin-top: 12rpx;
}
/* 加载中 */
/* ===== 加载中 ===== */
.loading-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 40rpx;
padding: 60rpx;
}
.bottom-space {
height: 180rpx;
}
/* 底部固定新增按钮 */
/* ===== 底部固定操作栏 =====
纸面与白面填充差只有 1.05:1，靠一道小偏移小模糊的上向暖墨阴影托住边界 */
.footer-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 20rpx 24rpx calc(20rpx + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.05);
padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
background: var(--white);
box-shadow: 0 -2rpx 8rpx rgba(63, 43, 25, 0.07);
}
.add-btn {
display: flex;
align-items: center;
justify-content: center;
height: 88rpx;
border-radius: 44rpx;
background: #D4A853;
}
.add-btn:active {
opacity: 0.85;
}
.add-btn-text {
margin-left: 8rpx;
/* 新增是本页唯一的实心暖橙块，独占「全页同类实心块不超过一处」的额度 */
.primary-btn {
margin: 0;
padding: 24rpx 0;
border: none;
border-radius: 999rpx;
background: var(--brand-strong);
box-shadow: var(--shadow-cta);
color: var(--white);
font-size: 30rpx;
font-weight: 600;
color: #FFFFFF;
font-weight: 700;
letter-spacing: 2rpx;
line-height: 1.4;
}
.primary-btn::after {
border: none;
}
pages/mine/contact.wxml
+7 -2
View File
@@ -25,9 +25,14 @@
</view>
</view>
<!-- 提示：非工作时间的兜底沟通方式 -->
<!-- 提示条：承接下方二维码，把海报里的「扫二维码」拉正为小程序内可行的「长按」 -->
<view class="tips-card">
<text class="tips-text">服务时间外如需帮助，可在「AI客服」留言，我们会在工作时间内回复您。</text>
<text class="tips-text">也可以长按下方二维码，加陪诊师微信</text>
</view>
<!-- 客服微信二维码：整图展示，长按唤起微信「识别图中二维码」菜单加微信 -->
<view class="card qr-card">
<image class="qr-image" src="/images/wechat_code.jpg" mode="widthFix" show-menu-by-longpress="{{ true }}" />
</view>
<view class="footer-space"></view>
pages/mine/contact.wxss
+18
View File
@@ -134,6 +134,8 @@ page {
border-radius: 20rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
/* 居中对齐放在父级：text 是行内元素，给自身设 text-align 不生效 */
text-align: center;
}
.tips-text {
@@ -142,6 +144,22 @@ page {
line-height: 1.7;
}
/* ===== 二维码卡片 =====
图片是 888×1131 竖版海报，自带昵称与「扫二维码」说明，动作提示已由上方提示条承担，
故卡内只放图。左右留出空气，避免海报灰底顶满白卡 */
.card.qr-card {
margin-top: 24rpx;
padding: 28rpx;
}
.qr-image {
display: block;
width: 100%;
max-width: 520rpx;
margin: 0 auto;
border-radius: 16rpx;
}
.footer-space {
height: 60rpx;
}