jackyu66gitandCursor
cfe13cbecf
WebView 全屏 + cover-image 网络 logo；开发模式自动指向本机 Vite，同步 H5 品牌 logo。 Co-authored-by: Cursor <cursoragent@cursor.com>
88 lines
1.7 KiB
Vue
88 lines
1.7 KiB
Vue
<template>
|
|
<view class="yxg-page">
|
|
<web-view class="yxg-webview" :src="h5Url" />
|
|
<cover-view class="yxg-cover" :style="coverStyle">
|
|
<cover-image class="yxg-cover-logo" :src="logoSrc" :style="logoStyle" />
|
|
</cover-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { YXG_H5_BASE, YXG_H5_VERSION, YXG_H5_LOGO_URL } from '@/util/yxgConfig.js'
|
|
|
|
const sys = uni.getSystemInfoSync()
|
|
const statusBarH = sys.statusBarHeight || 0
|
|
const screenW = sys.windowWidth || 375
|
|
let navBarH = 44
|
|
|
|
// #ifdef MP-WEIXIN
|
|
try {
|
|
const menu = uni.getMenuButtonBoundingClientRect()
|
|
if (menu?.height) {
|
|
navBarH = (menu.top - statusBarH) * 2 + menu.height
|
|
}
|
|
} catch (_) {}
|
|
// #endif
|
|
|
|
const headH = statusBarH + navBarH
|
|
const logoW = Math.min(148, Math.floor(screenW * 0.48))
|
|
const logoH = 36
|
|
const logoLeft = Math.floor((screenW - logoW) / 2)
|
|
const logoTop = statusBarH + Math.floor((navBarH - logoH) / 2)
|
|
|
|
const logoSrc = ref(YXG_H5_LOGO_URL)
|
|
|
|
onMounted(() => {
|
|
uni.downloadFile({
|
|
url: YXG_H5_LOGO_URL,
|
|
success(res) {
|
|
if (res.statusCode === 200 && res.tempFilePath) {
|
|
logoSrc.value = res.tempFilePath
|
|
}
|
|
},
|
|
})
|
|
})
|
|
|
|
const coverStyle = {
|
|
position: 'fixed',
|
|
top: '0',
|
|
left: '0',
|
|
width: '100%',
|
|
height: `${headH}px`,
|
|
backgroundColor: '#ffd1c7',
|
|
zIndex: '9999',
|
|
}
|
|
|
|
const logoStyle = {
|
|
position: 'absolute',
|
|
left: `${logoLeft}px`,
|
|
top: `${logoTop}px`,
|
|
width: `${logoW}px`,
|
|
height: `${logoH}px`,
|
|
}
|
|
|
|
const h5Url = computed(
|
|
() => `${YXG_H5_BASE}?mp=1&nh=1&v=${YXG_H5_VERSION}`,
|
|
)
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #ffd1c7;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.yxg-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #ffd1c7;
|
|
}
|
|
.yxg-webview {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|