From d173fcc2f2dfe6220034a775b15b581968de4b3c Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期六, 06 十一月 2021 11:55:53 +0800
Subject: [PATCH] update: footer - 調整 Nav-item pipe 顯示方式
---
PAMapp/components/NavBar.vue | 83 +++++++++++++++++++++++++++++++++++++----
1 files changed, 75 insertions(+), 8 deletions(-)
diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index 2de27f4..4729171 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -1,9 +1,76 @@
<template>
- <div>Header
- <el-button @click="$router.push('/login')">��</el-button>
- <el-button @click="$router.push('/notification')">���</el-button>
- <el-button @click="$router.push('/accountSetting')">�犖撣唾�身摰�</el-button>
- <el-button @click="$router.push('/record/contactRecord')">�������</el-button>
- <el-button @click="$router.push('/contactList/consultantList')">���蝯⊥�</el-button>
- </div>
-</template>
\ No newline at end of file
+ <header class="pam-header">
+ <img class="pam-header__logo" src="~/assets/images/logo.png" alt="" @click="$router.push('/login')">
+ <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('/accountSetting')">�犖撣唾�身摰�</li>
+ <li class="pam-header__dropdown-item" @click="$router.push('/record/contactRecord')">�������</li>
+ <li class="pam-header__dropdown-item" @click="$router.push('/contactList/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: #68737A;
+ letter-spacing: 3.6px;
+ flex-basis: 140px;
+ .pam-header__sub-title {
+ padding-top: 2px;
+ font-size: 13px;
+ font-weight: bold;
+ color: #F09491;
+ 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>
--
Gitblit v1.8.0