From 24768447eb96cc820b9ee69a0024836465b7128b Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期六, 06 十一月 2021 09:44:53 +0800
Subject: [PATCH] add#129851 - [default layout] 自適應調整 page 高度
---
PAMapp/layouts/default.vue | 52 +++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 49 insertions(+), 3 deletions(-)
diff --git a/PAMapp/layouts/default.vue b/PAMapp/layouts/default.vue
index d9beab5..eff35a8 100644
--- a/PAMapp/layouts/default.vue
+++ b/PAMapp/layouts/default.vue
@@ -1,5 +1,51 @@
<template>
- <div>
- <Nuxt></Nuxt>
+ <div class="pam-background">
+ <UiGoToTop></UiGoToTop>
+ <BackActionBar></BackActionBar>
+ <Nuxt class="page-container" :style="{ height: pageHieght}" ref="pageContainer"></Nuxt>
+ <Footer ref="defaultLayoutFooter"></Footer>
</div>
-</template>
\ No newline at end of file
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+
+@Component
+export default class DefaultLayout extends Vue {
+ pageHieght = '';
+
+ 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;
+ }
+
+ .page-container {
+ padding: 30px 40px;
+ }
+
+ @include desktop {
+ .page-container{
+ width: 700px;
+ margin: 0 auto;
+ overflow-x: hidden;
+ }
+ }
+
+</style>
--
Gitblit v1.8.0