fix: 愈心魔方顶栏 logo 用同级 cover 叠在 web-view 上(202608279)

保留 yxg-nav-bar + web-view 兄弟结构;微信端普通 image 会被 web-view 盖住,
用页面级 cover-image 对齐导航行显示 logo。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
2026-08-25 03:41:41 +08:00
co-authored by Cursor
parent 445e20d562
commit ec4c8c9bd9
2 changed files with 28 additions and 7 deletions
+27 -6
View File
@@ -3,12 +3,14 @@
<view class="yxg-page">
<view class="yxg-nav-bar" :style="navBarStyle">
<view class="yxg-nav-row" :style="navRowStyle">
<!-- #ifndef MP-WEIXIN -->
<image
class="yxg-nav-logo"
:src="YXG_MP_LOGO_URL"
mode="aspectFit"
:style="logoStyle"
/>
<!-- #endif -->
</view>
</view>
<web-view
@@ -18,6 +20,16 @@
@load="onWebLoad"
@error="onWebError"
/>
<!-- #ifdef MP-WEIXIN -->
<!-- 同级 cover仅承载 logo不在 web-view 普通 image 会被 web-view 盖住 -->
<cover-view class="yxg-logo-cover" :style="logoCoverStyle">
<cover-image
class="yxg-nav-logo"
:src="YXG_MP_LOGO_URL"
:style="coverLogoStyle"
/>
</cover-view>
<!-- #endif -->
</view>
</template>
@@ -57,13 +69,16 @@ const headH = statusBarH + navBarH
const webviewH = windowH - headH
const logoH = Math.min(menuH, 30)
const logoW = Math.min(Math.round((logoH * 598) / 130), Math.floor(screenW * 0.4))
const logoLeft = Math.floor((screenW - logoW) / 2)
const logoTop = Math.floor((navBarH - logoH) / 2)
const navBarStyle = `height:${headH}px;padding-top:${statusBarH}px;`
const navBarStyle = `height:${headH}px;padding-top:${statusBarH}px;box-sizing:border-box;`
const navRowStyle = `height:${navBarH}px;`
const logoStyle = `width:${logoW}px;height:${logoH}px;`
const webviewStyle = `height:${webviewH}px;`
const webviewStyle = `top:${headH}px;height:${webviewH}px;`
const logoCoverStyle = `position:fixed;top:${statusBarH}px;left:0;width:${screenW}px;height:${navBarH}px;z-index:9999;`
const coverLogoStyle = `position:absolute;left:${logoLeft}px;top:${logoTop}px;width:${logoW}px;height:${logoH}px;`
/** web-view 已在导航下方,H5 只需极小顶距 */
const h5Url = computed(
() =>
`${YXG_H5_BASE}?mp=1&nh=1&sbh=4&v=${YXG_H5_VERSION}#wechat_redirect`,
@@ -87,6 +102,7 @@ console.log('[yxg-magic] outer nav + webview', {
webviewH,
logoW,
logoH,
logoSrc: YXG_MP_LOGO_URL,
})
</script>
@@ -99,13 +115,16 @@ page {
<style scoped>
.yxg-page {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #ffd1c7;
}
.yxg-nav-bar {
position: relative;
z-index: 2;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
@@ -124,7 +143,9 @@ page {
}
.yxg-webview {
flex: 1;
position: absolute;
left: 0;
width: 100%;
z-index: 1;
}
</style>