基本完成静态页面

src/components/layout/Header.vue

@@ -54,18 +54,19 @@
         </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>
+<!--          <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"
+              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>
@@ -143,36 +144,97 @@
         </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>
-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 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>
@@ -189,4 +251,4 @@ export default {
   height: 2px;
   background-color: #2563eb;
 }
-</style>
+</style>