<template>
|
<div class="pam-background">
|
<UiGoToTop></UiGoToTop>
|
<NavBar></NavBar>
|
<BackActionBar></BackActionBar>
|
<div class="pam-banner"
|
:class="bannerClassName">
|
<div class="pam-banner__text text--dark-blue">
|
<div class="mt-5"
|
v-for="(bannerText, index) in bannerTextList"
|
:key="index">
|
{{ bannerText }}
|
</div>
|
</div>
|
</div>
|
<div
|
class="pam-container"
|
:class="[containClassName, {'mt-navBar': bannerClassName === 'pam-no-banner'} ]"
|
>
|
<Nuxt class="pam-page-container"></Nuxt>
|
</div>
|
<Footer></Footer>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
import * as _ from 'lodash';
|
|
@Component
|
export default class DefaultLayout extends Vue {
|
|
get route(): string{
|
const routeName = this.$route.name;
|
return routeName ? routeName : '';
|
};
|
|
get bannerTextList(): string[] {
|
return this.bannerText[this.route];
|
};
|
|
get containClassName(): string {
|
return this.routeFormatContainClass(this.route);
|
};
|
|
get bannerClassName() {
|
return this.routeFormatBannerClass(this.route);
|
};
|
|
//////////////////////////////////////////////////////////////////////
|
|
// format to {page}-container tag
|
private routeFormatContainClass(route: string): string {
|
const needContainBgRoutes = ['recommendConsultant', 'questionnaire-agentNo'];
|
return _.includes(needContainBgRoutes, route) ? route + '-container' : '';
|
};
|
|
// format to {page}-banner or pam-no-banner tag
|
private routeFormatBannerClass(route: string): string {
|
const needBannerRoutes = ['recommendConsultant', 'quickFilter', 'myConsultantList-consultantList', 'myConsultantList-contactedList', 'myAppointmentList-appointmentList', 'myAppointmentList-contactedList', 'login', 'notification'];
|
return _.includes(needBannerRoutes, route) ? route + '-banner' : 'pam-no-banner';
|
};
|
|
private bannerText: FeatureBannerTitle= {
|
[FeaturePage.RECOMMEND_CONSULTANT]: ['輸入問題回答', '依照您的需求推薦嚴選顧問'],
|
[FeaturePage.QUICK_FILTER] : ['點選下方選項', '尋找您的BEST Match'],
|
[FeaturePage.MY_CONSULTANT_LIST] : [],
|
[FeaturePage.QUESTIONNAIRE] : [],
|
}
|
|
}
|
|
enum FeaturePage {
|
RECOMMEND_CONSULTANT = 'recommendConsultant',
|
QUICK_FILTER = "quickFilter",
|
MY_CONSULTANT_LIST = "myConsultantList",
|
QUESTIONNAIRE = 'questionnaire',
|
}
|
|
interface FeatureBannerTitle {
|
[x:string]: string[];
|
};
|
|
</script>
|
|
<style lang="scss"
|
scoped>
|
.pam-background {
|
background-color: #F8F9FA;
|
display: flex;
|
flex-direction: column;
|
min-height: 100vh;
|
.pam-container{
|
flex: 1;
|
}
|
}
|
|
.pam-page-container {
|
margin: 30px 20px;
|
}
|
|
.pam-banner {
|
width: 100%;
|
height: 120px;
|
background-size: cover;
|
background-repeat: no-repeat;
|
background-position: center;
|
position: relative;
|
@extend .mt-navBar;
|
}
|
|
.mt-navBar {
|
margin-top: calc($MOB_NAV_BAR * 2);
|
}
|
|
@include desktop {
|
.pam-banner {
|
height: 150px;
|
}
|
.mt-navBar {
|
margin-top: calc($DESKTOP_NAV_BAR + $MOB_NAV_BAR);
|
}
|
.pam-page-container {
|
width: 700px;
|
margin: 30px auto;
|
}
|
.pam-banner__text{
|
width: 700px;
|
position: static !important;
|
margin: 30px auto 0px auto;
|
}
|
}
|
|
.pam-banner__text {
|
font-size: 18px;
|
font-weight: bold;
|
position: absolute;
|
bottom: 15px;
|
left: 25px;
|
|
div:first-child {
|
margin: 0px;
|
}
|
}
|
|
.pam-no-banner {
|
display: none;
|
}
|
// page
|
.quickFilter {
|
&-banner {
|
background-image: url('~/assets/images/quickFilter/banner_mob.svg');
|
}
|
|
@include desktop {
|
&-banner {
|
background-image: url('~/assets/images/quickFilter/banner_web.svg');
|
}
|
}
|
}
|
|
.recommendConsultant {
|
&-banner {
|
background-image: url('~/assets/images/recommendConsultant/banner_mob.svg');
|
background-size: cover;
|
}
|
|
&-container {
|
background-image: url('~/assets/images/recommendConsultant/bg_flower_mob.svg');
|
background-size: contain;
|
}
|
|
@include desktop {
|
&-banner {
|
background-image: url('~/assets/images/recommendConsultant/banner_web.svg');
|
background-size: cover;
|
}
|
|
&-container {
|
background-image: url('~/assets/images/recommendConsultant/bg_flower_web.svg');
|
background-size: cover;
|
}
|
}
|
|
}
|
|
.myConsultantList-consultantList,.myConsultantList-contactedList {
|
&-banner {
|
background-image: url('~/assets/images/myConsultantList/banner_mob.svg');
|
}
|
|
@include desktop {
|
&-banner {
|
background-image: url('~/assets/images/myConsultantList/banner_web.svg');
|
}
|
}
|
}
|
|
.questionnaire-agentNo {
|
&-container {
|
background-image: url('~/assets/images/recommendConsultant/bg_flower_mob.svg');
|
background-size: contain;
|
}
|
|
@include desktop {
|
&-container {
|
background-image: url('~/assets/images/recommendConsultant/bg_flower_web.svg');
|
background-size: cover;
|
}
|
}
|
}
|
|
.login {
|
&-banner {
|
background-image: url('~/assets/images/login/login_mob.svg');
|
}
|
|
@include desktop {
|
&-banner {
|
background-image: url('~/assets/images/login/login_web.svg');
|
}
|
}
|
}
|
|
.notification {
|
&-banner {
|
background-image: url('~/assets/images/notification/banner_mob.svg');
|
}
|
|
@include desktop {
|
&-banner {
|
background-image: url('~/assets/images/notification/banner_web.svg');
|
}
|
}
|
}
|
|
</style>
|
