PAMapp/assets/scss/_common.scss
@@ -46,6 +46,7 @@ height: 45px; .cus-tab-item { @extend .fix-chrome-click--issue; width: 50%; text-align: center; font-size: 24px; PAMapp/assets/scss/_variable.scss
@@ -18,3 +18,6 @@ // DEVICE BREAKPOINT $DESKTOP_BREAKPOINT: 768px; $DESKTOP_NAV_BAR: 110px; $MOB_NAV_BAR: 53px; PAMapp/assets/scss/reset/_reset.scss
@@ -1,5 +1,6 @@ * { font-size: 18px; } /* http://meyerweb.com/eric/tools/css/reset/ PAMapp/assets/scss/utilities/_heading.scss
@@ -78,4 +78,6 @@ .text--middle { font-size: 20px; } .fix-chrome-click--issue{ -webkit-tap-highlight-color: transparent; } PAMapp/assets/scss/vendors/elementUI/_button.scss
@@ -2,6 +2,7 @@ border-width: 2px; border-radius: 30px; padding: 10px 20px; @extend .fix-chrome-click--issue; @extend .mdTxt; &.el-button--default { color: $PRIMARY_RED; PAMapp/assets/scss/vendors/elementUI/_checkbox.scss
@@ -12,7 +12,7 @@ margin-right: 0px; box-shadow: 0 0 6px #22222229; border-radius: 10px; -webkit-tap-highlight-color: transparent; .el-checkbox__input { display: none; } @@ -71,7 +71,7 @@ border-radius: 30px; font-size: 20px; margin: 0 10px 10px 0px; -webkit-tap-highlight-color: transparent; .el-checkbox__input { display: none; } PAMapp/assets/scss/vendors/elementUI/_dropdown.scss
@@ -1,4 +1,5 @@ .pam-header__dropdown { top:39px !important; border-radius: 10px; box-shadow: 0 3px 6px $LIGHT_GREY; padding: 5px 26px 5px 20px; @@ -22,3 +23,8 @@ } } } @include desktop{ .pam-header__dropdown { top: 78px !important; } } PAMapp/assets/scss/vendors/elementUI/_radio.scss
@@ -10,7 +10,7 @@ margin-right: 0px; box-shadow: 0 0 6px #22222229; border-radius: 10px; @extend .fix-chrome-click--issue; .el-radio__input { display: none; } @@ -41,6 +41,7 @@ flex-direction: column; font-size: 20px; .el-radio-button { @extend .fix-chrome-click--issue; &.is-active { color:$PRIMARY_BLACK; background-color: none !important; @@ -68,7 +69,7 @@ border-radius: 50px; margin-right: 10px; margin-bottom: 10px; @extend .fix-chrome-click--issue; .el-radio__input { display: none; } PAMapp/assets/scss/vendors/elementUI/_rate.scss
@@ -1,15 +1,29 @@ .pam-quickFilter-rate { height: auto; margin-top: 30px; display: flex; justify-content: center; height: auto; margin-top: 30px; display: flex; justify-content: center; .el-rate__item { .el-rate__icon { font-size: 35px; } .el-icon-star-off { color: $PRIMARY_BLACK !important; } .el-rate__item { -webkit-tap-highlight-color: transparent; .el-rate__icon { font-size: 35px; } .el-icon-star-off { color: $PRIMARY_BLACK !important; } } } .pam-consultant-rate{ .el-rate__item { -webkit-tap-highlight-color: transparent; .el-rate__icon { font-size: 35px; } .el-icon-star-off { color: $PRIMARY_BLACK !important; } } } PAMapp/components/BackActionBar.vue
@@ -1,7 +1,7 @@ <template> <nav class="pam-back-action-bar"> <nav class="pam-back-action-bar fix-chrome-click--issue"> <a @click="$router.push('/')"> <i class="icon-left"></i>{{ label }} <i class="icon-left "></i>{{ label }} </a> </nav> </template> PAMapp/components/Client/ClientCard.vue
@@ -5,7 +5,7 @@ <el-avatar :size="50" src="" class="cursor--pointer" class="cursor--pointer fix-chrome-click--issue" ></el-avatar> <!-- <div class="satisfaction"> <i class="icon-star pam-icon icon--yellow satisfaction"></i> @@ -30,7 +30,7 @@ </div> </el-col> <el-col class="flex-column contactInfo" :xs="5" :sm="6"> <div class="smTxt_bold cursor--pointer" <div class="smTxt_bold cursor--pointer fix-chrome-click--issue" :class="client.communicateStatus" @click="openDetail" >{{isReserved ? '已預約' : '已聯絡'}} PAMapp/components/Consultant/ConsultantList.vue
@@ -16,8 +16,8 @@ </template> <template v-if="!isLogin"> <div class="emptyRowStyle"> <div class="mdTxt login" @click="$router.push('/login')">登入</div> <div class="smTxt txt">查看更多</div> <div class="mdTxt login fix-chrome-click--issue" @click="$router.push('/login')">登入</div> <div class="smTxt txt ">查看更多</div> </div> </template> </div> PAMapp/components/Consultant/ConsultantSwiper.vue
@@ -5,7 +5,7 @@ class="swiperStyle" @click-slide="clkItem" > <swiper-slide <swiper-slide class="fix-chrome-click--issue" v-for="(agentInfo, index) in agents" :key="index" > @@ -78,6 +78,7 @@ } .swiper-button-next,.swiper-button-prev { @extend .fix-chrome-click--issue; background-color: $PRIMARY_WHITE; top: 0px; height: 100%; PAMapp/components/NavBar.vue
@@ -1,151 +1,193 @@ <template> <header class="pam-header"> <img class="pam-header__logo" src="~/assets/images/logo.png" alt="" @click="$router.push('/')"> <div class="pam-header__title"> 我的幸福我作主 <div class="pam-header__sub-title"> 預約我的幸福守護者 </div> </div> <div class="pam-header__action-bar"> <i class="icon-bell text--dark-blue cursor--pointer" @click="$router.push('/notification')"></i> <!-- <el-dropdown @command="handleCommand"> <i class="icon-avatar text--dark-blue cursor--pointer"></i> <el-dropdown-menu slot="dropdown" class="pam-header__dropdown"> <li class="pam-header__dropdown-item" @click="$router.push('/login')">登入</li> <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('/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> </el-dropdown> --> <el-dropdown> <i class="icon-avatar text--dark-blue cursor--pointer"></i> <el-dropdown-menu slot="dropdown" class="pam-header__dropdown"> <template v-for="(navbarItem,index) in navBarList"> <li class="pam-header__dropdown-item" :class="{'pam-header__dropdown-divider':navbarItem.title === '顧問登入'}" v-if="navbarItem.needRole.includes(loginRole)" :key="index" @click="linkTo(navbarItem.link)"> {{navbarItem.title}} </li> </template> </el-dropdown-menu> </el-dropdown> </div> </header> <header class="pam-header"> <div class="pam-header__logo" @click="$router.push('/')"></div> <div class="pam-header__title"> <div class="pam-header__title--main">我的幸福我做主</div> <div class="pam-header__title--sub">預約我的幸福守護者</div> </div> <div class="pam-header__action-bar" style="position:relaitive"> <i class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue" @click="$router.push('/notification')"></i> <el-dropdown> <i class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue"></i> <el-dropdown-menu slot="dropdown" class="pam-header__dropdown"> <template v-for="(navbarItem,index) in navBarList"> <li class="pam-header__dropdown-item fix-chrome-click--issue " :class="{'pam-header__dropdown-divider':navbarItem.title === '顧問登入'}" v-if="navbarItem.needRole.includes(loginRole)" :key="index" @click="linkTo(navbarItem.link)"> {{navbarItem.title}} </li> </template> </el-dropdown-menu> </el-dropdown> </div> </header> </template> <script lang="ts"> import { Vue, Component } from 'vue-property-decorator'; import * as _ from 'lodash'; @Component export default class NavBar extends Vue { navBarList=[ { needRole:[Role.NOT_LOGIN], link:'/login', title:'登入', }, { needRole:[Role.USER], link:'/accountSetting', title:'個人帳號設定', }, { needRole:[Role.ADMIN], link:'/notFinish', title:'查看帳號資訊', }, { needRole:[Role.USER,Role.ADMIN], link:'/record/contactRecord', title:'查看紀錄', }, { needRole:[Role.NOT_LOGIN,Role.USER], link:'/myConsultantList/consultantList', title:'我的顧問清單', }, { needRole:[Role.USER,Role.ADMIN], link:'', title:'登出', }, { needRole:[Role.NOT_LOGIN,Role.USER], link:'/consultantLogin', title:'顧問登入', }, ]; get idToken():string | null{ return localStorage.getItem('id_token'); } get roleOfState():string | null{ return localStorage.getItem('roleOfState'); } get loginRole():string{ return this.roleOfState&&this.idToken ? this.roleOfState : Role.NOT_LOGIN; } import { Vue, Component } from 'vue-property-decorator'; import * as _ from 'lodash'; @Component export default class NavBar extends Vue { navBarList = [{ needRole: [Role.NOT_LOGIN], link: '/login', title: '登入', }, { needRole: [Role.USER], link: '/accountSetting', title: '個人帳號設定', }, { needRole: [Role.ADMIN], link: '/notFinish', title: '查看帳號資訊', }, { needRole: [Role.USER, Role.ADMIN], link: '/record/contactRecord', title: '查看紀錄', }, { needRole: [Role.NOT_LOGIN, Role.USER], link: '/myConsultantList/consultantList', title: '我的顧問清單', }, { needRole: [Role.USER, Role.ADMIN], link: '', title: '登出', }, { needRole: [Role.NOT_LOGIN], link: '/consultantLogin', title: '顧問登入', }, ]; get idToken(): string | null { return localStorage.getItem('id_token'); } get roleOfState(): string | null { return localStorage.getItem('roleOfState'); } get loginRole(): string { return this.roleOfState && this.idToken ? this.roleOfState : Role.NOT_LOGIN; } linkTo(routerLink:string):void{ _.isEqual(routerLink,'') ? this.fakeLogout() :this.$router.push(routerLink); } linkTo(routerLink: string): void { _.isEqual(routerLink, '') ? this.fakeLogout() : this.$router.push(routerLink); } // TODO: 僅OTP認證開發前 暫時使用 fakeLogout():void{ localStorage.clear(); this.$router.go(0); // TODO: 僅OTP認證開發前 暫時使用 fakeLogout(): void { localStorage.clear(); this.$router.go(0); } } } export enum Role{ USER='user', ADMIN='admin', NOT_LOGIN='', } export enum Role { USER = 'user', ADMIN = 'admin', NOT_LOGIN = '', } </script> <style lang="scss" scoped> .pam-header { height: 53px; display: flex; align-items: center; .pam-header__logo { height: 100%; } .pam-header__title { flex: 1; margin: 10px 0; padding-left: 10px; border-left: 1px solid #CCCCCC; font-size: 16px; font-weight: bold; color: $PRUDENTIAL_GREY; letter-spacing: 3.6px; flex-basis: 140px; .pam-header__sub-title { padding-top: 2px; font-size: 13px; font-weight: bold; color: $CORAL; letter-spacing: 1.2px } } .pam-header__action-bar { .pam-header { position: fixed; top: 0; height: $MOB_NAV_BAR; width: 100%; display: flex; font-size: 24px; font-weight: bold; justify-content: space-around; i { padding: 0 15px; @media screen and (max-width: 320px) { padding: 0 5px; align-items: center; background-color: $PRIMARY_WHITE; z-index: 3; .pam-header__logo { height: 30px; width: 115px; margin: 0 10px; background-image: url('~/assets/images/taiwan-logo.png'); background-repeat:no-repeat; background-size: contain; background-position: center; } .pam-header__title { flex: 1; flex-basis: 160px; border-left:1px #CCCCCC solid; padding-left:10px; .pam-header__title--main { font-size: 16px; font-weight: bold; color: $PRUDENTIAL_GREY; letter-spacing:0.8px; @media screen and (max-width: 352px) { font-size: 12px; } } .pam-header__title--sub { padding-top: 2px; font-size: 12px; transform: scale(0.9); -webkit-transform-origin-x: 0; font-weight: bold; color: $CORAL; letter-spacing: 1.2px; } } .pam-header__action-bar { display: flex; font-size: 24px; font-weight: bold; justify-content: space-around; i { padding: 0px 15px; @media screen and (max-width: 352px) { padding: 0px 10px; } } } } } @include desktop { .pam-header { height: $DESKTOP_NAV_BAR; .pam-header__logo { width: 180px; height: 100%; margin: 0; background-image: url('~/assets/images/logo.png'); background-size: cover; background-repeat:no-repeat; background-position: center; } .pam-header__title { display: flex; justify-content: start; align-items: center; border: none; padding-left: 30px; .pam-header__title--main{ font-size: 30px; letter-spacing: 1.5px; } .pam-header__title--sub{ font-size: 20px; letter-spacing: 2px; transform: none; margin-left: 30px; } } } } </style> PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
@@ -64,7 +64,7 @@ > <div class="text--center mdTxt"> <p class="mb-50">{{popUpTxt}}</p> <p class="text--primary cursor--pointer" <p class="text--primary cursor--pointer fix-chrome-click--issue" @click="isVisiblePopUp = false">我知道了</p> </div> </PopUpFrame> PAMapp/components/Ui/UiAvatar.vue
@@ -2,7 +2,7 @@ <el-avatar :size="size" :src="imgSrc" class="pam-avatar cursor--pointer" class="pam-avatar cursor--pointer fix-chrome-click--issue" ></el-avatar> </template>
@@ -8,16 +8,16 @@ {{option.title}} </el-checkbox> <template v-if="nameOfSelectAll"> <button class="pam-selectAll-btn cursor--pointer" :class="{'selected':isSelectAll}" :model="isSelectAll" @click="selectAll"> <button class="pam-selectAll-btn cursor--pointer fix-chrome-click--issue" :class="{'selected':isSelectAll}" :model="isSelectAll" @click="selectAll"> <span>{{nameOfSelectAll}}</span> </button> </template> <template v-if="nameOfOtherOption"> <button class="pam-selectAll-btn cursor--pointer" :class="{'selected':isSelectOtherOption}" :model="isSelectOtherOption" @click="selectOther"> <button class="pam-selectAll-btn cursor--pointer fix-chrome-click--issue" :class="{'selected':isSelectOtherOption}" :model="isSelectOtherOption" @click="selectOther"> <span>{{nameOfOtherOption}}</span> </button> <div> <input class="pam-muti-select-other cursor--pointer" v-if="isSelectOtherOption" v-model="syncOtherSelect" placeholder="請輸入,限20字"> <input class="pam-muti-select-other cursor--pointer " v-if="isSelectOtherOption" v-model="syncOtherSelect" placeholder="請輸入,限20字"> </div> </template> </el-checkbox-group> PAMapp/components/phoneContactTimePicker.vue
@@ -4,7 +4,7 @@ <div> <div class="mt-10" v-for="(scheduleDto,index) in syncScheduleList" :key="index"> <div class="mdTxt">{{titleFormatByIndex(index)}}</div> <div class="pam-contact-schedule cursor--pointer" @click="openPopUp(scheduleDto,index)"> <div class="pam-contact-schedule cursor--pointer fix-chrome-click--issue" @click="openPopUp(scheduleDto,index)"> <div class="pam-contact-schedule__text"> <template v-if="checkFormHasDone(scheduleDto)"> <p>{{optionsFormat(scheduleDto.selectWeekOptions,weekOptions)}}</p> PAMapp/layouts/home.vue
@@ -5,9 +5,21 @@ <Footer></Footer> </div> </template> <script lang="ts"> import { Component ,Vue } from "nuxt-property-decorator"; @Component export default class DefaultLayout extends Vue { } </script> <style lang="scss" scoped> .pam-background { background-color: #F8F9FA; padding-top:$MOB_NAV_BAR; } @include desktop{ .pam-background { padding-top:$DESKTOP_NAV_BAR; } } </style> PAMapp/pages/agentInfo/_agentNo.vue
@@ -153,7 +153,7 @@ > <div class="text--center mdTxt"> <p class="mb-50">{{popUpTxt}}</p> <p class="text--primary cursor--pointer" <p class="text--primary cursor--pointer fix-chrome-click--issue" @click="isVisiblePopUp = false">我知道了</p> </div> </PopUpFrame> PAMapp/pages/index.vue
@@ -22,7 +22,7 @@ </el-col> <el-col :span="8" class="mdTxt readMore" class="mdTxt readMore fix-chrome-click--issue" v-if="consultantList.length > 3" @click.native="routerPush('/myConsultantList/consultantList')">查看更多</el-col> </el-row> PAMapp/pages/recommendConsultant/index.vue
@@ -21,7 +21,7 @@ <div class="pb-10 mdTxt required"> 想要詢問的問題 <span class="hint text--bold"> <i class="icon-information text--bold" @click="showDialog = true"></i>可複選 <i class="icon-information text--bold fix-chrome-click--issue" @click="showDialog = true"></i>可複選 </span> </div> <MultiSelectBtn :mutiSelect.sync="strictQueryDto.requirements" :options="requirementOptions" class="rec-multi-select" /> @@ -30,11 +30,9 @@ <div class="pb-10 mdTxt">顧問年資</div> <SingleSelectBtn :singleSelected.sync="strictQueryDto.seniority" :options="seniorityOptions"/> </div> <div class="rate-consultant pam-paragraph"> <div class="pam-paragraph"> <div class="pb-10 mdTxt">保險顧問滿意度</div> <el-rate v-model="strictQueryDto.avgScore" :colors="elRateColors" class="rate"> <el-rate class="pam-consultant-rate" v-model="strictQueryDto.avgScore"> </el-rate> </div> <div class="pam-paragraph"> @@ -77,11 +75,10 @@ <PopUpFrame :isOpen.sync="isVisiblePopUp"> <div class="text--center mdTxt"> <p class="mb-50">尚無推薦資料</p> <p class="text--primary cursor--pointer" <p class="text--primary cursor--pointer fix-chrome-click--issue" @click="isVisiblePopUp = false">我知道了</p> </div> </PopUpFrame> </div> </template> <script lang="ts"> @@ -225,7 +222,6 @@ ]; showDialog = false; showAddress = false; elRateColors = ['#ED1B2E', '#ED1B2E', '#ED1B2E']; @Mutation updateStrictQueryList!: (data: any) => void; @@ -459,14 +455,7 @@ width: 90px; height: 47px; } .rate-consultant { .el-rate__icon { font-size: 35px } } .el-progress__text { display: none; } PAMapp/pages/recommendConsultant/result.vue
@@ -11,7 +11,7 @@ <div class="pam-rec-agent-card__main-info"> <div class="fz-20 pt-10 rec-desktop-name">{{ info.name }}</div> <div class="rec-role">{{ info.role }}</div> <span class="rec-detail" @click="showAgentDetail(info.agentNo)">詳細資料</span> <span class="rec-detail fix-chrome-click--issue" @click="showAgentDetail(info.agentNo)">詳細資料</span> </div> </div> <div class="pam-rec-agent-card__content-body"> @@ -69,7 +69,7 @@ > <div class="text--center mdTxt"> <p class="mb-50">{{popUpTxt}}</p> <p class="text--primary cursor--pointer" <p class="text--primary cursor--pointer fix-chrome-click--issue" @click="isVisiblePopUp = false">我知道了</p> </div> </PopUpFrame>
