tmp6
This commit is contained in:
+381
-280
@@ -1,220 +1,252 @@
|
||||
/* pages/escort/itemdetail.wxss
|
||||
设计方向：本页是"服务说明书"，不是电商详情页。
|
||||
- 去掉了顶部 420rpx 大图：占位图在 8 条服务间复用，既无法区分服务，又抢走首屏
|
||||
- 结构重音只给一处：服务流程的时间轴橙色导轨（真序列，编号在此合法）
|
||||
- 配色锁定首页/清单页的暖白纸面 + 单一暖橙；实心橙只给两个提交按钮
|
||||
- 形状锁定：面板/卡片 28rpx、字段 12rpx、标签 10rpx、胶囊按钮 999rpx */
|
||||
page {
|
||||
background-color: #FAF6F1;
|
||||
--brand-strong: #C2410C; /* 实心块/按钮：白字 4.69:1；纸面上的文字 5.0:1，均过 AA */
|
||||
--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 / 白卡 1.27:1 */
|
||||
--paper: #FAF8F5;
|
||||
--white: #FFFFFF;
|
||||
|
||||
--shadow-cta: 0 2rpx 8rpx rgba(194, 65, 12, 0.16);
|
||||
/* 纸面 1.05:1 / 发丝边 1.27:1 都托不住固定栏，补一道小偏移小模糊的上向阴影 */
|
||||
--shadow-bar: 0 -2rpx 8rpx rgba(63, 43, 25, 0.07);
|
||||
|
||||
background-color: var(--paper);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.page-bg {
|
||||
min-height: 100vh;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding: 0 32rpx calc(40rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* 服务图片 */
|
||||
.service-image-wrap {
|
||||
width: 100%;
|
||||
height: 420rpx;
|
||||
overflow: hidden;
|
||||
/* ===== 头部：短横色标 + 深墨标题 ===== */
|
||||
.page-header {
|
||||
padding: 32rpx 0 0;
|
||||
}
|
||||
|
||||
.service-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.header-accent {
|
||||
width: 64rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 4rpx;
|
||||
background: var(--brand-strong);
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
background: #FFFFFF;
|
||||
margin: -40rpx 24rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.service-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.service-title-wrap {
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
row-gap: 10rpx;
|
||||
column-gap: 16rpx;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-size: 36rpx;
|
||||
.header-title {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
color: var(--ink);
|
||||
letter-spacing: 1rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.service-tag {
|
||||
background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
|
||||
color: #FFFFFF;
|
||||
/* 标签：浅橙衬底 + 暖陶土字，与首页/清单页同一口径 */
|
||||
.header-tag {
|
||||
flex-shrink: 0;
|
||||
padding: 6rpx 18rpx;
|
||||
border-radius: 10rpx;
|
||||
background: var(--brand-soft);
|
||||
border: 2rpx solid var(--brand-line);
|
||||
color: var(--brand-ink);
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.service-price-wrap {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
font-size: 28rpx;
|
||||
color: #D4A853;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service-price {
|
||||
font-size: 44rpx;
|
||||
color: #D4A853;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.price-unit {
|
||||
font-size: 24rpx;
|
||||
color: #9CA3AF;
|
||||
margin-left: 4rpx;
|
||||
.header-subtitle {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.service-subtitle {
|
||||
font-size: 26rpx;
|
||||
color: #6B7280;
|
||||
line-height: 1.5;
|
||||
/* ===== 通用区块：靠发丝线切分，不靠白卡浮起来 ===== */
|
||||
.section {
|
||||
margin-top: 44rpx;
|
||||
padding-top: 30rpx;
|
||||
border-top: 2rpx solid var(--line);
|
||||
}
|
||||
|
||||
/* 详情卡片 */
|
||||
.detail-card {
|
||||
background: #FFFFFF;
|
||||
margin: 0 24rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
margin-bottom: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
color: #D4A853;
|
||||
margin-right: 12rpx;
|
||||
/* 区块标识：单竖条，与首页/清单页同规格 */
|
||||
.section-bar {
|
||||
width: 8rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 4rpx;
|
||||
background: var(--brand-strong);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
line-height: 1.8;
|
||||
.section-title {
|
||||
margin-left: 16rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* ===== 服务详情 ===== */
|
||||
.detail-text {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #4B5563;
|
||||
line-height: 1.8;
|
||||
color: var(--ink-2);
|
||||
line-height: 1.85;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
|
||||
/* 服务流程 */
|
||||
.flow-list {
|
||||
/* ===== 服务流程：时间轴（本页唯一的结构性重音） ===== */
|
||||
.step-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.flow-number {
|
||||
/* 导轨需要撑满整步高度，连接线才能真的连到下一步 */
|
||||
.step-rail {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 44rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-dot {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: var(--brand-soft);
|
||||
border: 2rpx solid var(--brand-line);
|
||||
color: var(--brand-ink);
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flow-content {
|
||||
/* 连接线：橙色导轨，用半透明暖橙而非实心，避免与圆点抢重音 */
|
||||
.step-line {
|
||||
flex: 1;
|
||||
width: 2rpx;
|
||||
min-height: 16rpx;
|
||||
margin: 8rpx 0;
|
||||
background: rgba(194, 65, 12, 0.28);
|
||||
}
|
||||
|
||||
.flow-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
margin-bottom: 8rpx;
|
||||
.step-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 20rpx;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.flow-desc {
|
||||
.step:last-child .step-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6B7280;
|
||||
line-height: 1.5;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 注意事项 */
|
||||
.notice-list {
|
||||
/* ===== 注意事项：与指南页同一套圆点语言 ===== */
|
||||
.dot-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.notice-item {
|
||||
.dot-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.notice-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #D4A853;
|
||||
.dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
margin-top: 12rpx;
|
||||
background: var(--brand-strong);
|
||||
margin-top: 14rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notice-text {
|
||||
font-size: 28rpx;
|
||||
color: #4B5563;
|
||||
line-height: 1.6;
|
||||
.dot-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--ink-2);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* 底部占位 */
|
||||
/* ===== 底部占位 + 下单栏 ===== */
|
||||
.bottom-placeholder {
|
||||
height: 140rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
/* 底部下单栏 */
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #FFFFFF;
|
||||
padding: 24rpx 32rpx;
|
||||
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||
padding: 20rpx 32rpx;
|
||||
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
background: var(--white);
|
||||
border-top: 2rpx solid var(--line);
|
||||
box-shadow: var(--shadow-bar);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@@ -224,39 +256,63 @@ page {
|
||||
}
|
||||
|
||||
.total-label {
|
||||
margin-right: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.price-sym {
|
||||
font-size: 28rpx;
|
||||
color: #6B7280;
|
||||
font-weight: 700;
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 40rpx;
|
||||
color: #D4A853;
|
||||
margin-left: 2rpx;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
/* 主操作：实心暖橙胶囊，与首页/清单页 CTA 同形。
|
||||
内边距把高度撑到约 86rpx(43pt)，贴近 iOS 44pt 触控目标 */
|
||||
.order-btn {
|
||||
background: linear-gradient(135deg, #6B8E7B 0%, #6B8E7B 100%);
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
padding: 24rpx 56rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
padding: 22rpx 52rpx;
|
||||
border: none;
|
||||
line-height: 1.5;
|
||||
border-radius: 999rpx;
|
||||
background: var(--brand-strong);
|
||||
box-shadow: var(--shadow-cta);
|
||||
color: var(--white);
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
line-height: 1.4;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.order-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 弹窗遮罩 */
|
||||
.order-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* ===== 下单弹窗 ===== */
|
||||
/* 遮罩用暖近黑而非纯黑，避免和暖色纸面打架 */
|
||||
.popup-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: rgba(43, 37, 33, 0.45);
|
||||
z-index: 200;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@@ -268,20 +324,19 @@ page {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* 弹窗内容 */
|
||||
.popup-content {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
z-index: 201;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 85vh;
|
||||
background: var(--white);
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
z-index: 201;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.popup-content.show {
|
||||
@@ -289,214 +344,170 @@ page {
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32rpx;
|
||||
position: relative;
|
||||
border-bottom: 1rpx solid #F3F4F6;
|
||||
padding: 30rpx 32rpx;
|
||||
border-bottom: 2rpx solid var(--line);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* 用 padding 撑热区到约 64rpx，再用更小的 right 抵消，图标视觉位置不变 */
|
||||
.popup-close {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #9CA3AF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12rpx;
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 32rpx;
|
||||
max-height: 60vh;
|
||||
width: auto;
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
|
||||
/* 弹窗内服务信息 */
|
||||
/* 弹窗内服务信息：浅橙衬底块，与页面的重点面板语言一致 */
|
||||
.order-service-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 1rpx solid #F3F4F6;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
margin-bottom: 8rpx;
|
||||
border-radius: 20rpx;
|
||||
background: var(--brand-soft);
|
||||
border: 2rpx solid var(--brand-line);
|
||||
}
|
||||
|
||||
.order-service-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 14rpx;
|
||||
flex-shrink: 0;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.order-service-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.order-service-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
margin-bottom: 12rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.order-service-price {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: #D4A853;
|
||||
margin-top: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: var(--brand-ink);
|
||||
}
|
||||
|
||||
/* 表单行 */
|
||||
/* ===== 表单行 ===== */
|
||||
/* 上下各 24rpx 内边距，行高约 87rpx，贴近 iOS 44pt 触控目标 */
|
||||
.order-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #F3F4F6;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 2rpx solid var(--line);
|
||||
}
|
||||
|
||||
.order-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.order-row.column {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.order-label {
|
||||
font-size: 28rpx;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
font-size: 28rpx;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.order-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: #1F2937;
|
||||
margin-left: 24rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #9CA3AF;
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* picker 需要占满剩余宽度，值才能靠右对齐 */
|
||||
.order-picker {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: #1F2937;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.picker-value.placeholder {
|
||||
color: #9CA3AF;
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 数量控制 */
|
||||
.quantity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.quantity-btn {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
background: #F3F4F6;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #1F2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quantity-btn.disabled {
|
||||
color: #CCCCCC;
|
||||
background: #F9FAFB;
|
||||
}
|
||||
|
||||
.quantity-value {
|
||||
font-size: 30rpx;
|
||||
color: #1F2937;
|
||||
font-weight: 600;
|
||||
min-width: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 文本域 */
|
||||
/* 备注文本域：字段用暖白纸面填充 + 发丝边，与白底弹窗拉开一层 */
|
||||
.order-textarea {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
background: #F9FAFB;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #1F2937;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.textarea-count {
|
||||
font-size: 24rpx;
|
||||
color: #9CA3AF;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
/* 弹窗底部 */
|
||||
.popup-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 32rpx;
|
||||
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
border-top: 1rpx solid #F3F4F6;
|
||||
background: #FFFFFF;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.popup-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.popup-price-label {
|
||||
margin-top: 16rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
background: var(--paper);
|
||||
border: 2rpx solid var(--line);
|
||||
font-size: 28rpx;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.popup-price-value {
|
||||
font-size: 40rpx;
|
||||
color: #D4A853;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.popup-submit-btn {
|
||||
background: linear-gradient(135deg, #6B8E7B 0%, #6B8E7B 100%);
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
padding: 24rpx 56rpx;
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
color: var(--ink);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.popup-submit-btn::after {
|
||||
border: none;
|
||||
.textarea-count {
|
||||
align-self: flex-end;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* 就诊人选择 */
|
||||
/* ===== 就诊人选择 ===== */
|
||||
.patient-scroll {
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -508,48 +519,138 @@ page {
|
||||
.patient-chip {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
min-width: 160rpx;
|
||||
padding: 14rpx 24rpx;
|
||||
min-width: 180rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #F9FAFB;
|
||||
border: 2rpx solid #F3F4F6;
|
||||
background: var(--paper);
|
||||
border: 2rpx solid var(--line);
|
||||
box-sizing: border-box;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.patient-chip:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 选中态：浅橙衬底 + 实心橙描边（--brand-line 在浅橙底上只有 1.16:1，看不见） */
|
||||
.patient-chip.active {
|
||||
background: #FDF8EE;
|
||||
border-color: #D4A853;
|
||||
background: var(--brand-soft);
|
||||
border-color: var(--brand-strong);
|
||||
}
|
||||
|
||||
.patient-chip-name {
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
.patient-chip.active .patient-chip-name {
|
||||
color: #D4A853;
|
||||
color: var(--brand-ink);
|
||||
}
|
||||
|
||||
.patient-chip-phone {
|
||||
font-size: 22rpx;
|
||||
color: #9CA3AF;
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.patient-chip-add {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.patient-chip-add .patient-chip-name {
|
||||
color: var(--brand-ink);
|
||||
}
|
||||
|
||||
/* 空态：整块可点，热区约 92rpx */
|
||||
.add-profile-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 18rpx 24rpx;
|
||||
margin-top: 16rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FDF8EE;
|
||||
background: var(--brand-soft);
|
||||
border: 2rpx solid var(--brand-line);
|
||||
box-sizing: border-box;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.add-profile-tip:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.add-profile-tip-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #A1864B;
|
||||
font-weight: 700;
|
||||
color: var(--brand-ink);
|
||||
}
|
||||
|
||||
/* ===== 弹窗底部 ===== */
|
||||
.popup-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 32rpx;
|
||||
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
border-top: 2rpx solid var(--line);
|
||||
background: var(--white);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.popup-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.popup-price-label {
|
||||
margin-right: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: var(--muted);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.popup-price-value {
|
||||
margin-left: 2rpx;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
.popup-submit-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
padding: 22rpx 48rpx;
|
||||
border: none;
|
||||
border-radius: 999rpx;
|
||||
background: var(--brand-strong);
|
||||
box-shadow: var(--shadow-cta);
|
||||
color: var(--white);
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
line-height: 1.4;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.popup-submit-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.popup-submit-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.popup-content,
|
||||
.popup-mask {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user