1

components/AppHeader/Menu/Menu.vue

@@ -0,0 +1,125 @@
+<template>
+  <!-- PC版菜单 -->
+  <el-menu
+      class="hidden-sm-and-down"
+      mode="horizontal"
+      style="background-color: transparent;"
+      active-text-color="#1b850c"
+      :ellipsis="false"
+      @select="handleSelect"
+  >
+    <template v-for="(item,index) in navigations" :key="index">
+      <template v-if="item.children && item.children.length > 0">
+        <el-sub-menu :index="`${index}`" class="ws-menu">
+          <template #title><span class="text-lg hover:text-green-700 menu-1">{{ item.title }}</span></template>
+          <template v-for="(sub,subIndex) in item.children" :key="subIndex">
+            <template v-if="sub.children && sub.children.length > 0">
+              <el-sub-menu :index="`${index}-${subIndex}`">
+                <template #title><p class="text-lg">{{ sub.title }}</p></template>
+                <el-menu-item v-for="(sub2,sub2Index) in sub.children" :key="sub2Index" :index="`${index}-${subIndex}-${sub2Index}`">
+                  <nuxt-link :to="navTo(sub2)" class="text-lg">{{ sub2.title }}</nuxt-link>
+                </el-menu-item>
+              </el-sub-menu>
+            </template>
+            <template v-else>
+              <el-menu-item :index="`${index}-${subIndex}`">
+                <nuxt-link :to="sub.path" class="text-lg"><el-space><el-image v-if="sub.icon" class="ws-icon" :src="sub.icon" />{{ sub.title }}</el-space></nuxt-link>
+              </el-menu-item>
+            </template>
+          </template>
+        </el-sub-menu>
+      </template>
+      <el-menu-item v-else :index="`${index}`">
+        <nuxt-link :to="navTo(item)" class="text-white text-lg">{{ item.title }}</nuxt-link>
+      </el-menu-item>
+    </template>
+  </el-menu>
+</template>
+<script setup lang="ts">
+import {navigateTo} from "#imports";
+import {useMenu} from "~/composables/configState";
+
+const navigations = useMenu();
+
+const handleSelect = (index: any,keyPath: string[]) => {
+  const split = index.split('-');
+  if(split.length == 1){
+    const item = navigations.value[index];
+    navigateTo(item)
+  }
+  if(split.length == 2){
+    const item = navigations.value[split[0]];
+    if(item.children){
+      const child = item.children[split[1]];
+      navigateTo(child.path)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.el-menu--horizontal > .el-menu-item:nth-child(1) {
+  margin-right: auto;
+}
+ .el-menu{
+   border-bottom: none;
+ }
+ .ws-icon{
+   width: 24px;
+   height: 24px;
+ }
+
+.el-menu-item, .el-sub-menu .el-sub-menu__title {
+  color: #f3f3f3 !important; // 默认字体颜色为白色
+}
+
+.el-menu-item:hover, .el-sub-menu .el-sub-menu__title:hover {
+  background-color: #ecffe7 !important; // 悬停时背景色为白色
+  color: #1b850c !important; // 悬停时字体颜色改为绿色
+}
+
+.el-menu-item.is-active {
+  color: #1b850c !important;
+  background: #ecffe7 !important;
+}
+.el-sub-menu .el-sub-menu__title:link{
+  color: #ff9900;
+}
+.el-sub-menu:hover{
+  color: #ff9900;
+}
+.text-base:hover{
+  color: #1b850c;
+}
+//
+//$--menu-item-hover-fill: #ff0000;
+//$--el-menu-hover-bg-color: #1b850c;
+.el-menu--horizontal {
+  color: #f1ffec;
+  background-color: #1b850c;
+}
+.text-white {
+  color: #125c09; // 确保字体颜色为白色
+}
+.text-white:hover {
+  color: #1b850c !important;
+}
+.text-lg {
+  font-size: 1.125rem; // 保持原有字体大小
+}
+.menu-1{
+  color: #f3f3f3;
+}
+.menu-1:hover{
+  color: #1b850c !important;
+}
+//.el-sub-emnu .ws-menu{
+//  color: #ff0000 !important;
+//}
+//
+//.menu-1{
+//  color: #ff0000 !important;
+//}
+//.el-menu--horizontal>.el-sub-menu:hover .el-sub-menu__title{
+//  color: #1b850c !important;
+//}
+</style>