diff --git a/_verify.ps1 b/_verify.ps1 deleted file mode 100644 index fa65c5a..0000000 --- a/_verify.ps1 +++ /dev/null @@ -1,7 +0,0 @@ -Add-Type -AssemblyName System.Drawing -$bmp = [System.Drawing.Bitmap]::FromFile('d:\work\health\code\ws_health\ui\wxapp_escort\images\home-green.png') -$p = $bmp.GetPixel(64, 64) -Write-Host "home-green center: $($p.R),$($p.G),$($p.B)" -$bmp.Dispose() -Remove-Item 'd:\work\health\code\ws_health\ui\wxapp_escort\_reicon.ps1', 'd:\work\health\code\ws_health\ui\wxapp_escort\_sample.ps1' -ErrorAction SilentlyContinue -Write-Host 'temp scripts cleaned' \ No newline at end of file diff --git a/app.json b/app.json index df6bab4..379840a 100644 --- a/app.json +++ b/app.json @@ -27,7 +27,7 @@ "tabBar": { "custom": true, "color": "#999999", - "selectedColor": "#C2410C", + "selectedColor": "#B8520A", "backgroundColor": "#FFFFFF", "borderStyle": "black", "list": [ diff --git a/app.wxss b/app.wxss index f7113ed..012c688 100644 --- a/app.wxss +++ b/app.wxss @@ -1,7 +1,39 @@ /**app.wxss**/ page { - /* 品牌翠绿：#22A45D 为基准色（第 7 档），向浅/深各展开数档。 + /* ===== 全站配色令牌 · 唯一来源（改配色只改这里）===== + 各页 page{} 不再重复定义这份色板。本文件先注入、页面 wxss 后注入， + 同特异度下页面胜出，所以某页确需例外时仍可在自己的 page{} 里覆盖同名变量。 + 仍有四处硬编码走不了变量，改色时须一并手改（清单见 doc/DESIGN.md §7.3）： + t-icon 的 color 属性、app.json 的 tabBar.selectedColor、 + 首页 base64 内嵌线图标的 stroke、images/ai-ink.png 位图。 + 主色沿革（#C2410C H18/L40 → #B8520A H25/L38）与逐文件回滚清单见 DESIGN.md §七 */ + --brand-strong: #B8520A; /* 主按钮 / 选中态 / 实心强调块：白字 4.94:1、纸面 4.66:1、白卡 4.94:1，过 AA */ + --brand-soft: #FFF4E8; /* 浅橙衬底：图标底、标签底、按钮按下态 */ + --brand-line: #FFE0C2; /* 浅橙衬底的描边 */ + --brand-ink: #9B4508; /* 浅橙底 / 纸面上的文字与线图标：浅橙底 5.96:1、纸面 6.10:1，过 AA */ + + /* 中性：暖灰阶，与暖白纸面同温（冷灰会让白卡边缘发青） */ + --ink: #2B2521; + --ink-2: #4A4038; + --muted: #6F655C; /* 纸面 5.37:1 / 白卡 5.69:1 / 浅橙底 5.24:1，过 AA 正文。 + 历史值 #7A7068 落在纸面上只有 4.56:1，已废弃 */ + --faint: #A79C92; /* 仅用于非文字装饰 */ + --line: #ECE3D6; /* 米色发丝边。原 #F0E9E0 在纸面上只有 1.12:1，而白卡与纸面的 + 填充差本身只有 1.06:1——边界全靠这条边，故压深一档： + 纸面 1.20:1 / 白卡 1.27:1 */ + --sep: #E5DACC; /* 分隔线专用：比 --line 深一档，浅橙底上才看得见 */ + --paper: #FAF8F5; /* 暖白纸面。原 #FAF6F0 的 R−B=10，黄度偏重、大面积铺开会被读成 + "旧纸/发闷"；压到 R−B=5 后黄度减半，明度反而略升 + （L* 97.0 → 97.7），暖白身份保留 */ + --white: #FFFFFF; + + /* 阴影：偏移与模糊半径都保持"小偏移、小模糊"的锐利档 */ + --shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07); /* 白面一律走中性阴影 */ + --shadow-cta: 0 2rpx 8rpx rgba(184, 82, 10, 0.16); /* 只给实心 CTA、品牌印记这类小体量元素 */ + + /* --- 以下与上面的色板无关，是待收口的历史遗留（见 DESIGN.md §5.2）--- + 品牌翠绿：#22A45D 为基准色（第 7 档），向浅/深各展开数档。 首页主视觉已确定该绿为品牌主色，全站令牌与之对齐， 避免二级页沿用旧橙色造成首页与内页两套配色。 */ --td-brand-color-1: #f0faf3; diff --git a/custom-tab-bar/index.js b/custom-tab-bar/index.js index 8034c78..c811df0 100644 --- a/custom-tab-bar/index.js +++ b/custom-tab-bar/index.js @@ -1,11 +1,12 @@ // 自定义 tabBar：固定在底部，选中态只换颜色、不换图形。 -// 「首页 / 我的」走 TDesign 线性图标字体；「AI客服」用品牌 AI 图标 -// （气泡内 AI 字位图）：灰色版 ai.png 为未选中态，暖橙版 ai-ink.png 为选中态， -// 与文字颜色同步切换，保持选中可辨 +// 三个 tab 统一走 TDesign 线性图标字体：home / chat-bubble / user。 +// 「AI客服」曾用位图（气泡内嵌 AI 字：灰色 ai.png、暖橙 ai-ink.png）当图标， +// 其轮廓笔画比图标字体细一档，与另外两个并排时粗细不搭，故弃用。 +// 位图文件仍留在 images/ 下未删（app.json 的 tabBar 项也在引用，见 DESIGN.md §5.2） Component({ data: { selected: 0, // 当前选中项，由各 tab 页在 onShow 里同步 - activeColor: '#C2410C', // 选中：暖橙深一档，白底 4.69:1，过 WCAG AA 正文标准 + activeColor: '#B8520A', // 选中：暖橙（色相 25°、保住原亮度），白底 4.94:1，过 WCAG AA 正文标准 inactiveColor: '#7A7068', // 未选中：暖灰，白底 4.83:1，过 WCAG AA 正文标准 list: [{ pagePath: '/pages/home/index', @@ -14,9 +15,8 @@ Component({ }, { pagePath: '/pages/ai/aichat', text: 'AI客服', - // 图片图标：配置了 imgPath 时优先于 icon 渲染 - imgPath: '/images/ai.png', - imgActivePath: '/images/ai-ink.png' + // 标准「聊天」图标：线性，与 home / user 同族 + icon: 'chat' }, { pagePath: '/pages/mine/mine', text: '我的', diff --git a/custom-tab-bar/index.wxml b/custom-tab-bar/index.wxml index 96a5fbc..ce24618 100644 --- a/custom-tab-bar/index.wxml +++ b/custom-tab-bar/index.wxml @@ -7,16 +7,8 @@ data-path="{{ item.pagePath }}" bindtap="onTap" > - - + `构建 npm` -4. 构建成功后，勾选 `将 JS 编译成 ES5` - -### 3. 添加底部导航图标 -需要在 `images` 目录下添加以下图标文件（PNG格式）： -- `home.png` - 首页图标（未选中） -- `home-active.png` - 首页图标（选中） -- `mine.png` - 我的图标（未选中） -- `mine-active.png` - 我的图标（选中） - -### 4. 添加默认头像 -在 `images` 目录下添加 `default-avatar.png` 作为默认头像图片 - -## 项目结构 +## 目录结构 ``` -attendant-wechat/ -├── app.js # 小程序主入口 -├── app.json # 小程序全局配置 -├── app.wxss # 小程序全局样式 -├── sitemap.json # 站点地图配置 -├── package.json # 项目依赖配置 -├── project.config.json # 项目配置文件 -├── pages/ # 页面目录 -│ ├── index/ # 首页 -│ │ ├── index.wxml # 页面结构 -│ │ ├── index.wxss # 页面样式 -│ │ ├── index.js # 页面逻辑 -│ │ └── index.json # 页面配置 -│ └── mine/ # 我的页面 -│ ├── mine.wxml # 页面结构 -│ ├── mine.wxss # 页面样式 -│ ├── mine.js # 页面逻辑 -│ └── mine.json # 页面配置 -└── images/ # 图片资源目录 - ├── home.png # 首页图标 - ├── home-active.png # 首页图标（选中） - ├── mine.png # 我的图标 - ├── mine-active.png # 我的图标（选中） - └── default-avatar.png # 默认头像 +app.js / app.json / app.wxss 全局入口、页面与 tabBar 配置、色板令牌 +custom-tab-bar/ 自定义底部导航（fixed 在底部，各 tab 页需自备底部占位） +pages/ 页面（清单见下） +utils/ + request.js HTTP 封装（基址、appId、token 头） + api.js 接口定义 + chatmsg.js AI 客服 WebSocket +doc/ + DESIGN.md 配色规范（全站唯一色板来源） + PROJECT_GUIDE.md 本文件 ``` -## 页面说明 +## 页面 -### 首页 (pages/index) -- 欢迎卡片：显示应用名称和欢迎语 -- 快捷功能：今日值班、值班表、值班记录 -- 统计信息：显示值班相关统计数据 +| 路径 | 说明 | +|---|---| +| `pages/home/index` | 首页 | +| `pages/ai/aichat` | AI 客服 | +| `pages/escort/itemlist` | 陪诊服务列表 | +| `pages/escort/itemdetail` | 服务详情 / 下单 | +| `pages/escort/attendantlist` | 陪诊师列表 | +| `pages/escort/recordlist` | 订单记录 | +| `pages/escort/recorddetail` | 订单详情 | +| `pages/escort/agreement` | 用户协议 | +| `pages/escort/guide` | 服务指南 | +| `pages/health/profilelist` | 健康档案列表 | +| `pages/health/profileedit` | 档案编辑 | +| `pages/mine/mine` | 我的 | +| `pages/mine/about` | 关于 | +| `pages/mine/contact` | 联系我们 | +| `pages/hospital/contact` | 医院联系 | +| `pages/hospital/ranking` | 医院排行 | +| `pages/home/webview` | 网页容器 | -### 我的 (pages/mine) -- 用户信息卡片：显示用户头像和昵称 -- 功能菜单：个人信息、我的值班、值班统计、设置、帮助与反馈、关于 -- 退出登录：退出当前账号 +## 约定 -## 使用的 TDesign 组件 -- `t-button`: 按钮组件 -- `t-cell`: 单元格组件 -- `t-cell-group`: 单元格组组件 -- `t-icon`: 图标组件 -- `t-avatar`: 头像组件 -- `t-card`: 卡片组件 -- `t-divider`: 分割线组件 -- `t-badge`: 徽标组件 - -## 注意事项 -1. 确保微信开发者工具的基础库版本 >= 2.12.0 -2. 安装依赖后必须执行"构建 npm"操作 -3. 建议在真机上测试，部分功能可能与模拟器有差异 -4. 图标文件尺寸建议：未选中状态 81x81px，选中状态 81x81px - -## 下一步开发建议 -1. 实现用户登录功能 -2. 对接后端 API，获取真实的值班数据 -3. 添加数据缓存机制，提升用户体验 -4. 实现消息通知功能 -5. 添加数据导出功能 +- **配色**：见 `doc/DESIGN.md`。色板令牌集中在 `app.wxss` 的 `page{}`，改配色只改这一处。 +- **接口**：统一走 `utils/request.js`，基址 `https://api.huashengtec.com`（本地调试可改用文件内注释的 `127.0.0.1:9004`）；请求自动携带 `appId=wxapp-escort` 与登录 token。 +- **登录**：`app.js` 的 `onShow` 调 `wx.login` 换 token，存于 `globalData.user`。 +- **全局数据**：服务列表 / 协议 / 医院信息 / 排行在 `onLaunch` 预取，挂到 `globalData` 供各页取用。 \ No newline at end of file diff --git a/doc/RERACT_PLAN.md b/doc/RERACT_PLAN.md new file mode 100644 index 0000000..7f51995 --- /dev/null +++ b/doc/RERACT_PLAN.md @@ -0,0 +1,83 @@ +# 页面重构进度台账 + +**用途**：记录哪些页面已并入暖橙体系、哪些还停在旧体系，以及下一步的推进顺序。 +**分工**：配色标准、令牌表、状态色、回滚方法一律以 [DESIGN.md](./DESIGN.md) 为准（本文不重复）；本文只管「进度 + 顺序 + 每页动作」。 + +--- + +## 一、已完成（4 页） + +| 页面 | 完成 | 主要动作 | +|---|---|---| +| `home/index`（首页） | 更早 | 暖白纸面 + 白卡语言重建：hero（大标题 / 场景行 / 通栏主 CTA）→ 陪诊服务（白卡宫格 + 浅橙介绍卡）→ 常用功能（青绿待服务条 + 双列 / 通栏卡）→ 页脚文字链。页内旧令牌副本已删 | +| `escort/itemlist`（陪诊服务列表） | 更早 | 页首短横色标 + 引导，说明白卡（开通城市 / 费用披露 + 两个入口），三组「通栏白底 + 章线」价目表，空心环「预约」按钮，浅橙收口页脚卡。页内旧令牌副本已删 | +| `mine/mine`（我的） | 2026-10-04 | 并入暖橙体系 + 首页白卡语言：纸面底、头像与昵称直接落纸面、菜单白卡（图标走 `--brand-ink`）、页脚细竖线分隔。默认头像改用暖墨品牌标记 `images/home-ink.png`。删掉一批死样式（`.user-phone`、`.avatar-btn`、昵称输入等） | +| `ai/aichat`（AI 陪诊助手） | 2026-10-04 | 整页重设计：纸面底 + 消息列表（头像行在上、气泡在下，用户消息整条靠右并把时间镜像到头像左侧）；AI 与用户头像统一底座（浅橙底 + 暖橙描边），身份只由图形区分（品牌标记 / 人像）；AI 声明由页底常驻行改为挂在每条 AI 气泡下方；清空入口移到输入框下方做成空心描边小按钮；全页圆角统一 20rpx。附带修复滚动布局（`.message-list` 补 `min-height: 0`，消息超一屏后输入区不再被顶出视口） | + +> DESIGN.md §5.1 已同步登记 `mine/mine.wxss`、`ai/aichat.wxss` 两页迁移完成。 + +--- + +## 二、待重构（13 页 / 22 个文件） + +按"离规范的距离"分三档，**建议从上往下推进**——同档内先易后难。 + +### A. 旧暖橙副本（最接近，只差删副本 + 对值）｜4 页 8 文件 + +页内各带一份 `page{}` 令牌副本，停在 `#C2410C` / `#9A3412`；结构基本可用。 + +| 页面 | 文件 | 动作 | +|---|---|---| +| `escort/itemdetail` | `.wxss` `.wxml` | 删页内令牌副本（改读 app.wxss），`t-icon` 的 `color` 手改 `#9B4508` | +| `escort/attendantlist` | `.wxss` `.wxml` | 同上 | +| `escort/guide` | `.wxss` `.wxml` | 同上 | +| `mine/contact` | `.wxss` `.wxml` | 同上 | + +### B. 旧金色体系（`#D4A853` 系，改动最大）｜9 页 + 3 组件/JS + +| 页面 | 文件 | 动作 | +|---|---|---| +| `mine/about` | `.wxss` | 按 §5.3 映射表整体换色 | +| `mine/comp_address` | `.wxss` `.wxml`（`switch` 属性值需硬编码） | 同上 | +| `mine/comp_profile` | `.wxss` | 同上 | +| `health/profilelist` | `.wxss` `.wxml` `.js`（`confirmColor`） | 同上 | +| `health/profileedit` | `.wxss` | 同上 | +| `escort/recordlist` | `.wxss` | 换色 + 状态四档 | +| `escort/recorddetail` | `.wxss` `.wxml` | 换色 + 状态四档 | +| `escort/agreement` | `.wxss` | 底 `#FAF6F1` → `--paper`，其余按映射表 | + +### C. 绿灰系（另一套冷色，需整体并入）｜2 页 + +| 页面 | 文件 | 动作 | +|---|---|---| +| `hospital/contact` | `.wxss` | 底 `#F5F7F6`、字 `#1F2937`、绿灰线一并换成纸面 / 暖墨 / 暖线 | +| `hospital/ranking` | `.wxss` | 同上 | + +### D. 无需处理 + +| 页面 | 说明 | +|---|---| +| `home/webview` | 仅一个 ``，无色值 | + +### 组件与 JS 里的硬编码（易漏） + +`comp_address.wxml` 的 `switch` 属性、`profilelist.js` 的 `confirmColor` 走的是**属性值**，读不到 CSS 变量，必须硬编码暖橙。 + +--- + +## 三、系统级收口（不属任何页面） + +沿用 DESIGN.md §5.2，共 4 项：`app.json` 的 tabBar 绿色选中图标、tabBar `color: #999999`、`app.wxss` 里整套翠绿死代码（`--td-brand-color-1..10`、`--c-ink`）、`custom-tab-bar` 未选中灰 `#7A7068`。建议放在页面重构全部完成后一次做完，避免边改边漏。 + +--- + +## 四、每页收工自检 + +1. 灰度化后层级是否仍清楚（去掉颜色不散架）。 +2. 色相数量：暖橙 + 暖墨 + 至多一个状态色。 +3. 最浅的那行字是否 `--muted` 或更深。 +4. 中文最小 24rpx、正文对比度 ≥ 4.5:1（大字 ≥ 3:1）、图标 ≥ 3:1。 +5. 可点项是否有显性暗示，热区是否 ≥ 56rpx。 +6. 页面是否还有 `page{}` 级令牌副本；有则删掉，回归 app.wxss 唯一来源。 + +> 详细判据见 DESIGN.md「六、一句话检验」。 \ No newline at end of file diff --git a/images/ai-ink.png b/images/ai-ink.png index 51b9e15..5bc5f0e 100644 Binary files a/images/ai-ink.png and b/images/ai-ink.png differ diff --git a/images/home-ink.png b/images/home-ink.png new file mode 100644 index 0000000..3f190e8 Binary files /dev/null and b/images/home-ink.png differ diff --git a/pages/ai/aichat.wxml b/pages/ai/aichat.wxml index 12c37a4..3f1a213 100644 --- a/pages/ai/aichat.wxml +++ b/pages/ai/aichat.wxml @@ -1,93 +1,82 @@ - - + - + AI陪诊助手 我是您的智能陪诊助手，可以为您解答陪诊相关问题 - {{item}} + - + - - - - - - - {{item.content}} - - - {{item.time}} + + + + - + + + + + {{item.time}} + - - - - + + + + {{item.content}} + - - - - {{item.content}} - - - {{item.time}} - - + + 内容由AI生成，仅供参考 + - + - + + + + + @@ -103,36 +92,29 @@ - - - - 清空聊天 - - - + - - - - - - - + + + - - - 本服务为AI生成内容，结果仅供参考。 + + + + 清空聊天 \ No newline at end of file diff --git a/pages/ai/aichat.wxss b/pages/ai/aichat.wxss index 1139f12..90df033 100644 --- a/pages/ai/aichat.wxss +++ b/pages/ai/aichat.wxss @@ -1,45 +1,65 @@ +/* 配色令牌来自 app.wxss（全站唯一来源），本页不留副本。 + 整体沿用首页的「暖白纸面 + 白卡 + 浅橙衬底」语言： + AI 气泡走白卡（白面 + 2rpx 发丝边），用户气泡走浅橙衬底，避免实心橙泛滥。 */ .chat-container { display: flex; flex-direction: column; height: 100vh; box-sizing: border-box; - /* 给 fixed 的自定义 tabBar 留位；安全区由这里统一承担，输入区不再重复加 */ - padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); - background-color: #F5F5F5; - position: relative; + /* 页面自身不滚，滚动只交给中间的消息区； + overflow: hidden 是兜底，避免任何子项溢出到视口外变成"看得见滑不到" */ + overflow: hidden; + /* 给 fixed 的自定义 tabBar 留位；安全区由这里统一承担，输入区不再重复加。 + tabBar 实测高度 = 12+12 内距 + 44 图标 + 6 间距 + 24 文字 + 2 边框 = 100rpx(+安全区)。 + 140 → 120 → 112rpx：按钮下边只剩 12rpx(6px) 空隙，已贴近下限—— + 再往下（<100rpx）胶囊就会被 tabBar 盖住；这 12rpx 同时是防微信字体放大 + 把 tabBar 撑高的缓冲，不宜再压 */ + padding-bottom: calc(112rpx + env(safe-area-inset-bottom)); + background-color: var(--paper); } -/* 清空按钮 */ +/* ===== 清空入口（在输入区下方）===== */ +/* 空心描边小按钮：2rpx 暖橙描边、无填充。 + 清空是低频破坏性动作，用"只描边"与输入区右侧那个浅橙底发送键区分开； + 描边在纸面上 4.66:1、文字 6.10:1，均过线。 + 圆角 20rpx 与输入框、发送键、气泡同档——全页统一为圆角矩形，不再有胶囊 + 容器是 column，靠 align-self: flex-end 右对齐，不必再套一层行容器 */ .clear-btn { + align-self: flex-end; display: flex; align-items: center; - justify-content: flex-end; - gap: 6rpx; - padding: 12rpx 24rpx; - background-color: #FFFFFF; - border-top: 1rpx solid #EEEEEE; + gap: 8rpx; + flex-shrink: 0; + /* 上 12 贴住输入区，右 32 对齐页面页边距；下不留边距，底部空气统一交给容器 */ + margin: 12rpx 32rpx 0; + padding: 10rpx 26rpx; + border-radius: 20rpx; + border: 2rpx solid var(--brand-strong); + transition: transform 0.15s ease; } .clear-btn:active { - opacity: 0.7; + transform: scale(0.96); } -.clear-text { - font-size: 22rpx; - color: #999999; +.clear-btn-text { + font-size: 24rpx; + font-weight: 500; + color: var(--brand-ink); + letter-spacing: 1rpx; } -/* 消息列表区域 */ +/* ===== 消息列表 ===== */ .message-list { flex: 1; + /* 关键：flex 子项的自动最小高度是「内容高度」，消息多于一屏后它就不肯收缩， + 会把 100vh 的容器撑破、把下方输入区顶出视口（且因容器锁死高度而滑不回来）。 + 置 0 后它才能正确收缩到剩余空间，并触发 scroll-view 自身滚动 */ + min-height: 0; padding: 20rpx 0; } -.message-list.has-messages { - padding-top: 20rpx; -} - -/* 欢迎区域 */ +/* ===== 欢迎区 ===== */ .welcome-area { display: flex; flex-direction: column; @@ -48,30 +68,31 @@ text-align: center; } +/* 空态图标：浅橙衬底 + 暖陶土图标，替代原橙/绿渐变与彩色辉光 */ .welcome-icon { - width: 160rpx; - height: 160rpx; - border-radius: 50%; - background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%); + width: 140rpx; + height: 140rpx; + margin-bottom: 32rpx; display: flex; align-items: center; justify-content: center; - margin-bottom: 40rpx; - box-shadow: 0 8rpx 32rpx rgba(255, 155, 51, 0.3); + border-radius: 40rpx; + background: var(--brand-soft); + border: 2rpx solid var(--brand-line); } .welcome-title { + margin-bottom: 12rpx; font-size: 40rpx; - font-weight: 600; - color: #333333; - margin-bottom: 16rpx; + font-weight: 700; + color: var(--ink); } .welcome-desc { + margin-bottom: 56rpx; font-size: 28rpx; - color: #999999; - margin-bottom: 60rpx; line-height: 1.6; + color: var(--muted); } .quick-questions { @@ -81,113 +102,142 @@ gap: 20rpx; } +/* 常见问题：首页白卡语言 + 右侧 chevron 做点击暗示 */ .quick-item { - background-color: #FFFFFF; - padding: 28rpx 32rpx; - border-radius: 16rpx; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16rpx; + padding: 28rpx 28rpx 28rpx 32rpx; + background: var(--white); + border: 2rpx solid var(--line); + border-radius: 20rpx; + box-shadow: var(--shadow-card); font-size: 28rpx; - color: #333333; + color: var(--ink-2); text-align: left; - box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06); - transition: all 0.2s ease; + transition: transform 0.15s ease; } .quick-item:active { transform: scale(0.98); - background-color: #FFF8F0; + background: var(--brand-soft); } -/* 消息项 */ +/* ===== 消息项 ===== */ +/* 头像在上、气泡在下；用户消息整条靠右 */ .message-item { display: flex; flex-direction: column; padding: 16rpx 24rpx; } -.message-item.ai { - align-items: flex-start; -} - .message-item.user { align-items: flex-end; } -/* 头像 */ +/* 头像行：头像在左，时间紧跟其右 */ +.message-head { + display: flex; + align-items: center; + gap: 12rpx; + margin-bottom: 10rpx; +} + +/* 用户侧镜像为「时间 → 头像」：整行仍贴右边缘，于是头像正好落在气泡右边缘上， + 与 AI 侧头像对齐气泡左边缘形成对称；时间退到头像左侧，不再顶在最右 */ +.message-item.user .message-head { + flex-direction: row-reverse; +} + +/* 头像底座：AI 与用户同构——浅橙衬底 + 2rpx 暖橙描边 + （浅橙块落在纸面上只有约 1.03:1，必须靠描边托形）。 + 身份只由图形区分：AI 是品牌标记，用户是人像图标； + 左右位置本来就把两者分开了，不必再用"实心橙 vs 浅橙"区分， + 否则同一列里两种底板并排出现会读成没做完 */ .avatar { - width: 72rpx; - height: 72rpx; - border-radius: 40%; + width: 64rpx; + height: 64rpx; display: flex; align-items: center; justify-content: center; + border-radius: 20rpx; + background: var(--brand-soft); + border: 2rpx solid var(--brand-line); flex-shrink: 0; } -.ai-avatar { - background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%); - margin-bottom: 12rpx; - padding: 16rpx; - width: 46rpx; - height: 46rpx; +/* AI 的品牌标记用暖墨版 home-ink.png：白色版 home-w.png 只能压在实心色块上， + 落在浅橙底会看不见。 + 36rpx 与用户侧的 t-icon 同尺寸（两个图形的笔画都约占画布 95%），视觉齐平 */ +.avatar-img { + width: 36rpx; + height: 36rpx; } -.user-avatar { - background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%); - margin-bottom: 12rpx; +/* 头像行里的时间：放头像右侧 */ +.message-time { + font-size: 22rpx; + color: var(--muted); } -/* 消息内容 */ +/* 头像已移到气泡上方，气泡不再被头像占位挤压，版心随之放宽： + 84% → 92%（约 646rpx），仍留一档余量不顶到屏幕边缘 */ .message-content { display: flex; flex-direction: column; - max-width: 95%; + min-width: 0; + max-width: 92%; } .message-item.user .message-content { align-items: flex-end; } -.message-item.ai .message-content { - align-items: flex-start; -} - -/* 消息气泡 */ +/* ===== 气泡 ===== */ .message-bubble { padding: 20rpx 24rpx; - border-radius: 16rpx; + border-radius: 20rpx; word-wrap: break-word; word-break: break-all; } +/* AI：白卡（白面 + 发丝边），安静、不与用户消息争色 */ .message-item.ai .message-bubble { - background-color: #FFFFFF; - border-top-left-radius: 4rpx; + background: var(--white); + border: 2rpx solid var(--line); + border-top-left-radius: 6rpx; } +/* 用户：浅橙衬底 + 暖陶土字，避免一排实心橙（浅橙底 5.96:1，过 AA）。 + 气泡落在纸面上，浅橙底与纸面明度差仅约 1.03:1，必须靠 2rpx --brand-line 描边托形 */ .message-item.user .message-bubble { - background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%); - border-top-right-radius: 4rpx; + background: var(--brand-soft); + border: 2rpx solid var(--brand-line); + border-top-right-radius: 6rpx; } +/* 气泡正文 28 → 30rpx（15px）：长回答连续阅读时 14px 偏吃力，上调一号。 + markdown 与纯文本两条路径同步，避免同一气泡里两种字号 */ .message-text { - font-size: 28rpx; + font-size: 30rpx; line-height: 1.6; } .message-item.ai .message-text { - color: #333333; + color: var(--ink-2); } .message-item.user .message-text { - color: #FFFFFF; + color: var(--brand-ink); } -/* Markdown 渲染区域 */ +/* Markdown 渲染区：字号与 .message-text 对齐（30rpx） */ .message-markdown { width: 100%; - font-size: 28rpx; - color: #333333; + font-size: 30rpx; line-height: 1.6; + color: var(--ink-2); } /* 表格在聊天气泡中的样式覆盖 */ @@ -196,7 +246,7 @@ max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; - border: 1rpx solid #E5E5E5; + border: 2rpx solid var(--line); border-radius: 8rpx; } @@ -223,16 +273,16 @@ } .message-markdown .t-chat-markdown-table__th { - background-color: #F5F5F5; + background-color: var(--brand-soft); font-weight: 600; - color: #333333; + color: var(--ink); } .message-markdown .t-chat-markdown-table__tr:nth-child(2n) { - background-color: #FAFAFA; + background-color: var(--paper); } -/* 代码块样式覆盖 */ +/* 代码块 */ .message-markdown .t-chat-markdown-codespan, .message-markdown .t-chat-markdown-code { font-size: 24rpx; @@ -241,16 +291,10 @@ .message-image { max-width: 400rpx; - border-radius: 8rpx; + border-radius: 12rpx; } -.message-time { - font-size: 20rpx; - color: #999999; - margin-top: 8rpx; -} - -/* 正在输入指示器 */ +/* ===== 正在输入 ===== */ .typing-bubble { padding: 24rpx 32rpx; } @@ -262,10 +306,10 @@ } .dot { - width: 16rpx; - height: 16rpx; + width: 14rpx; + height: 14rpx; border-radius: 50%; - background-color: #CCCCCC; + background-color: var(--brand-ink); animation: typing 1.4s infinite ease-in-out both; } @@ -288,62 +332,64 @@ } } -/* 输入区域 */ +/* ===== 输入区 ===== */ .input-area { - background-color: #FFFFFF; - padding: 20rpx 24rpx; - border-top: 1rpx solid #EEEEEE; -} - -.input-wrapper { display: flex; align-items: center; gap: 16rpx; + /* 钉在容器底部，不被消息区挤压 */ + flex-shrink: 0; + padding: 16rpx 24rpx; + background: var(--white); + border-top: 2rpx solid var(--line); } .message-input { flex: 1; - height: 72rpx; - background-color: #F5F5F5; - border-radius: 16rpx; + height: 76rpx; padding: 0 28rpx; + background: var(--paper); + border: 2rpx solid var(--line); + /* 20rpx = 10px：与气泡、常见问题卡、用户徽记的统一圆角档， + 比原 999rpx 胶囊更贴合"输入条"的体量（76rpx 高≈38px，10px 圆角约占四分之一） */ + border-radius: 20rpx; font-size: 28rpx; - color: #333333; + color: var(--ink); } .input-placeholder { - color: #AAAAAA; -} - -.input-actions { - display: flex; - align-items: center; - gap: 16rpx; + color: var(--muted); } +/* 发送按钮：默认浅橙底 + 描边，有内容时转实心暖橙（全页唯一的实心橙块）。 + 默认态落在白面输入区上，浅橙底同样靠 --brand-line 描边托形。 + 圆角由正圆（50%）改为 20rpx，与左侧输入框、上方气泡同档，成对出现 */ .action-btn { - width: 72rpx; - height: 72rpx; - border-radius: 50%; + width: 76rpx; + height: 76rpx; display: flex; align-items: center; justify-content: center; - background-color: #F5F5F5; - transition: all 0.2s ease; + border-radius: 20rpx; + background: var(--brand-soft); + border: 2rpx solid var(--brand-line); + flex-shrink: 0; + transition: all 0.15s ease; } .send-btn.active { - background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%); + background: var(--brand-strong); + border-color: var(--brand-strong); } -/* AI声明 */ -.ai-disclaimer { - padding: 12rpx 24rpx; - text-align: center; - background-color: #F5F5F5; -} - -.ai-disclaimer text { - font-size: 22rpx; - color: #CCCCCC; +/* ===== AI 声明注释 ===== */ +/* 原为页面底部一行常驻声明，改为挂在每条 AI 回复的气泡正下方： + 既省下底部固定高度，又让声明紧贴它要限定的内容。 + 无背景无边框，靠 muted 小字安静收尾； + 24rpx 是中文最小可用字号下限（12px），不能再小 */ +.message-note { + margin-top: 8rpx; + font-size: 24rpx; + line-height: 1.5; + color: var(--muted); } \ No newline at end of file diff --git a/pages/escort/itemlist.js b/pages/escort/itemlist.js index 8e85d35..1283ed1 100644 --- a/pages/escort/itemlist.js +++ b/pages/escort/itemlist.js @@ -13,13 +13,13 @@ const SERVICE_GROUPS = [{ key: 'accompany', title: '陪同就医', - note: '老人、异地就医，或不便独自就诊的情况都适合。陪诊师提前确认院区路线与科室位置，就诊当天全程在场。', + note: '不熟悉医院流程、上班脱不开身、不便独自就诊的情况都适合，就诊当天有人全程陪着。', ids: [1, 2] // 全天陪诊 / 半天陪诊 }, { key: 'errand', title: '就医代办', - note: '本人不必到场。排队取号、递送材料、取报告这些跑动的事都可以交给我们，办完的结果原样带回。', + note: '代问诊、预约检查时间、取报告、办手续、开药等跑腿服务都可以代劳，本人不必到场。', ids: [3, 4, 5, 6] // 代问诊 / 检查预约 / 出入院代办 / 跑腿服务 }, { @@ -30,7 +30,7 @@ const SERVICE_GROUPS = [{ // 沿革：这里放过「打算长期使用」，因与另外两组的"要办的事"不同轴被改回口语， // 现在三组标题统一改成 4 字短语，它也就不再是异类 title: '多次使用', - note: '需要多次复诊或长期治疗时，一次买多次，省去反复下单的麻烦，每次按次使用。', + note: '需要多次复诊或长期治疗时，一次买多次，省去反复下单的麻烦。', ids: [7, 8] // VIP 5次 半天陪诊 / VIP 5次代买药 // 注：条目改单行横排后名称不再被半栏宽度挤压，这两个"VIP 5次 XXX"已恢复原名， // "买多次"由名称自己交代；组标题与副题仍负责讲清"什么情况选这一组" diff --git a/pages/escort/itemlist.wxml b/pages/escort/itemlist.wxml index 8b5a9e1..e8a7aec 100644 --- a/pages/escort/itemlist.wxml +++ b/pages/escort/itemlist.wxml @@ -22,12 +22,12 @@ 服务指南 - + 用户协议 - + @@ -87,13 +87,13 @@ 做成一张浅橙收口卡——与首页「常用功能」区块尾部的「联系我们」卡 （.quick-item-full）同源：--brand-soft 底 + 2rpx --brand-line 描边 + 去阴影。 首页每个区块都收在暖色卡上，本页原先四张白面一张暖色面都没有， - 暖色只剩"线"（竖条 / 按钮环 / 暖陶土字），整页因此比首页轻一档； + 暖色只剩"线"（竖条 / 按钮环 / 暖橙字），整页因此比首页轻一档； 这张卡就是补回来的那张"面"，也是页尾唯一的暖色落点 --> 没有合适的？ 联系人工客服 - + diff --git a/pages/escort/itemlist.wxss b/pages/escort/itemlist.wxss index 46e03d8..d753b72 100644 --- a/pages/escort/itemlist.wxss +++ b/pages/escort/itemlist.wxss @@ -25,11 +25,11 @@ - 项间虚线挂在 .ledger-row 上、通栏到卡的内边缘；每组最后一行不画 （.ledger-row:last-child）——卡的底边已经替它收了口，留着会叠出 "虚线 + 28rpx + 卡边发丝线"的双线。章线开、卡边收，每章仍是一张闭合的表 - - 按钮走"空心胶囊"：3rpx --brand-strong 环 + 满圆角 + 暖陶土字（纸面 6.89:1）， + - 按钮走"空心胶囊"：3rpx --brand-strong 环 + 满圆角 + 暖橙字（纸面 6.10:1）， 无填充无阴影，按下填 --brand-line。之所以不用填充，是因为按钮挪到价格左边后 与规格签撞了形——签是"浅橙底 + 小圆角"，按钮若也做成"浅橙底 + 圆角"， 同一行就出现两个同形物体，读起来是两个标签，分不清哪个能点。 - 现在签 = 暖陶土小字、按钮 = 满圆角空心环，一行只剩一个填充物。 + 现在签 = 暖橙小字、按钮 = 满圆角空心环，一行只剩一个填充物。 字重也从 700 降到 500：可点性改由环承担，字不必再靠粗度喊话 （代价是 500 在部分 Android 上会落回常规，详见 .book-btn 注释） - 价格按用户要求弱化：--muted + 字重 500（本页对 §2.1「价格数字」的例外，已登记） @@ -49,25 +49,11 @@ 落差只剩一处，且是分工使然：首页「立即预约」是实心 --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-ink: #9A3412; /* 浅橙衬底/纸面上的文字链：6.8:1，过 AA */ - - --ink: #2B2521; - --ink-2: #4A4038; - --muted: #6F655C; /* 纸面 5.28:1 / 白卡 5.69:1，过 AA 正文 */ - --line: #ECE3D6; /* 米色发丝边：纸面 1.20:1 */ - --sep: #E5DACC; /* 分隔线专用：竖分隔线 - （比 --line 深一档才看得见） */ - --paper: #FAF8F5; - --white: #FFFFFF; - - /* 白卡托形阴影：与首页 --shadow-card 同值，全站一套。 - 用中性暖墨而不是暖橙——DESIGN.md §2.3 把彩色阴影登记给"浅橙块托形"， - 白面一律走中性；暖橙阴影会让白卡边缘泛出一圈暖晕，与首页的白卡不是同一种东西 */ - --shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07); - + /* 配色令牌已上移到 app.wxss（全站唯一来源，改配色只改那一处），本页不再留副本； + 以下两段注释只作沿革留档。 + 主色：暖橙（色相 25°、明度 38°）。 + 曾试过右移到琥珀 #A85A00 以避开"锈橙 ≈ 干血"，但为凑白字 AA 压低了明度（40%→33%）， + 画面变闷、失掉醒目度；故折中定在 #B8520A——微出色相、保住原亮度与饱和 */ background-color: var(--paper); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } @@ -297,13 +283,13 @@ page { color: var(--muted); } -/* ===== 规格签：暖陶土小字（按用户要求去掉左竖条） ===== +/* ===== 规格签：暖橙小字（按用户要求去掉左竖条） ===== 沿革：整圈描边 → 4rpx 左竖条 + 浅橙底（色标式）→ 现在只剩字 + 一层极浅的底。 去竖条的原因：页面上已经有一套竖条语言——三个组头的 8×36rpx 实心竖条。 每行再插一道 4rpx 小竖条，全页竖向重音就从 3 处涨到 11 处，与组头抢同一个记号。 签退回纯文字后，每行的竖条只剩组头一处，记号重新变回"章"级。 代价要记住：底仍是 --brand-soft，它落在白卡上只有 1.08:1（纸面上 1.02:1）， - 实际都看不出来——签现在是"暖陶土字 + 一层几乎不可见的暖底"， + 实际都看不出来——签现在是"暖橙字 + 一层几乎不可见的暖底"， 辨识全部由字色承担。这也正是它当初选 --brand-ink（白卡 7.31:1）而不是 --brand-strong 的原因。 若日后想要一个看得见的签形，两条路： @@ -406,30 +392,30 @@ page { line-height: 1.7; } -/* ===== 预约：空心胶囊（鲜橙环 + 暖陶土字） ===== +/* ===== 预约：空心胶囊（暖橙环 + 暖橙字） ===== 沿革：描边版 → 实心 --brand-strong → 软色块 → 现在这版空心胶囊，第四次调整。 为什么又回到"无填充"：上一版软色块本身没问题，问题是它挪到价格左边之后， - 和紧邻的规格签撞了形——签是"浅橙底 + 暖陶土字 + 小圆角"，按钮也是 - "浅橙底 + 暖陶土字 + 圆角"，两个同形物体在同一行相距 450rpx，读起来像两个标签。 + 和紧邻的规格签撞了形——签是"浅橙底 + 暖橙字 + 小圆角"，按钮也是 + "浅橙底 + 暖橙字 + 圆角"，两个同形物体在同一行相距 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）再稳一档： + 在真机强光里发虚；3rpx 的 --brand-strong 在纸面上 4.66:1，稳稳过非文本 3:1。 + 字走 --brand-ink（纸面上 6.10:1），比环的 --brand-strong（4.66:1）再稳一档： 环承担"这是动作"的色，字承担"读得清"的对比度。 去掉填充与阴影：原先的暖色紧阴影是为了把 1.02:1 的浅橙底托出形状， 没有底就不需要拖形，8 圈阴影一并撤掉，整页顺带更轻。 按下把胶囊填上 --brand-line：同色阶、可感知（1.19:1→填充可见）， - 暖陶土字在其上 5.80:1，仍过 AA。不引入新色。 + 暖橙字在其上 5.14: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)， @@ -479,7 +465,7 @@ page { 同一套做法：--brand-soft 底 + 2rpx --brand-line 描边 + 去阴影 + 28rpx 圆角。 为什么页尾要有一张暖色面：首页的节奏是"白卡 … 白卡 … 一张浅橙卡收口" （陪诊服务收在介绍卡上，常用功能收在联系我们上）。本页原先 4 张白面 - 一张暖色收口都没有，暖色只剩"线"——竖条、按钮环、暖陶土字， + 一张暖色收口都没有，暖色只剩"线"——竖条、按钮环、暖橙字， 整页因此比首页轻一大截；这张卡就是补回来的那一张"面"。 浅橙底与纸面的填充差只有约 1.03:1，但面积够大，大面积暖色自身可辨， 再配 --brand-line 描边就够，与首页那张一样不加阴影 */ diff --git a/pages/home/index.wxml b/pages/home/index.wxml index 195f852..f6deb41 100644 --- a/pages/home/index.wxml +++ b/pages/home/index.wxml @@ -116,7 +116,7 @@ - + {{ item.name }} diff --git a/pages/home/index.wxss b/pages/home/index.wxss index f2b3bd2..d5ebad2 100644 --- a/pages/home/index.wxss +++ b/pages/home/index.wxss @@ -6,43 +6,12 @@ - 大字号标题直接落在纸面上，不用整块色面板压首屏 */ page { - /* 暖橙主色阶：strong 是实心块/按钮（白字需 ≥4.5:1、白图标需 ≥3:1）， - soft 是衬底，ink 是浅衬底上的文字与线图标 */ - --brand: #F97316; /* 主色：仅装饰性小色块 */ - --brand-strong: #C2410C; /* 实心按钮 / 选中态：白字 4.69:1，过 AA 正文 */ - --brand-soft: #FFF4E8; /* 图标衬底、标签底 */ - --brand-line: #FFE0C2; /* 浅橙衬底的描边 */ - --brand-ink: #9A3412; /* 浅橙衬底上的文字/图标：6.8:1，过 AA */ - - /* 状态色：全页唯一的冷色，只用在「待服务订单」提醒条上。 - 作用是制造唯一焦点——整页暖橙平铺时需要一个"该看这里"的落点 */ + /* 配色令牌已上移到 app.wxss（全站唯一来源，改配色只改那一处），本页不再留副本。 + 这里只剩本页专属的一样：「待服务订单」提醒条的状态色——全页唯一的冷色， + 语义由 DESIGN.md §3 管，不随主色走 */ --status-soft: #ECF7F4; --status-line: #C7E5DF; --status-ink: #0F766E; /* #ECF7F4 上 5.0:1，过 AA 正文 */ - - /* 中性：暖灰阶，与暖白纸面同温（冷灰会让白卡边缘发青） */ - --ink: #2B2521; - --ink-2: #4A4038; - --muted: #6F655C; /* 纸面(--paper) 5.28:1 / 白卡 5.69:1，过 AA 正文。 - 原 #7A7068 在白卡上 4.83:1 达标，但落在暖白纸面上只有 4.49:1，压线不过 */ - --faint: #A79C92; /* 仅用于非文字装饰 */ - --line: #ECE3D6; /* 米色发丝边。原 #F0E9E0 落在纸面上只有 1.12:1，等于"看得见但看不清"， - 而白卡与纸面的填充差本身只有 1.08:1——边界全靠这条边，它必须站得住。 - 压深一档后：纸面 1.20:1 / 白卡 1.27:1 */ - --paper: #FAF8F5; /* 暖白纸面。原 #FAF6F0 的 R−B=10，黄度偏重，大面积铺开会被读成 - "旧纸/发闷"而不是"暖白干净"（感知亮度受色饱和度影响， - 同明度下越黄越显沉）。压到 R−B=5，黄度减半， - 明度反而略升（L* 97.0 → 97.7），暖白身份保留 */ - --white: #FFFFFF; - - /* 紧阴影：偏移与模糊半径不变（仍是"小偏移、小模糊"的锐利档），只提不透明度。 - 原因：上面的纸面去黄后，白卡与纸面的填充差从 1.08:1 降到 1.06:1， - 卡片需要阴影来补回"浮在纸面上"的层级，否则整页更平。 - 0.04 时阴影几乎不可见，提到 0.07 后边缘压深约等于那道填充差本身 */ - --shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07); - /* 彩色阴影原为 0 6rpx 16rpx/22%：全页只有它与品牌印记两处彩色阴影，且都在首屏， - 是首屏显重的主要来源，也与"小偏移、小模糊"的锐利阴影偏好相悖，故收小一档 */ - --shadow-cta: 0 2rpx 8rpx rgba(194, 65, 12, 0.16); } .page-bg { @@ -78,7 +47,7 @@ page { display: flex; align-items: center; justify-content: center; - box-shadow: 0 2rpx 8rpx rgba(194, 65, 12, 0.16); + box-shadow: 0 2rpx 8rpx rgba(184, 82, 10, 0.16); } .brand-logo { @@ -119,7 +88,7 @@ page { 两段合计 11 字 × (48rpx + 2rpx 字距) + 10rpx 间隔 ≈ 560rpx， 小于容器内宽 686rpx（750 - 32×2 页边距），不会折行 */ .hero-title-accent { - color: var(--brand-strong); /* 暖白纸面上 5.0:1，过 AA */ + color: var(--brand-strong); /* 暖白纸面上 4.66:1，过 AA（50rpx/700 属大字，3:1 门槛之上） */ } .hero-title-main { @@ -128,7 +97,7 @@ page { } /* 场景行：三项核心场景两行排布（场景词 + 补充），纯展示不点击。 - 场景词走暖陶土 --brand-ink 做暖色标签，与标题深墨半句靠色相拉开层级， + 场景词走暖橙 --brand-ink 做暖色标签，与标题深墨半句靠色相拉开层级， 避免两条深色带叠在一起；补充走 muted 保持安静。 28 → 40rpx：补充语由 8 字收到 5 字后横向已有空气，纵向再拉开一档 */ .scene-row { @@ -147,9 +116,9 @@ page { .scene-name { font-size: 30rpx; font-weight: 700; - /* 暖陶土 --brand-ink：与标题深墨半句「让就医更省心」同屏时靠色相拉开层级， + /* 暖橙 --brand-ink：与标题深墨半句「让就医更省心」同屏时靠色相拉开层级， 避免两段 ink+700 连排成"两条深色带"；比标题的 --brand-strong 低一档分量， - 标题仍是首屏唯一的亮橙焦点。纸面上 6.8:1，过 AA */ + 标题仍是首屏唯一的暖色焦点。纸面上 6.10:1，过 AA */ color: var(--brand-ink); letter-spacing: 1rpx; } @@ -231,7 +200,7 @@ page { .intro-trust-item { font-size: 24rpx; font-weight: 700; - color: var(--brand-ink); /* 浅橙底 6.8:1，过 AA */ + color: var(--brand-ink); /* 浅橙底 5.96:1，过 AA */ letter-spacing: 1rpx; } @@ -344,7 +313,7 @@ page { transform: scale(0.94); } -/* 纤细线图标：24x24 网格、stroke-width 1.5、暖橙 #C2410C，base64 内嵌避免引入图标字体。 +/* 纤细线图标：24x24 网格、stroke-width 1.5、暖橙 #B8520A，base64 内嵌避免引入图标字体。 60rpx(30px) 是过 WCAG 非文本 3:1 后兼顾真机清晰度、减少白卡空荡感的尺寸。 图标直接落在白卡上、不加衬底方块：衬底层级已让给上方主推卡，小宫格保持安静 */ .assist-icon { @@ -358,43 +327,43 @@ page { /* 1 全天陪诊：整圈表盘 + 指针 */ .assist-icon-1 { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgNi42VjEybDMuOCAyLjIiLz48L3N2Zz4="); + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgNi42VjEybDMuOCAyLjIiLz48L3N2Zz4="); } /* 2 半天陪诊：整圈表盘 + 右半实心填充，与 1 的"空心全圈"形成"全 / 半"对照， 避免原半月形在小尺寸下被误读为字母 D */ .assist-icon-2 { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgMy41YTguNSA4LjUgMCAwIDEgMCAxN1oiIGZpbGw9IiNDMjQxMEMiIHN0cm9rZT0ibm9uZSIvPjwvc3ZnPg=="); + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4LjUiLz48cGF0aCBkPSJNMTIgMy41YTguNSA4LjUgMCAwIDEgMCAxN1oiIGZpbGw9IiNCODUyMEEiIHN0cm9rZT0ibm9uZSIvPjwvc3ZnPg=="); } /* 3 代问诊：对话气泡 + 医疗十字 */ .assist-icon-3 { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMTQuNWEyLjUgMi41IDAgMCAxLTIuNSAyLjVIOGwtNCAzLjVWNmEyLjUgMi41IDAgMCAxIDIuNS0yLjVoMTFBMi41IDIuNSAwIDAgMSAyMCA2WiIvPjxwYXRoIGQ9Ik0xMiA3LjZ2NS4yTTkuNCAxMC4yaDUuMiIvPjwvc3ZnPg=="); + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMTQuNWEyLjUgMi41IDAgMCAxLTIuNSAyLjVIOGwtNCAzLjVWNmEyLjUgMi41IDAgMCAxIDIuNS0yLjVoMTFBMi41IDIuNSAwIDAgMSAyMCA2WiIvPjxwYXRoIGQ9Ik0xMiA3LjZ2NS4yTTkuNCAxMC4yaDUuMiIvPjwvc3ZnPg=="); } /* 4 检查预约：日历 + 对勾 */ .assist-icon-4 { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzLjUiIHk9IjUiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNS41IiByeD0iMi41Ii8+PHBhdGggZD0iTTggM3Y0TTE2IDN2NE0zLjUgOS41aDE3Ii8+PHBhdGggZD0ibTkuNCAxNSAxLjkgMS45IDMuNy00Ii8+PC9zdmc+"); + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzLjUiIHk9IjUiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNS41IiByeD0iMi41Ii8+PHBhdGggZD0iTTggM3Y0TTE2IDN2NE0zLjUgOS41aDE3Ii8+PHBhdGggZD0ibTkuNCAxNSAxLjkgMS45IDMuNy00Ii8+PC9zdmc+"); } /* 5 出入院代办：医院楼 + 地面 + 十字 */ .assist-icon-5 { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNC41IDIwLjVWNi41YTIgMiAwIDAgMSAyLTJoMTFhMiAyIDAgMCAxIDIgMnYxNCIvPjxwYXRoIGQ9Ik0yLjUgMjAuNWgxOSIvPjxwYXRoIGQ9Ik0xMiA4LjZ2NU05LjUgMTEuMWg1Ii8+PC9zdmc+"); + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNC41IDIwLjVWNi41YTIgMiAwIDAgMSAyLTJoMTFhMiAyIDAgMCAxIDIgMnYxNCIvPjxwYXRoIGQ9Ik0yLjUgMjAuNWgxOSIvPjxwYXRoIGQ9Ik0xMiA4LjZ2NU05LjUgMTEuMWg1Ii8+PC9zdmc+"); } /* 6 跑腿服务：包裹箱 */ .assist-icon-6 { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAuNSA4LjJ2Ny42YTEuNiAxLjYgMCAwIDEtLjg0IDEuNDJsLTYuOSAzLjhhMS42IDEuNiAwIDAgMS0xLjUyIDBsLTYuOS0zLjhBMS42IDEuNiAwIDAgMSAzLjUgMTUuOFY4LjJhMS42IDEuNiAwIDAgMSAuODQtMS40Mmw2LjktMy44YTEuNiAxLjYgMCAwIDEgMS41MiAwbDYuOSAzLjhBMS42IDEuNiAwIDAgMSAyMC41IDguMloiLz48cGF0aCBkPSJNMy45IDcuMyAxMiAxMS43bDguMS00LjRNMTIgMTEuN1YyMSIvPjwvc3ZnPg=="); + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAuNSA4LjJ2Ny42YTEuNiAxLjYgMCAwIDEtLjg0IDEuNDJsLTYuOSAzLjhhMS42IDEuNiAwIDAgMS0xLjUyIDBsLTYuOS0zLjhBMS42IDEuNiAwIDAgMSAzLjUgMTUuOFY4LjJhMS42IDEuNiAwIDAgMSAuODQtMS40Mmw2LjktMy44YTEuNiAxLjYgMCAwIDEgMS41MiAwbDYuOSAzLjhBMS42IDEuNiAwIDAgMSAyMC41IDguMloiLz48cGF0aCBkPSJNMy45IDcuMyAxMiAxMS43bDguMS00LjRNMTIgMTEuN1YyMSIvPjwvc3ZnPg=="); } /* 7 陪诊套餐：礼盒 */ .assist-icon-7 { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzIiB5PSI3LjUiIHdpZHRoPSIxOCIgaGVpZ2h0PSI0LjUiIHJ4PSIxLjIiLz48cGF0aCBkPSJNNC41IDEydjcuNUExLjUgMS41IDAgMCAwIDYgMjFoMTJhMS41IDEuNSAwIDAgMCAxLjUtMS41VjEyIi8+PHBhdGggZD0iTTEyIDcuNVYyMSIvPjxwYXRoIGQ9Ik0xMiA3LjVIOS4yYTIuMyAyLjMgMCAxIDEgMC00LjZDMTAuNyAyLjkgMTIgNy41IDEyIDcuNVoiLz48cGF0aCBkPSJNMTIgNy41aDIuOGEyLjMgMi4zIDAgMSAwIDAtNC42QzEzLjMgMi45IDEyIDcuNSAxMiA3LjVaIi8+PC9zdmc+"); + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzIiB5PSI3LjUiIHdpZHRoPSIxOCIgaGVpZ2h0PSI0LjUiIHJ4PSIxLjIiLz48cGF0aCBkPSJNNC41IDEydjcuNUExLjUgMS41IDAgMCAwIDYgMjFoMTJhMS41IDEuNSAwIDAgMCAxLjUtMS41VjEyIi8+PHBhdGggZD0iTTEyIDcuNVYyMSIvPjxwYXRoIGQ9Ik0xMiA3LjVIOS4yYTIuMyAyLjMgMCAxIDEgMC00LjZDMTAuNyAyLjkgMTIgNy41IDEyIDcuNVoiLz48cGF0aCBkPSJNMTIgNy41aDIuOGEyLjMgMi4zIDAgMSAwIDAtNC42QzEzLjMgMi45IDEyIDcuNSAxMiA3LjVaIi8+PC9zdmc+"); } /* 8 买药套餐：45° 斜置胶囊 + 中缝，避免原横置胶囊被误读为"链接"图标 */ .assist-icon-8 { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzI0MTBDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSI0LjIiIHk9IjguMiIgd2lkdGg9IjE1LjYiIGhlaWdodD0iNy42IiByeD0iMy44IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTIgMTIpIi8+PHBhdGggZD0iTTkuMyA5LjNsNS40IDUuNCIvPjwvc3ZnPg=="); + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg1MjBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSI0LjIiIHk9IjguMiIgd2lkdGg9IjE1LjYiIGhlaWdodD0iNy42IiByeD0iMy44IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTIgMTIpIi8+PHBhdGggZD0iTTkuMyA5LjNsNS40IDUuNCIvPjwvc3ZnPg=="); } /* 宫格项名统一走 28rpx 标题档（与 .quick-name 同级）。 diff --git a/pages/mine/mine.js b/pages/mine/mine.js index df6fb69..453f3f8 100644 --- a/pages/mine/mine.js +++ b/pages/mine/mine.js @@ -3,7 +3,10 @@ const API = require('../../utils/api.js') Page({ data: { userInfo: { - avatar: '/images/home-yellow.png', + // 默认头像：暖墨色品牌标记（home-ink #9B4508）。 + // home.png 本体是 tabBar 未选中态的灰色 #8A8A8A，故另存一份重上色位图； + // 与 ai-ink.png 同一做法（位图着色走不了 CSS 变量，改色须手改，见 DESIGN.md §7.3） + avatar: '/images/home-ink.png', name: '用户', phone: '', sex: '', diff --git a/pages/mine/mine.wxml b/pages/mine/mine.wxml index 425955b..1e8a0ba 100644 --- a/pages/mine/mine.wxml +++ b/pages/mine/mine.wxml @@ -24,13 +24,18 @@ 企业/机构合作 - · + 陪诊师入驻 - · + 商务合作 - 版本号：V 1.1.3 - © 2026 北京奕华盛科技 版权所有 + + + © 2026 北京奕华盛科技 版权所有 + + 版本号：V 1.1.3 +