From 97d7650c08c0da22e1ccf6986d1a6cc5d58de7a2 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 26 十月 2021 11:44:31 +0800
Subject: [PATCH] TODO#129064 首頁-預約保險顧問 畫面刻版+layout 樣式調整
---
PAMapp/layouts/default.vue | 11 +++
PAMapp/assets/scss/_common.scss | 66 ++++++++++++++++++++++
PAMapp/pages/index.vue | 63 ++++++++++++++++++---
PAMapp/components/Ui/UiCarousel.vue | 2
PAMapp/layouts/home.vue | 10 ++
5 files changed, 138 insertions(+), 14 deletions(-)
diff --git a/PAMapp/assets/scss/_common.scss b/PAMapp/assets/scss/_common.scss
index e69de29..9103e9f 100644
--- a/PAMapp/assets/scss/_common.scss
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/PAMapp/components/Ui/UiCarousel.vue b/PAMapp/components/Ui/UiCarousel.vue
index 44425b3..b726c82 100644
--- a/PAMapp/components/Ui/UiCarousel.vue
+++ b/PAMapp/components/Ui/UiCarousel.vue
@@ -1,7 +1,7 @@
<template>
<div>
<el-carousel
- height="200px"
+ height="260px"
:autoplay="true"
indicator-position="outside"
arrow="never"
diff --git a/PAMapp/layouts/default.vue b/PAMapp/layouts/default.vue
index cc9dcfa..465734a 100644
--- a/PAMapp/layouts/default.vue
+++ b/PAMapp/layouts/default.vue
@@ -1,6 +1,13 @@
<template>
<div>
<BackActionBar></BackActionBar>
- <Nuxt></Nuxt>
+ <Nuxt class="container"></Nuxt>
</div>
-</template>
\ No newline at end of file
+</template>
+
+<style lang="scss" scoped>
+ .container {
+ background-color: #F8F9FA;
+ padding: 0 20px;
+ }
+</style>
\ No newline at end of file
diff --git a/PAMapp/layouts/home.vue b/PAMapp/layouts/home.vue
index 861406b..9ed8242 100644
--- a/PAMapp/layouts/home.vue
+++ b/PAMapp/layouts/home.vue
@@ -1,7 +1,13 @@
<template>
- <div>
+ <div class="container">
<NavBar></NavBar>
<Nuxt></Nuxt>
<Footer></Footer>
</div>
-</template>
\ No newline at end of file
+</template>
+
+<style lang="scss" scoped>
+ .container {
+ background-color: #F8F9FA;
+ }
+</style>
\ No newline at end of file
diff --git a/PAMapp/pages/index.vue b/PAMapp/pages/index.vue
index 75158e8..f369084 100644
--- a/PAMapp/pages/index.vue
+++ b/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>
\ No newline at end of file
+</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>
\ No newline at end of file
--
Gitblit v1.8.0