mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-02 16:37:53 +00:00
style(ui): 调整表格高度和用户头像样式
统一将表格高度从500/600调整为450/540,优化视觉一致性 更新用户头像组件,添加在线状态指示器和显示名称
This commit is contained in:
@@ -32,13 +32,16 @@
|
||||
<div class="navbar-actions__item">
|
||||
<el-dropdown trigger="click">
|
||||
<div class="user-profile">
|
||||
<template v-if="userStore.basicInfo.avatar">
|
||||
<el-avatar size="small" :src="userStore.basicInfo.avatar" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-avatar size="small" icon="UserFilled" />
|
||||
</template>
|
||||
<span class="user-profile__name">{{ userStore.basicInfo.username }}</span>
|
||||
<div class="user-profile__avatar-wrapper">
|
||||
<template v-if="userStore.basicInfo.avatar">
|
||||
<el-avatar size="default" :src="userStore.basicInfo.avatar" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-avatar size="default" icon="UserFilled" />
|
||||
</template>
|
||||
<span class="user-profile__online-indicator"></span>
|
||||
</div>
|
||||
<span class="user-profile__name">{{ userStore.basicInfo.name }}</span>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
@@ -302,10 +305,28 @@ function logout() {
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
|
||||
&__avatar-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&__online-indicator {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #50b731;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin-left: 8px;
|
||||
color: var(--el-text-color-regular);
|
||||
|
||||
Reference in New Issue
Block a user