feat 页面页尾
This commit is contained in:
@@ -1,5 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
import { AppFooter, AppHeader, FilePreviewDialog } from '@/components'
|
||||
|
||||
const route = useRoute()
|
||||
// 需求提报 / 合同中心等特殊页不展示页脚(路由 meta.noFooter 控制)
|
||||
const showFooter = computed(() => !route.meta.noFooter)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -8,7 +14,7 @@ import { AppFooter, AppHeader, FilePreviewDialog } from '@/components'
|
||||
<main class="layout__main">
|
||||
<router-view />
|
||||
</main>
|
||||
<AppFooter />
|
||||
<AppFooter v-if="showFooter" />
|
||||
<!-- 全局文件预览弹窗(同源 OSS 预览,绕开桶强制下载) -->
|
||||
<FilePreviewDialog />
|
||||
</div>
|
||||
@@ -16,12 +22,19 @@ import { AppFooter, AppHeader, FilePreviewDialog } from '@/components'
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 公共底栏全站常驻(设计稿 43 张中除登录类外均带 481 高页脚)
|
||||
// sticky footer:.layout 至少占满视口 → 内容少时 footer 贴底不留白;
|
||||
// 内容多时 .layout 随内容长高,footer 自然落在内容下方(滚动可见)。
|
||||
// ⚠️ html 全局 zoom 会把内部 100vh 再缩一次,必须除以 @page-zoom(同 .auth-page)。
|
||||
.layout {
|
||||
.flex(column, flex-start, stretch);
|
||||
min-height: calc(100vh / @page-zoom);
|
||||
|
||||
@media (max-width: 1286px) {
|
||||
min-height: calc(100vh / @page-zoom--sm);
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
min-height: calc(100vh - @header-height - @footer-height);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user