Skip to content

Commit a105df6

Browse files
hoorayhooray
committed
fix: 修复顶部导航数量过多，导致工具栏被遮挡
1 parent 107e820 commit a105df6

File tree

1 file changed

+65
-74
lines changed

1 file changed

+65
-74
lines changed

‎src/layouts/components/Header/index.vue

+65-74
Original file line numberDiff line numberDiff line change
@@ -29,32 +29,30 @@ function handlerMouserScroll(event: WheelEvent) {
2929
<Transition name="header">
3030
<header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.menuMode === 'head'">
3131
<div class="header-container">
32-
<div class="main">
33-
<Logo class="title" />
34-
<div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">
35-
<!-- 顶部模式 -->
36-
<div class="menu flex of-hidden transition-all">
37-
<template v-for="(item, index) in menuStore.allMenus" :key="index">
32+
<Logo class="title" />
33+
<div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">
34+
<!-- 顶部模式 -->
35+
<div class="menu flex of-hidden transition-all">
36+
<template v-for="(item, index) in menuStore.allMenus" :key="index">
37+
<div
38+
class="menu-item relative transition-all" :class="{
39+
active: index === menuStore.actived,
40+
}"
41+
>
3842
<div
39-
class="menu-item relative transition-all" :class="{
40-
active: index === menuStore.actived,
41-
}"
43+
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="{
44+
'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
45+
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
4246
>
43-
<div
44-
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="{
45-
'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
46-
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
47-
>
48-
<div class="inline-flex flex-1 items-center justify-center gap-1">
49-
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
50-
<span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
51-
{{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
52-
</span>
53-
</div>
47+
<div class="inline-flex flex-1 items-center justify-center gap-1">
48+
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
49+
<span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
50+
{{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
51+
</span>
5452
</div>
5553
</div>
56-
</template>
57-
</div>
54+
</div>
55+
</template>
5856
</div>
5957
</div>
6058
<ToolbarRightSide />
@@ -83,75 +81,68 @@ header {
8381
8482
.header-container {
8583
display: flex;
84+
gap: 30px;
8685
align-items: center;
8786
justify-content: space-between;
8887
width: 100%;
8988
height: 100%;
9089
margin: 0 auto;
9190
92-
.main {
93-
display: flex;
94-
flex: 1;
95-
flex-wrap: wrap;
96-
align-items: center;
97-
height: 100%;
98-
}
99-
}
100-
101-
:deep(a.title) {
102-
position: relative;
103-
width: inherit;
104-
height: inherit;
105-
padding: inherit;
106-
background-color: inherit;
91+
:deep(a.title) {
92+
position: relative;
93+
flex: 0;
94+
width: inherit;
95+
height: inherit;
96+
padding: inherit;
97+
background-color: inherit;
98+
99+
.logo {
100+
width: initial;
101+
height: 40px;
102+
}
107103
108-
.logo {
109-
width: initial;
110-
height: 40px;
104+
span {
105+
font-size: 20px;
106+
color: var(--g-header-color);
107+
letter-spacing: 1px;
108+
}
111109
}
112110
113-
span {
114-
font-size: 20px;
115-
color: var(--g-header-color);
116-
letter-spacing: 1px;
117-
}
118-
}
111+
.menu-container {
112+
flex: 1;
113+
height: 100%;
114+
padding: 0 20px;
115+
overflow-x: auto;
116+
mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
119117
120-
.menu-container {
121-
flex: 1;
122-
height: 100%;
123-
padding: 0 20px;
124-
margin: 0 30px;
125-
overflow-x: auto;
126-
mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
118+
// firefox隐藏滚动条
119+
scrollbar-width: none;
127120
128-
// firefox隐藏滚动条
129-
scrollbar-width: none;
121+
// chrome隐藏滚动条
122+
&::-webkit-scrollbar {
123+
display: none;
124+
}
130125
131-
// chrome隐藏滚动条
132-
&::-webkit-scrollbar {
133-
display: none;
134-
}
135-
}
126+
.menu {
127+
display: inline-flex;
128+
height: 100%;
136129
137-
.menu {
138-
display: inline-flex;
139-
height: 100%;
130+
:deep(.menu-item) {
131+
.menu-item-container {
132+
color: var(--g-header-menu-color);
140133
141-
:deep(.menu-item) {
142-
.menu-item-container {
143-
color: var(--g-header-menu-color);
134+
&:hover {
135+
color: var(--g-header-menu-hover-color);
136+
background-color: var(--g-header-menu-hover-bg);
137+
}
138+
}
144139
145-
&:hover {
146-
color: var(--g-header-menu-hover-color);
147-
background-color: var(--g-header-menu-hover-bg);
140+
&.active .menu-item-container {
141+
color: var(--g-header-menu-active-color);
142+
background-color: var(--g-header-menu-active-bg);
143+
}
148144
}
149145
}
150-
151-
&.active .menu-item-container {
152-
color: var(--g-header-menu-active-color);
153-
background-color: var(--g-header-menu-active-bg);
154-
}
155146
}
156147
}
157148
}

0 commit comments

Comments
 (0)