youbai/src/components/layout/Header.vue

<template>
  <header
      class="fixed top-0 w-full z-50 transition-all duration-300"
      :class="{
      'bg-white/90 backdrop-blur-sm shadow-sm py-3': isScrolled || isMenuOpen,
      'bg-transparent py-5': !isScrolled && !isMenuOpen
    }"
  >
    <div class="container mx-auto">
      <div class="flex justify-between items-center">
        <router-link to="/" class="flex items-center">
          <img
              src="@/assets/images/logo.png"
              alt="酉佰"
              class="h-8 md:h-10"
          />
          <span class="ml-2 text-xl md:text-2xl font-bold text-primary"
          >酉佰</span
          >
        </router-link>

        <nav class="hidden md:flex space-x-8">
          <router-link
              to="/"
              class="font-medium transition-colors hover:text-primary"
              active-class="text-primary"
              exact
          >首页</router-link
          >
          <router-link
              to="/about"
              class="font-medium transition-colors hover:text-primary"
              active-class="text-primary"
          >公司介绍</router-link
          >
          <router-link
              to="/team"
              class="font-medium transition-colors hover:text-primary"
              active-class="text-primary"
          >团队介绍</router-link
          >
          <router-link
              to="/features"
              class="font-medium transition-colors hover:text-primary"
              active-class="text-primary"
          >服务特色</router-link
          >
          <router-link
              to="/careers"
              class="font-medium transition-colors hover:text-primary"
              active-class="text-primary"
          >加入我们</router-link
          >
        </nav>

        <div class="hidden md:flex items-center space-x-4">
          <a
              href="#"
              class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-colors"
          >
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path
                  d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M17,19h-2v-2h2V19z M15,14h-2v5h2V14z M12,8.5c-1.1,0-2,0.9-2,2c0,0.5,0.2,1,0.5,1.4l-0.1,0.6c-0.1,0.3-0.1,0.6-0.1,1v1h4v-1c0-0.4,0-0.7-0.1-1l-0.1-0.6C13.8,11.5,14,11,14,10.5C14,9.4,13.1,8.5,12,8.5z"
              />
            </svg>
          </a>
          <button
              class="bg-primary hover:bg-blue-700 font-semibold px-4 py-2 rounded-full transition-colors"
          >
            联系我们
          </button>
        </div>

        <button @click="toggleMenu" class="md:hidden text-gray-700">
          <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
          >
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16m-7 6h7"
            />
          </svg>
        </button>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div
        v-show="isMenuOpen"
        class="md:hidden fixed inset-0 bg-white z-50 py-5"
        style="margin-top: 76px"
    >
      <div class="container">
        <nav class="flex flex-col space-y-4 py-4">
          <router-link
              to="/"
              class="font-medium text-lg py-2 transition-colors hover:text-primary"
              active-class="text-primary"
              @click="closeMenu"
          >首页</router-link
          >
          <router-link
              to="/about"
              class="font-medium text-lg py-2 transition-colors hover:text-primary"
              active-class="text-primary"
              @click="closeMenu"
          >公司介绍</router-link
          >
          <router-link
              to="/team"
              class="font-medium text-lg py-2 transition-colors hover:text-primary"
              active-class="text-primary"
              @click="closeMenu"
          >团队介绍</router-link
          >
          <router-link
              to="/features"
              class="font-medium text-lg py-2 transition-colors hover:text-primary"
              active-class="text-primary"
              @click="closeMenu"
          >服务特色</router-link
          >
          <router-link
              to="/careers"
              class="font-medium text-lg py-2 transition-colors hover:text-primary"
              active-class="text-primary"
              @click="closeMenu"
          >加入我们</router-link
          >
        </nav>
        <div class="pt-8">
          <button
              class="w-full bg-primary hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-colors"
          >
            联系我们
          </button>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      isScrolled: false,
      isMenuOpen: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.isScrolled = window.scrollY > 20
    },
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    },
    closeMenu() {
      this.isMenuOpen = false
    }
  }
}
</script>

<style scoped>
.router-link-exact-active {
  position: relative;
}

.router-link-exact-active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2563eb;
}
</style>