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}