TODO#129064 首頁-預約保險顧問 畫面刻版+layout 樣式調整

Mila

2021-10-26 97d7650c08c0da22e1ccf6986d1a6cc5d58de7a2

 PAMapp/pages/index.vue

@@ -1,14 +1,23 @@
<template>
    <div>
        <Ui-Carousel></Ui-Carousel>
        <h5>預約顧問</h5>
        <el-button @click="routerPush('/recommendConsultant')">嚴選配對</el-button>
        <el-button @click="routerPush('/quickFilter')">快速篩選</el-button>
        <h5>我的聯絡清單</h5>
        <el-button @click="routerPush('/contactList/consultantList')">查看更多</el-button>
        <el-button @click="routerPush('/communication/consult')">諮詢</el-button>
        <h5>推薦顧問</h5>
        <Ui-Swiper :agents="agents"></Ui-Swiper>
        <div class="content">
            <h5 class="mdTxt mb-20">預約保險顧問</h5>
            <el-button
                class="reserveConsultantBtn"
                @click="routerPush('/recommendConsultant')"
            >嚴選配對</el-button>
            <el-button
                class="reserveConsultantBtn"
                @click="routerPush('/quickFilter')"
            >快速篩選</el-button>
            <h5 class="mdTxt mb-20">我的顧問清單</h5>
            <el-button @click="routerPush('/contactList/consultantList')">查看更多</el-button>
            <el-button @click="routerPush('/communication/consult')">諮詢</el-button>
            <h5 class="mdTxt mb-20 mt-32">推薦保險顧問</h5>
            <Ui-Swiper :agents="agents"></Ui-Swiper>
        </div>

    </div>
</template>

@@ -40,4 +49,40 @@
    }
}

</script>
</script>

<style lang="scss" scoped>
    .content {
        padding: 0 20px;
    }

    .mb-20 {
        margin: 0 0 20px 0;
    }

    .mt-32 {
        margin-top: 32px;
    }

    .reserveConsultantBtn {
        max-width: 340px;
        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: #222222;

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

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

    }
</style>