登录

src/views/main-header.vue

@@ -24,8 +24,44 @@
 			>
 				<svg-icon :name="activePath === v.path ? v.active_icon : v.icon" size="22" />
 			</div>
-			<div class="login">Login</div>
-			<div class="profile"></div>
+			<div class="login" @click="onLogin">Login</div>
+			<el-popover
+				ref="profilePopover"
+				placement="bottom-end"
+				trigger="click"
+				:show-arrow="false"
+				popper-style="width: 24rem; padding: 0; border-radius: 0; right: 2rem; top: 10rem;"
+			>
+				<template #reference><div class="profile"></div></template>
+				<template #default>
+					<div class="profile-content">
+						<div class="info">
+							<img src="@/assets/images/profile-content-bg.jpg" alt="" />
+							<div class="content">
+								<div class="profile"></div>
+								<div class="name">Hi, Alexandra_chen</div>
+							</div>
+						</div>
+						<div class="nav-item" @click="onMyWardrobe">
+							<div class="icon"><svg-icon name="my_wardrobe" size="18" /></div>
+							<div class="label">My Wardrobe</div>
+						</div>
+						<div class="nav-item" @click="onNotifications">
+							<div class="icon"><svg-icon name="notifications" size="14" /></div>
+							<div class="label">Notifications</div>
+						</div>
+						<div class="nav-item" @click="onSettings">
+							<div class="icon"><svg-icon name="settings" size="16" /></div>
+							<div class="label">Settings</div>
+						</div>
+						<div class="hr"></div>
+						<div class="nav-item logout" @click="onLogout">
+							<div class="icon"><svg-icon name="logout" size="20" /></div>
+							<div class="label">Log off</div>
+						</div>
+					</div>
+				</template>
+			</el-popover>
 		</div>
 	</div>
 </template>
@@ -33,6 +69,7 @@
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
+	import myEvent from '@/utils/myEvent'
 	const router = useRouter()
 	const route = useRoute()
 	const activePath = computed(() => route.path)
@@ -70,6 +107,29 @@
 		if (path === activePath.value) return
 		router.push(path)
 	}
+	const onLogin = () => {
+		myEvent.emit('openLoginDialog')
+	}
+	const profilePopover = ref(null)
+	const hideProfilePopover = () => {
+		profilePopover.value?.hide()
+	}
+	const onMyWardrobe = () => {
+		hideProfilePopover()
+		console.log('my wardrobe')
+	}
+	const onNotifications = () => {
+		hideProfilePopover()
+		console.log('notifications')
+	}
+	const onSettings = () => {
+		hideProfilePopover()
+		console.log('settings')
+	}
+	const onLogout = () => {
+		hideProfilePopover()
+		console.log('logout')
+	}
 </script>
 
 <style lang="less">
@@ -145,4 +205,66 @@
 			}
 		}
 	}
+	.profile-content {
+		width: 100%;
+		> .info {
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 2rem;
+			> img {
+				width: 100%;
+				height: auto;
+			}
+			> .content {
+				position: absolute;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				gap: 1rem;
+				> .profile {
+					width: 5rem;
+					height: 5rem;
+					border-radius: 50%;
+					background: #cfcfcf;
+				}
+				> .name {
+					font-size: 1.4rem;
+					color: #232323;
+				}
+			}
+		}
+		> .hr {
+			margin: 1.2rem 1rem;
+			border-top: 0.1rem solid #c4c4c4;
+		}
+		> .nav-item {
+			margin-left: 2rem;
+			margin-bottom: 1.2rem;
+			display: flex;
+			align-items: center;
+			height: 2rem;
+			user-select: none;
+			cursor: pointer;
+			> .icon {
+				width: 2rem;
+				height: 2rem;
+				margin-right: 1rem;
+			}
+			> .label {
+				font-family: KaiseiOpti-Regular;
+				font-size: 1.2rem;
+				color: #585858;
+			}
+		}
+		> .logout {
+			> .label {
+				font-family: KaiseiOpti-Medium;
+				font-size: 1.4rem;
+				color: #232323;
+			}
+		}
+	}
 </style>