lingrui-web/components/AppHeader.vue

<template>
  <div class="page flex-col">
    <div class="group_1 flex-col">
      <div class="flex-row" :class="route.name=='info-id'?'box_1 box_1_info':'box_1'">
        <img v-if="route.name!='info-id'" class="image_1" referrerpolicy="no-referrer" src="public/img/logo.png" />
        <img v-if="route.name=='info-id'" class="image_1" referrerpolicy="no-referrer" src="public/img/logo1.png" />
        <!-- Desktop Navigation -->
        <div class="desktop-nav">
          <span :class="route.name=='info-id'?'text_black text_1':'text_1'">
            <NuxtLink to="/" :class="{ 'active': route.path === '/' }">
              企业首页
            </NuxtLink>
          </span>
          <span :class="route.name=='info-id'?'text_black text_2':'text_2'">
          <NuxtLink to="/proServices/" :class="{ 'active': route.path === '/proServices/' || route.path === '/proServices_con/' ||  route.path === '/proServices_con'  ||  route.path === '/proServices' }">
            产品&amp;服务
          </NuxtLink>
          </span>
          <span :class="route.name=='info-id'?'text_black text_3':'text_3'">
          <NuxtLink to="/aboutUs/" :class="{ 'active': route.path === '/aboutUs/' || route.path === '/aboutUs' }">
            灵睿&amp;我们
          </NuxtLink>
          </span>
          <span :class="route.name=='info-id'?'text_black text_4':'text_4'">
          <NuxtLink to="/customerReviews/" :class="{ 'active': route.path === '/customerReviews/' || route.path === '/customerReviews' }">
            客户&amp;评价
          </NuxtLink>
          </span>
          <span :class="route.name=='info-id'?'text_5_info':'text_5'">
            <NuxtLink to="/societyDuty/" :class="{ 'active': route.path === '/societyDuty/' || route.path === '/societyDuty' || route.path === '/societyDutyNew/' || route.path === '/societyDutyNew' }">
              社会&amp;责任
            </NuxtLink>
          </span>
          <span :class="route.name=='info-id'?'text_black text_6':'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">产品&amp;服务</span>
        <span class="mobile-nav-item">灵睿&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;
  }
}
.desktop-nav_top{

}

.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;
    }
  }
  
}
.text_black{
  color: #000000!important;
}
.text_5_info{
  	background-color: #FC7428;
	height: 70px !important;
	width: 120px !important;
	line-height: 70px !important;
	padding: 0px 20px !important;
  margin-left: 30px;
  color: #ffffff!important;
  text-align: center;
}
.box_1_info {
	height: 50px !important;
	margin: 0px !important;
	padding-top: 20px !important;
}
</style>