左边栏header右侧增加向下箭头
This commit is contained in:
parent
16749186fe
commit
35968bc93e
@ -15,15 +15,13 @@
|
|||||||
<JLogo class="logo-icon" />
|
<JLogo class="logo-icon" />
|
||||||
<div v-if="!collapsed" class="user-info-text">
|
<div v-if="!collapsed" class="user-info-text">
|
||||||
<div class="brand-name">今果 Jingrow</div>
|
<div class="brand-name">今果 Jingrow</div>
|
||||||
<n-tooltip>
|
<div class="user-name">
|
||||||
<template #trigger>
|
|
||||||
<div class="user-name">
|
|
||||||
{{ teamUserText }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
{{ teamUserText }}
|
{{ teamUserText }}
|
||||||
</n-tooltip>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<n-icon v-if="!collapsed" class="chevron-icon">
|
||||||
|
<ChevronDown />
|
||||||
|
</n-icon>
|
||||||
</div>
|
</div>
|
||||||
</n-dropdown>
|
</n-dropdown>
|
||||||
</div>
|
</div>
|
||||||
@ -54,19 +52,20 @@
|
|||||||
<script>
|
<script>
|
||||||
import { defineAsyncComponent, computed, ref, h, getCurrentInstance } from 'vue';
|
import { defineAsyncComponent, computed, ref, h, getCurrentInstance } from 'vue';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { NMenu, NDropdown, NTooltip, NIcon } from 'naive-ui';
|
import { NMenu, NDropdown, NIcon } from 'naive-ui';
|
||||||
import NavigationItems from './NavigationItems.vue';
|
import NavigationItems from './NavigationItems.vue';
|
||||||
import JLogo from '@/components/icons/JLogo.vue';
|
import JLogo from '@/components/icons/JLogo.vue';
|
||||||
|
import ChevronDown from '~icons/lucide/chevron-down';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AppSidebar',
|
name: 'AppSidebar',
|
||||||
components: {
|
components: {
|
||||||
NMenu,
|
NMenu,
|
||||||
NDropdown,
|
NDropdown,
|
||||||
NTooltip,
|
|
||||||
NIcon,
|
NIcon,
|
||||||
NavigationItems,
|
NavigationItems,
|
||||||
JLogo,
|
JLogo,
|
||||||
|
ChevronDown,
|
||||||
SwitchTeamDialog2: defineAsyncComponent(() =>
|
SwitchTeamDialog2: defineAsyncComponent(() =>
|
||||||
import('./SwitchTeamDialog.vue')
|
import('./SwitchTeamDialog.vue')
|
||||||
),
|
),
|
||||||
@ -382,6 +381,18 @@ export default {
|
|||||||
transition: opacity 0.2s ease;
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chevron-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #8b8e95;
|
||||||
|
margin-left: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info:hover .chevron-icon {
|
||||||
|
color: #4a5568;
|
||||||
|
}
|
||||||
|
|
||||||
/* 菜单区域 */
|
/* 菜单区域 */
|
||||||
.sidebar-menu {
|
.sidebar-menu {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user