传入 menuButton.bottom 作为 sbh,page 与 globalStyle 设置 backgroundColorTop 避免刘海黑条。 Co-authored-by: Cursor <cursoragent@cursor.com>
43 lines
867 B
Vue
43 lines
867 B
Vue
<template>
|
|
<web-view class="yxg-webview" :src="h5Url"></web-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { YXG_H5_BASE, YXG_H5_VERSION } from '@/util/yxgConfig.js'
|
|
|
|
/** H5 顶栏安全区:状态栏 + 胶囊行,避免 logo 与内容重叠 */
|
|
function topInsetPx() {
|
|
const sys = uni.getSystemInfoSync()
|
|
const statusBar = sys.statusBarHeight || 0
|
|
// #ifdef MP-WEIXIN
|
|
try {
|
|
const menu = uni.getMenuButtonBoundingClientRect()
|
|
if (menu && menu.bottom > statusBar) {
|
|
return Math.ceil(menu.bottom + 6)
|
|
}
|
|
} catch (_) {}
|
|
// #endif
|
|
return statusBar + 44
|
|
}
|
|
|
|
const topInset = topInsetPx()
|
|
const h5Url = computed(
|
|
() => `${YXG_H5_BASE}?mp=1&v=${YXG_H5_VERSION}&sbh=${topInset}`,
|
|
)
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #ffd1c7;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.yxg-webview {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|