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 内距回到同一左基线,行分隔线因此自动通到底 */ .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); } /* 两块之间用 24rpx 纸面留白分界(与「我的」页菜单组间距同值) */ .form-card + .form-card { margin-top: 24rpx; } /* 行高约 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:层级靠明度与字重拉开, 不给可点性上色(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; } /* 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; } /* ===== 性别选择 ===== 未选中是纸面底 + 发丝边 + --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; } /* ===== 健康备注 ===== */ .form-remark { display: flex; flex-direction: column; padding: 24rpx 32rpx; } .form-textarea { width: 100%; height: 160rpx; margin-top: 16rpx; font-size: 28rpx; color: var(--ink); line-height: 1.6; } /* 24rpx 是中文最小字号下限 */ .remark-count { align-self: flex-end; font-size: 24rpx; color: var(--muted); } /* ===== 隐私提示 ===== */ .tips { display: flex; align-items: center; margin-top: 24rpx; } .tips-icon { flex-shrink: 0; color: var(--muted); } .tips-text { margin-left: 10rpx; font-size: 24rpx; color: var(--muted); } /* ===== 底部固定保存栏 ===== 纸面与白面填充差只有 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); } /* 保存是本页唯一的实心暖橙块,独占「全页同类实心块不超过一处」的额度 */ .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; }