513 lines
9.2 KiB
Plaintext
513 lines
9.2 KiB
Plaintext
/* pages/escort/recorddetail.wxss
|
|
设计方向：本页是一张陪诊订单的详情，按「状态 → 就诊人 → 医院 → 服务 → 需求 → 费用 → 订单」的顺序铺开。
|
|
- 配色并入全站暖橙体系（doc/DESIGN.md）：令牌来自 app.wxss，本页不再留副本；
|
|
状态色只用 §三 四档，旧版渐变横幅与金色体系全部移除
|
|
- 头部：短横色标 + 状态胶囊 + 状态说明（内页规范，不做整块主色面板）
|
|
- 分区：发丝线切分，标题走统一的 8×34rpx 单竖条 .section-bar
|
|
- 表单：标签 --muted + 值 --ink 700；选中项走浅橙底 + 实心橙描边
|
|
- 按钮：底栏主操作实心胶囊，其余为空心胶囊；同类实心块全页只保留一处（§2.1）
|
|
- 字号阶梯：34 分节标题 / 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 {
|
|
padding-top: 32rpx;
|
|
}
|
|
|
|
.header-accent {
|
|
width: 64rpx;
|
|
height: 8rpx;
|
|
border-radius: 4rpx;
|
|
background: var(--brand-strong);
|
|
}
|
|
|
|
.status-row {
|
|
margin-top: 22rpx;
|
|
}
|
|
|
|
/* 状态胶囊：底色 + 描边 + 字色三件套，颜色只做强化，文字才是信息（§三） */
|
|
.status-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 6rpx 18rpx;
|
|
border: 2rpx solid transparent;
|
|
border-radius: 12rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 700;
|
|
letter-spacing: 1rpx;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.status-chip-lg {
|
|
padding: 8rpx 22rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.header-subtitle {
|
|
display: block;
|
|
margin-top: 14rpx;
|
|
font-size: 28rpx;
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
/* ===== 分区：发丝线 + 单竖条标题 ===== */
|
|
.section {
|
|
margin-top: 44rpx;
|
|
padding-top: 30rpx;
|
|
border-top: 2rpx solid var(--line);
|
|
}
|
|
|
|
.section-head {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.section-bar {
|
|
flex-shrink: 0;
|
|
width: 8rpx;
|
|
height: 34rpx;
|
|
border-radius: 4rpx;
|
|
background: var(--brand-strong);
|
|
}
|
|
|
|
.section-title {
|
|
margin-left: 16rpx;
|
|
font-size: 34rpx;
|
|
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;
|
|
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;
|
|
font-size: 26rpx;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 24rpx;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
color: var(--ink-2);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.info-link {
|
|
color: var(--brand-ink);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.fee-value {
|
|
color: var(--brand-strong);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.order-id {
|
|
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;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.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;
|
|
font-size: 26rpx;
|
|
color: var(--muted);
|
|
background: transparent;
|
|
}
|
|
|
|
.edit-radio.active {
|
|
background: var(--brand-soft);
|
|
border-color: var(--brand-strong);
|
|
color: var(--brand-ink);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ===== 按键：空心胶囊 / 实心胶囊 ===== */
|
|
.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;
|
|
}
|
|
|
|
.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 {
|
|
margin-top: 6rpx;
|
|
padding: 24rpx 0;
|
|
}
|
|
|
|
.note-empty-text {
|
|
font-size: 28rpx;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.note-textarea {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: 200rpx;
|
|
margin-top: 6rpx;
|
|
padding: 24rpx;
|
|
border: 2rpx solid var(--line);
|
|
border-radius: 16rpx;
|
|
background: var(--paper);
|
|
font-size: 28rpx;
|
|
color: var(--ink-2);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ===== 底部占位与操作栏 ===== */
|
|
.bottom-placeholder {
|
|
height: 160rpx;
|
|
}
|
|
|
|
.bottom-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
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));
|
|
background: var(--white);
|
|
border-top: 2rpx solid var(--line);
|
|
box-shadow: var(--shadow-bar);
|
|
}
|
|
|
|
.action-btn {
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.popup-content.show {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
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: 28rpx 32rpx;
|
|
}
|
|
|
|
.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;
|
|
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;
|
|
} |