From 8eedc653453d6bd22fbd13a562123e9a004979c8 Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Fri, 23 May 2025 19:41:42 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E9=80=82=E9=85=8D=E4=B8=8D=E5=90=8C?=
 =?UTF-8?q?=E5=88=86=E8=BE=A8=E7=8E=87=E4=B8=8B=E6=96=87=E5=AD=97=E8=A2=AB?=
 =?UTF-8?q?=E6=8C=A4=E5=8E=8B=E5=AF=BC=E8=87=B4=E7=9C=81=E7=95=A5=EF=BC=8C?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=E7=9C=8B=E4=B8=8D=E5=85=A8=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/customHeader/index.vue         |   6 +-
 .../customHeader/size1440/index.vue           | 230 ++++++++++++++++++
 src/views/events-calendar/size1920/index.vue  |   4 +-
 src/views/press-releases/size1920/index.vue   |   2 +-
 4 files changed, 236 insertions(+), 6 deletions(-)
 create mode 100644 src/components/customHeader/size1440/index.vue

diff --git a/src/components/customHeader/index.vue b/src/components/customHeader/index.vue
index 0715df1..eb93384 100644
--- a/src/components/customHeader/index.vue
+++ b/src/components/customHeader/index.vue
@@ -4,7 +4,7 @@ import { useWindowSize } from '@vueuse/core'
 
 import size375 from '@/components/customHeader/size375/index.vue'
 import size768 from '@/components/customHeader/size375/index.vue'
-import size1440 from '@/components/customHeader/size1920/index.vue'
+import size1440 from '@/components/customHeader/size1440/index.vue'
 import size1920 from '@/components/customHeader/size1920/index.vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -17,9 +17,9 @@ const viewComponent = computed(() => {
   const viewWidth = width.value
   if (viewWidth <= 450) {
     return size375
-  } else if (viewWidth <= 768) {
+  } else if (viewWidth <= 835) {
     return size768
-  } else if (viewWidth <= 1500) {
+  } else if (viewWidth <= 1640) {
     return size1440
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
     return size1920
diff --git a/src/components/customHeader/size1440/index.vue b/src/components/customHeader/size1440/index.vue
new file mode 100644
index 0000000..2d73116
--- /dev/null
+++ b/src/components/customHeader/size1440/index.vue
@@ -0,0 +1,230 @@
+<template>
+  <!-- 通用页头 -->
+  <NLayoutHeader
+    class="custom-header"
+    :class="{ 'header-scrolled': isScrolled }"
+  >
+    <div class="header-container">
+      <div class="logo" @click="handleToHome">
+        <NImage width="160" height="50" :src="FiEELogo" preview-disabled />
+      </div>
+      <div class="header-menu">
+        <NMenu
+          mode="horizontal"
+          :options="menuOptions"
+          :inverted="isScrolled"
+          v-model:value="selectedKey"
+          @update:value="handleMenuSelect"
+        />
+      </div>
+    </div>
+  </NLayoutHeader>
+</template>
+
+<script setup>
+import FiEELogo from '@/assets/image/header/logo.png'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { NMenu, NLayoutHeader, NImage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
+
+const { t } = useI18n()
+const router = useRouter()
+
+// 使用统一的菜单配置
+const menuOptions = useHeaderMenuConfig()
+const selectedKey = ref(null)
+
+const isScrolled = ref(false)
+
+// 递归查找菜单项
+function findMenuOptionByKey(options, key) {
+  for (const option of options) {
+    if (option.key === key) return option
+    if (option.children) {
+      const found = findMenuOptionByKey(option.children, key)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 菜单点击跳转
+const handleMenuSelect = (key) => {
+  const option = findMenuOptionByKey(menuOptions, key)
+  if (option && option.href) {
+    router.push(option.href)
+  }
+}
+
+// 监听滚动事件
+const handleScroll = () => {
+  //滚动距离大于100px时，处理对应的header样式
+  isScrolled.value = window.scrollY >= 100
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+
+//点击回到首页
+const handleToHome = () => {
+  router.push('/myhome')
+  selectedKey.value = null // 重置菜单选中状态
+}
+</script>
+
+<style scoped lang="scss">
+.custom-header {
+  --header-height: 5rem;
+  --primary-color: #8b59f7;
+  transition: all 0.3s ease;
+  background: transparent;
+  height: var(--header-height);
+
+  &.header-scrolled {
+    background: rgba(220, 207, 248, 0.95);
+    backdrop-filter: blur(8px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.header-container {
+  max-width: 1700px;
+  margin: 0 auto;
+  padding: 0 40px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  margin-right: 100px;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.header-menu {
+  display: block;
+  flex: 1;
+
+  :deep(.n-menu) {
+    background: transparent;
+    justify-content: flex-end;
+  }
+
+  :deep(.n-menu-item) {
+    position: relative;
+    margin: 0 10px;
+    transition: all 0.3s ease;
+    font-weight: 700;
+    // font-size: 16px;
+    font-size: 0.875rem;
+    min-width: 120px;
+    text-align: center;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      height: 2px;
+      background: var(--primary-color);
+      transition: all 0.3s ease;
+      transform: translateX(-50%);
+      opacity: 0;
+      border-radius: 2px;
+    }
+
+    &:hover {
+      &::after {
+        width: 80px;
+        height: 3px;
+        opacity: 1;
+      }
+    }
+
+    // 选中状态的样式
+    &.n-menu-item--selected {
+      &::after {
+        width: 40px;
+        opacity: 1;
+      }
+    }
+  }
+
+  // 子菜单样式
+  :deep(.n-submenu) {
+    .n-submenu-children {
+      backdrop-filter: blur(16px);
+      background: rgba(255, 255, 255, 0.9);
+      border-radius: 12px;
+      padding: 8px 0;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+      transform-origin: top;
+      animation: dropDown 0.3s ease;
+
+      .n-menu-item {
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: var(--primary-color);
+          transform: translateX(-100%);
+          transition: transform 0.3s ease;
+          opacity: 0.1;
+          z-index: -1;
+        }
+
+        &:hover {
+          &::before {
+            transform: translateX(0);
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes dropDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+</style>
+<style>
+.header-menu .n-menu .n-menu-item-content .n-menu-item-content-header {
+  word-break: break-word;
+  white-space: unset !important;
+}
+.header-menu .n-menu .n-submenu .n-menu-item-content{
+  padding: 0 8px!important;
+}
+</style>
diff --git a/src/views/events-calendar/size1920/index.vue b/src/views/events-calendar/size1920/index.vue
index b8af146..1d5320b 100644
--- a/src/views/events-calendar/size1920/index.vue
+++ b/src/views/events-calendar/size1920/index.vue
@@ -60,11 +60,11 @@ const handleSearch = () => {
 }
 
 .search-date-picker {
-  width: 240px;
+  width: 14rem;
 }
 
 :deep(.n-date-picker) {
-  width: 240px;
+  width: 14rem;
   .n-input__input {
     padding: 4px 0;
     border-radius: 4px;
diff --git a/src/views/press-releases/size1920/index.vue b/src/views/press-releases/size1920/index.vue
index 6cd159e..325c0f8 100644
--- a/src/views/press-releases/size1920/index.vue
+++ b/src/views/press-releases/size1920/index.vue
@@ -77,7 +77,7 @@ const handleSearch = () => {
 }
 
 .search-select {
-  width: 160px;
+  width: 7rem;
   :deep(.n-base-selection) {
     padding: 4px 0;
   }