From cd4a64b39c429f2f5b45cb042d1b66f1cd3904cd Mon Sep 17 00:00:00 2001
From: 劉鈞霖 <benson@gmail.com>
Date: 星期一, 15 十一月 2021 18:06:40 +0800
Subject: [PATCH] [ Update ] 更新 navbar 清單 根據 角色 顯示清單

---
 PAMapp/layouts/default.vue |  204 +++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 191 insertions(+), 13 deletions(-)

diff --git a/PAMapp/layouts/default.vue b/PAMapp/layouts/default.vue
index 4510e0c..faa3fe4 100644
--- a/PAMapp/layouts/default.vue
+++ b/PAMapp/layouts/default.vue
@@ -1,22 +1,200 @@
 <template>
-    <div>
-        <BackActionBar></BackActionBar>
-        <Nuxt class="container"></Nuxt>
+  <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>
 
-<style lang="scss" scoped>
+<script lang="ts">
+  import { Vue, Component } from 'vue-property-decorator';
+  import * as _ from 'lodash';
 
-    .container {
-        background-color: #F8F9FA;
-        padding: 0 20px;
+
+  @Component
+  export default class DefaultLayout extends Vue {
+    private bannerTextDto:BannerDto= {
+      [RouterPage.RECOMMEND_CONSULTANT]: ['頛詨������', '靘雿��瘙���憿批��'],
+      [RouterPage.QUICK_FILTER]: ['暺銝����', '撠雿�EST 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'];
+      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');
     }
 
-    @include desktop {
-        .container{
-            width: 700px;
-            margin: 0 auto;
-        }
+    @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;
     }
 
-</style>
\ No newline at end of file
+    &-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 {
+    &-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>

--
Gitblit v1.8.0