fix(h5): 修复小程序 WebView 内 logo 与备案号展示

Logo 改用 BASE_URL 路径并在 embed 模式始终显示顶部栏;备案号改为页面底部文档流,避免悬浮遮挡内容。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
2026-08-25 01:04:18 +08:00
co-authored by Cursor
parent ebc2d3ad80
commit 635a83fe11
4 changed files with 17 additions and 21 deletions
+3 -6
View File
@@ -1,22 +1,19 @@
<template> <template>
<div class="app-shell" :class="{ 'mp-embed': mpEmbed }"> <div class="app-shell" :class="{ 'mp-embed': mpEmbed }">
<AppHeader v-if="!mpEmbed || showEmbedHeader" /> <div class="app-body">
<AppHeader />
<router-view /> <router-view />
</div>
<IcpFooter /> <IcpFooter />
<TabBar v-if="!mpEmbed" /> <TabBar v-if="!mpEmbed" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import AppHeader from './components/AppHeader.vue' import AppHeader from './components/AppHeader.vue'
import IcpFooter from './components/IcpFooter.vue' import IcpFooter from './components/IcpFooter.vue'
import TabBar from './components/TabBar.vue' import TabBar from './components/TabBar.vue'
import { isMpEmbed } from './lib/mpEmbed' import { isMpEmbed } from './lib/mpEmbed'
const route = useRoute()
const mpEmbed = isMpEmbed() const mpEmbed = isMpEmbed()
/** Sub-pages in web-view: show back only; home hides duplicate chrome. */
const showEmbedHeader = computed(() => mpEmbed && route.path !== '/')
</script> </script>
+3 -1
View File
@@ -2,7 +2,7 @@
<img <img
class="brand-logo" class="brand-logo"
:class="size" :class="size"
src="/logo.png?v=3" :src="logoSrc"
alt="愈心谷" alt="愈心谷"
decoding="async" decoding="async"
/> />
@@ -16,6 +16,8 @@ withDefaults(
}>(), }>(),
{ size: 'header' }, { size: 'header' },
) )
const logoSrc = `${import.meta.env.BASE_URL}logo.png?v=3`
</script> </script>
<style scoped> <style scoped>
+4 -11
View File
@@ -13,20 +13,13 @@ const mpEmbed = isMpEmbed()
<style scoped> <style scoped>
.icp-footer { .icp-footer {
position: fixed; flex-shrink: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: var(--yxg-max-w);
bottom: calc(var(--yxg-nav-h) + env(safe-area-inset-bottom, 0px));
z-index: 90;
text-align: center; text-align: center;
padding: 4px 12px; padding: 20px 12px 8px;
background: rgba(255, 252, 250, 0.92); margin-top: 8px;
border-top: 1px solid rgba(240, 230, 224, 0.6);
} }
.icp-footer.mp-embed { .icp-footer.mp-embed {
bottom: env(safe-area-inset-bottom, 0px); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
} }
.icp-link { .icp-link {
font-size: 11px; font-size: 11px;
+6 -2
View File
@@ -14,11 +14,15 @@ body{
} }
.app-shell{ .app-shell{
max-width:var(--yxg-max-w);margin:0 auto;min-height:100vh; max-width:var(--yxg-max-w);margin:0 auto;min-height:100vh;
padding-bottom:calc(var(--yxg-nav-h) + env(safe-area-inset-bottom,0px) + 36px); display:flex;flex-direction:column;
padding-bottom:calc(var(--yxg-nav-h) + env(safe-area-inset-bottom,0px));
position:relative; position:relative;
} }
.app-body{
flex:1 0 auto;
}
.app-shell.mp-embed{ .app-shell.mp-embed{
padding-bottom:calc(env(safe-area-inset-bottom,0px) + 36px); padding-bottom:env(safe-area-inset-bottom,0px);
} }
a{color:inherit;text-decoration:none} a{color:inherit;text-decoration:none}