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)); } /* 通栏白块:与「我的」页 .menu-list 同源——白面 + 上下各 2rpx 发丝线 + 中性阴影,圆角 0。负向 margin 抵消容器 32rpx 内距后左右顶到屏幕两侧, 行内再用 32rpx 内距回到同一左基线,行分隔线因此自动通到底 */ .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); } /* 行高约 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; } .form-row-hover { background: var(--brand-soft); } /* 标签走 --muted、值走 --ink 700:层级靠明度与字重拉开, 不给可点性上色(DESIGN.md §2.2「三档只表示文字层级」) */ .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; } .form-value { font-size: 28rpx; font-weight: 700; color: var(--ink); } /* 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; } .form-arrow { flex-shrink: 0; margin-left: 12rpx; color: var(--muted); } /* 头像:默认底座 = 浅橙衬底 + 2rpx --brand-line 描边(靠描边托形,不加阴影), 与「我的」页 128rpx 头像同构,只是这里收到 96rpx */ .avatar-wrap { display: flex; align-items: center; } .avatar { width: 96rpx; height: 96rpx; border-radius: 20rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .avatar-default { background: var(--brand-soft); border: 2rpx solid var(--brand-line); } /* 性别:未选中是纸面底 + 发丝边 + --muted 字, 选中翻转成软橙底 + 实心橙描边 + --brand-ink 字 */ .sex-wrap { display: flex; gap: 20rpx; } .sex-tag { display: flex; align-items: center; justify-content: center; min-width: 120rpx; padding: 12rpx 0; border-radius: 999rpx; background: var(--paper); border: 2rpx solid var(--line); } .sex-text { font-size: 28rpx; color: var(--muted); } .sex-tag-active { background: var(--brand-soft); border-color: var(--brand-strong); } .sex-tag-active .sex-text { color: var(--brand-ink); font-weight: 700; } /* 底部固定保存栏:纸面与白面填充差只有 1.05:1,靠一道小偏移小模糊的 上向暖墨阴影托住边界(与 itemdetail 的 --shadow-bar 同值) */ .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); } .primary-btn { 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; } .primary-btn-disabled { opacity: 0.6; }