fiee-official-website/src/components/customHeader/size1920/index.vue

<template>
  <!-- 通用页头 -->
  <NLayoutHeader
    class="custom-header"
    :class="{ 'header-scrolled': isScrolled }"
  >
    <div class="header-container">
      <div class="logo">
        <NImage width="108" height="33" :src="FiEELogo" preview-disabled />
      </div>
      <div class="header-menu">
        <NMenu
          mode="horizontal"
          :options="menuOptions"
          :inverted="isScrolled"
          @update:value="handleMenuSelect"
        />
      </div>
    </div>
  </NLayoutHeader>
</template>

<script setup>
import FiEELogo from '@/assets/images/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'
const { t } = useI18n()
const router = useRouter()

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 menuOptions = [
  {
    label: t('header_menu.corporate_information.title'),
    key: 'corporate_information',
    children: [
      {
        label: t('header_menu.corporate_information.company_overview'),
        key: 'company_overview',
      },
      {
        label: t('header_menu.corporate_information.business_introduction'),
        key: 'business_introduction',
      },
      {
        label: t('header_menu.corporate_information.management'),
        key: 'management',
      },
      {
        label: t('header_menu.corporate_information.board_of_directors'),
        key: 'board_of_directors',
      },
      {
        label: t('header_menu.corporate_information.committee_appointments'),
        key: 'committee_appointments',
      },
      {
        label: t('header_menu.corporate_information.governance'),
        key: 'governance',
      },
      {
        label: t('header_menu.corporate_information.corporate_video'),
        key: 'corporate_video',
      },
    ],
  },
  {
    label: t('header_menu.financial_information.title'),
    key: 'financial_information',
    children: [
      {
        label: t('header_menu.financial_information.sec_filings'),
        key: 'sec_filings',
      },
      {
        label: t('header_menu.financial_information.quarterly_results'),
        key: 'quarterly_results',
      },
    ],
  },
  {
    label: t('header_menu.stock_information.title'),
    key: 'stock_information',
    children: [
      {
        label: t('header_menu.stock_information.stock_quote'),
        key: 'stock_quote',
      },
      {
        label: t('header_menu.stock_information.historic_stock_price'),
        key: 'historic_stock_price',
      },
      {
        label: t('header_menu.stock_information.investment_calculator'),
        key: 'investment_calculator',
      },
    ],
  },
  {
    label: t('header_menu.news_releases.title'),
    key: 'news_releases',
    children: [
      {
        label: t('header_menu.news_releases.press_releases'),
        key: 'press_releases',
        href: '/new-releases',
      },
      {
        label: t('header_menu.news_releases.events_calendar'),
        key: 'events_calendar',
      },
    ],
  },
  {
    label: t('header_menu.investor_resources.title'),
    key: 'investor_resources',
    children: [
      {
        label: t('header_menu.investor_resources.ir_contacts'),
        key: 'ir_contacts',
      },
      {
        label: t('header_menu.investor_resources.email_alerts'),
        key: 'email_alerts',
      },
    ],
  },
]

// 监听滚动事件
const handleScroll = () => {
  //滚动距离大于100px时，处理对应的header样式
  isScrolled.value = window.scrollY >= 100
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped lang="scss">
.custom-header {
  --header-height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
  background: transparent;
  height: var(--header-height);

  &.header-scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  flex-shrink: 0;
}

.header-menu {
  display: block;
}
</style>