基本重构完成
This commit is contained in:
+357
-152
@@ -1,12 +1,17 @@
|
||||
/* pages/escort/recorddetail.wxss
|
||||
设计方向：本页是一张陪诊订单的详情，按「状态 → 就诊人 → 医院 → 服务 → 需求 → 费用 → 订单」的顺序铺开。
|
||||
- 配色并入全站暖橙体系（doc/DESIGN.md）：令牌来自 app.wxss，本页不再留副本；
|
||||
设计方向：本页是一张陪诊订单的详情，按「状态抬头 → 就诊人 → 医院预约 → 需求与症状 → 服务与费用 → 订单」铺开。
|
||||
- 配色并入全站暖橙体系（doc/DESIGN.md）：令牌来自 app.wxss，本页不留副本；
|
||||
状态色只用 §三 四档，旧版渐变横幅与金色体系全部移除
|
||||
- 头部：短横色标 + 状态胶囊 + 状态说明（内页规范，不做整块主色面板）
|
||||
- 分区：发丝线切分，标题走统一的 8×34rpx 单竖条 .section-bar
|
||||
- 表单：标签 --muted + 值 --ink 700；选中项走浅橙底 + 实心橙描边
|
||||
- 按钮：底栏主操作实心胶囊，其余为空心胶囊；同类实心块全页只保留一处（§2.1）
|
||||
- 字号阶梯：34 分节标题 / 28 正文 · 表单 / 26 标签 / 24 元信息，最小 24rpx(12px) */
|
||||
- 抬头：短横色标 + 状态胶囊 + 状态说明，是唯一的非卡片区（内页规范，不做整块主色面板）；
|
||||
下方用 2rpx --line 通栏发丝线收口，靠字号两档差（32 胶囊 / 26 说明）与留白立住，不套第二套容器
|
||||
- 分区：标题在纸面上（8×32rpx 单竖条），内容统一收进同一种白卡
|
||||
（§2.3：2rpx --line + 中性阴影 --shadow-card；圆角本页取 24rpx 为例外，见下方 .card 注释）
|
||||
- 展示去表单化：不铺「标签左／值右」清单行，层级由结构给出——
|
||||
就诊人用首字牌、医院预约用预约时间条、费用用字号差；元信息一律竖线分隔行
|
||||
- 编辑全部收进底部弹窗：页面只读，表单只活在弹窗里
|
||||
- 按钮：底栏与弹窗的主操作实心胶囊、其余空心胶囊，同类实心块全页只保留一处（§2.1）
|
||||
- 字号阶梯：40 首字牌 / 32 分节标题 · 卡片主名 · 金额 · 状态胶囊 / 28 服务名 · 备注正文 · 预约日期
|
||||
/ 26 次强 · 「修改」入口 · 预约时段 · 订单号 / 24 元信息 · 已支付 · 支付指引，最小 24rpx(12px) */
|
||||
page {
|
||||
background-color: var(--paper);
|
||||
|
||||
@@ -23,9 +28,15 @@ page {
|
||||
padding: 0 32rpx 40rpx;
|
||||
}
|
||||
|
||||
/* ===== 头部状态 ===== */
|
||||
/* ===== 抬头状态 ===== */
|
||||
.page-header {
|
||||
padding-top: 32rpx;
|
||||
/* 抬头自成一区，靠空间 + 一条线立住，不引入第二套容器语言：
|
||||
上方留白 40rpx（比卡间距 48rpx 略紧，让抬头贴住顶栏而非浮在中间）；
|
||||
左右负 margin 抵消 .container 的 32rpx 内距，使下方发丝线通栏顶到屏幕两侧，
|
||||
同时用 padding 把色标与胶囊重新拉回卡片同一条左对齐线 */
|
||||
margin: 0 -32rpx;
|
||||
padding: 40rpx 32rpx 28rpx;
|
||||
border-bottom: 2rpx solid var(--line);
|
||||
}
|
||||
|
||||
.header-accent {
|
||||
@@ -37,6 +48,8 @@ page {
|
||||
|
||||
.status-row {
|
||||
margin-top: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 状态胶囊：底色 + 描边 + 字色三件套，颜色只做强化，文字才是信息（§三） */
|
||||
@@ -55,42 +68,46 @@ page {
|
||||
|
||||
.status-chip-lg {
|
||||
padding: 8rpx 22rpx;
|
||||
font-size: 28rpx;
|
||||
/* 28rpx 抬到 32rpx：与分节标题、卡片主名同档。
|
||||
同字号下胶囊靠状态底色 + 2rpx 描边 + 内距压过裸字标题，
|
||||
层级才回到「单据抬头 > 卡片标题」，不再是从前抬头比它统领的内容还小 */
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
font-size: 28rpx;
|
||||
margin-left: 20rpx;
|
||||
/* 28rpx 降到 26rpx：说明退到「次强」档，与 32rpx 的胶囊拉开一档差，
|
||||
抬头内部才有焦点；此前两者同为 28rpx，只靠字重区分，谁都不是主角 */
|
||||
font-size: 26rpx;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* ===== 分区：发丝线 + 单竖条标题 ===== */
|
||||
/* ===== 分区：纸面留白分隔，标题在纸面上、内容在白卡里 ===== */
|
||||
.section {
|
||||
margin-top: 44rpx;
|
||||
padding-top: 30rpx;
|
||||
border-top: 2rpx solid var(--line);
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.section-bar {
|
||||
flex-shrink: 0;
|
||||
width: 8rpx;
|
||||
height: 34rpx;
|
||||
/* 色标高度跟随标题字号，缩字号时同步收，保持「短横 + 标题」的等高一档 */
|
||||
height: 32rpx;
|
||||
border-radius: 4rpx;
|
||||
background: var(--brand-strong);
|
||||
}
|
||||
|
||||
/* 34rpx 降一档到 32rpx：与 attendantdetail / agreement / about 的分区标题同一档，
|
||||
不新增字号档位（DESIGN.md 字号阶梯） */
|
||||
.section-title {
|
||||
margin-left: 16rpx;
|
||||
font-size: 34rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
letter-spacing: 1rpx;
|
||||
@@ -108,166 +125,294 @@ page {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 「修改」降为中性字：全页三处入口若都用暖橙，会和所在行的标题抢注意力，
|
||||
一个分组标题下不该有两个同权重焦点。入口靠位置（标题行右端）和热区成立，
|
||||
不靠颜色——颜色留给底栏主按钮 */
|
||||
.section-link-text {
|
||||
margin-right: 4rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--brand-ink);
|
||||
}
|
||||
|
||||
/* ===== 信息行（只读） ===== */
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 2rpx solid var(--line);
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
flex-shrink: 0;
|
||||
/* 26rpx 与图标同档：入口降为中性的同时留一点体量，
|
||||
避免和卡片正文（26rpx）拉开层级后又退到看不清 */
|
||||
font-size: 26rpx;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
/* ===== 白卡：全页唯一的容器语言（§2.3 主规则） =====
|
||||
2rpx --line 发丝边、中性阴影 --shadow-card；
|
||||
卡内首尾留白由卡片自己的 padding 给。
|
||||
本页例外（已登记）：圆角取 24rpx 而非 §2.3 的 28rpx——
|
||||
与卡内首字牌（24rpx）同档，圆角家族内部不倒挂；
|
||||
注意全站其余九页的白卡仍是 28rpx，从订单列表切进本页时卡片会略方一点 */
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
margin-top: 16rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
background: var(--white);
|
||||
border: 2rpx solid var(--line);
|
||||
border-radius: 24rpx;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
/* ===== 通用元信息行：竖线分隔，空值已在 JS 整项剔除 ===== */
|
||||
.meta-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 24rpx;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 元信息竖线：2rpx×20rpx，取 --sep（比 --line 深一档，白卡与纸面上都看得见） */
|
||||
.meta-sep {
|
||||
flex-shrink: 0;
|
||||
width: 2rpx;
|
||||
height: 20rpx;
|
||||
margin: 0 14rpx;
|
||||
background: var(--sep);
|
||||
}
|
||||
|
||||
/* ===== 就诊人卡：首字牌 + 元信息行 + 发丝线下的拨打动作 ===== */
|
||||
.patient-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 首字牌：浅橙衬底 + --brand-line 描边，与陪诊师列表的兜底头像同源 */
|
||||
.patient-mark {
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border: 2rpx solid var(--brand-line);
|
||||
border-radius: 24rpx;
|
||||
background: var(--brand-soft);
|
||||
}
|
||||
|
||||
.patient-mark-text {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: var(--brand-ink);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* 首字牌右侧纵列：姓名 / 体征元信息 / 证件号自上而下 */
|
||||
.patient-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: var(--ink-2);
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 姓名 32rpx/700：低于区块标题 34rpx 一档，不与标题争层级 */
|
||||
.patient-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.patient-meta-row {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
/* 身份证 18 位，折行而不是撑破卡片 */
|
||||
.patient-id {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.info-link {
|
||||
/* 发丝线之上是「是谁」，之下是「怎么联系」；整行即热区 */
|
||||
.patient-contact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 22rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 2rpx solid var(--line);
|
||||
}
|
||||
|
||||
.patient-contact-text {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: var(--brand-ink);
|
||||
font-weight: 700;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.fee-value {
|
||||
.patient-contact:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* ===== 医院预约卡：日历牌是全卡视觉锚点 ===== */
|
||||
.hospital-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hospital-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
letter-spacing: 1rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.hospital-name.is-empty {
|
||||
font-weight: 400;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.hospital-province {
|
||||
margin-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1rpx;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hospital-meta {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.hospital-address {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 预约时间条：发丝线之上是「去哪看」，之下是「什么时候看」——日期左、时段右 */
|
||||
.schedule-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-top: 22rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 2rpx solid var(--line);
|
||||
}
|
||||
|
||||
.schedule-date {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.schedule-date.is-empty {
|
||||
font-weight: 400;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.schedule-time {
|
||||
margin-left: 20rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: var(--brand-ink);
|
||||
letter-spacing: 1rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ===== 服务与费用卡：金额是全卡唯一的大字号焦点 ===== */
|
||||
.service-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.service-meta {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.fee-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-top: 18rpx;
|
||||
padding-top: 18rpx;
|
||||
border-top: 2rpx solid var(--line);
|
||||
}
|
||||
|
||||
.fee-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.fee-label {
|
||||
font-size: 26rpx;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.fee-amount {
|
||||
margin-left: 16rpx;
|
||||
/* 34rpx 降一档到 32rpx，与分区标题同一档，不新增字号档位；
|
||||
仍明显高于标签（26rpx）与「已支付」（24rpx），保住金额在卡内的大字号焦点地位 */
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: var(--brand-strong);
|
||||
font-weight: 700;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.order-id {
|
||||
.fee-paid {
|
||||
font-size: 24rpx;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* ===== 表单行（编辑态） ===== */
|
||||
.edit-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 2rpx solid var(--line);
|
||||
}
|
||||
|
||||
.edit-label {
|
||||
flex-shrink: 0;
|
||||
font-size: 28rpx;
|
||||
/* 未付清时的出口指引：与元信息同一档（24rpx / --muted），只做说明不做按钮——
|
||||
付款动作发生在客服侧，本页给不出可点的东西，硬做描边按钮会是空动作 */
|
||||
.pay-hint {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.edit-picker {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
/* 选择器内层已由 .edit-picker 让出间距，内层值不再重复缩进 */
|
||||
.edit-picker .edit-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.edit-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edit-input.placeholder {
|
||||
font-weight: 400;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.edit-radio-group {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
/* 选中项：浅橙底 + 实心橙描边（表单选中语言） */
|
||||
.edit-radio {
|
||||
padding: 8rpx 28rpx;
|
||||
border: 2rpx solid var(--line);
|
||||
border-radius: 999rpx;
|
||||
/* ===== 订单卡：编号为主，时间收进元信息行 ===== */
|
||||
.order-no {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
color: var(--ink-2);
|
||||
letter-spacing: 1rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.edit-radio.active {
|
||||
background: var(--brand-soft);
|
||||
border-color: var(--brand-strong);
|
||||
color: var(--brand-ink);
|
||||
font-weight: 700;
|
||||
.order-meta {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
/* ===== 按键：空心胶囊 / 实心胶囊 ===== */
|
||||
.edit-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16rpx 44rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
border: 3rpx solid var(--sep);
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--brand-strong);
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
box-shadow: var(--shadow-cta);
|
||||
}
|
||||
|
||||
/* ===== 备注 ===== */
|
||||
/* ===== 备注（只读文本块） ===== */
|
||||
.note-block {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.note-block:first-child {
|
||||
margin-top: 6rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.note-label {
|
||||
@@ -286,8 +431,7 @@ page {
|
||||
}
|
||||
|
||||
.note-empty {
|
||||
margin-top: 6rpx;
|
||||
padding: 24rpx 0;
|
||||
padding: 6rpx 0;
|
||||
}
|
||||
|
||||
.note-empty-text {
|
||||
@@ -295,11 +439,52 @@ page {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ===== 表单行：只活在编辑弹窗里 =====
|
||||
行结构仍是「标签左、值右、发丝线分隔」，但它是弹窗内的输入语境，不是页面展示语言 */
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 72rpx;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 2rpx solid var(--line);
|
||||
}
|
||||
|
||||
.form-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
flex-shrink: 0;
|
||||
font-size: 26rpx;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--ink);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.form-picker-value {
|
||||
font-size: 28rpx;
|
||||
color: var(--ink);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.note-textarea {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
margin-top: 6rpx;
|
||||
padding: 24rpx;
|
||||
border: 2rpx solid var(--line);
|
||||
border-radius: 16rpx;
|
||||
@@ -309,6 +494,10 @@ page {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ===== 底部占位与操作栏 ===== */
|
||||
.bottom-placeholder {
|
||||
height: 160rpx;
|
||||
@@ -322,7 +511,6 @@ page {
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 16rpx;
|
||||
padding: 20rpx 32rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
@@ -331,7 +519,10 @@ page {
|
||||
box-shadow: var(--shadow-bar);
|
||||
}
|
||||
|
||||
/* 按钮等宽铺满：与同页弹窗脚（.popup-btn 的 flex:1）同一套排布，
|
||||
热区也更大；单个按钮时即整条通栏主操作 */
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -351,6 +542,12 @@ page {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 破坏性动作：只换字色为状态色「已取消」档（#B4231A 已在色板内，不新增色相），
|
||||
与并排的取消订单区分开——删除不可恢复，确认弹窗也已走同色 */
|
||||
.action-danger {
|
||||
color: #B4231A;
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
background: var(--brand-strong);
|
||||
color: var(--white);
|
||||
@@ -358,7 +555,7 @@ page {
|
||||
box-shadow: var(--shadow-cta);
|
||||
}
|
||||
|
||||
/* ===== 取消订单弹窗 ===== */
|
||||
/* ===== 底部弹窗（编辑与取消共用一套骨架） ===== */
|
||||
.popup-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@@ -392,6 +589,11 @@ page {
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 医院预约编辑有 9 行表单，弹窗加高 */
|
||||
.popup-content.popup-tall {
|
||||
max-height: 86vh;
|
||||
}
|
||||
|
||||
.popup-content.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
@@ -400,6 +602,7 @@ page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
padding: 28rpx 32rpx;
|
||||
border-bottom: 2rpx solid var(--line);
|
||||
}
|
||||
@@ -422,9 +625,10 @@ page {
|
||||
.popup-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 28rpx 32rpx;
|
||||
padding: 20rpx 32rpx 28rpx;
|
||||
}
|
||||
|
||||
/* ===== 取消订单弹窗内的原因单选 ===== */
|
||||
.cancel-tip {
|
||||
font-size: 28rpx;
|
||||
color: var(--muted);
|
||||
@@ -481,6 +685,7 @@ page {
|
||||
.popup-footer {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
flex-shrink: 0;
|
||||
padding: 20rpx 32rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
border-top: 2rpx solid var(--line);
|
||||
@@ -510,4 +715,4 @@ page {
|
||||
background: var(--brand-strong);
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user