75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<script setup>
|
||
import { ref } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import Footer from './components/Footer.vue';
|
||
import Toolbar from './components/Toolbar.vue';
|
||
|
||
const router = useRouter();
|
||
const isContentLoaded = ref(false);
|
||
|
||
// 等待路由完全就绪（所有初始导航和异步组件加载完毕）
|
||
router.isReady().then(() => {
|
||
isContentLoaded.value = true;
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div id="contentPane">
|
||
<Toolbar></Toolbar>
|
||
<div v-if="$route.path === '/ContactUs'">
|
||
<router-view/>
|
||
<!-- 如果 ContactUs 页面也需要Footer并同样逻辑加载，则也加上 v-if -->
|
||
<!--
|
||
<div id="footer" v-if="isContentLoaded">
|
||
<Footer></Footer>
|
||
</div>
|
||
-->
|
||
</div>
|
||
<div v-else id="defaultcontainer">
|
||
<div id="content"><router-view/></div>
|
||
<!-- 仅当 isContentLoaded 为 true 时渲染 Footer -->
|
||
<div id="footer" v-if="isContentLoaded">
|
||
<Footer></Footer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
@import "node_modules/bootstrap/scss/_functions.scss";
|
||
@import "node_modules/bootstrap/scss/_variables.scss";
|
||
@import "node_modules/bootstrap/scss/_mixins.scss";
|
||
|
||
#contentPane{
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
width: 100%;
|
||
//裁剪多余区域
|
||
overflow: hidden;
|
||
}
|
||
#defaultcontainer{
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh; /* 确保在内容不足时，Footer也能被推到底部 */
|
||
}
|
||
#content{
|
||
display: flex;
|
||
position: relative;
|
||
flex:1; /* 关键：让内容区占据所有可用空间，将Footer推到底部 */
|
||
width: 100%;
|
||
/* min-height: 100%; 这行可能不再需要，因为父容器已经是flex并且此元素flex:1 */
|
||
}
|
||
|
||
#footer{
|
||
margin-top: 0px; /* 或者 auto，取决于具体设计 */
|
||
/* flex-shrink: 0; // 防止Footer在空间不足时被压缩，如果需要的话 */
|
||
}
|
||
|
||
@include media-breakpoint-between(xs, md) {
|
||
}
|
||
|
||
@include media-breakpoint-up(md) {
|
||
}
|
||
</style>
|