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; } /* ===== 就诊人卡片:配方与预约记录卡完全同源 ===== --white + 2rpx --line 发丝边 + 28rpx 圆角 + --shadow-card,内距也对齐 28/28/24。 原先走的是通栏白块(负 margin 顶到屏幕两侧、圆角 0、卡间靠发丝线分隔), 改圆角卡片后负 margin 与上下两条发丝线一并去掉,卡片缩回容器 32rpx 内距里 */ .profile-list { display: flex; flex-direction: column; } .profile-card { position: relative; padding: 28rpx 28rpx 24rpx; border-radius: 28rpx; background: var(--white); border: 2rpx solid var(--line); box-shadow: var(--shadow-card); } /* 卡间距用相邻兄弟 margin,不用 flex 的 gap: gap 在部分微信基础库 / 老设备上不生效,一旦失效几张卡会挨在一起连成一条白条 */ .profile-card + .profile-card { margin-top: 24rpx; } /* 主体整块可点进编辑。chevron 已去掉,点击暗示由按下态(.profile-main-hover)承担: transform: scale(0.99)——与记录卡(recordlist .record-card:active)同一套按压语言 */ .profile-main { display: flex; align-items: center; justify-content: space-between; transition: transform 0.15s ease; } .profile-main-hover { transform: scale(0.99); } /* 首字牌:浅橙衬底 + --brand-line 描边,与订单详情页就诊人身份牌同源 (88rpx、24rpx 圆角、40rpx/700 暖橙姓氏首字;无姓名退到 user 图标) */ .profile-mark { box-sizing: border-box; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 88rpx; height: 88rpx; border: 2rpx solid var(--brand-line); border-radius: 24rpx; background: var(--brand-soft); } .profile-mark-text { font-size: 40rpx; font-weight: 700; color: var(--brand-ink); letter-spacing: 1rpx; } .profile-info { flex: 1; min-width: 0; margin-left: 20rpx; } /* 删除:右上角安静图标。56rpx 热区 + 12rpx 内缩,不压卡边; 图标走 --muted 档(#6F655C 与令牌同步),按下整粒变淡作反馈 */ .profile-delete { position: absolute; top: 8rpx; right: 8rpx; display: flex; align-items: center; justify-content: center; width: 56rpx; height: 56rpx; border-radius: 16rpx; } .profile-delete:active { opacity: 0.5; } .profile-top { display: flex; align-items: center; /* 右侧给删除图标留位,长姓名 + 性别签不被压住 */ padding-right: 64rpx; } /* 姓名是本页最重的字,走 --ink 700(标题档) */ .profile-name { font-size: 32rpx; font-weight: 700; color: var(--ink); } /* 性别签:浅橙衬底档(--brand-soft + 2rpx --brand-line + --brand-ink), 圆角 10rpx 与记录页状态胶囊同一族(徽章/标签圆角规范值), 字号 24rpx 是中文最小字号下限,不得再小 */ .sex-tag { margin-left: 16rpx; padding: 4rpx 14rpx; border-radius: 10rpx; background: var(--brand-soft); border: 2rpx solid var(--brand-line); font-size: 24rpx; color: var(--brand-ink); } /* 元信息行:出生年月 | 电话 | 证件号,空值在 JS 里整项剔除(连同分隔线), 竖线 2rpx×20rpx 取 --sep——与订单详情页 meta 行同一套写法 */ .meta-list { display: flex; align-items: center; margin-top: 12rpx; } .meta-item { font-size: 24rpx; color: var(--muted); letter-spacing: 1rpx; line-height: 1.6; } .meta-sep { flex-shrink: 0; width: 2rpx; height: 20rpx; margin: 0 14rpx; background: var(--sep); } /* 健康备注:单行省略——列表只做提示,全文进编辑页看 */ .profile-remark { display: block; margin-top: 8rpx; font-size: 24rpx; color: var(--muted); letter-spacing: 1rpx; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== 空态 ===== */ .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; }