|
|
@@ -30,23 +30,23 @@ function handlerMouserScroll(event: WheelEvent) {
|
|
|
<header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.mode === 'head'">
|
|
|
<div class="header-container">
|
|
|
<Logo class="title" />
|
|
|
-<!-- <div ref="menuRef" class="menu-container scrollbar-none" @wheel.prevent="handlerMouserScroll">-->
|
|
|
+ <!-- <div ref="menuRef" class="menu-container scrollbar-none" @wheel.prevent="handlerMouserScroll"> -->
|
|
|
<div ref="menuRef" class="menu-container scrollbar-none" @wheel.prevent="handlerMouserScroll">
|
|
|
- <!-- 顶部模式 -->
|
|
|
+ <!-- 顶部模式 -->
|
|
|
<div class="menu h-full flex of-hidden transition-all">
|
|
|
<template v-for="(item, index) in menuStore.allMenus" :key="index">
|
|
|
- <div
|
|
|
- class="menu-item relative mx-1 py-2 transition-all" :class="{
|
|
|
- active: index === menuStore.actived,
|
|
|
- }"
|
|
|
- >
|
|
|
- <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="{
|
|
|
+ <div class="menu-item relative mx-1 py-2 transition-all" :class="{
|
|
|
+ active: index === menuStore.actived,
|
|
|
+ }">
|
|
|
+ <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)"
|
|
|
- >
|
|
|
+ }" :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" class="menu-item-container-icon transition-transform group-hover-scale-120" />
|
|
|
+ <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon"
|
|
|
+ class="menu-item-container-icon transition-transform group-hover-scale-120" />
|
|
|
<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>
|