diff --git a/src/pages/MePage.jsx b/src/pages/MePage.jsx index d98f81e..f67c8bd 100644 --- a/src/pages/MePage.jsx +++ b/src/pages/MePage.jsx @@ -25,6 +25,14 @@ export default function MePage() { const { user, logout } = useAuth() const navigate = useNavigate() + // 顶部安全区与「我」页蓝色渐变头部无缝衔接: 给 body 打标记, + // 由 CSS 让 .app-safe-top 也使用同一条渐变, 避免出现一条白边/色块把蓝色割断. + // 离开本页时移除标记, 其他页恢复默认底色. + useEffect(() => { + document.body.classList.add('me-safe-top') + return () => { document.body.classList.remove('me-safe-top') } + }, []) + // OTA 状态 const [otaState, setOtaState] = useState('idle') // idle | checking | available | none | downloading | ready | error const [otaInfo, setOtaInfo] = useState(null) // 检查结果中的 info diff --git a/src/styles/globals.css b/src/styles/globals.css index 7b22a8d..79627a1 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -53,7 +53,9 @@ input, textarea, select { font: inherit; } padding-right: var(--safe-right); } -/* 顶部状态栏安全区占位: 高度由 --safe-top 决定 (main.jsx 实测校准后覆盖) */ +/* 顶部状态栏安全区占位: 高度由 --safe-top 决定 (main.jsx 实测校准后覆盖) + 默认页面底色; 有通栏彩色头部的页面 (如「我」页蓝色渐变) 由该页 + 给 body 加标记类来覆盖背景, 使安全区与头部无缝衔接. */ .app-safe-top { flex: 0 0 auto; height: var(--safe-top); @@ -273,9 +275,18 @@ input, textarea, select { font: inherit; } .login-error { background: #fef2f2; color: var(--color-danger); padding: 10px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; } /* ================== 我的页 ================== */ -/* 「我」页不设顶部头部条: 头像区直接贴顶 (2026-10-23 界面调整) */ +/* 「我」页不设顶部头部条: 头像区直接贴顶 (2026-10-23 界面调整) + 该页头部是通栏蓝色渐变, 若安全区单独占位会出现一条白边/色块把蓝色割断. + 做法: 让安全区高度归零, 改由 me-profile 用 padding-top 吸收状态栏高度, + 这样蓝色渐变从屏幕最顶端开始, 是一整块连续的色域. */ +body.me-safe-top .app-safe-top { height: 0; } .me-page { display: flex; flex-direction: column; min-height: 100%; background: var(--color-bg); } -.me-profile { background: linear-gradient(135deg, #1677ff, #4096ff); color: #fff; padding: 24px 16px 28px; display: flex; flex-direction: column; align-items: center; gap: 6px; } +.me-page .me-profile { + background: linear-gradient(135deg, #1677ff, #4096ff); + color: #fff; + padding: calc(24px + var(--safe-top)) 16px 28px; + display: flex; flex-direction: column; align-items: center; gap: 6px; +} .me-avatar { background: rgba(255,255,255,.2); color: #fff; font-size: 28px; } .me-name { font-size: 18px; font-weight: 600; } .me-email { font-size: 13px; opacity: .85; }