From 6e27ae8c429549cc568ed0bc4e0bd22c8d3e0611 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期五, 12 十一月 2021 13:22:24 +0800
Subject: [PATCH] update: [default_layout] 調整自適應 page 高度的方式
---
PAMapp/layouts/default.vue | 23 +++++++----------------
1 files changed, 7 insertions(+), 16 deletions(-)
diff --git a/PAMapp/layouts/default.vue b/PAMapp/layouts/default.vue
index 72f1566..84883c3 100644
--- a/PAMapp/layouts/default.vue
+++ b/PAMapp/layouts/default.vue
@@ -3,7 +3,7 @@
<UiGoToTop></UiGoToTop>
<BackActionBar></BackActionBar>
<div class="banner" :class="bannerClassName"></div>
- <Nuxt class="page-container" :style="{ height: pageHieght}" ref="pageContainer"></Nuxt>
+ <Nuxt class="page-container"></Nuxt>
<Footer ref="defaultLayoutFooter"></Footer>
</div>
</template>
@@ -27,27 +27,18 @@
return routerName.match('questionnaire') || routerName.match('agentInfo');
}
- mounted() {
- window.addEventListener('resize', this.handleResize);
- this.handleResize();
- }
-
- handleResize(): void {
- const pageContainer: any = this.$refs.pageContainer;
- const footer: any = this.$refs.defaultLayoutFooter;
- const pageAlignPadding = 80;
- const deviceExtraHeight = 36;
- if ((pageContainer.$el.clientHeight + footer.$el.clientHeight) < window.innerHeight) {
- this.pageHieght = (window.innerHeight - footer.$el.clientHeight - pageAlignPadding - deviceExtraHeight) + 'px';
- }
- }
-
}
</script>
<style lang="scss" scoped>
.pam-background {
background-color: #F8F9FA;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ .page-container {
+ flex: 1;
+ }
}
.page-container {
--
Gitblit v1.8.0