[ Update ] :新增Banner 文字，以及各區塊背景設定，修正 element button hover 顏色

劉鈞霖

2021-11-15 0dd47f20adb82f7c6968d9c1077e91625f27bc69

 PAMapp/layouts/default.vue

@@ -1,95 +1,189 @@
<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 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 { Vue, Component } from 'vue-property-decorator';
  import * as _ from 'lodash';

@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 '';
  @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] : [];
    };

  noBanner(routerName : string) {
    return routerName.match('questionnaire') || routerName.match('agentInfo');
  }
    get route(): string {
      return _.split(this.$route.name, '-')[0];
    };

}
    get bannerClassName() {
      return this.route ? this.routeFormatBannerClass(this.route) : '';
    };

    // format to {page}-banner or pam-no-banner tag
    private routeFormatBannerClass(route: string): string {
      const needBannerTags = ['recommendConsultant', 'quickFilter', 'myConsultantList'];
      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'];
      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>
<style lang="scss"
  scoped>
  .pam-background {
    background-color: #F8F9FA;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    .page-container {
    .pam-container{
      flex: 1;
    }
  }

  .page-container {
    padding: 30px 40px;
  .pam-page-container {
    margin: 30px 20px;
  }

  @include desktop {
    .page-container{
    .pam-page-container {
      width: 700px;
      margin: 0 auto;
      margin: 30px auto 0px auto;
      overflow-x: hidden;
    }
    .pam-banner__text{
      width: 700px;
      position: static !important;
      margin: 30px auto 0px auto;
    }
  }

  .banner {
  .pam-banner {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
  }

  .noBanner {
  .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 {
    background-image: url('~/assets/images/quickFilter/banner_mob.svg');
    &-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 {
    background-image: url('~/assets/images/recommendConsultant/banner_mob.svg');
    &-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 {
    background-image: url('~/assets/images/myConsultantList/banner_mob.svg');
  }

  @media (min-width: 768px) {

    .quickFilter {
      background-image: url('~/assets/images/quickFilter/banner_web.svg');
    &-banner {
      background-image: url('~/assets/images/myConsultantList/banner_mob.svg');
    }

    .recommendConsultant {
      background-image: url('~/assets/images/recommendConsultant/banner_web.svg');
    }

    .myConsultantList {
      background-image: url('~/assets/images/myConsultantList/banner_web.svg');
    @media (min-width: 768px) {
      &-banner {
        background-image: url('~/assets/images/myConsultantList/banner_web.svg');
      }
    }
  }

  .questionnaire {
    &-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;
      }
    }
  }
</style>