From c40e0c01b6df46dabd6b5130ddef1b4dad7ed058 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期一, 01 十一月 2021 13:24:27 +0800
Subject: [PATCH] update: 調整顏色變數名稱
---
PAMapp/pages/index.vue | 132 +++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 129 insertions(+), 3 deletions(-)
diff --git a/PAMapp/pages/index.vue b/PAMapp/pages/index.vue
index ac0141f..9a447a3 100644
--- a/PAMapp/pages/index.vue
+++ b/PAMapp/pages/index.vue
@@ -1,12 +1,138 @@
<template>
-<div>PAMapp</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>
+ <div class="rowStyle mb-20">
+ <div class="flex">
+ <h5 class="mdTxt">���“���</h5>
+ <span class="smTxt_bold align_center amount">� {{agents.length}} 蝑�</span>
+ </div>
+ <div
+ class="mdTxt readMore"
+ @click="routerPush('/contactList/consultantList')"
+ >���憭�</div>
+ </div>
+ <ConsultantList
+ :agents="agents.slice(0, 3)"
+ @removeAgent="removeAgent"
+ ></ConsultantList>
+ <h5 class="mdTxt mb-20 mt-32">��靽憿批��</h5>
+ <Ui-Swiper :agents="swiperAgents"></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
+@Component({
+ layout: 'home'
+})
export default class MainComponent extends Vue {
+ agents: Agents[] = [];
+ swiperAgents: Agents[] = [];
+ async asyncData(context: Context) {
+ let agents: Agents[] = [];
+
+ await context.$service.home.recommendConsultantList().then((result: Agents[]) => {
+ agents = result;
+ })
+
+ const swiperAgents = JSON.parse(JSON.stringify(agents));
+
+ return {
+ agents,
+ swiperAgents
+ }
+ }
+
+ routerPush(path: string) {
+ this.$router.push(path);
+ }
+
+ removeAgent(agentId: number) {
+ const findIndex = this.agents.findIndex((item, i) => {
+ return item.id === agentId;
+ })
+ this.agents.splice(findIndex, 1)
+ }
}
+
</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: $PRIMARY_BLACK;
+
+ &:nth-child(3) {
+ margin-bottom: 42px;
+ }
+ }
+
+ .reserveConsultantBtn+.reserveConsultantBtn {
+ margin-left: 0px;
+ }
+
+ .rowStyle {
+ display: flex;
+ justify-content: space-between;
+ .flex {
+ display: flex;
+ .amount {
+ color: $PRUDENTIAL_GREY;
+ margin-left: 10px;
+ align-self: center;
+ }
+ }
+ .readMore {
+ color: $PRIMARY_RED;
+ cursor: pointer;
+ }
+ }
+
+ @include desktop {
+ .content{
+ width: 700px;
+ margin: 0 auto;
+ }
+
+ .reserveConsultantBtn:nth-child(2) {
+ margin-right: 15px;
+ }
+ }
+
+</style>
--
Gitblit v1.8.0