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 | 70 +++++++++++++++++++++++++++++++++++
1 files changed, 70 insertions(+), 0 deletions(-)
diff --git a/PAMapp/layouts/default.vue b/PAMapp/layouts/default.vue
index 34d8fd1..84883c3 100644
--- a/PAMapp/layouts/default.vue
+++ b/PAMapp/layouts/default.vue
@@ -1,13 +1,44 @@
<template>
<div class="pam-background">
+ <UiGoToTop></UiGoToTop>
<BackActionBar></BackActionBar>
+ <div class="banner" :class="bannerClassName"></div>
<Nuxt class="page-container"></Nuxt>
+ <Footer ref="defaultLayoutFooter"></Footer>
</div>
</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+
+@Component
+export default class DefaultLayout extends Vue {
+ pageHieght = '';
+
+ get bannerClassName() {
+ if (this.$route.name) {
+ return this.noBanner(this.$route.name) ? 'noBanner' : this.$route.name.split('-')[0]
+ } else {
+ return '';
+ }
+ }
+
+ noBanner(routerName : string) {
+ return routerName.match('questionnaire') || routerName.match('agentInfo');
+ }
+
+}
+</script>
<style lang="scss" scoped>
.pam-background {
background-color: #F8F9FA;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ .page-container {
+ flex: 1;
+ }
}
.page-container {
@@ -22,4 +53,43 @@
}
}
+ .banner {
+ width: 100%;
+ height: 120px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ .noBanner {
+ display: none;
+ }
+
+ .quickFilter {
+ background-image: url('~/assets/images/quickFilter/banner_mob.svg');
+ }
+
+ .recommendConsultant {
+ background-image: url('~/assets/images/recommendConsultant/banner_mob.svg');
+ }
+
+ .myConsultantList {
+ background-image: url('~/assets/images/myConsultantList/banner_mob.svg');
+ }
+
+ @media (min-width: 768px) {
+
+ .quickFilter {
+ background-image: url('~/assets/images/quickFilter/banner_web.svg');
+ }
+
+ .recommendConsultant {
+ background-image: url('~/assets/images/recommendConsultant/banner_web.svg');
+ }
+
+ .myConsultantList {
+ background-image: url('~/assets/images/myConsultantList/banner_web.svg');
+ }
+ }
+
</style>
--
Gitblit v1.8.0