Skip to content

Commit

Permalink
fix: 修复顶部导航数量过多，导致工具栏被遮挡
Browse files Browse the repository at this point in the history
  • Loading branch information
@hooray
hooray committed Mar 17, 2024
1 parent 216ac32 commit f49b6c5
Showing 1 changed file with 65 additions and 74 deletions.
139 changes: 65 additions & 74 deletions src/views/components/Header/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,32 +29,30 @@ function handlerMouserScroll(event: WheelEvent) {
<Transition name="header">
<header v-if="['head'].includes(settingsStore.settings.menu.menuMode)">
<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?.title === 'function' ? item?.title() : item?.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?.title === 'function' ? item?.title() : item?.title" @click="switchTo(index)"
>
<div class="inline-flex flex-1 items-center justify-center gap-1">
<SvgIcon v-if="item?.icon" :name="item?.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?.title === 'function' ? item?.title() : item?.title }}
</span>
</div>
<div class="inline-flex flex-1 items-center justify-center gap-1">
<SvgIcon v-if="item?.icon" :name="item?.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?.title === 'function' ? item?.title() : item?.title }}
</span>
</div>
</div>
</template>
</div>
</div>
</template>
</div>
</div>
<ToolbarRightSide />
Expand Down Expand Up @@ -83,75 +81,68 @@ 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(div.title) {
position: relative;
width: inherit;
height: inherit;
padding: inherit;
background-color: inherit;
:deep(div.title) {
position: relative;
flex: 0;
width: inherit;
height: inherit;
padding: inherit;
background-color: inherit;
.logo {
width: initial;
height: 40px;
}
.logo {
width: initial;
height: 40px;
span {
font-size: 20px;
color: var(--g-header-color);
letter-spacing: 1px;
}
}
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);
.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;
// firefox隐藏滚动条
scrollbar-width: none;
// chrome隐藏滚动条
&::-webkit-scrollbar {
display: none;
}
// chrome隐藏滚动条
&::-webkit-scrollbar {
display: none;
}
}
.menu {
display: inline-flex;
height: 100%;
.menu {
display: inline-flex;
height: 100%;
:deep(.menu-item) {
.menu-item-container {
color: var(--g-header-menu-color);
: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);
}
}
&: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) !important;
background-color: var(--g-header-menu-active-bg) !important;
}
}
}
&.active .menu-item-container {
color: var(--g-header-menu-active-color) !important;
background-color: var(--g-header-menu-active-bg) !important;
}
}
}
}
Expand Down

0 comments on commit f49b6c5

Please sign in to comment.