test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-12-05 05:27:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

修复顶部导航数量过多，导致工具栏被遮挡

Browse Source
This commit is contained in:
Hooray Hu 2024-03-18 00:31:01 +08:00
parent a6ed0a5455
commit 7bc6fa4feb
1 changed files with 72 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/layouts/components/Header/index.vue
View File

@ -29,32 +29,30 @@ function handlerMouserScroll(event: WheelEvent) {
<Transition name="header">
<header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.menuMode === 'head'">
<div class="header-container">
<div class="main">
<Logo class="title" />
<div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">
<!-- 顶部模式 -->
<div class="menu flex of-hidden transition-all">
<template v-for="(item, index) in menuStore.allMenus" :key="index">
<Logo class="title" />
<div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">
<!-- 顶部模式 -->
<div class="menu flex of-hidden transition-all">
<template v-for="(item, index) in menuStore.allMenus" :key="index">
<div
class="menu-item relative transition-all" :class="{
active: index === menuStore.actived,
}"
>
<div
class="menu-item relative transition-all" :class="{
active: index === menuStore.actived,
}"
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-3 text-[var(--g-header-menu-color)] transition-all hover:(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
>
<div
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-3 text-[var(--g-header-menu-color)] transition-all hover:(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
>
<div class="inline-flex flex-1 items-center justify-center gap-1">
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
<span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
{{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
</span>
</div>
<div class="inline-flex flex-1 items-center justify-center gap-1">
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
<span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
{{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
</span>
</div>
</div>
</template>
</div>
</div>
</template>
</div>
</div>
<ToolbarRightSide />
@ -83,74 +81,67 @@ header {
.header-container {
display: flex;
gap: 30px;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
margin: 0 auto;
.main {
display: flex;
flex: 1;
flex-wrap: wrap;
align-items: center;
height: 100%;
}
}
:deep(a.title) {
position: relative;
flex: 0;
width: inherit;
height: inherit;
padding: inherit;
background-color: inherit;
:deep(a.title) {
position: relative;
width: inherit;
height: inherit;
padding: inherit;
background-color: inherit;
.logo {
width: initial;
height: 40px;
}
span {
font-size: 20px;
color: var(--g-header-color);
letter-spacing: 1px;
}
}
.menu-container {
flex: 1;
height: 100%;
padding: 0 20px;
margin: 0 30px;
overflow-x: auto;
mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
// firefox隐藏滚动条
scrollbar-width: none;
// chrome隐藏滚动条
&::-webkit-scrollbar {
display: none;
}
}
.menu {
display: inline-flex;
height: 100%;
:deep(.menu-item) {
.menu-item-container {
color: var(--g-header-menu-color);
&:hover {
color: var(--g-header-menu-hover-color);
background-color: var(--g-header-menu-hover-bg);
}
.logo {
width: initial;
height: 40px;
}
&.active .menu-item-container {
color: var(--g-header-menu-active-color);
background-color: var(--g-header-menu-active-bg);
span {
font-size: 20px;
color: var(--g-header-color);
letter-spacing: 1px;
}
}
.menu-container {
flex: 1;
height: 100%;
padding: 0 20px;
overflow-x: auto;
mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
// firefox隐藏滚动条
scrollbar-width: none;
// chrome隐藏滚动条
&::-webkit-scrollbar {
display: none;
}
.menu {
display: inline-flex;
height: 100%;
:deep(.menu-item) {
.menu-item-container {
color: var(--g-header-menu-color);
&:hover {
color: var(--g-header-menu-hover-color);
background-color: var(--g-header-menu-hover-bg);
}
}
&.active .menu-item-container {
color: var(--g-header-menu-active-color);
background-color: var(--g-header-menu-active-bg);
}
}
}
}
}