lingrui-web/components/AppHeader.vue

<template>
  <div class="page flex-col">
    <div class="group_1 flex-col" :class="[(isScrolled || isHovered) && route.name != 'info-id' ? 'topfix' : '']"
      @mouseenter="isScrolled = true;" @mouseleave="checkBoxHeight()">
      <div class="flex-row" :class="route.name == 'info-id' ? 'box_1 box_1_info' : 'box_1'">
        <img v-if="route.name != 'info-id' && !isScrolled" class="image_1" referrerpolicy="no-referrer"
          :src="`${cdnUrl}/img/logo.png`" />
        <img v-if="route.name != 'info-id' && isScrolled" class="image_1" referrerpolicy="no-referrer"
          :src="`${cdnUrl}/img/logo1.png`" />
        <img v-if="route.name == 'info-id'" class="image_1" referrerpolicy="no-referrer"
          :src="`${cdnUrl}/img/logo1.png`" />
        <!-- Desktop Navigation -->
        <div class="desktop-nav">
          <div data-title="企业首页"
            :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
            <NuxtLink to="/" :class="[route.path === '/' ? 'active' : '']">
              企业首页
            </NuxtLink>
          </div>
          <div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
            <NuxtLink to="/proServices_con/"
              :class="[route.path === '/proServices/' || route.path === '/proServices_con/' || route.path === '/proServices_con' || route.path === '/proServices' ? 'active' : '']">
              产品&amp;服务
            </NuxtLink>
          </div>
          <div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
            <NuxtLink to="/aboutUs/" :class="[route.path === '/aboutUs/' || route.path === '/aboutUs' ? 'active' : '']">
              灵睿&amp;我们
            </NuxtLink>
          </div>
          <div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
            <NuxtLink to="/customerReviews/"
              :class="[route.path === '/customerReviews/' || route.path === '/customerReviews' ? 'active' : '']">
              客户&amp;评价
            </NuxtLink>
          </div>
          <div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
            <NuxtLink to="/societyDutyNew/"
              :class="[route.path === '/societyDuty/' || route.path === '/societyDuty' || route.path === '/societyDutyNew/' || route.path === '/societyDutyNew' ? 'active' : '']">
              社会&amp;责任
            </NuxtLink>
          </div>
          <div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
            <NuxtLink to="/concatUs/"
              :class="[route.path === '/concatUs/' || route.path === '/concatUs' ? 'active' : '']">
              加入我们
            </NuxtLink>
          </div>
        </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>
    <transition name="fade-scale">
      <div v-if="scrollTop > 1000" class="back-to-top">
        <img @click="openTop()" :src="`${cdnUrl}/img/get_top.png`" alt="返回顶部" />
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const cdnUrl = useCdn()
const store = useStore()
const route = useRoute()
const { locale } = useI18n()
const isMobileMenuOpen = ref(false)
const isScrolled = ref(false)
const isHovered = ref(false)
const scrollTop = ref(0);
const handleScroll = () => {
  isScrolled.value = window.scrollY > 0;
  scrollTop.value = window.scrollY;
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  // 初始化时检查一次滚动位置
  handleScroll()
})

const checkBoxHeight = () => {
  if (window.scrollY == 0) {
    isScrolled.value = false;
  }
}

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

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}
const openTop = () => {
  //返回顶部
  window.scrollTo(0, 0);
}

console.log(route)
</script>

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

.group_1 {
  transition: all 0.3s ease-in-out;
  background-color: transparent;
}

.box_1 {
  justify-content: center;
  padding: 0 20px;
  align-items: center;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.topfix {
  background: rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease-in-out;
  transform: translateY(0);
  opacity: 1;
}

.group_1:not(.topfix) {
  background-color: transparent;
  box-shadow: none;
  transform: translateY(0);
  opacity: 1;
}

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

  @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;
    }
  }
}

.text_black {
  color: #000000;
  transition: color 0.1s ease-in-out;
}

.text_black_w {
  color: #ffffff;
  font-weight: 600;
  transition: color 0.3s ease-in-out;
}

.text_5_info {
  background-color: #FC7428;
  height: 90px !important;
  line-height: 90px !important;
  padding: 0 20px;
  color: #ffffff !important;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.box_1_info {
  height: 90px !important;
  margin: 0px !important;
  transition: all 0.3s ease-in-out;
}

.image_1 {
  transition: all 0.3s ease-in-out;
}

.back-to-top {
  position: fixed;
  bottom: 20%;
  right: 20px;
  z-index: 1000;
  
  img {
    height: 60px;
    cursor: pointer;
    transition: transform 0.3s ease;
    
    &:hover {
      transform: scale(1.1);
    }
  }
}

.fade-scale-enter-active,
.fade-scale-leave-active {
  transition: all 0.3s ease;
}

.fade-scale-enter-from,
.fade-scale-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

.fade-scale-enter-to,
.fade-scale-leave-from {
  opacity: 1;
  transform: scale(1);
}
</style>