d27e6bc0c5
- 新增 fullLive 全局状态管理直播间的全屏状态 - 修改 AppHeader组件，根据 fullLive 状态控制返回按钮的显示 - 更新 default 布局，根据 fullLive 状态控制 AppFooter 的显示- 调整 LiveRoom组件，支持全屏模式下的布局变化 - 修改 home 页面，实现直播间全屏和列表之间的切换
52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<script setup>
|
|
import { useAppFooterRouteNames as routeWhiteList } from '~/config'
|
|
import { homeStore } from "@/stores/home/index.js";
|
|
const { fullLive } = homeStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
function onBack() {
|
|
if (fullLive.value){
|
|
fullLive.value=false
|
|
return
|
|
}
|
|
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 subTitle = computed(() => {
|
|
if (!route.meta)
|
|
return ''
|
|
return route.meta.subTitle ? t(route.meta.subTitle) : ''
|
|
})
|
|
const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<VanNavBar
|
|
:title="title"
|
|
:left-arrow="!showLeftArrow||fullLive"
|
|
placeholder clickable fixed
|
|
@click-left="onBack"
|
|
>
|
|
<template #title v-if="route.meta.i18n==='menu.home'">
|
|
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div class="text-#000000 text-17px mb-5px font-600">{{ title }}</div>
|
|
<div class="text-#939393 text-10px line-height-none font-100">{{subTitle}}</div>
|
|
</div>
|
|
</template>
|
|
</VanNavBar>
|
|
</template>
|