|
@@ -8,13 +8,13 @@
|
|
|
<template v-if="appStore.device !== 'mobile'">
|
|
<template v-if="appStore.device !== 'mobile'">
|
|
|
<header-search id="header-search" class="right-menu-item" />
|
|
<header-search id="header-search" class="right-menu-item" />
|
|
|
|
|
|
|
|
- <el-tooltip content="源码地址" effect="dark" placement="bottom">
|
|
|
|
|
- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
|
|
|
|
|
- </el-tooltip>
|
|
|
|
|
|
|
+<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
|
|
|
|
|
+<!-- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
|
|
|
|
|
+<!-- </el-tooltip>-->
|
|
|
|
|
|
|
|
- <el-tooltip content="文档地址" effect="dark" placement="bottom">
|
|
|
|
|
- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
|
|
|
|
|
- </el-tooltip>
|
|
|
|
|
|
|
+<!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
|
|
|
|
|
+<!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
|
|
|
|
|
+<!-- </el-tooltip>-->
|
|
|
|
|
|
|
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
|
|
|
|
|
@@ -25,26 +25,25 @@
|
|
|
</div>
|
|
</div>
|
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
|
|
|
|
|
|
- <el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
|
|
|
- <size-select id="size-select" class="right-menu-item hover-effect" />
|
|
|
|
|
- </el-tooltip>
|
|
|
|
|
|
|
+<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
|
|
|
|
|
+<!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
|
|
|
|
|
+<!-- </el-tooltip>-->
|
|
|
|
|
+<!-- <div class="right-menu-item logout-wrapper">-->
|
|
|
|
|
+<!-- <span class="user-name">{{ userStore.name }}</span>-->
|
|
|
|
|
+<!-- <a @click="logout" class="logout-link">退出登录</a>-->
|
|
|
|
|
+<!-- </div>-->
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
- <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
|
|
|
|
|
|
|
+ <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover" placement="bottom-end">
|
|
|
<div class="avatar-wrapper">
|
|
<div class="avatar-wrapper">
|
|
|
- <img :src="userStore.avatar" class="user-avatar" />
|
|
|
|
|
- <span class="user-nickname"> {{ userStore.nickName }} </span>
|
|
|
|
|
|
|
+ <div class="user-info">
|
|
|
|
|
+ <div class="user-name">{{ userStore.name }}</div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
<template #dropdown>
|
|
<template #dropdown>
|
|
|
<el-dropdown-menu>
|
|
<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 divided command="logout" class="logout-item">
|
|
|
|
|
+ <span class="logout-text">退出登录</span>
|
|
|
</el-dropdown-item>
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
</el-dropdown-menu>
|
|
|
</template>
|
|
</template>
|
|
@@ -186,14 +185,68 @@ function toggleTheme() {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ .logout-wrapper {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ padding: 0 12px;
|
|
|
|
|
+
|
|
|
|
|
+ .user-name {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #5a5e66;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .logout-link {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #5a5e66;
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition: color 0.3s;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.avatar-container {
|
|
.avatar-container {
|
|
|
margin-right: 0px;
|
|
margin-right: 0px;
|
|
|
padding-right: 0px;
|
|
padding-right: 0px;
|
|
|
|
|
+ min-width: 100px;
|
|
|
|
|
|
|
|
.avatar-wrapper {
|
|
.avatar-wrapper {
|
|
|
- margin-top: 10px;
|
|
|
|
|
- right: 8px;
|
|
|
|
|
- position: relative;
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ padding: 0 16px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition: background 0.3s;
|
|
|
|
|
+ line-height: 50px;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.025);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .user-info {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ .user-name {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #5a5e66;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ line-height: 50px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.user-avatar {
|
|
.user-avatar {
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
@@ -203,14 +256,6 @@ function toggleTheme() {
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .user-nickname{
|
|
|
|
|
- position: relative;
|
|
|
|
|
- left: 0px;
|
|
|
|
|
- bottom: 10px;
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
i {
|
|
i {
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -222,4 +267,28 @@ function toggleTheme() {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+// 下拉菜单样式
|
|
|
|
|
+:deep(.el-dropdown-menu) {
|
|
|
|
|
+ .logout-item {
|
|
|
|
|
+ padding: 8px 20px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ min-width: 120px;
|
|
|
|
|
+
|
|
|
|
|
+ .logout-text {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ transition: color 0.3s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background-color: #f5f7fa;
|
|
|
|
|
+
|
|
|
|
|
+ .logout-text {
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|