liveh5-nuxt/app/components/AppHeader.vue
xingyy c04297d20a feat(AppHeader): 添加自定义标题和副标题
- 在 AppHeader 组件中添加了自定义标题和副标题
- 使用 flex布局实现了标题和副标题的居中显示
- 设置了不同的文本颜色和字体大小,提高了可读性
2025-01-10 16:52:58 +08:00

40 lines
986 B
Vue

<script setup lang="ts">
import { useAppFooterRouteNames as routeWhiteList } from '~/config'
const route = useRoute()
const router = useRouter()
function onBack() {
if (window.history.state.back)
history.back()
else
router.replace('/')
}
const { t } = useI18n()
const title = computed(() => {
if (!route.meta)
return ''
return route.meta.i18n ? t(route.meta.i18n) : (route.meta.title || '')
})
const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
</script>
<template>
<VanNavBar
:title="title"
:left-arrow="!showLeftArrow"
placeholder clickable fixed
@click-left="onBack"
>
<template #title>
<div class="flex flex-col items-center justify-center">
<div class="text-#000000 text-17px mb-5px font-600">京都拍卖会</div>
<div class="text-#939393 text-10px line-height-none font-100">2025.01.18 蒙娜丽莎的微笑</div>
</div>
</template>
</VanNavBar>
</template>