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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user