From 96292d0e95e7d75e7e2f2885293e5568357c45f6 Mon Sep 17 00:00:00 2001 From: jackyu66git Date: Tue, 25 Aug 2026 01:14:07 +0800 Subject: [PATCH] =?UTF-8?q?fix(h5):=20=E5=B0=8F=E7=A8=8B=E5=BA=8F=20WebVie?= =?UTF-8?q?w=20=E5=88=98=E6=B5=B7=E5=8C=BA=E8=83=8C=E6=99=AF=E4=B8=8E?= =?UTF-8?q?=E9=A1=B6=E6=A0=8F=E5=AE=89=E5=85=A8=E5=8C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Logo 下移 safe-area、embed 隐藏 HTML 标题；暖色渐变铺满刘海，页面背景上延与全屏洗底层对齐。 Co-authored-by: Cursor --- apps/user-h5/src/App.vue | 2 +- apps/user-h5/src/components/AppHeader.vue | 2 +- apps/user-h5/src/components/PageShell.vue | 14 ++++----- apps/user-h5/src/lib/mpEmbed.ts | 8 +++++ apps/user-h5/src/pages/HomePage.vue | 11 +++---- apps/user-h5/src/styles/app.css | 37 ++++++++++++++++++++--- 6 files changed, 53 insertions(+), 21 deletions(-) diff --git a/apps/user-h5/src/App.vue b/apps/user-h5/src/App.vue index 1a662b1..0d42d8e 100644 --- a/apps/user-h5/src/App.vue +++ b/apps/user-h5/src/App.vue @@ -4,7 +4,7 @@ - + diff --git a/apps/user-h5/src/components/AppHeader.vue b/apps/user-h5/src/components/AppHeader.vue index 15053a8..ec5a980 100644 --- a/apps/user-h5/src/components/AppHeader.vue +++ b/apps/user-h5/src/components/AppHeader.vue @@ -36,7 +36,7 @@ const showBack = computed(() => { grid-template-columns: 44px 1fr 44px; align-items: center; gap: 4px; - padding: 10px 12px 4px; + padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 4px; background: transparent; pointer-events: none; } diff --git a/apps/user-h5/src/components/PageShell.vue b/apps/user-h5/src/components/PageShell.vue index 0442417..c787549 100644 --- a/apps/user-h5/src/components/PageShell.vue +++ b/apps/user-h5/src/components/PageShell.vue @@ -35,19 +35,17 @@ withDefaults( .ps { position: relative; overflow-x: hidden; - padding-top: 48px; + margin-top: calc(-1 * var(--yxg-safe-top)); + padding-top: var(--yxg-page-top); padding-bottom: var(--spacing-xs); - min-height: 100%; - background: - radial-gradient(110% 70% at 85% -8%, rgba(255, 190, 170, 0.65) 0%, transparent 52%), - radial-gradient(90% 55% at 8% 6%, rgba(255, 220, 200, 0.75) 0%, transparent 48%), - radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%), - linear-gradient(180deg, var(--color-bg-start) 0%, #ffe4d8 28%, #fff4ef 52%, var(--color-bg-sheet) 100%); + min-height: calc(100% + var(--yxg-safe-top)); + background: var(--yxg-page-wash); } .ps-flat { background: transparent; min-height: 0; - padding-top: 48px; + margin-top: calc(-1 * var(--yxg-safe-top)); + padding-top: var(--yxg-page-top); } .atm { position: absolute; diff --git a/apps/user-h5/src/lib/mpEmbed.ts b/apps/user-h5/src/lib/mpEmbed.ts index ca0fb8b..15bf21f 100644 --- a/apps/user-h5/src/lib/mpEmbed.ts +++ b/apps/user-h5/src/lib/mpEmbed.ts @@ -1,6 +1,13 @@ const MP_EMBED_KEY = 'yxg_mp_embed' const MP_QUERY = 'mp' +/** Apply document-level embed chrome (safe-area wash, hide HTML title). */ +export function applyMpEmbedDom(): void { + if (typeof document === 'undefined' || !isMpEmbed()) return + document.title = '\u200b' + document.documentElement.classList.add('mp-embed') +} + /** Persist ?mp=1 from mini-program web-view entry. Call once before router mount. */ export function initMpEmbed(): void { if (typeof window === 'undefined') return @@ -8,6 +15,7 @@ export function initMpEmbed(): void { if (params.get(MP_QUERY) === '1') { sessionStorage.setItem(MP_EMBED_KEY, '1') } + applyMpEmbedDom() } /** True when H5 runs inside WeChat mini-program web-view (no H5 tab bar). */ diff --git a/apps/user-h5/src/pages/HomePage.vue b/apps/user-h5/src/pages/HomePage.vue index 49d7efd..2cd3d6f 100644 --- a/apps/user-h5/src/pages/HomePage.vue +++ b/apps/user-h5/src/pages/HomePage.vue @@ -48,14 +48,11 @@ const { .home { position: relative; overflow-x: hidden; - padding-top: 48px; + margin-top: calc(-1 * var(--yxg-safe-top)); + padding-top: var(--yxg-page-top); padding-bottom: var(--spacing-xs); - min-height: 100%; - background: - radial-gradient(110% 70% at 85% -8%, rgba(255, 190, 170, 0.65) 0%, transparent 52%), - radial-gradient(90% 55% at 8% 6%, rgba(255, 220, 200, 0.75) 0%, transparent 48%), - radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%), - linear-gradient(180deg, var(--color-bg-start) 0%, #ffe4d8 28%, #fff4ef 52%, var(--color-bg-sheet) 100%); + min-height: calc(100% + var(--yxg-safe-top)); + background: var(--yxg-page-wash); } .atm { position: absolute; diff --git a/apps/user-h5/src/styles/app.css b/apps/user-h5/src/styles/app.css index 5da4c6d..1369e0f 100644 --- a/apps/user-h5/src/styles/app.css +++ b/apps/user-h5/src/styles/app.css @@ -1,28 +1,57 @@ *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} -html,body,#app{min-height:100%} +html,body,#app{min-height:100%;min-height:100dvh} +html{ + background-color:var(--color-bg-start); +} body{ font-family:var(--font-sans); font-size:14px; line-height:1.65; color:var(--color-text-primary); -webkit-font-smoothing:antialiased; - background: + background:var(--yxg-body-wash); + background-attachment:fixed; +} +:root{ + --yxg-body-wash: radial-gradient(120% 80% at 80% -10%, rgba(255,180,160,.45) 0%, transparent 55%), radial-gradient(90% 60% at 10% 8%, rgba(255,210,190,.55) 0%, transparent 50%), linear-gradient(180deg, var(--yxg-bg-start) 0%, var(--yxg-bg-end) 28%, var(--color-bg-sheet) 100%); - background-attachment:fixed; + --yxg-page-wash: + radial-gradient(110% 70% at 85% -8%, rgba(255, 190, 170, 0.65) 0%, transparent 52%), + radial-gradient(90% 55% at 8% 6%, rgba(255, 220, 200, 0.75) 0%, transparent 48%), + radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%), + linear-gradient(180deg, var(--color-bg-start) 0%, #ffe4d8 28%, #fff4ef 52%, var(--color-bg-sheet) 100%); + --yxg-header-h:50px; + --yxg-page-top:calc(env(safe-area-inset-top,0px) + var(--yxg-header-h)); + --yxg-safe-top:env(safe-area-inset-top,0px); } .app-shell{ - max-width:var(--yxg-max-w);margin:0 auto;min-height:100vh; + max-width:var(--yxg-max-w);margin:0 auto;min-height:100vh;min-height:100dvh; display:flex;flex-direction:column; padding-bottom:calc(var(--yxg-nav-h) + env(safe-area-inset-bottom,0px)); position:relative; } .app-body{ flex:1 0 auto; + position:relative; + z-index:1; } .app-shell.mp-embed{ padding-bottom:env(safe-area-inset-bottom,0px); + isolation:isolate; +} +.app-shell.mp-embed::before{ + content:""; + position:fixed; + inset:0; + z-index:0; + pointer-events:none; + background:var(--yxg-body-wash); +} +.app-footer{ + position:relative; + z-index:1; } a{color:inherit;text-decoration:none}