fix(h5): 修复小程序 WebView 内 logo 与备案号展示
Logo 改用 BASE_URL 路径并在 embed 模式始终显示顶部栏;备案号改为页面底部文档流,避免悬浮遮挡内容。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user