From 64cb4a2150e2c9fbdc294ad1fc70f523120c88b3 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期一, 01 十一月 2021 09:49:15 +0800
Subject: [PATCH] update#129066 - [header] 前端畫面刻版 - 下拉選單
---
PAMapp/components/NavBar.vue | 27 +++++++++++++++++++--------
PAMapp/assets/scss/vendors/elementUI/_dropdown.scss | 20 ++++++++++++++++++++
PAMapp/assets/scss/vendors/_elementUI.scss | 1 +
3 files changed, 40 insertions(+), 8 deletions(-)
diff --git a/PAMapp/assets/scss/vendors/_elementUI.scss b/PAMapp/assets/scss/vendors/_elementUI.scss
index 69d71c9..b2be350 100644
--- a/PAMapp/assets/scss/vendors/_elementUI.scss
+++ b/PAMapp/assets/scss/vendors/_elementUI.scss
@@ -1,3 +1,4 @@
@import './elementUI/avatar';
@import './elementUI/button';
@import './elementUI/progress';
+@import './elementUI/dropdown';
diff --git a/PAMapp/assets/scss/vendors/elementUI/_dropdown.scss b/PAMapp/assets/scss/vendors/elementUI/_dropdown.scss
new file mode 100644
index 0000000..8eacb6d
--- /dev/null
+++ b/PAMapp/assets/scss/vendors/elementUI/_dropdown.scss
@@ -0,0 +1,20 @@
+.pam-header__dropdown {
+ border-radius: 10px;
+ box-shadow: 0 3px 6px lightgray;
+ padding: 20px 26px 20px 20px;
+ .pam-header__dropdown-item {
+ width: max-content;
+ padding-bottom: 16px;
+ }
+ .pam-header__dropdown-divider {
+ padding-top: 16px;
+ width: calc(100% + 6px);
+ border-top: 1px solid #CCCCCC;
+ }
+ .popper__arrow {
+ display: none;
+ &::after {
+ display: none;
+ }
+ }
+}
diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index ac33281..5df783d 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -1,11 +1,6 @@
<template>
<header class="pam-header">
- <img class="pam-header__logo" src="~/assets/images/logo.png" alt="">
- <!-- <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> -->
+ <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">
@@ -13,8 +8,17 @@
</div>
</div>
<div class="pam-header__action-bar">
- <i class="icon-bell"></i>
- <i class="icon-avatar"></i>
+ <i class="icon-bell" @click="$router.push('/notification')"></i>
+ <el-dropdown @command="handleCommand">
+ <i class="icon-avatar"></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('/login')">憿批��</li>
+ </el-dropdown-menu>
+ </el-dropdown>
</div>
</header>
</template>
@@ -24,7 +28,9 @@
@Component
export default class NavBar extends Vue {
+ handleCommand() {
+ }
}
</script>
@@ -45,6 +51,7 @@
font-weight: bold;
color: #68737A;
letter-spacing: 3.6px;
+ flex-basis: 140px;
.pam-header__sub-title {
padding-top: 2px;
font-size: 13px;
@@ -58,8 +65,12 @@
font-size: 24px;
color: #1B365D;
font-weight: bold;
+ justify-content: space-around;
i {
padding: 0 15px;
+ @media screen and (max-width: 320px) {
+ padding: 0 5px;
+ }
}
}
}
--
Gitblit v1.8.0