fix(h5): 首屏清 title + 桃色顶区对齐小程序 nav-bar(nh=1)

index.html 在 Vue 前清 document.title 并预应用 mp-native-header;
CSS 桃色顶区、隐藏 AppHeader,减轻黑字与渐变冲顶。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
2026-08-25 04:09:12 +08:00
co-authored by Cursor
parent db3669c595
commit e7290ed726
2 changed files with 46 additions and 0 deletions
+27
View File
@@ -4,6 +4,33 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover" />
<title>愈心谷</title>
<script>
;(function () {
var q = location.search.slice(1).split('&')
var p = {}
for (var i = 0; i < q.length; i++) {
var kv = q[i].split('=')
if (kv[0]) p[kv[0]] = kv[1] || ''
}
if (p.mp === '1') {
document.documentElement.classList.add('mp-embed')
document.title = '\u200b'
try { sessionStorage.setItem('yxg_mp_embed', '1') } catch (e) {}
}
if (p.nh === '1') {
document.documentElement.classList.add('mp-native-header')
document.title = '\u200b'
try { sessionStorage.setItem('yxg_mp_native_header', '1') } catch (e) {}
var top = 4
if (p.sbh && /^\d+$/.test(p.sbh)) {
top = parseInt(p.sbh, 10)
try { sessionStorage.setItem('yxg_sbh', p.sbh) } catch (e) {}
}
document.documentElement.style.setProperty('--yxg-safe-top', '0px')
document.documentElement.style.setProperty('--yxg-page-top', top + 'px')
}
})()
</script>
<link rel="icon" type="image/png" href="/logo.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+19
View File
@@ -64,6 +64,25 @@ html.mp-embed body{
padding-top:var(--yxg-page-top);
min-height:100%;
}
/* 小程序原生顶栏:桃色顶区对齐 nav-bar,隐藏 H5 AppHeader,洗底不冲顶 */
html.mp-embed.mp-native-header{
background-color:#ffd1c7;
background-image:none;
}
html.mp-embed.mp-native-header body{
background:transparent;
}
html.mp-embed.mp-native-header .app-shell.mp-embed::before{
background-color:#ffd1c7;
}
html.mp-embed.mp-native-header .app-header{
display:none !important;
}
html.mp-embed.mp-native-header .app-shell .home,
html.mp-embed.mp-native-header .app-shell .ps,
html.mp-embed.mp-native-header .app-shell .yxg-page{
padding-top:var(--yxg-page-top);
}
.app-footer{
position:relative;
z-index:1;