gongxue-new/docs/.vitepress/theme/pages/Contact.vue

<script setup lang="ts">
import { Phone, Mail, MapPin, Building2, Clock, MessageCircle, Users, Handshake } from 'lucide-vue-next'

const cooperationModes = [
  { icon: Building2, title: '机构加盟', desc: '提供品牌授权、课程体系、师资培训、运营支持等全方位加盟服务', color: 'blue' },
  { icon: Users, title: '校企合作', desc: '与高校、专科院校开展升本培训、就业指导等深度合作项目', color: 'green' },
  { icon: Handshake, title: '渠道代理', desc: '招募区域代理商，共享优质教育资源，实现互利共赢', color: 'orange' },
]
</script>

<template>
  <div class="pt-16 min-h-screen bg-apple-grey">
    <section class="py-16 md:py-24 bg-gradient-to-br from-slate-900 to-slate-800">
      <div class="max-w-7xl mx-auto px-6 text-center">
        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6">
          <Handshake :size="18" />
          <span>Business Cooperation</span>
        </div>
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
          商务合作
        </h1>
        <p class="text-lg md:text-xl text-slate-300 max-w-2xl mx-auto">
          携手恭学教育，共创教育未来。期待与各类教育机构、企业展开深度合作。
        </p>
      </div>
    </section>

    <section class="py-16 md:py-20">
      <div class="max-w-7xl mx-auto px-6">
        <div class="grid md:grid-cols-2 gap-8 lg:gap-12">
          <div class="space-y-6">
            <h2 class="text-2xl md:text-3xl font-bold text-apple-dark mb-8">联系我们</h2>
            
            <div class="space-y-4">
              <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow flex items-start gap-4">
                <div class="w-12 h-12 bg-apple-blue/10 rounded-xl flex items-center justify-center flex-shrink-0">
                  <Phone class="text-apple-blue" :size="24" />
                </div>
                <div>
                  <h3 class="font-bold text-apple-dark mb-1">咨询电话</h3>
                  <a href="tel:18322616529" class="text-xl font-semibold text-apple-blue hover:underline">
                    18322616529
                  </a>
                  <p class="text-sm text-gray-500 mt-1">工作日 9:00 - 21:00</p>
                </div>
              </div>

              <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow flex items-start gap-4">
                <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                  <Mail class="text-green-600" :size="24" />
                </div>
                <div>
                  <h3 class="font-bold text-apple-dark mb-1">商务邮箱</h3>
                  <a href="mailto:business@gongxue.cn" class="text-apple-blue hover:underline">
                    business@gongxue.cn
                  </a>
                  <p class="text-sm text-gray-500 mt-1">我们将在24小时内回复</p>
                </div>
              </div>

              <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow flex items-start gap-4">
                <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
                  <MapPin class="text-orange-600" :size="24" />
                </div>
                <div>
                  <h3 class="font-bold text-apple-dark mb-1">公司地址</h3>
                  <p class="text-gray-700">天津市津南区海棠众创大街C区智创工坊2层</p>
                  <p class="text-sm text-gray-500 mt-1">欢迎预约来访</p>
                </div>
              </div>

              <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow flex items-start gap-4">
                <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0">
                  <Clock class="text-purple-600" :size="24" />
                </div>
                <div>
                  <h3 class="font-bold text-apple-dark mb-1">工作时间</h3>
                  <p class="text-gray-700">周一至周日 9:00 - 21:00</p>
                  <p class="text-sm text-gray-500 mt-1">全年无休，随时为您服务</p>
                </div>
              </div>
            </div>
          </div>

          <div class="flex flex-col items-center justify-center">
            <div class="bg-white p-8 rounded-3xl shadow-lg text-center max-w-sm w-full">
              <div class="w-16 h-16 bg-apple-blue/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
                <MessageCircle class="text-apple-blue" :size="32" />
              </div>
              <h3 class="text-xl font-bold text-apple-dark mb-2">微信扫码咨询</h3>
              <p class="text-gray-500 text-sm mb-6">添加客服微信 onlineart，获取详细合作方案</p>
              
              <div class="bg-gray-50 p-4 rounded-2xl inline-block">
                <img 
                  src="https://duiwaifengxiang-1304851894.cos.ap-beijing.myqcloud.com/gwgongxue/code.jpg" 
                  alt="客服微信二维码"
                  class="w-48 h-48 rounded-lg mx-auto"
                />
              </div>
              
              <p class="text-xs text-gray-400 mt-4">长按识别或扫一扫添加</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="py-16 md:py-20 bg-white">
      <div class="max-w-7xl mx-auto px-6">
        <div class="text-center mb-12">
          <h2 class="text-2xl md:text-3xl font-bold text-apple-dark mb-4">合作模式</h2>
          <p class="text-gray-500">多元化合作方式，满足不同需求</p>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          <div 
            v-for="(item, i) in cooperationModes"
            :key="i"
            class="bg-apple-grey p-8 rounded-3xl hover:shadow-lg transition-all duration-300 group"
          >
            <div :class="[
              'w-14 h-14 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform',
              item.color === 'blue' ? 'bg-blue-100 text-blue-600' :
              item.color === 'green' ? 'bg-green-100 text-green-600' :
              'bg-orange-100 text-orange-600'
            ]">
              <component :is="item.icon" :size="28" />
            </div>
            <h3 class="text-xl font-bold text-apple-dark mb-3">{{ item.title }}</h3>
            <p class="text-gray-600 leading-relaxed">{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <section class="py-16 md:py-20 bg-apple-grey">
      <div class="max-w-7xl mx-auto px-6">
        <div class="bg-white rounded-3xl p-8 md:p-12 shadow-sm">
          <div class="flex flex-col md:flex-row items-center gap-8">
            <div class="flex items-center justify-center w-24 h-24 bg-white rounded-2xl flex-shrink-0 shadow-sm">
              <img 
                src="/logo.png" 
                alt="恭学教育Logo" 
                class="w-16 h-16"
              />
            </div>
            <div>
              <h2 class="text-2xl font-bold text-apple-dark mb-4">关于恭学教育</h2>
              <p class="text-gray-600 leading-relaxed mb-4">
                恭学教育是天津领先的专升本培训品牌，专注于为专科学生提供优质的升本辅导服务。
                我们拥有完善的课程体系、专业的师资团队和先进的教学技术，已累计帮助数万名学员成功升本。
              </p>
              <p class="text-gray-600 leading-relaxed">
                秉承"赋能未来，让升本更简单"的理念，恭学教育致力于用科技创新推动教育进步，
                为广大学子提供更高效、更便捷的学习体验。
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>