From 4b5f52c8fde65ac56be8bfddbebc805e5864548a Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期一, 08 十一月 2021 10:51:13 +0800
Subject: [PATCH] update: 首頁圖檔 (輪播、嚴選配對快速篩選按鈕、推薦保險顧問)
---
PAMapp/components/NavBar.vue | 2
PAMapp/components/QuickFilter/QuickFilterConsultantList.vue | 11 ---
PAMapp/pages/index.vue | 52 ++++++++++++++---
PAMapp/components/Ui/UiCarousel.vue | 54 +++++++++++++++--
PAMapp/assets/scss/vendors/elementUI/_carousel.scss | 16 +++++
PAMapp/assets/scss/utilities/_heading.scss | 5 +
6 files changed, 113 insertions(+), 27 deletions(-)
diff --git a/PAMapp/assets/scss/utilities/_heading.scss b/PAMapp/assets/scss/utilities/_heading.scss
index 89daea3..125460c 100644
--- a/PAMapp/assets/scss/utilities/_heading.scss
+++ b/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;
}
diff --git a/PAMapp/assets/scss/vendors/elementUI/_carousel.scss b/PAMapp/assets/scss/vendors/elementUI/_carousel.scss
index 09fe7cc..7690789 100644
--- a/PAMapp/assets/scss/vendors/elementUI/_carousel.scss
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index 4729171..840c821 100644
--- a/PAMapp/components/NavBar.vue
+++ b/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>
diff --git a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue b/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
index 351def6..d213f80 100644
--- a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
+++ b/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 {
diff --git a/PAMapp/components/Ui/UiCarousel.vue b/PAMapp/components/Ui/UiCarousel.vue
index b726c82..15f64d1 100644
--- a/PAMapp/components/Ui/UiCarousel.vue
+++ b/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>
\ No newline at end of file
diff --git a/PAMapp/pages/index.vue b/PAMapp/pages/index.vue
index a85fe90..bf84c89 100644
--- a/PAMapp/pages/index.vue
+++ b/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>
--
Gitblit v1.8.0