Merge remote-tracking branch 'origin/master'

wayne

2021-11-02 458f7fed791b6e7c64096d810c961cea441bd772

Merge remote-tracking branch 'origin/master'

 PAMapp/assets/scss/_common.scss

@@ -2,8 +2,9 @@
// reset
html,body {
    margin: 0;
    color: $black;
    color: $PRIMARY_BLACK;
    font-family: Segoe UI;
    overflow-x: hidden;
}

h5 {
@@ -24,46 +25,19 @@
.outline_btn {
    padding: 10px 20px;
    border-radius: 30px;
    color: $primaryRed;
    color: $PRIMARY_RED;
    border: solid 2px;

    &:hover {
        color: $primaryRed;
        background-color: $white;
        color: $PRIMARY_RED;
        background-color: $PRIMARY_WHITE;
    }

    &:focus {
        background-color: $coral;
        background-color: $CORAL;
    }

    &:disabled {
        background-color: $lightGrey;
        background-color: $LIGHT_GREY;
    }
}



// el-carousel
.el-carousel__indicators--outside {
    .el-carousel__indicator--horizontal {
        .el-carousel__button {
            width: 9px;
            height: 9px;
            border-radius: 50px;
            border: solid 1px $lightGrey;
            background-color: $white;
        }

        &.is-active {
            .el-carousel__button {
                background-color: $primaryRed;
            }
        }
    }

    .el-carousel__indicator--horizontal:nth-child(2) {
        .el-carousel__button {
            margin: 0 20px;
        }
    }
}
}

 PAMapp/assets/scss/_mixin.scss

@@ -6,12 +6,12 @@

@mixin btn {
    border-radius: 30px;
    background-color: $primaryRed;
    color: $white;
    background-color: $PRIMARY_RED;
    color: $PRIMARY_WHITE;

    &:hover {
        background-color: $primaryRed;
        color: $white;
        background-color: $PRIMARY_RED;
        color: $PRIMARY_WHITE;
    }

    &:focus {
@@ -19,7 +19,7 @@
    }

    &:disabled {
        background-color: $lightGrey;
        background-color: $LIGHT_GREY;
    }
}


 PAMapp/assets/scss/_variable.scss

@@ -1,21 +1,17 @@
$primaryRed: #ED1B2E;
$white: #ffffff;
$black: #222222;
$PRIMARY_RED: #ED1B2E;
$PRIMARY_WHITE: #ffffff;
$PRIMARY_BLACK: #222222;

$orange: #E87722;
$yellow: #F2C75C;
$peach: #ECC3B2;
$coral: #F09491;
$tealGreen: #5CB8B2;
$skyBlue: #009CBD;
$lightBlue: #8DB9CA;
$darkBlue: #1B365D;
$beige: #A89968;
$prudentialGrey: #68737A;
$lightGrey: #D0D0CE;
$midGrey: #A7A8AA;
$green: #06A633;

$PRIMARY: #ED1B2E;
$SECONDARY: #E87722;
$INFO: #1B365D;
$ORANGE: #E87722;
$YELLOW: #F2C75C;
$PEACH: #ECC3B2;
$CORAL: #F09491;
$TEAL_GREEN: #5CB8B2;
$SKY_BLUE: #009CBD;
$LIGHT_BLUE: #8DB9CA;
$DARK_BLUE: #1B365D;
$BEIGE: #A89968;
$PRUDENTIAL_GREY: #68737A;
$LIGHT_GREY: #D0D0CE;
$MID_GREY: #A7A8AA;
$GREEN: #06A633;

 PAMapp/assets/scss/utilities/_heading.scss

@@ -39,14 +39,26 @@
  font-weight: bold;
}

.text--center {
  text-align: center;
}

.text--primary {
  color: $PRIMARY;
  color: $PRIMARY_RED;
}

.text--secondary {
  color: $SECONDARY;
.text--orange {
  color: $ORANGE;
}

.text--info {
  color: $INFO;
.text--dark-blue {
  color: $DARK_BLUE;
}

.text--prudential_grey {
  color: $PRUDENTIAL_GREY;
}

.text--mid_grey {
  color: $MID_GREY;
}

 PAMapp/assets/scss/utilities/_icon.scss

@@ -1,8 +1,8 @@
.pam-icon {
  font-size: 15px;
  padding-right: 8px;
  color: #68737A;
  color: $PRUDENTIAL_GREY;
  &.icon--primary {
    color: $PRIMARY;
    color: $PRIMARY_RED;
  }
}

 PAMapp/assets/scss/utilities/_utilities.scss

@@ -1,6 +1,10 @@
@import '_heading';
@import '_icon';

.mb-50 {
  margin-bottom: 50px;
}

.mt-30 {
  margin-top: 30px;
}
@@ -44,3 +48,7 @@
.pam-paragraph {
  margin: 30px 0;
}

.cursor--pointer {
  cursor: pointer;
}

 PAMapp/assets/scss/vendors/_elementUI.scss

@@ -2,3 +2,9 @@
@import './elementUI/button';
@import './elementUI/progress';
@import './elementUI/dropdown';
@import './elementUI/_checkbox';
@import './elementUI/_radio';
@import './elementUI/_drawer';
@import './elementUI/_carousel';
@import './elementUI/_rate';
@import './elementUI/_tag';

 PAMapp/assets/scss/vendors/elementUI/_button.scss

@@ -5,12 +5,12 @@
  padding: 10px 20px;
  @extend .mdTxt;
  &.el-button--default {
    color: $PRIMARY;
    background-color: #FFFFFF;
    border-color: $PRIMARY;
    color: $PRIMARY_RED;
    background-color: $PRIMARY_WHITE;
    border-color: $PRIMARY_RED;
  }
  &.el-button--primary {
    background-color: $PRIMARY;
    border-color: $PRIMARY;
    background-color: $PRIMARY_RED;
    border-color: $PRIMARY_RED;
  }
}

 PAMapp/assets/scss/vendors/elementUI/_carousel.scss

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,44 @@
.el-carousel__indicators--outside {
    .el-carousel__indicator--horizontal {
        .el-carousel__button {
            width: 9px;
            height: 9px;
            border-radius: 50px;
            border: solid 1px $LIGHT_GREY;
            background-color: $PRIMARY_WHITE;
        }

        &.is-active {
            .el-carousel__button {
                background-color: $PRIMARY_RED;
            }
        }
    }

    .el-carousel__indicator--horizontal:nth-child(2) {
        .el-carousel__button {
            margin: 0 20px;
        }
    }
}

.pam-consultant-carousel {
    padding: 0 10px;
    margin: 0 -10px;

    .el-carousel__container {
        .el-carousel__item {
            max-width: 336px;
            width: 100%;
            box-shadow: 0 0 6px #00000029;
            border-radius: 10px;
            background-color: $PRIMARY_WHITE;
        }
    }

    @include desktop {
        .el-carousel__container {
            transform: translateX(25%);
        }
    }
}

 PAMapp/assets/scss/vendors/elementUI/_checkbox.scss

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,33 @@
.pam-quickFilter-checkbox.el-checkbox-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    height: 240px;

    .el-checkbox {
        display: block;
        width: 48%;
        height: 110px;
        margin-right: 0px;
        box-shadow: 0 0 6px #22222229;
        border-radius: 10px;

        .el-checkbox__input {
            display: none;
        }

        .el-checkbox__label {
            color: $PRIMARY_BLACK;
            display: block;
            padding-left: 0;
            text-align: center;
            line-height: 110px;
        }

        &.is-checked {
            background-color: #22222229;
        }
    }
}


 PAMapp/assets/scss/vendors/elementUI/_drawer.scss

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,11 @@
.el-drawer {
    border-radius: 10px 10px 0 0;

    .el-drawer__header {
        display: none;
    }

    .el-drawer__body {
        padding: 0 40px;
    }
}

 PAMapp/assets/scss/vendors/elementUI/_dropdown.scss

@@ -1,10 +1,11 @@
.pam-header__dropdown {
  border-radius: 10px;
  box-shadow: 0 3px 6px lightgray;
  box-shadow: 0 3px 6px $LIGHT_GREY;
  padding: 20px 26px 20px 20px;
  .pam-header__dropdown-item {
    width: max-content;
    padding-bottom: 16px;
    cursor: pointer;
  }
  .pam-header__dropdown-divider {
    padding-top: 16px;

 PAMapp/assets/scss/vendors/elementUI/_progress.scss

@@ -5,7 +5,7 @@
    background-color: #FFFFFF;
    .el-progress-bar__inner {
      border-radius: 0;
      background-color: $PRIMARY;
      background-color: $PRIMARY_RED;
    }
  }
}

 PAMapp/assets/scss/vendors/elementUI/_radio.scss

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,31 @@
.pam-quickFilter-radio.el-radio-group {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .el-radio {
        display: block;
        width: 48%;
        height: 110px;
        margin-right: 0px;
        box-shadow: 0 0 6px #22222229;
        border-radius: 10px;

        .el-radio__input {
            display: none;
        }

        .el-radio__label {
            text-align: center;
            color: $PRIMARY_BLACK;
            display: block;
            line-height: 110px;
            padding-left: 0;

        }

        &.is-checked {
            background-color: #22222229;
        }
    }
}

 PAMapp/assets/scss/vendors/elementUI/_rate.scss

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,15 @@
.pam-quickFilter-rate {
    height: auto;
    margin-top: 30px;
    display: flex;
    justify-content: center;

    .el-rate__item {
        .el-rate__icon {
            font-size: 35px;
        }
        .el-icon-star-off {
            color: $PRIMARY_BLACK !important;
        }
    }
}

 PAMapp/assets/scss/vendors/elementUI/_tag.scss

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,18 @@
.pam-tag.el-tag--light {
    padding: 10px 20px;
    background-color: $CORAL;
    border: solid 1px $LIGHT_GREY;
    height: auto;
    color: $PRIMARY_WHITE;
    border-radius: 30px;
    margin-right: 10px;
    margin-top: 10px;

    .el-icon-close {
        color: $PRIMARY_WHITE;

        &:hover {
            background-color: $CORAL;
        }
    }
}

 PAMapp/components/Consultant/ConsultantCard.vue

@@ -55,7 +55,7 @@
<style lang="scss" scoped>
    .rowStyle {
        padding: 10px;
        background-color: #FFFFFF;
        background-color: $PRIMARY_WHITE;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
@@ -64,7 +64,7 @@
            width: 10px;
            height: 10px;
            border-radius: 50px;
            background-color: $yellow;
            background-color: $YELLOW;
            margin: auto 0;
        }

@@ -80,7 +80,7 @@

            &:before {
                content: '\2605';
                color: $primaryRed;
                color: $PRIMARY_RED;
                margin: 5px;
            }
        }
@@ -97,20 +97,20 @@
        }

        .delete {
            color: $primaryRed;
            color: $PRIMARY_RED;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
        }

        .reservedBtn {
            color: $skyBlue;
            color: $SKY_BLUE;
            cursor: auto;

            &:hover {
                color: $skyBlue;
                border-color: $skyBlue;
                background-color: $white;
                color: $SKY_BLUE;
                border-color: $SKY_BLUE;
                background-color: $PRIMARY_WHITE;
            }
        }

@@ -128,4 +128,4 @@
        justify-content: space-between;
    }

</style>
</style>

 PAMapp/components/Consultant/ConsultantList.vue

@@ -41,7 +41,7 @@
<style lang="scss" scoped>

    .emptyRowStyle {
        background-color: $white;
        background-color: $PRIMARY_WHITE;
        width: 100%;
        height: 100px;
        display: flex;
@@ -49,14 +49,14 @@
        align-items: center;

        .login {
            color: $primaryRed;
            color: $PRIMARY_RED;
            cursor: pointer;
        }

        .txt {
            color: $prudentialGrey;
            color: $PRUDENTIAL_GREY;
            margin-left: 17px;
        }
    }

</style>
</style>

 PAMapp/components/Footer.vue

@@ -45,7 +45,7 @@
<style lang="scss" scoped>
footer {
  border-top: 1px solid #CCCCCC;
  background-color: #fff;
  background-color: $PRIMARY_WHITE;
  .pam-footer-nav {
    padding: 10px 20px;
    .pam-footer-nav__list {
@@ -57,7 +57,8 @@
        padding: 10px 0 10px 10px;
        @extend .xsTxt;
        @extend .text--bold;
        @extend .text--info;
        @extend .text--dark-blue;
        @extend .cursor--pointer;
      }
    }
  }
@@ -71,13 +72,13 @@
      flex-wrap: wrap;
      justify-content: center;
      .pam-footer-contact__item {
        color: #68737A;
        color: $PRUDENTIAL_GREY;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
        @extend .text--bold;
        .phone {
          color: #222222;
          color: $PRIMARY_BLACK;
          font-size: 14px;
          @extend .text--bold;
        }
@@ -85,10 +86,10 @@
    }
  }
  .pam-footer-copywrite {
    background-color: $PRIMARY;
    background-color: $PRIMARY_RED;
    display: flex;
    justify-content: center;
    color: white;
    color: $PRIMARY_WHITE;
    padding: 10px 0;
    font-size: 12px;
    font-weight: bold;

 PAMapp/components/NavBar.vue

@@ -8,9 +8,9 @@
          </div>
        </div>
        <div class="pam-header__action-bar">
          <i class="icon-bell" @click="$router.push('/notification')"></i>
          <i class="icon-bell text--dark-blue cursor--pointer" @click="$router.push('/notification')"></i>
          <el-dropdown @command="handleCommand">
            <i class="icon-avatar"></i>
            <i class="icon-avatar text--dark-blue cursor--pointer"></i>
            <el-dropdown-menu slot="dropdown" class="pam-header__dropdown">
              <li class="pam-header__dropdown-item" @click="$router.push('/accountSetting')">個人帳號設定</li>
              <li class="pam-header__dropdown-item" @click="$router.push('/record/contactRecord')">查看紀錄</li>
@@ -63,7 +63,6 @@
  .pam-header__action-bar {
    display: flex;
    font-size: 24px;
    color: #1B365D;
    font-weight: bold;
    justify-content: space-around;
    i {

 PAMapp/components/QuickFilter/QuickFilterConsultantCarousel.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,187 @@
<template>
<div class="relative">
    <el-carousel
        height="600px"
        :autoplay="false"
        indicator-position="none"
        arrow="never"
        class="pam-consultant-carousel"
        ref="carouselRef"
    >
        <el-carousel-item
            v-for="(item, index) in 5"
            :key="index"
        >
            <div
                class="fill"
                @touchstart="touchStart"
                @touchend="moveCard"
            >
                <img class="avator cursor--pointer" @click="$router.push('/agentInfo')" src="" />
                <div class="mdTxt mt-30 mb-10">蔡美莓(伯樂保險經紀人)</div>
                <el-row>
                    <el-col :span="12">
                        <div class="smTxt_bold mb-10 text--prudential_grey">服務資歷</div>
                        <div class="mb-10">一年12個月</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="smTxt_bold mb-10 text--prudential_grey">客戶滿意度</div>
                        <div>
                            <i class="icon-star pam-icon"></i>
                            4.8</div>
                    </el-col>
                </el-row>
                <div class="smTxt_bold mb-10 text--prudential_grey">專長領域</div>
                <div class="p bold">#財務規劃</div>
            </div>
            <div class="parallelBtns">
                <el-button @click="isVisibleDrawer = true">
                    <i class="icon-add smTxt"></i>
                    <span>顧問清單</span>
                </el-button>
                <el-button
                    @click="$router.push('/communication/myDemand')"
                    type="primary"
                >進行預約</el-button>
            </div>
        </el-carousel-item>
    </el-carousel>

    <div class="absolute arrow-left-position" @click="nextCard">
        <i class="icon-left pam-left-arrow"></i>
    </div>
    <div class="absolute arrow-right-position" @click="nextCard">
        <i class="icon-right pam-right-arrow"></i>
    </div>

    <Ui-Drawer
        :isVisible.sync="isVisibleDrawer"
    >
        <div class="text--center mdTxt">
            <p class="mb-50">成功加入顧問清單</p>
            <p class="text--primary" @click="isVisibleDrawer = false">我知道了</p>
        </div>
    </Ui-Drawer>

</div>
</template>

<script lang="ts">
import { ElCarousel } from 'element-ui/types/carousel';
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class UiCardCarousel extends Vue {
    isVisibleDrawer = false;
    startPosition = 0;
    endPosition = 0;

    touchStart(event: TouchEvent) {
        this.startPosition = event.changedTouches[0].clientX;
    }

    moveCard(event: any) {
        this.endPosition = event.changedTouches[0].clientX;
        if (this.endPosition < this.startPosition) {
            this.nextCard();
            return;
        }

        if (this.endPosition > this.startPosition) {
            this.prevCard();
            return;
        }
    }

    nextCard() {
        (this.$refs.carouselRef as ElCarousel).next();
    }

    prevCard() {
        (this.$refs.carouselRef as ElCarousel).prev();
    }

}
</script>

<style lang="scss" scoped>
    .fill {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        padding: 20px 30px 30px 30px;
    }

    .avator {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: $MID_GREY;
        margin: 0 auto;
    }

    .parallelBtns {
        display: flex;
        justify-content: center;
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;

        .el-button {
            padding: 10px 0;
            width: 45%;
        }
    }

    .pam-left-arrow,.pam-right-arrow {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: $LIGHT_GREY;
        color: $CORAL;
        z-index: 2;
        cursor: pointer;

        &:before {
            display: block;
            line-height: 50px;
        }
    }

    .pam-right-arrow {
        &:before {
            margin-left: 15px;
        }
    }

    .pam-left-arrow {
        &:before {
            margin-left: 25px;
        }
    }

    .arrow-right-position {
        top: 50%;
        right: -60px;
        transform: translateY(-50%);
    }

    .arrow-left-position {
        top: 50%;
        left: -60px;
        transform: translateY(-50%);
    }

    .relative {
        position: relative;
    }

        .absolute {
        position: absolute;
    }

</style>

 PAMapp/components/QuickFilter/QuickFilterDrawer.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,122 @@
<template>
    <Ui-Drawer
        :isVisible.sync="isVisible"
        :size="questionOption.name === 'style' ? '50%' : '30%'"
        @close="closeDrawer"
    >
        <div class="mb-10" v-if="questionOption.title !== '顧問性別'">
            <span class="mdTxt">{{questionOption.title === '顧問滿意度' ? '保險顧問滿意度' : questionOption.title}}</span>
            <span
                class="smTxt_bold text--primary"
                v-if="questionOption.name === 'style'"
            >可複選</span>
            <span
                class="smTxt_bold text--primary"
                v-if="questionOption.name === 'satisfaction'"
            >選取星星</span>
        </div>

        <div class="quickBtnBlock" v-if="questionOption.name === 'style'">
            <el-checkbox-group class="pam-quickFilter-checkbox" v-model="style">
                <el-checkbox
                    v-for="(i, index) in questionOption.detail"
                    :key="index"
                    :label="i"
                    :name="i"
                ></el-checkbox>
            </el-checkbox-group>
        </div>

        <div class="quickBtnBlock" v-else-if="questionOption.name === 'gender'">
            <el-radio-group class="pam-quickFilter-radio" v-model="gender">
                <el-radio
                    v-for="(i, index) in questionOption.detail"
                    :key="index"
                    :label="i"></el-radio>
            </el-radio-group>
        </div>

        <div class="quickBtnBlock" v-else-if="questionOption.name === 'loginState'">
            <el-radio-group class="pam-quickFilter-radio" v-model="loginState">
                <el-radio
                    v-for="(i, index) in QuestionOption.detail"
                    :key="index"
                    :label="i"></el-radio>
            </el-radio-group>
        </div>

        <div v-else>
            <el-rate class="pam-quickFilter-rate" v-model="satisfaction"></el-rate>
        </div>
    </Ui-Drawer>
</template>

<script lang="ts">
import { Vue, Component, PropSync, Prop, Watch, Emit } from 'nuxt-property-decorator';
import { QuestionOption, selectedItem } from '~/pages/quickFilter/index.vue';

@Component
export default class QuickFilterDrawer extends Vue {
    style: string[] = [];
    loginState: string = '';
    gender: string = '';
    satisfaction: number = 0;

    @PropSync('drawerVisible') isVisible!: boolean;
    @Prop() selectedItem!: selectedItem;
    @Prop() questionOption!: QuestionOption;

    @Emit('selected') emitSelected() {
        return ({
            name: this.questionOption.name,
            gender: this.gender,
            style: this.style,
            satisfaction: this.satisfaction,
            loginState: this.loginState
        });
    }

    closeDrawer() {
        this.emitSelected()
    }

    @Watch('selectedItem', {deep: true, immediate: true}) watchSelected(newValue: selectedItem) {
        if (newValue) {
            this.gender = newValue.gender;
            this.style = newValue.style;
            this.satisfaction = newValue.satisfaction;
        }
    }
}
</script>

<style lang="scss" scoped>

    .quickBtnBlock {
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;

        .quickBtn {
            width: 48%;
            height: 110px;
            text-align: center;
            box-shadow: 0 0 6px #22222229;
            padding: auto 0 auto 0;
            border-radius: 10px;
            color: $PRIMARY_BLACK;

            &:hover,&:focus {
                color: $PRIMARY_BLACK;
                border-color: $PRIMARY_WHITE;
                background-color: $PRIMARY_WHITE;
            }
        }

        .quickBtn+.quickBtn {
            margin-left: 0;
        }
    }

</style>

 PAMapp/components/SwiperConsultantCard.vue

@@ -37,10 +37,10 @@

            &:before {
                content: '\2605';
                color: #ED1B2E;
                color: $PRIMARY_RED;
                margin-right: 10px;
                font-size: 15px;
            }
        }
    }
</style>
</style>

 PAMapp/components/Ui/UiCardCarousel.vue

Àɮפw§R°£

 PAMapp/components/Ui/UiDrawer.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,42 @@
<template>
    <div>
        <el-drawer
            :size="size"
            :visible.sync="drawerVisible"
            :direction="'btt'"
            @close="close"
            class="cus_drawer"
        >
            <div class="close" @click="drawerVisible = false"></div>
            <slot></slot>
        </el-drawer>
    </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync, Prop, Emit } from 'vue-property-decorator';

@Component
export default class UiDialog extends Vue {
    @PropSync('isVisible') drawerVisible!: boolean;
    @Prop() size!: number;

    @Emit('close') closeDrawer() {
        return;
    }

    close() {
        this.closeDrawer();
    }
}
</script>

<style lang="scss" scoped>
    .close {
        width: 60px;
        height: 5px;
        background-color: #CCCCCC;
        border-radius: 10px;
        margin: 10px auto 13px auto;
    }
</style>

 PAMapp/components/Ui/UiSwiper.vue

@@ -61,14 +61,14 @@
  box-shadow: 0 0 6px #22222229;
  border-radius: 10px;
  padding: 45px 0 37px 0;
  background-color: $white;
  background-color: $PRIMARY_WHITE;

  .swiper-slide {
    cursor: pointer;
  }

  .swiper-button-next,.swiper-button-prev {
    background-color: $white;
    background-color: $PRIMARY_WHITE;
    top: 20px;
    height: 100%;

@@ -87,4 +87,4 @@
    right: 0;
  }
}
</style>
</style>

 PAMapp/layouts/default.vue

@@ -18,6 +18,7 @@
    .page-container{
      width: 700px;
      margin: 0 auto;
      overflow-x: hidden;
    }
  }


 PAMapp/pages/agentInfo/index.vue

@@ -113,7 +113,7 @@
        class="pam-paragraph">
        <UiField icon="flag" label="專長領域">
          <div class="pam-field-experts">
            <div class="text--secondary bold pr-10" v-for="(expert, index) in agentInfo.expertises" :key="index">
            <div class="text--orange bold pr-10" v-for="(expert, index) in agentInfo.expertises" :key="index">
              #{{ expert }}
            </div>
          </div>
@@ -162,7 +162,7 @@

@Component
export default class AgentInfoComponent extends Vue {
  agentInfo: AgengInfo = {
  agentInfo: AgentInfo = {
    name: '蔡美眉',
    role: '伯樂保險經紀人',
    avgReviews: 4.8,
@@ -185,7 +185,7 @@
  }
}

interface AgengInfo {
interface AgentInfo {
  name: string;
  role: string;
  avgReviews: number;
@@ -208,9 +208,9 @@
.pam-icon {
  font-size: 15px;
  padding-right: 8px;
  color: #68737A;
  color: $PRUDENTIAL_GREY;
  &.icon--primary {
    color: #ED1B2E;
    color: $PRIMARY_RED;
  }
}
.pam-field {
@@ -231,13 +231,13 @@

.pam-field-suitability {
  .el-progress-bar__inner {
    background-color: #8DB9CA !important;
    background-color: $LIGHT_BLUE !important;
  }
}

.pam-field-evaluation {
  .el-progress-bar__inner {
    background-color: #5CB8B2 !important;
    background-color: $TEAL_GREEN!important;
  }
}


 PAMapp/pages/index.vue

@@ -96,7 +96,7 @@
        margin: 0 auto 17px auto;
        font-size: 32px;
        font-weight: 700;
        color: $black;
        color: $PRIMARY_BLACK;

        &:nth-child(3) {
            margin-bottom: 42px;
@@ -113,13 +113,13 @@
        .flex {
            display: flex;
            .amount {
                color: $prudentialGrey;
                color: $PRUDENTIAL_GREY;
                margin-left: 10px;
                align-self: center;
            }
        }
        .readMore {
            color: $primaryRed;
            color: $PRIMARY_RED;
            cursor: pointer;
        }
    }
@@ -135,4 +135,4 @@
        }
    }

</style>
</style>

 PAMapp/pages/quickFilter/index.vue

@@ -1,7 +1,240 @@
<template>
    <div>快速篩選
        <h5>篩選條件</h5>
        <h5>快速篩選推薦</h5>
        <Ui-CardCarousel></Ui-CardCarousel>
    <div>
        <div class="quickBtnBlock">
            <el-button
                v-for="(question, index) in questionList"
                :key="index"
                class="subTitle quickBtn"
                :disabled="question.name === 'onlineState'"

                @click="openDrawer(question)"
            >{{question.title}}</el-button>
        </div>

        <h5 class="mdTxt mb-10 mt-30">篩選條件</h5>
        <div>
             <el-tag
                v-if="selectedItem.gender"
                class="pam-tag p"
                closable
                type="''"
                @close="removeTag('gender')"
            >{{selectedItem.gender}}</el-tag>
            <el-tag
                v-if="selectedItem.satisfaction"
                class="pam-tag p"
                closable
                type="''"
                @close="removeTag('satisfaction')"
            >{{selectedItem.satisfaction + '星以上滿意度'}}</el-tag>

            <template v-if="selectedItem.style.length > 0"
            >
                <el-tag
                    v-for="(item, index) in selectedItem.style"
                    :key="index"
                    class="pam-tag p"
                    closable
                    type="''"
                    @close="removeTag('style', index)"
                >{{item}}</el-tag>
            </template>

            <div class="mb-10" v-if="selectedItem.onlineState"></div>
            <div class="emptyBox text--mid_grey"
                v-if="!selectedItem.gender && !selectedItem.satisfaction && selectedItem.style.length === 0 && !selectedItem.onlineState">
                <p class="smTxt">尚無篩選</p>
            </div>
        </div>

        <h5 class="mdTxt mb-10 mt-30">快速篩選推薦</h5>
        <template v-if="consultantList.length > 0">
            <QuickFilterConsultantCarousel></QuickFilterConsultantCarousel>
        </template>

        <template v-else>
            <div class="emptyBox bg-white"></div>
        </template>

        <QuickFilterDrawer
            :drawerVisible.sync="questionDrawer"
            :questionOption="questionOption"
            :selectedItem="selectedItem"
            @selected="selected"
        ></QuickFilterDrawer>
    </div>
</template>
</template>

<script lang="ts">
import { Context } from '@nuxt/types';
import { Vue, Component } from 'nuxt-property-decorator';
import { Agents } from '~/plugins/api/home';

@Component
export default class QuickFilter extends Vue {
    consultantList = [];
    questionDrawer = false;
    questionOption = {};
    selectedItem: selectedItem = {
        gender: '',
        satisfaction: 0,
        style: [],
        onlineState: ''
    };
    questionList: QuestionOption[] = [
        {
            name: 'gender',
            title: '顧問性別',
            detail: ['男性', '女性'],
            type: 'radio'
        },
        {
            name: 'satisfaction',
            title: '顧問滿意度',
            detail: [],
            type: ''
        },
        {
            name: 'style',
            title: '溝通風格',
            detail: ['謹慎務實', '明快主動', '耐心傾聽', '健談風趣'],
            type: 'checkbox'
        },
        {
            name: 'onlineState',
            title: '上線狀態',
            detail: [],
            type: 'radio'
        }
    ];

    async asyncData(context: Context) {
        let consultantList: Agents[] = [];

        await context.$service.home.recommendConsultantList().then((result: Agents[]) => {
            consultantList = result;
        })

        return {
            consultantList,
        }
    }

    openDrawer(question: QuestionOption) {
        this.questionDrawer = true;
        this.questionOption = question;
    }

    selected(event: selectedItem) {

        const name = event.name;
        if (name === 'gender') {
            this.selectedItem.gender = event.gender;
        }

        if (name === 'satisfaction') {
            this.selectedItem.satisfaction = event.satisfaction;
        }

        if (name === 'style'){
            this.selectedItem.style = event.style;
        }

    }

    removeTag(type: string, index: number = 0) {

        if (type === 'gender') {
            this.selectedItem.gender = ''
        }

        if (type === 'satisfaction') {
             this.selectedItem.satisfaction = 0
        }

        if (type === 'style') {
            this.selectedItem.style.splice(index, 1)
        }

    }

}

export interface QuestionOption {
    title: string;
    detail: string[];
    type: string;
    name: string;
}

export interface selectedItem {
    name?: string;
    gender: string;
    satisfaction: number;
    style: string[];
    onlineState: string;
}
</script>

<style lang="scss" scoped>
    .emptyBox {
        width: 100%;
        height: 100px;

        border: solid 1px $LIGHT_GREY;
        text-align: center;

        .smTxt {
            line-height: 100px;
        }
    }

    .bg-white {
        background-color: $PRIMARY_WHITE;
    }

    .quickBtnBlock {
        display: flex;
        width: 100%;
        height: 132px;
        flex-wrap: wrap;
        justify-content: space-between;

        .quickBtn {
            width: 48%;
            height: 56px;
            text-align: center;
            box-shadow: 0 0 6px #22222229;
            border-color: $PRIMARY_WHITE;
            border-radius: 10px;
            color: $PRIMARY_BLACK;

            &:hover,&:focus {
                color: $PRIMARY_BLACK;
                border-color: $PRIMARY_WHITE;
                background-color: $PRIMARY_WHITE;
            }

            &:disabled {
                color: $PRIMARY_WHITE;
                border-color: $LIGHT_GREY;
                background-color: $LIGHT_GREY;
            }
        }
        .quickBtn+.quickBtn {
            margin-left: 0;
        }

        .is-disabled {
            background-color: $LIGHT_GREY;
            color: $PRIMARY_WHITE;

            &:hover,&:focus {
                color: $PRIMARY_WHITE;
                border-color: $LIGHT_GREY;
                background-color: $LIGHT_GREY;
            }
        }
    }

</style>