<template>
|
<div class="pam-background">
|
<UiGoToTop></UiGoToTop>
|
<BackActionBar></BackActionBar>
|
<div class="pam-banner"
|
:class="bannerClassName">
|
<div class="pam-banner__text text--dark-blue">
|
<div class="mt-5"
|
v-for="(item,index) in getBannerTextList"
|
:key="index">
|
{{item}}
|
</div>
|
</div>
|
</div>
|
<div class="pam-container" :class="containClassName">
|
<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 {
|
private bannerTextDto:BannerDto= {
|
[RouterPage.RECOMMEND_CONSULTANT]: ['輸入問題回答', '依照你的需求推薦嚴選顧問'],
|
[RouterPage.QUICK_FILTER]: ['點選下方選項', '尋找你的BEST Match'],
|
[RouterPage.MY_CONSULTANT_LIST]:[],
|
[RouterPage.QUESTIONNAIRE]:[],
|
}
|
get getBannerTextList(): string[] {
|
return this.bannerTextDto[this.route] ? this.bannerTextDto[this.route] : [];
|
};
|
|
get route(): string{
|
const routeName = this.$route.name;
|
return routeName ? routeName:'';
|
};
|
|
get bannerClassName() {
|
return this.routeFormatBannerClass(this.route);
|
};
|
|
// format to {page}-banner or pam-no-banner tag
|
private routeFormatBannerClass(route: string): string {
|
const needBannerTags = ['recommendConsultant', 'quickFilter', 'myConsultantList-consultantList','myAppointmentList-appointmentList'];
|
return _.includes(needBannerTags, route) ? route + '-banner' : 'pam-no-banner';
|
};
|
|
get containClassName(): string {
|
return this.routeFormatContainClass(this.route);
|
};
|
|
// format to {page}-container tag
|
private routeFormatContainClass(route: string): string {
|
const needContainBgTags = ['recommendConsultant', 'questionnaire-agentNo'];
|
return _.includes(needContainBgTags, route) ? route + '-container' : '';
|
};
|
}
|
enum RouterPage {
|
RECOMMEND_CONSULTANT = 'recommendConsultant',
|
QUICK_FILTER = "quickFilter",
|
MY_CONSULTANT_LIST = "myConsultantList",
|
QUESTIONNAIRE = 'questionnaire',
|
}
|
type BannerDto={
|
[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;
|
}
|
|
@include desktop {
|
.pam-page-container {
|
width: 700px;
|
margin: 30px auto 0px auto;
|
}
|
.pam-banner__text{
|
width: 700px;
|
position: static !important;
|
margin: 30px auto 0px auto;
|
}
|
}
|
|
.pam-banner {
|
width: 100%;
|
height: 120px;
|
background-size: cover;
|
background-repeat: no-repeat;
|
background-position: center;
|
position: relative;
|
}
|
|
.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');
|
}
|
|
@media (min-width: 768px) {
|
&-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;
|
}
|
|
@media (min-width: 768px) {
|
&-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 {
|
&-banner {
|
background-image: url('~/assets/images/myConsultantList/banner_mob.svg');
|
}
|
|
@media (min-width: 768px) {
|
&-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;
|
}
|
|
@media (min-width: 768px) {
|
&-container {
|
background-image: url('~/assets/images/recommendConsultant/bg_flower_web.svg');
|
background-size: cover;
|
}
|
}
|
}
|
.myAppointmentList-appointmentList{
|
&-banner {
|
background-image: url('~/assets/images/myAppointmentList/agent_banner_mob.svg');
|
}
|
|
@media (min-width: 768px) {
|
&-banner {
|
background-image: url('~/assets/images/myAppointmentList/agent_banner_web.svg');
|
}
|
}
|
}
|
</style>
|
