update: 首頁圖檔 (輪播、嚴選配對快速篩選按鈕、推薦保險顧問)

Mila

2021-11-08 4b5f52c8fde65ac56be8bfddbebc805e5864548a

update: 首頁圖檔 (輪播、嚴選配對快速篩選按鈕、推薦保險顧問)

 PAMapp/assets/scss/utilities/_heading.scss

@@ -70,6 +70,11 @@
.text--mid_grey {
  color: $MID_GREY;
}

.text--PRIMARY_WHITE {
  color: $PRIMARY_WHITE;
}

.text--middle {
  font-size: 20px;
}

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

@@ -42,3 +42,19 @@
        }
    }
}

@media (min-width: 768px) {
    .pam-home-carousel {
        .el-carousel__container {
            height: 350px;
        }
    }
}

@include desktop {
    .pam-home-carousel {
        .el-carousel__container {
            height: 450px;
        }
    }
}

 PAMapp/components/NavBar.vue

@@ -14,7 +14,7 @@
            <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>
              <li class="pam-header__dropdown-item" @click="$router.push('/contactList/consultantList')">我的顧問清單</li>
              <li class="pam-header__dropdown-item" @click="$router.push('/myConsultantList/consultantList')">我的顧問清單</li>
              <li class="pam-header__dropdown-item">登出</li>
              <li class="pam-header__dropdown-item pam-header__dropdown-divider" @click="$router.push('/consultantLogin')">顧問登入</li>
            </el-dropdown-menu>

 PAMapp/components/QuickFilter/QuickFilterConsultantList.vue

@@ -39,7 +39,7 @@
                <div class="smTxt_bold mb-10 text--prudential_grey">專長領域</div>
                <div class="p bold">#財務規劃</div>
            </div>
            <div class="parallelBtns">
            <div class="fixedBtn text--center">
                <el-button @click="addConsultant">
                    <i class="icon-add smTxt"></i>
                    <span>顧問清單</span>
@@ -141,19 +141,12 @@
        margin: 0 auto;
    }

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

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

    .pam-left-arrow,.pam-right-arrow {

 PAMapp/components/Ui/UiCarousel.vue

@@ -1,17 +1,19 @@
<template>
<div>
    <el-carousel
        height="260px"
        :autoplay="true"
        indicator-position="outside"
        arrow="never"
        trigger="click"
        class="pam-home-carousel"
    >
        <el-carousel-item
            v-for="(item, index) in 3"
            :key="index"
        >
            <h3>{{ item }}</h3>
        <el-carousel-item class="banner-img">
            <div class="text--center mt-30 banner-info">
                <h1 class="banner-title mb-10">個人化媒合頂尖顧問</h1>
                <p class="banner-txt text--PRIMARY_WHITE">您的聲音，由我們來傾聽。</p>
                <p class="banner-txt text--PRIMARY_WHITE">讓我們幫您快速找到合適您的顧問，</p>
                <p class="banner-txt text--PRIMARY_WHITE">解決保險大小煩惱。事不宜遲，立刻行動。</p>
            </div>
        </el-carousel-item>
    </el-carousel>
</div>
@@ -27,7 +29,43 @@
</script>

<style lang="scss" scoped>
.el-carousel__item {
    background-color: #d3dce6;
.banner-img {
    width: 100%;
    height: 100%;
    background-image: url('~/assets/images/index_banner_mob.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.banner-info {
    .banner-title {
        @extend .title;
    }

    .banner-txt {
        @extend .smTxt_bold;
        line-height: 21px;
    }
}

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

@include desktop {
    .banner-info {
        .banner-title {
            font-size: 40px;
        }

        .banner-txt {
            font-size: 18px;
            line-height: 24px;
        }
    }
}

</style>

 PAMapp/pages/index.vue

@@ -4,13 +4,17 @@
        <div class="page-container">
            <h5 class="mdTxt mb-30">預約保險顧問</h5>
            <el-button
                class="reserveBtn"
                class="reserveBtn recommendConsultant"
                @click="routerPush('/recommendConsultant')"
            >嚴選配對</el-button>
            >
                <p>嚴選配對</p>
            </el-button>
            <el-button
                class="reserveBtn"
                class="reserveBtn quickFilter"
                @click="routerPush('/quickFilter')"
            >快速篩選</el-button>
            >
                <p>快速篩選</p>
            </el-button>
            <el-row class="mb-30 rowStyle">
                <el-col :span="16">
                    <span class="mdTxt">我的顧問清單</span>
@@ -23,7 +27,10 @@
                :agents="consultantList.slice(0, 3)"
                @removeAgent="removeAgent"
            ></ConsultantList>
            <h5 class="mdTxt mb-30 mt-30">推薦保險顧問</h5>
            <div class='pam-recommend pb-30 pt-30'>
                <h5 class="mdTxt">推薦保險顧問</h5>
                <img class="absulate img" src="~/assets/images/index_recommend.svg" alt="">
            </div>
            <ConsultantSwiper :agents="agents"></ConsultantSwiper>
        </div>
    </div>
@@ -61,7 +68,7 @@
    }

    removeAgent(agentNo: number) {
        const findIndex = this.agents.findIndex((item, i) => {
        const findIndex = this.consultantList.findIndex((item, i) => {
            return item.agentNo === agentNo;
        })
        this.consultantList.splice(findIndex, 1)
@@ -76,23 +83,41 @@
        padding: 0px 20px 30px 20px;
    }

    .reserveBtn {
    .reserveBtn.el-button--default {
        width: 100%;
        height: 110px;
        border-radius: 10px;
        box-shadow: 0px 0px 6px #22222229;
        margin: 0 auto 17px auto;
        font-size: 32px;
        font-weight: 700;
        color: $PRIMARY_BLACK;
        background-position: right;
        background-size: cover;
        color: #68737A;
        text-align: left;
        background-repeat: no-repeat;
        box-shadow: 0px 0px 6px #a79b9b29;
        border-width: 0;

        p {
            text-shadow: 1px 1px 5px $PRIMARY_WHITE;
        }

        &:nth-child(3) {
            margin-bottom: 42px;
        }

    }

    .reserveBtn+.reserveBtn {
        margin-left: 0px;
    }

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

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

    .rowStyle {
@@ -119,7 +144,16 @@
                margin-right: 15px;
            }
        }
    }

    .pam-recommend {
        position: relative;

        .img {
            position: absolute;
            right: 20px;
            bottom: 0px;
        }
    }

</style>