jackyu66gitandCursor
445e20d562
对齐 flex:1 webview、nav-row 宽度与 padding-top 计算，非 cover 层方案。 Co-authored-by: Cursor <cursoragent@cursor.com>
131 lines
2.6 KiB
Vue
131 lines
2.6 KiB
Vue
<template>
|
||
<!-- 顶栏在 web-view 外层（页面级），H5 只在下方 web-view 里 -->
|
||
<view class="yxg-page">
|
||
<view class="yxg-nav-bar" :style="navBarStyle">
|
||
<view class="yxg-nav-row" :style="navRowStyle">
|
||
<image
|
||
class="yxg-nav-logo"
|
||
:src="YXG_MP_LOGO_URL"
|
||
mode="aspectFit"
|
||
:style="logoStyle"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<web-view
|
||
class="yxg-webview"
|
||
:style="webviewStyle"
|
||
:src="h5Url"
|
||
@load="onWebLoad"
|
||
@error="onWebError"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import { YXG_H5_BASE, YXG_H5_VERSION, YXG_MP_LOGO_URL } from '@/util/yxgConfig.js'
|
||
|
||
function readWindow() {
|
||
// #ifdef MP-WEIXIN
|
||
if (typeof wx !== 'undefined' && wx.getWindowInfo) {
|
||
return wx.getWindowInfo()
|
||
}
|
||
// #endif
|
||
return uni.getSystemInfoSync()
|
||
}
|
||
|
||
const win = readWindow()
|
||
const statusBarH = win.statusBarHeight || 0
|
||
const windowH = win.windowHeight || win.screenHeight || 667
|
||
const screenW = win.windowWidth || win.screenWidth || 375
|
||
let navBarH = 44
|
||
let menuH = 32
|
||
|
||
// #ifdef MP-WEIXIN
|
||
try {
|
||
const menu = uni.getMenuButtonBoundingClientRect()
|
||
if (menu?.height) {
|
||
navBarH = (menu.top - statusBarH) * 2 + menu.height
|
||
menuH = menu.height
|
||
}
|
||
} catch (e) {
|
||
console.warn('[yxg-magic] menuButton rect failed', e)
|
||
}
|
||
// #endif
|
||
|
||
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 navBarStyle = `height:${headH}px;padding-top:${statusBarH}px;`
|
||
const navRowStyle = `height:${navBarH}px;`
|
||
const logoStyle = `width:${logoW}px;height:${logoH}px;`
|
||
const webviewStyle = `height:${webviewH}px;`
|
||
|
||
/** web-view 已在导航下方，H5 只需极小顶距 */
|
||
const h5Url = computed(
|
||
() =>
|
||
`${YXG_H5_BASE}?mp=1&nh=1&sbh=4&v=${YXG_H5_VERSION}#wechat_redirect`,
|
||
)
|
||
|
||
function onWebLoad(e) {
|
||
console.log('[yxg-magic] web-view load', e?.detail || e)
|
||
}
|
||
|
||
function onWebError(e) {
|
||
console.error('[yxg-magic] web-view error', e?.detail || e)
|
||
uni.showToast({
|
||
title: 'H5加载失败，请检查业务域名',
|
||
icon: 'none',
|
||
duration: 3000,
|
||
})
|
||
}
|
||
|
||
console.log('[yxg-magic] outer nav + webview', {
|
||
headH,
|
||
webviewH,
|
||
logoW,
|
||
logoH,
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #ffd1c7;
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.yxg-page {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.yxg-nav-bar {
|
||
flex-shrink: 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background-color: #ffd1c7;
|
||
}
|
||
|
||
.yxg-nav-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.yxg-nav-logo {
|
||
display: block;
|
||
}
|
||
|
||
.yxg-webview {
|
||
flex: 1;
|
||
width: 100%;
|
||
}
|
||
</style>
|