From 6f3021e865c2b0503dda227477084fa586e6fd8f Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 16 十一月 2021 21:02:44 +0800
Subject: [PATCH] Merge branch 'master' of https://192.168.0.10:8443/r/pcalife/PAM
---
PAMapp/components/NavBar.vue | 312 +++++++++++++++++++++++++++++----------------------
1 files changed, 177 insertions(+), 135 deletions(-)
diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index c653208..5d67f59 100644
--- a/PAMapp/components/NavBar.vue
+++ b/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],
- 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: ��TP隤����� ���蝙�
- fakeLogout():void{
- localStorage.clear();
- this.$router.go(0);
+ // TODO: ��TP隤����� ���蝙�
+ 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>
--
Gitblit v1.8.0