page { /* 配色令牌来自 app.wxss(全站唯一来源),本页不留副本 */ background-color: var(--paper); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .container { min-height: 100vh; box-sizing: border-box; /* 底部留出固定操作栏的高度 + 安全区,避免最后一个地址被盖住 */ padding: 40rpx 32rpx calc(180rpx + env(safe-area-inset-bottom)); } /* ===== 通栏白块(列表态 / 表单态共用同一语言)===== 白面 + 上下各 2rpx 发丝线 + 中性阴影,圆角 0; 负向 margin 抵消容器 32rpx 内距后左右顶到屏幕两侧, 行内再用 32rpx 内距回到同一左基线,内部发丝线因此通到底 */ .addr-list, .form-card { margin: 0 -32rpx; background: var(--white); border-top: 2rpx solid var(--line); border-bottom: 2rpx solid var(--line); box-shadow: var(--shadow-card); } /* ===== 地址卡 ===== */ .addr-card { padding: 28rpx 32rpx; border-bottom: 2rpx solid var(--line); } .addr-card-last { border-bottom: none; } .addr-main { display: flex; align-items: center; justify-content: space-between; } .addr-main-hover { opacity: 0.7; } .addr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .addr-top { display: flex; align-items: center; margin-bottom: 10rpx; } .addr-label { font-size: 30rpx; font-weight: 700; color: var(--ink); } /* 默认标签:浅橙衬底档(--brand-soft + 2rpx --brand-line + --brand-ink), 字号 24rpx 是中文最小字号下限,不得再小 */ .addr-default-tag { margin-left: 16rpx; padding: 4rpx 12rpx; border-radius: 6rpx; background: var(--brand-soft); border: 2rpx solid var(--brand-line); font-size: 24rpx; color: var(--brand-ink); } .addr-region { margin-bottom: 6rpx; font-size: 26rpx; color: var(--muted); } .addr-detail { font-size: 28rpx; color: var(--ink); line-height: 1.5; } .addr-postcode { margin-top: 6rpx; font-size: 24rpx; color: var(--muted); } .addr-arrow { flex-shrink: 0; margin-left: 16rpx; color: var(--muted); } /* 卡片操作行:与主体隔一条发丝线,两项分列两端 */ .addr-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 24rpx; padding-top: 20rpx; border-top: 2rpx solid var(--line); } /* 文字只有 26rpx 高,用 padding 撑热区、等量负外边距抵消,不改变行高 */ .addr-action { display: flex; align-items: center; padding: 16rpx 0; margin: -16rpx 0; } .addr-action-icon { margin-right: 10rpx; color: var(--muted); } .addr-action-icon-active { color: var(--brand-strong); } .addr-action-text { font-size: 26rpx; color: var(--muted); } .addr-action-text-active { color: var(--brand-ink); font-weight: 700; } /* ===== 空态 ===== */ .addr-empty { display: flex; flex-direction: column; align-items: center; padding: 140rpx 32rpx; } /* --faint 仅用于非文字装饰,不承载信息 */ .addr-empty-icon { color: var(--faint); } .addr-empty-text { margin-top: 24rpx; font-size: 28rpx; color: var(--muted); } /* ===== 表单 ===== */ /* 行高约 87rpx(28rpx×1.4 + 上下 24rpx),贴近 iOS 44pt 触控目标 */ .form-row { display: flex; align-items: center; justify-content: space-between; padding: 24rpx 32rpx; border-bottom: 2rpx solid var(--line); } .form-row-last { border-bottom: none; } /* 标签走 --muted、值走 --ink 700:层级靠明度与字重拉开,不给可点性上色 */ .form-label { flex-shrink: 0; margin-right: 24rpx; font-size: 28rpx; color: var(--muted); letter-spacing: 1rpx; } .form-input { flex: 1; min-width: 0; text-align: right; font-size: 28rpx; font-weight: 700; color: var(--ink); } .form-placeholder { color: var(--muted); font-weight: 400; } /* picker 需占满剩余宽度,值才能靠右对齐 */ .form-picker { flex: 1; min-width: 0; } .picker-value { display: block; text-align: right; font-size: 28rpx; font-weight: 700; color: var(--ink); } .picker-placeholder { color: var(--muted); font-weight: 400; } /* ===== 底部固定操作栏 ===== */ /* 纸面与白面填充差只有 1.05:1,靠一道小偏移小模糊的上向暖墨阴影托住边界 */ .footer-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom)); background: var(--white); box-shadow: 0 -2rpx 8rpx rgba(63, 43, 25, 0.07); } .footer-bar-duo { display: flex; gap: 24rpx; } /* 保存是本页唯一的实心暖橙块,独占「全页同类实心块不超过一处」的额度 */ .primary-btn { flex: 1; margin: 0; padding: 24rpx 0; 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; } .primary-btn::after { border: none; } /* 取消:空心胶囊,靠--sep 环 + 透明底表达"次要动作",不占用实心额度 */ .ghost-btn { flex: 1; margin: 0; padding: 22rpx 0; border: 2rpx solid var(--sep); border-radius: 999rpx; background: transparent; color: var(--ink-2); font-size: 30rpx; font-weight: 500; letter-spacing: 2rpx; line-height: 1.4; } .ghost-btn::after { border: none; }