<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 {
|
padding: 30px 40px;
|
}
|
|
@include desktop {
|
.page-container{
|
width: 700px;
|
margin: 0 auto;
|
overflow-x: hidden;
|
}
|
}
|
|
.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>
|
