Files
yuxingu-Miniprogram-dev/pages/yxg-magic/index.vue
T
jackyu66gitandCursor 605be2e480 fix: WebView 顶栏按胶囊按钮计算安全区并统一暖色背景
传入 menuButton.bottom 作为 sbh,page 与 globalStyle 设置 backgroundColorTop 避免刘海黑条。

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-25 01:22:40 +08:00

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>