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)); } /* ===== 说明砖 ===== 浅橙底走「说明砖」档:--brand-soft + 2rpx --brand-line 描边托形、不加阴影。 --paper 与 --brand-soft 明度差仅约 1.03:1,不靠描边托不出形 */ .tip-card { display: flex; align-items: center; margin-bottom: 24rpx; padding: 20rpx 24rpx; border-radius: 20rpx; background: var(--brand-soft); border: 2rpx solid var(--brand-line); } /* t-icon 未传 color,用 CSS 变量着色即可(读不到变量的只有 color 属性写法) */ .tip-icon { flex-shrink: 0; color: var(--brand-ink); } .tip-text { margin-left: 12rpx; font-size: 24rpx; color: var(--brand-ink); line-height: 1.5; } /* ===== 通栏白块 ===== 白面 + 上下各 2rpx 发丝线 + 中性阴影,圆角 0; 负向 margin 抵消容器 32rpx 内距后左右顶到屏幕两侧, 卡内再用 32rpx 内距回到同一左基线,卡间发丝线因此通到底。 圆角必须为 0,否则满宽块的圆角会切在屏幕边上 */ .profile-list { margin: 0 -32rpx; background: var(--white); border-top: 2rpx solid var(--line); border-bottom: 2rpx solid var(--line); box-shadow: var(--shadow-card); } .profile-card { padding: 28rpx 32rpx; border-bottom: 2rpx solid var(--line); } .profile-card-last { border-bottom: none; } /* 主体整块可点进编辑,右侧 chevron 即点击暗示 */ .profile-main { display: flex; align-items: center; justify-content: space-between; } .profile-main-hover { opacity: 0.7; } .profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .profile-top { display: flex; align-items: center; margin-bottom: 12rpx; } /* 姓名是本页最重的字,走 --ink 700(标题档) */ .profile-name { font-size: 32rpx; font-weight: 700; color: var(--ink); } /* 性别签:浅橙衬底档(--brand-soft + 2rpx --brand-line + --brand-ink), 字号 24rpx 是中文最小字号下限,不得再小 */ .sex-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); } /* 标签走 --muted、值走 --ink-2:只表示文字层级,不给可点性上色 */ .info-row { display: flex; align-items: flex-start; } .info-row + .info-row { margin-top: 8rpx; } .info-label { flex-shrink: 0; width: 140rpx; font-size: 26rpx; color: var(--muted); } .info-value { flex: 1; min-width: 0; font-size: 28rpx; color: var(--ink-2); word-break: break-all; } .profile-arrow { flex-shrink: 0; margin-left: 16rpx; color: var(--muted); } /* 卡片操作行:与主体隔一条发丝线,删除靠右排(与「邮寄地址」卡同一位置) */ .profile-actions { display: flex; align-items: center; justify-content: flex-end; margin-top: 24rpx; padding-top: 20rpx; border-top: 2rpx solid var(--line); } /* 文字只有 26rpx 高,用 padding 撑热区、等量负外边距抵消,不改变行高 */ .profile-action { display: flex; align-items: center; padding: 16rpx 0; margin: -16rpx 0; } .profile-action-icon { margin-right: 10rpx; color: var(--muted); } .profile-action-text { font-size: 26rpx; color: var(--muted); } /* ===== 空态 ===== */ .profile-empty { display: flex; flex-direction: column; align-items: center; padding: 140rpx 32rpx; } /* --faint 仅用于非文字装饰(空态图标),不承载信息 */ .profile-empty-icon { color: var(--faint); } .profile-empty-text { margin-top: 24rpx; font-size: 28rpx; color: var(--muted); } /* ===== 加载中 ===== */ .loading-wrap { display: flex; align-items: center; justify-content: center; padding: 60rpx; } /* ===== 底部固定操作栏 ===== 纸面与白面填充差只有 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; }