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

Mila

2021-10-26 97d7650c08c0da22e1ccf6986d1a6cc5d58de7a2

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

 PAMapp/assets/scss/_common.scss

@@ -0,0 +1,66 @@

// reset
html,body {
    margin: 0;
    color: #222222;
    font-family: Segoe UI;
}

h5 {
    margin: 0;
}


// 文字規範
.title {
    font-size: 30px;
    font-weight: bold;
}

.subTitle {
    font-size: 24px;
    font-weight: bold;
}

.mdTxt {
    font-size: 20px;
    font-weight: bold;
}

.p {
    font-size: 18px;
}

.smTxt_bold {
    font-size: 16px;
    font-weight: bold;
}

.smTxt {
    font-size: 16px;
}

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

        &.is-active {
            .el-carousel__button {
                background-color: #ED1B2E;
            }
        }
    }

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

 PAMapp/components/Ui/UiCarousel.vue

@@ -1,7 +1,7 @@
<template>
<div>
    <el-carousel
        height="200px"
        height="260px"
        :autoplay="true"
        indicator-position="outside"
        arrow="never"

 PAMapp/layouts/default.vue

@@ -1,6 +1,13 @@
<template>
    <div>
        <BackActionBar></BackActionBar>
        <Nuxt></Nuxt>
        <Nuxt class="container"></Nuxt>
    </div>
</template>
</template>

<style lang="scss" scoped>
    .container {
        background-color: #F8F9FA;
        padding: 0 20px;
    }
</style>

 PAMapp/layouts/home.vue

@@ -1,7 +1,13 @@
<template>
    <div>
    <div class="container">
        <NavBar></NavBar>
        <Nuxt></Nuxt>
        <Footer></Footer>
    </div>
</template>
</template>

<style lang="scss" scoped>
    .container {
        background-color: #F8F9FA;
    }
</style>

 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>