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>
|
||||
<div class="app-shell" :class="{ 'mp-embed': mpEmbed }">
|
||||
<AppHeader v-if="!mpEmbed || showEmbedHeader" />
|
||||
<router-view />
|
||||
<div class="app-body">
|
||||
<AppHeader />
|
||||
<router-view />
|
||||
</div>
|
||||
<IcpFooter />
|
||||
<TabBar v-if="!mpEmbed" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import AppHeader from './components/AppHeader.vue'
|
||||
import IcpFooter from './components/IcpFooter.vue'
|
||||
import TabBar from './components/TabBar.vue'
|
||||
import { isMpEmbed } from './lib/mpEmbed'
|
||||
|
||||
const route = useRoute()
|
||||
const mpEmbed = isMpEmbed()
|
||||
/** Sub-pages in web-view: show back only; home hides duplicate chrome. */
|
||||
const showEmbedHeader = computed(() => mpEmbed && route.path !== '/')
|
||||
</script>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<img
|
||||
class="brand-logo"
|
||||
:class="size"
|
||||
src="/logo.png?v=3"
|
||||
:src="logoSrc"
|
||||
alt="愈心谷"
|
||||
decoding="async"
|
||||
/>
|
||||
@@ -16,6 +16,8 @@ withDefaults(
|
||||
}>(),
|
||||
{ size: 'header' },
|
||||
)
|
||||
|
||||
const logoSrc = `${import.meta.env.BASE_URL}logo.png?v=3`
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -13,20 +13,13 @@ const mpEmbed = isMpEmbed()
|
||||
|
||||
<style scoped>
|
||||
.icp-footer {
|
||||
position: fixed;
|
||||
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;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
padding: 4px 12px;
|
||||
background: rgba(255, 252, 250, 0.92);
|
||||
border-top: 1px solid rgba(240, 230, 224, 0.6);
|
||||
padding: 20px 12px 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.icp-footer.mp-embed {
|
||||
bottom: env(safe-area-inset-bottom, 0px);
|
||||
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
.icp-link {
|
||||
font-size: 11px;
|
||||
|
||||
@@ -14,11 +14,15 @@ body{
|
||||
}
|
||||
.app-shell{
|
||||
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;
|
||||
}
|
||||
.app-body{
|
||||
flex:1 0 auto;
|
||||
}
|
||||
.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}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user