Files
wxapp_escort/pages/escort/agreement.wxss
T
2026-10-06 17:58:18 +08:00

192 lines
4.1 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* pages/escort/agreement.wxss
配色走 app.wxss 的暖橙令牌(DESIGN.md §二)。
原 #FAF6F1 底、#D4A853 系(含三处同色渐变与同色大阴影)、
#1F2937/#4B5563/#6B7280/#9CA3AF/#E5E7EB 冷灰文字、#F0E6D8 冷线,
已按 §5.1 与 §四(禁渐变、禁灰金亮橙)收口。
另删除死规则 .flow-steps/.flow-step/.step-badge/.step-info/.step-title/
.step-desc/.step-line——WXML 里没有任何元素引用(本页无流程步骤) */
page {
background-color: var(--paper);
}
.container {
min-height: 100vh;
padding-bottom: 48rpx;
}
/* 顶部标题区:不铺卡面、直接落纸面(同首页 hero),去掉原白→暖白渐变 */
.header-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 48rpx 32rpx 40rpx;
}
/* 文件图标是全页唯一实心块:白色图标需要深底才看得见,
故走 --brand-strong(同首页品牌印记的白色线稿),阴影用 --shadow-cta */
.header-icon-wrap {
width: 96rpx;
height: 96rpx;
background: var(--brand-strong);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-cta);
}
.header-icon {
color: #FFFFFF;
}
.header-title {
font-size: 40rpx;
font-weight: 700;
color: var(--ink);
margin-top: 24rpx;
}
.header-subtitle {
font-size: 26rpx;
color: var(--muted);
margin-top: 12rpx;
}
/* 协议正文:通栏白底块(上下各 2rpx 发丝线 + 圆角 0),
与陪诊服务列表页的分组、我的页菜单组同一语言 */
.agreement-card {
background: var(--white);
border-top: 2rpx solid var(--line);
border-bottom: 2rpx solid var(--line);
box-shadow: var(--shadow-card);
padding: 32rpx;
}
.section {
margin-bottom: 40rpx;
}
.section:last-child {
margin-bottom: 0;
}
.section-title {
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: 700;
color: var(--ink);
margin-bottom: 20rpx;
}
/* 序号走「浅橙衬底 + 2rpx 描边 + 暖陶土字」,与全站图标衬底同语言;
不用实心主色——全页实心块只留顶部那一个(DESIGN.md §2.1) */
.section-number {
width: 40rpx;
height: 40rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
color: var(--brand-ink);
font-size: 24rpx;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
flex-shrink: 0;
}
.section-content {
padding-left: 36rpx;
}
.paragraph {
display: block;
font-size: 28rpx;
color: var(--ink-2);
line-height: 1.8;
}
.list-item {
display: flex;
align-items: flex-start;
margin-bottom: 16rpx;
}
.list-item:last-child {
margin-bottom: 0;
}
.list-dot {
width: 12rpx;
height: 12rpx;
background: var(--brand-strong);
border-radius: 50%;
margin-top: 14rpx;
margin-right: 16rpx;
flex-shrink: 0;
}
.list-text {
font-size: 28rpx;
color: var(--ink-2);
line-height: 1.7;
flex: 1;
}
/* 违约金表:卡内的浅橙块,靠 2rpx --brand-line 描边托形、不加阴影 */
.refund-table {
margin-top: 20rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
border-radius: 20rpx;
/* 表格行自带内距,容器不再重复给 */
padding: 0;
overflow: hidden;
}
/* 浅橙底上的分隔线必须用 --sep(--brand-line 落浅橙底只有 1.16:1,看不见) */
.table-row {
display: flex;
align-items: center;
padding: 20rpx 24rpx;
border-bottom: 2rpx solid var(--sep);
}
.table-row:last-child {
border-bottom: none;
}
/* 表头不铺色(--brand-line 只作描边,不当填充),靠字重与主色区分 */
.table-row.header .table-cell {
font-weight: 700;
color: var(--brand-ink);
}
.table-cell {
flex: 1;
font-size: 26rpx;
color: var(--ink-2);
line-height: 1.5;
text-align: center;
}
.table-cell:first-child {
flex: 1.2;
}
.footer-section {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 16rpx;
padding: 0 32rpx;
}
.footer-text {
font-size: 24rpx;
color: var(--muted);
line-height: 1.6;
}