AI和Mine页面的样式改成新样式了。

This commit is contained in:
lik
2026-10-04 19:06:45 +08:00
parent 5844272762
commit 428fb7c52c
21 changed files with 643 additions and 584 deletions
+3 -3
View File
@@ -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"已恢复原名,
// "买多次"由名称自己交代;组标题与副题仍负责讲清"什么情况选这一组"
+4 -4
View File
@@ -22,12 +22,12 @@
<view class="notice-links">
<view class="notice-link" bindtap="goToGuide">
<text class="notice-link-text">服务指南</text>
<t-icon name="chevron-right" size="26rpx" color="#9A3412" />
<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="#9A3412" />
<t-icon name="chevron-right" size="26rpx" color="#9B4508" />
</view>
</view>
</view>
@@ -87,13 +87,13 @@
做成一张浅橙收口卡——与首页「常用功能」区块尾部的「联系我们」卡
(.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="#9A3412" />
<t-icon name="chevron-right" size="22rpx" color="#9B4508" />
</view>
</view>
+18 -32
View File
@@ -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 描边就够,与首页那张一样不加阴影 */