140 lines
2.5 KiB
Vue
140 lines
2.5 KiB
Vue
<template>
|
|
<div class="settings-dropdown">
|
|
<div class="user-summary">
|
|
<div class="avatar">
|
|
<img src="https://ui-avatars.com/api/?name=Admin&background=E6F9F0&color=07C160" alt="Admin" />
|
|
</div>
|
|
<div class="info">
|
|
<div class="name">管理员</div>
|
|
<div class="email">admin@zkit.com</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-list">
|
|
<div class="menu-item">
|
|
<i class="fa-regular fa-user"></i>
|
|
<span>个人资料</span>
|
|
</div>
|
|
<div class="menu-item">
|
|
<i class="fa-solid fa-sliders"></i>
|
|
<span>账号设置</span>
|
|
</div>
|
|
<div class="menu-item">
|
|
<i class="fa-solid fa-palette"></i>
|
|
<span>主题设置</span>
|
|
</div>
|
|
<div class="menu-divider"></div>
|
|
<div class="menu-item">
|
|
<i class="fa-regular fa-circle-question"></i>
|
|
<span>帮助中心</span>
|
|
</div>
|
|
<div class="menu-item logout">
|
|
<i class="fa-solid fa-right-from-bracket"></i>
|
|
<span>退出登录</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Logic can be added here
|
|
</script>
|
|
|
|
<style scoped>
|
|
.settings-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 12px);
|
|
right: 0;
|
|
width: 240px;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
border: 1px solid #e4e6ef;
|
|
overflow: hidden;
|
|
z-index: 1000;
|
|
animation: dropdown-fade-in 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes dropdown-fade-in {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.user-summary {
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
border-bottom: 1px solid #f5f8fa;
|
|
background-color: #fcfcfc;
|
|
}
|
|
|
|
.avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.name {
|
|
font-weight: 600;
|
|
color: #181c32;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.email {
|
|
font-size: 12px;
|
|
color: #a1a5b7;
|
|
}
|
|
|
|
.menu-list {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 20px;
|
|
color: #5e6278;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.menu-item:hover {
|
|
background-color: #f5f8fa;
|
|
color: #07C160;
|
|
}
|
|
|
|
.menu-item i {
|
|
width: 20px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.menu-divider {
|
|
height: 1px;
|
|
background-color: #f5f8fa;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.menu-item.logout {
|
|
color: #f64e60;
|
|
}
|
|
|
|
.menu-item.logout:hover {
|
|
background-color: #ffe2e5;
|
|
}
|
|
</style>
|