lingrui-web/components/AppHeader.vue

<template>
  <div class="page flex-col">
    <div class="group_1 flex-col">
      <div class="box_1 flex-row">
        <img class="image_1" referrerpolicy="no-referrer" src="public/img/logo.png" />

        <!-- Desktop Navigation -->
        <div class="desktop-nav">
          <span class="text_1">
            <NuxtLink to="/" :class="{ 'active': route.path === '/' }">
              企业首页
            </NuxtLink>
          </span>
          <span class="text_2">
          <NuxtLink to="/proServices/" :class="{ 'active': route.path === '/proServices/' || route.path === '/proServices_con/' ||  route.path === '/proServices_con'  ||  route.path === '/proServices' }">
            产品&nbsp;&amp;服务
          </NuxtLink>
          </span>
          <span class="text_3">
          <NuxtLink to="/aboutUs/" :class="{ 'active': route.path === '/aboutUs/' || route.path === '/aboutUs' }">
            灵睿&nbsp;&amp;我们
          </NuxtLink>
          </span>
          <span class="text_4">
          <NuxtLink to="/customerReviews/" :class="{ 'active': route.path === '/customerReviews/' || route.path === '/customerReviews' }">
            客户&amp;评价
          </NuxtLink>
          </span>
          <span class="text_5">
            <NuxtLink to="/societyDuty/" :class="{ 'active': route.path === '/societyDuty/' || route.path === '/societyDuty' }">
              社会&amp;责任
            </NuxtLink>
          </span>
          <span class="text_6">
          <NuxtLink to="/concatUs/" :class="{ 'active': route.path === '/concatUs/' || route.path === '/concatUs'}">
            加入我们
          </NuxtLink>
          </span>
        </div>

        <!-- Mobile Hamburger Button -->
        <div class="mobile-menu-btn" @click="toggleMobileMenu">
          <div class="hamburger" :class="{ 'is-active': isMobileMenuOpen }">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>

      <!-- Mobile Navigation -->
      <div class="mobile-nav" v-if="isMobileMenuOpen">
        <span class="mobile-nav-item">企业首页</span>
        <span class="mobile-nav-item">产品&nbsp;&amp;服务</span>
        <span class="mobile-nav-item">灵睿&nbsp;&amp;我们</span>
        <span class="mobile-nav-item">客户&amp;评价</span>
        <span class="mobile-nav-item">社会&amp;责任</span>
        <span class="mobile-nav-item">联系我们</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'

const store = useStore()
const route = useRoute()
const { locale } = useI18n()
const isMobileMenuOpen = ref(false)

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

console.log(route)
</script>

<style lang="scss" scoped>
@import '@/assets/index.css';

.box_1 {
  justify-content: center;
  padding: 0 20px;
  align-items: center;
  position: relative;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 20px;

  @media (max-width: 768px) {
    display: none;
  }
}

.mobile-menu-btn {
  display: none;
  cursor: pointer;

  @media (max-width: 768px) {
    display: block;
  }
}

.hamburger {
  width: 30px;
  height: 24px;
  position: relative;

  span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #000;
    border-radius: 3px;
    transition: all 0.3s ease;

    &:nth-child(1) {
      top: 0;
    }

    &:nth-child(2) {
      top: 10px;
    }

    &:nth-child(3) {
      top: 20px;
    }
  }

  &.is-active {
    span {
      &:nth-child(1) {
        transform: rotate(45deg);
        top: 10px;
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:nth-child(3) {
        transform: rotate(-45deg);
        top: 10px;
      }
    }
  }
}

.mobile-nav {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 100;

  @media (max-width: 768px) {
    display: flex;
  }

  .mobile-nav-item {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      color: #666;
    }
  }
}


.desktop-nav {
  span:hover {
    cursor: pointer;
    color: #fff;
  }
  a{
    cursor: pointer;
    &.active{
      color: #fff;
    }
  }
  
}
</style>