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="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-xl active:translate-y-0 active:shadow-md"
              @click="openModal"
          >
            联系我们
          </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>
  <!-- 模态框组件 -->
  <transition name="modal-fade">
    <div v-if="showModal" @click="closeModal" class="fixed inset-0 z-50 overflow-auto bg-black/50 bg-opacity-50 flex items-center justify-center p-4 backdrop-blur-lg ">
      <div @click.stop class="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden transform transition-all ">
        <!-- 模态框头部 -->
        <div class="bg-gradient-to-r from-indigo-600 to-blue-700 p-6 text-white">
          <div class="flex justify-between items-center">
            <h2 class="text-2xl font-bold">留下您的联系方式</h2>
            <button @click="closeModal" class="text-white hover:text-gray-200">
              <i class="fas fa-times text-xl"></i>
            </button>
          </div>
        </div>

        <!-- 模态框内容 -->
        <div class="p-6 max-h-[70vh] overflow-y-auto bg-gradient-to-r from-indigo-900 to-blue-900">
           <ContactForm />
        </div>

        <!-- 模态框底部 -->
        <div class="bg-gray-50 px-6 py-4 flex justify-end  bg-gradient-to-r from-indigo-900 to-blue-900">
          <button
              @click="closeModal"
              class="px-5 py-2 text-white rounded-lg font-medium border border-gray-300 mr-3 hover:bg-gray-100"
          >
            关闭
          </button>
          <button
              class="px-5 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700"
          >
            立即申请
          </button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
// 模态框控制
import {nextTick, onBeforeUnmount, onMounted, ref} from "vue";
import ContactForm from "@/components/ui/ContactForm.vue";

const isScrolled = ref(false)
const isMenuOpen = ref(false)
const showModal = ref(false)
const currentJob = ref({})

// 打开模态框
const openModal = (job) => {
  currentJob.value = job
  showModal.value = true
  // 初始化地图
  nextTick(() => {
    // initMap()
  })
}

// 关闭模态框
const closeModal = () => {
  showModal.value = false
  // 销毁地图实例
  if (window.mapInstance) {
    window.mapInstance.destroy()
    window.mapInstance = null
  }
}
const handleScroll = () => {
  isScrolled.value = window.scrollY > 20
}

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

const closeMenu = () => {
  isMenuOpen.value = false
}

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

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})
</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>