nanocode/new-media-platform/website-new/static/zsjm/index-old.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞点健康 - 招商加盟</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#10B981',
        'primary-dark': '#059669',
        'primary-light': '#D1FAE5',
      },
      animation: {
        'shake': 'shake 0.35s ease-in-out',
        'flip': 'flip 0.5s ease-in-out',
      },
      keyframes: {
        shake: {
          '0%, 100%': { transform: 'translateX(0)' },
          '20%': { transform: 'translateX(-3px) rotate(-0.8deg)' },
          '40%': { transform: 'translateX(3px) rotate(0.8deg)' },
          '60%': { transform: 'translateX(-2px) rotate(-0.5deg)' },
          '80%': { transform: 'translateX(2px) rotate(0.5deg)' },
        },
        flip: {
          '0%': { transform: 'rotateY(0deg)' },
          '100%': { transform: 'rotateY(360deg)' },
        },
      },
    }
  }
}
</script>
<style>
  .hover-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .hover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(13,148,136,0.12);
  }
</style>
</head>
<body class="bg-white text-gray-800">

<!-- 五大扶持 -->
<section class="py-24 px-4 bg-white">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">招商加盟</h2>
    <p class="text-center mb-12 text-gray-500">五大扶持，让您开店无忧</p>
    <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
      <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
        <div class="text-primary text-4xl mb-3 group-hover:animate-flip inline-block">📍</div>
        <h4 class="font-bold mb-2">选址扶持</h4>
        <p class="text-sm text-gray-500 leading-relaxed">专业选址评估团队<br>规划开业门店</p>
      </div>
      <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
        <div class="text-primary text-4xl mb-3 group-hover:animate-flip inline-block">🏗️</div>
        <h4 class="font-bold mb-2">装修扶持</h4>
        <p class="text-sm text-gray-500 leading-relaxed">标准化装修<br>品牌支持立店快</p>
      </div>
      <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
        <div class="text-primary text-4xl mb-3 group-hover:animate-flip inline-block">📋</div>
        <h4 class="font-bold mb-2">经营指导扶持</h4>
        <p class="text-sm text-gray-500 leading-relaxed">从合作到立店<br>专业化服务护航</p>
      </div>
      <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
        <div class="text-primary text-4xl mb-3 group-hover:animate-flip inline-block">🔍</div>
        <h4 class="font-bold mb-2">督导扶持</h4>
        <p class="text-sm text-gray-500 leading-relaxed">不定期巡店督导<br>扶持门店运营</p>
      </div>
      <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
        <div class="text-primary text-4xl mb-3 group-hover:animate-flip inline-block">👥</div>
        <h4 class="font-bold mb-2">用户导流</h4>
        <p class="text-sm text-gray-500 leading-relaxed">线上线下结合<br>海量慢病用户导流</p>
      </div>
    </div>
  </div>
</section>

<!-- 加盟电话 -->
<section class="py-16 px-4 bg-gradient-to-r from-primary to-primary-dark text-white text-center">
  <h2 class="text-3xl font-bold mb-4">加盟电话：0755-86969120</h2>
  <p class="text-emerald-200 text-lg">欢迎来电咨询，我们将竭诚为您服务</p>
</section>

<!-- 加盟流程 -->
<section class="py-16 px-4 max-w-6xl mx-auto">
  <h2 class="text-3xl font-bold text-center mb-4">加盟流程</h2>
  <p class="text-gray-500 text-center mb-12">标准化加盟流程，助您轻松开店</p>
  <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
    <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
      <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4 group-hover:animate-flip">
        <span class="text-2xl font-bold text-primary">01</span>
      </div>
      <h3 class="font-bold text-lg mb-2">初次接触</h3>
      <p class="text-gray-500 text-sm leading-relaxed">400电话咨询，线上填写《飞点健康-加盟申请表》</p>
    </div>
    <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
      <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4 group-hover:animate-flip">
        <span class="text-2xl font-bold text-primary">02</span>
      </div>
      <h3 class="font-bold text-lg mb-2">资质审核</h3>
      <p class="text-gray-500 text-sm leading-relaxed">总部审核通过申请表，预约时间面试</p>
    </div>
    <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
      <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4 group-hover:animate-flip">
        <span class="text-2xl font-bold text-primary">03</span>
      </div>
      <h3 class="font-bold text-lg mb-2">商圈评估</h3>
      <p class="text-gray-500 text-sm leading-relaxed">总部审核客户提交的店面</p>
    </div>
    <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
      <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4 group-hover:animate-flip">
        <span class="text-2xl font-bold text-primary">04</span>
      </div>
      <h3 class="font-bold text-lg mb-2">签订合同</h3>
      <p class="text-gray-500 text-sm leading-relaxed">店铺通过审核，签订《加盟合同》</p>
    </div>
    <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
      <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4 group-hover:animate-flip">
        <span class="text-2xl font-bold text-primary">05</span>
      </div>
      <h3 class="font-bold text-lg mb-2">装修培训</h3>
      <p class="text-gray-500 text-sm leading-relaxed">10个工作日内提供装修方案，15天培训</p>
    </div>
  </div>
  <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mt-4">
    <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
      <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4 group-hover:animate-flip">
        <span class="text-2xl font-bold text-primary">06</span>
      </div>
      <h3 class="font-bold text-lg mb-2">设备采纳</h3>
      <p class="text-gray-500 text-sm leading-relaxed">提供完整的设备采购方案</p>
    </div>
    <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
      <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4 group-hover:animate-flip">
        <span class="text-2xl font-bold text-primary">07</span>
      </div>
      <h3 class="font-bold text-lg mb-2">验收备货</h3>
      <p class="text-gray-500 text-sm leading-relaxed">店铺验收合格后，采购第一批原材料</p>
    </div>
    <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
      <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4 group-hover:animate-flip">
        <span class="text-2xl font-bold text-primary">08</span>
      </div>
      <h3 class="font-bold text-lg mb-2">双证办理</h3>
      <p class="text-gray-500 text-sm leading-relaxed">办理双证时给予指导</p>
    </div>
    <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
      <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4 group-hover:animate-flip">
        <span class="text-2xl font-bold text-primary">09</span>
      </div>
      <h3 class="font-bold text-lg mb-2">开业促销</h3>
      <p class="text-gray-500 text-sm leading-relaxed">策划新店开业营销方案</p>
    </div>
    <div class="group bg-white rounded-2xl shadow-md hover-card p-6 text-center border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
      <div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4 group-hover:animate-flip">
        <span class="text-2xl font-bold text-primary">10</span>
      </div>
      <h3 class="font-bold text-lg mb-2">后期辅导</h3>
      <p class="text-gray-500 text-sm leading-relaxed">提供店面管理指导、新品培训等</p>
    </div>
  </div>
</section>

<!-- 投资费用 -->
<section class="py-16 px-4 bg-gray-50">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">投资费用</h2>
    <p class="text-center mb-10 text-gray-500">透明报价，无隐形消费</p>
    <div class="bg-white rounded-2xl shadow-md hover-card overflow-hidden border border-gray-100">
      <table class="w-full text-left">
        <thead>
          <tr class="bg-primary text-white">
            <th class="px-6 py-4 font-semibold text-lg">名称</th>
            <th class="px-6 py-4 font-semibold text-lg">金额</th>
            <th class="px-6 py-4 font-semibold text-lg">备注</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-b border-gray-100">
            <td class="px-6 py-4 font-medium text-gray-700">加盟费</td>
            <td class="px-6 py-4 text-gray-600">3.98万元</td>
            <td class="px-6 py-4 text-gray-500">3年</td>
          </tr>
          <tr class="border-b border-gray-100 bg-gray-50/50">
            <td class="px-6 py-4 font-medium text-gray-700">保证金</td>
            <td class="px-6 py-4 text-gray-600">1万元</td>
            <td class="px-6 py-4 text-gray-500">合同期满无违规全额无息退还</td>
          </tr>
          <tr class="border-b border-gray-100">
            <td class="px-6 py-4 font-medium text-gray-700">管理费</td>
            <td class="px-6 py-4 text-gray-600">1万元/年</td>
            <td class="px-6 py-4 text-gray-500">合同期内每年收取</td>
          </tr>
          <tr class="border-b border-gray-100 bg-gray-50/50">
            <td class="px-6 py-4 font-medium text-gray-700">装修费</td>
            <td class="px-6 py-4 text-gray-600">约6万元</td>
            <td class="px-6 py-4 text-gray-500">具体以实际面积及造价预算为准</td>
          </tr>
          <tr class="border-b border-gray-100">
            <td class="px-6 py-4 font-medium text-gray-700">设备费</td>
            <td class="px-6 py-4 text-gray-600">约6万元</td>
            <td class="px-6 py-4 text-gray-500">按标准店配置采购</td>
          </tr>
          <tr class="border-b border-gray-100 bg-gray-50/50">
            <td class="px-6 py-4 font-medium text-gray-700">首批物料费</td>
            <td class="px-6 py-4 text-gray-600">约3万元</td>
            <td class="px-6 py-4 text-gray-500">包含核心原材料及包材</td>
          </tr>
          <tr class="border-b border-gray-100">
            <td class="px-6 py-4 font-medium text-gray-700">培训费</td>
            <td class="px-6 py-4 text-gray-600">免费</td>
            <td class="px-6 py-4 text-gray-500">—</td>
          </tr>
          <tr class="border-b border-gray-100 bg-gray-100">
            <td class="px-6 py-4 font-bold text-gray-800">总计</td>
            <td class="px-6 py-4 font-bold text-gray-800">约20.98万元</td>
            <td class="px-6 py-4 text-gray-500">不含装修费浮动</td>
          </tr>
          <tr class="bg-primary/10">
            <td colspan="3" class="px-6 py-4 text-center text-sm text-gray-700 font-medium">
              ⚠️ 以上费用仅供参考，实际费用（设备和物料等）根据店铺所在城市、店铺面积不同而有所变化。
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<!-- 联系方式 -->
<section class="py-16 px-4 max-w-6xl mx-auto text-center">
  <h2 class="text-3xl font-bold mb-4">联系方式</h2>
  <p class="text-gray-500 mb-8">留下您的信息，我们将尽快与您联系</p>
  <div class="flex flex-col md:flex-row justify-center gap-8">
    <a href="#" class="group bg-white rounded-2xl shadow-md hover-card p-8 flex-1 max-w-sm mx-auto border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer no-underline">
      <div class="text-5xl mb-4 group-hover:animate-flip inline-block">📝</div>
      <h3 class="font-bold text-lg mb-2 text-gray-800">点击填写登记信息</h3>
      <p class="text-gray-500 text-sm leading-relaxed">在线提交加盟申请，方便快捷</p>
    </a>
    <div class="group bg-white rounded-2xl shadow-md hover-card p-8 flex-1 max-w-sm mx-auto border border-gray-100 hover:animate-shake hover:shadow-lg [perspective:1000px] cursor-pointer">
      <div class="text-5xl mb-4 group-hover:animate-flip inline-block">📱</div>
      <h3 class="font-bold text-lg mb-2">扫码登记信息</h3>
      <p class="text-gray-500 text-sm leading-relaxed">扫描二维码，手机快速登记</p>
    </div>
  </div>
</section>

<footer class="bg-gray-800 text-gray-400 py-8 text-center text-sm">
  <p>© 2026 飞点健康 版权所有 | 招商加盟热线：0755-86969120</p>
</footer>

</body>
</html>