wxapp_escort/pages/escort/recorddetail.wxss

/* pages/escort/recorddetail.wxss
   设计方向：本页是一张陪诊订单的详情，按「状态抬头 → 就诊人 → 医院预约 → 需求与症状 → 服务与费用 → 订单」铺开。
   - 配色并入全站暖橙体系（doc/DESIGN.md）：令牌来自 app.wxss，本页不留副本；
     状态色只用 §三 四档，旧版渐变横幅与金色体系全部移除
   - 抬头：短横色标 + 状态胶囊 + 状态说明，是唯一的非卡片区（内页规范，不做整块主色面板）；
     下方用 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);

  /* 底栏上向阴影：小偏移、小模糊，令牌不在全局色板内，故本页登记 */
  --shadow-bar: 0 -2rpx 8rpx rgba(63, 43, 25, 0.06);
}

.page-bg {
  min-height: 100vh;
  background: var(--paper);
}

.container {
  padding: 0 32rpx 40rpx;
}

/* ===== 抬头状态 ===== */
.page-header {
  /* 抬头自成一区，靠空间 + 一条线立住，不引入第二套容器语言：
     上方留白 40rpx（比卡间距 48rpx 略紧，让抬头贴住顶栏而非浮在中间）；
     左右负 margin 抵消 .container 的 32rpx 内距，使下方发丝线通栏顶到屏幕两侧，
     同时用 padding 把色标与胶囊重新拉回卡片同一条左对齐线 */
  margin: 0 -32rpx;
  padding: 40rpx 32rpx 28rpx;
  border-bottom: 2rpx solid var(--line);
}

.header-accent {
  width: 64rpx;
  height: 8rpx;
  border-radius: 4rpx;
  background: var(--brand-strong);
}

.status-row {
  margin-top: 22rpx;
  display: flex;
  align-items: center;
}

/* 状态胶囊：底色 + 描边 + 字色三件套，颜色只做强化，文字才是信息（§三） */
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 16rpx;
  border: 2rpx solid transparent;
  border-radius: 10rpx;
  font-size: 24rpx;
  font-weight: 700;
  letter-spacing: 1rpx;
  line-height: 1.4;
  white-space: nowrap;
}

.status-chip-lg {
  padding: 8rpx 22rpx;
  /* 28rpx 抬到 32rpx：与分节标题、卡片主名同档。
     同字号下胶囊靠状态底色 + 2rpx 描边 + 内距压过裸字标题，
     层级才回到「单据抬头 > 卡片标题」，不再是从前抬头比它统领的内容还小 */
  font-size: 32rpx;
}

.header-subtitle {
  margin-left: 20rpx;
  /* 28rpx 降到 26rpx：说明退到「次强」档，与 32rpx 的胶囊拉开一档差，
     抬头内部才有焦点；此前两者同为 28rpx，只靠字重区分，谁都不是主角 */
  font-size: 26rpx;
  color: var(--muted);
  line-height: 1.6;
  letter-spacing: 1rpx;
}

/* ===== 分区：纸面留白分隔，标题在纸面上、内容在白卡里 ===== */
.section {
  margin-top: 48rpx;
}

.section-head {
  display: flex;
  align-items: center;
}

.section-bar {
  flex-shrink: 0;
  width: 8rpx;
  /* 色标高度跟随标题字号，缩字号时同步收，保持「短横 + 标题」的等高一档 */
  height: 32rpx;
  border-radius: 4rpx;
  background: var(--brand-strong);
}

/* 34rpx 降一档到 32rpx：与 attendantdetail / agreement / about 的分区标题同一档，
   不新增字号档位（DESIGN.md 字号阶梯） */
.section-title {
  margin-left: 16rpx;
  font-size: 32rpx;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1rpx;
}

/* 区块右侧入口：用 padding 撑热区、负 margin 抵消，保持标题行高度 */
.section-link {
  display: flex;
  align-items: center;
  margin: -16rpx 0 -16rpx auto;
  padding: 16rpx 0 16rpx 24rpx;
}

.section-link:active {
  opacity: 0.6;
}

/* 「修改」降为中性字：全页三处入口若都用暖橙，会和所在行的标题抢注意力，
   一个分组标题下不该有两个同权重焦点。入口靠位置（标题行右端）和热区成立，
   不靠颜色——颜色留给底栏主按钮 */
.section-link-text {
  margin-right: 4rpx;
  /* 26rpx 与图标同档：入口降为中性的同时留一点体量，
     避免和卡片正文（26rpx）拉开层级后又退到看不清 */
  font-size: 26rpx;
  color: var(--muted);
}

/* ===== 白卡：全页唯一的容器语言（§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: 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;
}

/* 发丝线之上是「是谁」，之下是「怎么联系」；整行即热区 */
.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);
  letter-spacing: 1rpx;
}

.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);
  letter-spacing: 1rpx;
}

.fee-paid {
  font-size: 24rpx;
  color: var(--muted);
  letter-spacing: 1rpx;
}

/* 未付清时的出口指引：与元信息同一档（24rpx / --muted），只做说明不做按钮——
   付款动作发生在客服侧，本页给不出可点的东西，硬做描边按钮会是空动作 */
.pay-hint {
  display: block;
  margin-top: 12rpx;
  font-size: 24rpx;
  color: var(--muted);
  letter-spacing: 1rpx;
  line-height: 1.6;
}

/* ===== 订单卡：编号为主，时间收进元信息行 ===== */
.order-no {
  display: block;
  font-size: 26rpx;
  color: var(--ink-2);
  letter-spacing: 1rpx;
  word-break: break-all;
}

.order-meta {
  margin-top: 10rpx;
}

/* ===== 备注（只读文本块） ===== */
.note-block {
  margin-top: 18rpx;
}

.note-block:first-child {
  margin-top: 4rpx;
}

.note-label {
  display: block;
  margin-bottom: 6rpx;
  font-size: 24rpx;
  color: var(--muted);
}

.note-text {
  display: block;
  font-size: 28rpx;
  color: var(--ink-2);
  line-height: 1.7;
  letter-spacing: 1rpx;
}

.note-empty {
  padding: 6rpx 0;
}

.note-empty-text {
  font-size: 28rpx;
  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;
  padding: 24rpx;
  border: 2rpx solid var(--line);
  border-radius: 16rpx;
  background: var(--paper);
  font-size: 28rpx;
  color: var(--ink-2);
  line-height: 1.7;
}

.input-placeholder {
  color: var(--muted);
}

/* ===== 底部占位与操作栏 ===== */
.bottom-placeholder {
  height: 160rpx;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx 32rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 2rpx solid var(--line);
  box-shadow: var(--shadow-bar);
}

/* 按钮等宽铺满：与同页弹窗脚（.popup-btn 的 flex:1）同一套排布，
   热区也更大；单个按钮时即整条通栏主操作 */
.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18rpx 44rpx;
  border-radius: 999rpx;
  font-size: 30rpx;
  line-height: 1.4;
}

.action-btn:active {
  opacity: 0.7;
}

.action-ghost {
  border: 3rpx solid var(--sep);
  color: var(--muted);
  background: transparent;
}

/* 破坏性动作：只换字色为状态色「已取消」档（#B4231A 已在色板内，不新增色相），
   与并排的取消订单区分开——删除不可恢复，确认弹窗也已走同色 */
.action-danger {
  color: #B4231A;
}

.action-primary {
  background: var(--brand-strong);
  color: var(--white);
  font-weight: 700;
  box-shadow: var(--shadow-cta);
}

/* ===== 底部弹窗（编辑与取消共用一套骨架） ===== */
.popup-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 200;
  background: rgba(43, 37, 33, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-mask.show {
  opacity: 1;
  visibility: visible;
}

.popup-content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  background: var(--white);
  border-radius: 32rpx 32rpx 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

/* 医院预约编辑有 9 行表单，弹窗加高 */
.popup-content.popup-tall {
  max-height: 86vh;
}

.popup-content.show {
  transform: translateY(0);
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 28rpx 32rpx;
  border-bottom: 2rpx solid var(--line);
}

.popup-title {
  font-size: 32rpx;
  font-weight: 700;
  color: var(--ink);
}

.popup-close {
  padding: 8rpx;
  margin: -8rpx;
}

.popup-close:active {
  opacity: 0.5;
}

.popup-body {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx 32rpx 28rpx;
}

/* ===== 取消订单弹窗内的原因单选 ===== */
.cancel-tip {
  font-size: 28rpx;
  color: var(--muted);
  line-height: 1.6;
}

.cancel-reason-list {
  display: flex;
  flex-direction: column;
  margin-top: 8rpx;
}

.cancel-reason-item {
  display: flex;
  align-items: center;
  padding: 20rpx 16rpx;
  border-radius: 16rpx;
  transition: background-color 0.15s ease;
}

.cancel-reason-item.active {
  background: var(--brand-soft);
}

.reason-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 36rpx;
  height: 36rpx;
  border: 3rpx solid var(--sep);
  border-radius: 50%;
}

.cancel-reason-item.active .reason-radio {
  border-color: var(--brand-strong);
}

.reason-radio-inner {
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background: var(--brand-strong);
}

.reason-text {
  margin-left: 16rpx;
  font-size: 28rpx;
  color: var(--ink-2);
}

.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);
}

.popup-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22rpx 0;
  border-radius: 999rpx;
  font-size: 30rpx;
  line-height: 1.4;
}

.popup-btn:active {
  opacity: 0.7;
}

.popup-btn-ghost {
  border: 3rpx solid var(--sep);
  color: var(--muted);
}

.popup-btn-primary {
  background: var(--brand-strong);
  color: var(--white);
  font-weight: 700;
}