@@ -1,7 +1,16 @@
|
||||
<template>
|
||||
<van-config-provider :theme="theme">
|
||||
<RouterView />
|
||||
<van-tabbar v-model="active" v-show="showTabbar" fixed>
|
||||
<van-config-provider :theme="theme" class="app-root">
|
||||
<pre
|
||||
style="position:fixed; left:0; top:0; z-index:9999;
|
||||
background:rgba(0,0,0,0.7); color:#0f0;
|
||||
font-size:10px; max-height:50vh; overflow:auto;">
|
||||
{{ log }}
|
||||
</pre>
|
||||
|
||||
<div class="app-main">
|
||||
<RouterView />
|
||||
</div>
|
||||
<van-tabbar v-model="active" v-show="showTabbar">
|
||||
<van-tabbar-item icon="notes-o" to="/calendar">
|
||||
日历
|
||||
</van-tabbar-item>
|
||||
@@ -22,6 +31,31 @@
|
||||
import { RouterView, useRoute } from 'vue-router'
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
|
||||
const log = ref('')
|
||||
|
||||
const updateInfo = () => {
|
||||
log.value = JSON.stringify({
|
||||
innerHeight: window.innerHeight,
|
||||
outerHeight: window.outerHeight,
|
||||
documentElementClientHeight: document.documentElement.clientHeight,
|
||||
viewport: window.visualViewport
|
||||
? {
|
||||
height: window.visualViewport.height,
|
||||
offsetTop: window.visualViewport.offsetTop,
|
||||
}
|
||||
: null,
|
||||
}, null, 2)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateInfo()
|
||||
window.addEventListener('resize', updateInfo)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateInfo)
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
// 根据路由判断是否显示Tabbar
|
||||
const showTabbar = computed(() => {
|
||||
@@ -64,8 +98,16 @@ const handleTabClick = (path) => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* TabBar 固定在底部,不占用文档流空间 */
|
||||
:deep(.van-tabbar) {
|
||||
padding-bottom: 0 !important;
|
||||
.app-root {
|
||||
/* 用前面的 JS 动态高度方案,或至少用 100% 而不是 100vh */
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 主体内容自己撑开,给 Tabbar 留出空间 */
|
||||
.app-main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -183,10 +183,9 @@ fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
|
||||
|
||||
<style scoped>
|
||||
.calendar-container {
|
||||
height: calc(100vh - 50px);
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.calendar-container :deep(.van-calendar) {
|
||||
|
||||
Reference in New Issue
Block a user