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

Mila

2021-10-26 97d7650c08c0da22e1ccf6986d1a6cc5d58de7a2

 PAMapp/pages/index.vue

@@ -1,15 +1,88 @@
<template>
    <div>PAMapp-Home</div>
    <div>
        <Ui-Carousel></Ui-Carousel>
        <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>

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

@Component({
    layout: 'home'
})
export default class MainComponent extends Vue {
    agents: Agents[] = [];

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

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

        return {
            agents
        }
    }

    routerPush(path: string) {
        this.$router.push(path);
    }
}

</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>