devttl/DevTTL-Front
1
0
Fork 0
forked from aixan/RuoYi-Vue3-Template
Code Pull Requests Activity

优化导航栏显示昵称&设置

Browse Source
This commit is contained in:
RuoYi
2025-05-09 13:54:07 +08:00
parent 19348408d3
commit ebe0df0d37
3 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/layout/components/Navbar.vue
View File

@@ -29,26 +29,25 @@
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" />
<el-icon><caret-bottom /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
<span>布局设置</span>
</el-dropdown-item>
<el-dropdown-item divided command="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
<div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" />
<span class="user-nickname"> {{ userStore.nickName }} </span>
</div>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item divided command="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
<svg-icon icon-class="more-up" />
</div>
</div>
</div>
@@ -161,7 +160,7 @@ function toggleTheme() {
padding: 0 8px;
height: 100%;
font-size: 18px;
color: var(--navbar-text);
color: #5a5e66;
vertical-align: text-bottom;
&.hover-effect {
@@ -188,17 +187,27 @@ function toggleTheme() {
}
.avatar-container {
margin-right: 40px;
margin-right: 0px;
padding-right: 0px;
.avatar-wrapper {
margin-top: 5px;
margin-top: 10px;
right: 5px;
position: relative;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
}
.user-nickname{
position: relative;
left: 5px;
bottom: 10px;
font-size: 14px;
font-weight: bold;
}
i {