<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>
|
</div>
|
</header>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
|
@Component
|
export default class NavBar extends Vue {
|
handleCommand() {
|
|
}
|
}
|
</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 {
|
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;
|
}
|
}
|
}
|
}
|
</style>
|
