qimaohong
/
hcdbqbVue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页

master
zhaoruhui 3 months ago
parent
f55801c500
commit
88ae6c91ce
1 changed files with 723 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 735
      index.html

735
index.html
View File

@ -1,13 +1,724 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="shortcut icon" href="dbqb_favicon.ico" />
<link rel="Bookmark" href="dbqb_favicon.ico" />
<meta http-equiv="keywords" content="夺宝奇兵,homilychart,homilylink">
<meta http-equiv="description" content="HomilyLink">
<title>夺宝奇兵 - AI炒股时代，机构界的黑科技！</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script type="text/javascript" src="https://hc.homilychart.com/hc/210802/js/jquery-1.9.1.min.js"></script>
<!-- 引入Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义颜色和字体 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
accent: '#8B5CF6',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-hover {
@apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}
.gradient-bg {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}
}
</style>
<style>
/* 全局动画定义 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
.delay-100 {
animation-delay: 0.1s;
}
.delay-200 {
animation-delay: 0.2s;
}
.delay-300 {
animation-delay: 0.3s;
}
/* 平滑滚动 */
html {
scroll-behavior: smooth;
}
/* 加载字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
</style>
</head>
<body class="font-sans bg-light text-dark">
<!-- 导航栏 -->
<header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<a href="#" class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
</div>
<span
class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">夺宝奇兵</span>
</a>
<!-- 桌面导航 -->
<nav class="hidden md:flex items-center space-x-8">
<a href="#features" class="font-medium hover:text-primary transition-colors">特色功能</a>
<a href="#kc" class="font-medium hover:text-primary transition-colors">最新课程</a>
<a href="hcdbqb-guide.asp" class="font-medium hover:text-primary transition-colors">操作指南</a>
<a href="https://wa.me/+6588792879?text=夺宝奇兵指南我需要帮助" target="_blank"
class="px-5 py-2 rounded-full gradient-bg text-white font-medium hover:shadow-lg transition-all">联系我们</a>
</nav>
<!-- 移动端菜单按钮 -->
<button id="menuBtn" class="md:hidden text-xl">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- 移动端导航菜单 -->
<div id="mobileMenu" class="md:hidden hidden bg-white border-t animate-fade-in">
<div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
<a href="#features" class="font-medium py-2 hover:text-primary transition-colors">特色功能</a>
<a href="#kc" class="font-medium py-2 hover:text-primary transition-colors">最新课程</a>
<a href="hcdbqb-guide.asp" class="font-medium py-2 hover:text-primary transition-colors">操作指南</a>
<a href="https://wa.me/+6588792879?text=夺宝奇兵指南我需要帮助" target="_blank"
class="py-2 rounded-full gradient-bg text-white font-medium text-center hover:shadow-lg transition-all">联系我们</a>
</div>
</div>
</header>
<!-- 英雄区域 -->
<section class="pt-32 pb-20 md:pt-40 md:pb-32 px-4 bg-gradient-to-b from-blue-50 to-white">
<div class="container mx-auto max-w-6xl">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in">
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow mb-6">
夺宝奇兵，<br>
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">现在免费体验！</span>
</h1>
<p class="text-lg text-gray-600 mb-8 max-w-lg">
AI时代股票投资必备机构界的黑科技！<br />
现开放免费体验7天的活动，立刻注册报名吧！
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#register"
class="px-8 py-3 rounded-full gradient-bg text-white font-medium text-center hover:shadow-lg hover:shadow-primary/20 transition-all transform hover:-translate-y-0.5">
立即注册
</a>
<a href="#promotions"
class="px-8 py-3 rounded-full border-2 border-primary text-primary font-medium text-center hover:bg-primary/5 transition-all">
了解更多
</a>
<a href="hcdbqb-download.asp"
class="px-8 py-3 rounded-full border-2 border-primary text-primary font-medium text-center hover:bg-primary/5 transition-all">
立刻下载
</a>
</div>
</div>
<div class="md:w-1/2 animate-fade-in delay-200">
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-accent/20 rounded-3xl blur-xl opacity-70">
</div>
<img src="https://hc.homilychart.com/hc/250121/img/dbqbindex.jpg" alt="夺宝奇兵"
class="relative z-10 rounded-2xl shadow-xl w-full object-cover">
</div>
</div>
</div>
</div>
</section>
<!-- 特色亮点 -->
<section id="features" class="py-16 px-4 bg-white">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-16 animate-fade-in">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">您可以免费体验什么？</h2>
<p class="text-gray-600 max-w-2xl mx-auto">您可以免费体验 超级云脑 AI预测大模型 夺宝利剑三个模块 7天 </p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover animate-fade-in delay-100">
<div class="w-14 h-14 rounded-xl bg-blue-100 flex items-center justify-center mb-6">
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/chaojiyunnao.png">
</div>
<h3 class="text-xl font-semibold mb-3">超级云脑</h3>
<p class="text-gray-600">您的股票该体检了！<br />从十大维度，为您的股票进行全面体检！</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover animate-fade-in delay-200">
<div class="w-14 h-14 rounded-xl bg-purple-100 flex items-center justify-center mb-6">
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png">
</div>
<h3 class="text-xl font-semibold mb-3">AI预测大模型</h3>
<p class="text-gray-600">采用最先进的安全技术，保护您的数据和隐私，让您高枕无忧地开展业务。</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover animate-fade-in delay-300">
<div class="w-14 h-14 rounded-xl bg-green-100 flex items-center justify-center mb-6">
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/duobaolijian.png">
</div>
<h3 class="text-xl font-semibold mb-3">夺宝利剑</h3>
<p class="text-gray-600">根据您的具体需求提供个性化解决方案，灵活适应不同业务场景和规模。</p>
</div>
</div>
</div>
</section>
<!-- 图文宣传区 -->
<section id="promotions" class="py-20 px-4 bg-gray-50">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-16 animate-fade-in">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">我们的创新解决方案</h2>
<p class="text-gray-600 max-w-2xl mx-auto">探索我们的核心产品和服务，了解如何为您的业务创造价值</p>
</div>
<!-- 宣传项 1 -->
<div class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row animate-fade-in">
<div class="md:w-1/2">
<img src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg" alt="智能数据分析平台" class="w-full h-full object-cover">
</div>
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
<span class="inline-block px-4 py-1 rounded-full bg-blue-100 text-primary text-sm font-medium mb-4">HomilyLink
> 夺宝奇兵 > 超级云脑</span>
<h3 class="text-2xl md:text-3xl font-bold mb-4">超级云脑:股票体检专家</h3>
<p class="text-gray-600 mb-6">
利用人工智能和机器学习技术，快速处理和分析海量数据，通过十大维度为您的股票进行专科体检，追踪机构行为。
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>云脑探秘</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>机构动向</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>体检专家</span>
</li>
</ul>
<a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
注册了解更多 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 宣传项 2 -->
<div
class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100">
<div class="md:w-1/2">
<img src="https://hc.homilychart.com/hc/250121/img/aiyucedamoxing.jpg" alt="AI预测大模型" class="w-full h-full object-cover">
</div>
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
<span
class="inline-block px-4 py-1 rounded-full bg-purple-100 text-accent text-sm font-medium mb-4">HomilyLink >
夺宝奇兵 > AI预测大模型</span>
<h3 class="text-2xl md:text-3xl font-bold mb-4">AI预测大模型</h3>
<p class="text-gray-600 mb-6">
AI 预测大模型颠覆传统，以深度学习与算法挖股市数据抓趋势、预测高低点；AI时空共振结合前沿 AI与时空共振精准识别变盘点。
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>AI股价预测术</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>AI时空共振</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>未来预测</span>
</li>
</ul>
<a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
注册了解更多 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 宣传项 2 -->
<div
class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100">
<div class="md:w-1/2">
<img src="https://hc.homilychart.com/hc/250121/img/duobaolijianindex.jpg" alt="夺宝利剑" class="w-full h-full object-cover">
</div>
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
<span
class="inline-block px-4 py-1 rounded-full bg-purple-100 text-accent text-sm font-medium mb-4">HomilyLink
>夺宝奇兵 >Ai金牛 >夺宝利剑</span>
<h3 class="text-2xl md:text-3xl font-bold mb-4">夺宝利剑</h3>
<p class="text-gray-600 mb-6">
最聪明的AI智能均线结合三维波动量，让您在AI时代深度追踪机构的操盘行为！
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>最聪明的AI智能均线</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>三维波动量</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>AI大数据模型</span>
</li>
</ul>
<a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
注册了解更多 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 宣传项 3 -->
<div id="kc"
class="bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col md:flex-row animate-fade-in delay-200">
<div class="md:w-1/2">
<img src="https://hc.homilychart.com/hc/250121/img/kecheng.jpg" alt="John Lu谈股专题讲座" class="w-full h-full object-cover">
</div>
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
<span
class="inline-block px-4 py-1 rounded-full bg-green-100 text-secondary text-sm font-medium mb-4">HomilyLink
> 消息 > John Lu谈股财富圈</span>
<h3 class="text-2xl md:text-3xl font-bold mb-4">HomilyLink专题讲座</h3>
<p class="text-gray-600 mb-6">
我们推出 HomilyLink专题讲座；结合市场事实热点与机构领域黑科技 “夺宝奇兵”，助力投资者提升股市获利能力。
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>新加坡时间</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>注意换算当地时间</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>HomilyLink班级群课程</span>
</li>
</ul>
<a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
注册了解更多 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</section>
<!-- 注册表单区域 -->
<section id="register" class="py-20 px-4 bg-white">
<div class="container mx-auto max-w-6xl">
<div class="bg-gradient-to-br from-dark to-gray-800 rounded-3xl shadow-2xl overflow-hidden">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="p-8 md:p-12 text-white flex flex-col justify-center">
<h2 class="text-2xl md:text-3xl font-bold mb-4">立即注册，开启智能体验之旅！</h2>
<p class="text-gray-300 mb-8">
填写报名表，我们会尽快为您开启智能体验之旅！
</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
<img alt="超级云脑" src="https://hc.homilychart.com/hc/250121/img/chaojiyunnao.png">
</div>
<div>
<h3 class="font-semibold mb-1">超级云脑</h3>
<p class="text-gray-400 text-sm">您的股票体检专家！</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
<img alt="AI预测大模型" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png">
</div>
<div>
<h3 class="font-semibold mb-1">AI预测大模型</h3>
<p class="text-gray-400 text-sm">时间空间价格AI精准预测！</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
<img alt="夺宝利剑" src="https://hc.homilychart.com/hc/250121/img/duobaolijian.png">
</div>
<div>
<h3 class="font-semibold mb-1">夺宝利剑</h3>
<p class="text-gray-400 text-sm">最聪明的AI智能均线+三维波动量</p>
</div>
</div>
</div>
</div>
<div class="bg-white p-8 md:p-12">
<form id="registrationForm" class="space-y-6">
<input type="hidden" name="zbtype" id="zbtype" value="6">
<div>
<label for="unameinfo" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
<input type="text" id="unameinfo" name="unameinfo"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all"
placeholder="请输入您的姓名" required>
</div>
<div>
<label for="countryinfo" class="block text-sm font-medium text-gray-700 mb-1">国家/地区代码</label>
<select id="countryinfo" name="countryinfo"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all"
required>
<option value="+65">+65 新加坡</option>
<option value="+60">+60 马来西亚</option>
<option value="+852">+852 香港</option>
<option value="+1" selected='selected'>+1 美国</option>
<option value="+62">+62 印尼</option>
<option value="+1">+1 加拿大</option>
<option value="+61">+61 澳大利亚</option>
<option value="+673">+673 文莱</option>
<option value="+886">+886 台湾</option>
<option value="+86">+86 中国</option>
<option value="+0">+0 其他</option>
<option value="+64">+64 新西兰</option>
<option value="+44">+44 英国</option>
<option value="+81">+81 日本</option>
<option value="+49">+49 德国</option>
<option value="+82">+82 韩国</option>
<option value="+84 ">+84 越南</option>
<option value="+971">+971 阿联酋</option>
<option value="+45">+45 丹麦</option>
<option value="+853">+853 澳门</option>
<option value="+66">+66 泰国</option>
<option value="+91">+91 印度</option>
<option value="+41">+41 瑞士</option>
<option value="+358">+358 芬兰</option>
<option value="+33">+33 法国</option>
<option value="+63">+63 菲律宾</option>
<option value="+31">+31 荷兰</option>
<option value="+46">+46 瑞典</option>
<option value="+34">+34 西班牙</option>
<option value="+54">+54 阿根廷</option>
<option value="+39">+39 意大利</option>
<option value="+7">+7 俄罗斯</option>
<option value="+420">+420 捷克</option>
</select>
</div>
<div>
<label for="umoblie" class="block text-sm font-medium text-gray-700 mb-1">电话号码</label>
<input type="tel" name="umoblie" id="umoblie" placeholder="纯手机号 ( 不含国家编号 )"
onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0/g,'')"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all"
autocomplete="off" required>
</div>
<div>
<label for="uwechat" class="block text-sm font-medium text-gray-700 mb-1">微信ID</label>
<input type="text" name="uwechat" id="uwechat" placeholder="微信ID ( 如没有WhatsApp )" autocomplete="off"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
<input type="email" placeholder="请输入您的邮箱" name="uemail" id="uemail" autocomplete="off"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all"
required>
</div>
<div class="flex items-start">
<input type="checkbox" id="agreement" name="agreement" class="mt-1 mr-2" required>
<label for="agreement" class="text-sm text-gray-600">
我同意接收相关产品和服务的资讯
</label>
</div>
<button type="submit"
class="w-full py-3 px-6 rounded-lg gradient-bg text-white font-medium hover:shadow-lg hover:shadow-primary/20 transition-all transform hover:-translate-y-0.5">
提交注册
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-white py-12 px-4">
<div class="container mx-auto max-w-6xl">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center space-x-2 mb-6">
<div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 40px;height: 40px;">
</div>
<span class="text-xl font-bold">夺宝奇兵</span>
</div>
<p class="text-gray-400 mb-6">
AI炒股时代 机构界的黑科技！
</p>
<div class="flex space-x-4">
<a href="#"
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
<i class="fa fa-facebook"></i>
</a>
<a href="#"
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
<i class="fa fa-twitter"></i>
</a>
<a href="#"
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
<i class="fa fa-linkedin"></i>
</a>
<a href="#"
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">产品</h4>
<ul class="space-y-3">
<li><a href="https://wa.me/+6588792879?text=我要了解弘历云版软件" target="_blank"
class="text-gray-400 hover:text-white transition-colors">弘历云版软件</a></li>
<li><a href="https://wa.me/+6588792879?text=我要了解HomilyChart" target="_blank"
class="text-gray-400 hover:text-white transition-colors">HomilyChart</a></li>
<li><a href="https://wa.me/+6588792879?text=我要了解夺宝奇兵" target="_blank"
class="text-gray-400 hover:text-white transition-colors">夺宝奇兵</a></li>
<li><a href="https://wa.me/+6588792879?text=我要了解博股会员"
class="text-gray-400 hover:text-white transition-colors">博股会员</a></li>
<li><a href="https://wa.me/+6588792879?text=我要了解最新软件"
class="text-gray-400 hover:text-white transition-colors">最新软件</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">公司</h4>
<ul class="space-y-3">
<li><a href="https://wa.me/+6588792879?text=我要咨询" target="_blank"
class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
<li><a href="https://wa.me/+6588792879?text=我要咨询" target="_blank"
class="text-gray-400 hover:text-white transition-colors">团队介绍</a></li>
<li><a href="https://wa.me/+6588792879?text=我要咨询" target="_blank"
class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">支持</h4>
<ul class="space-y-3">
<li><a href="hcdbqb-guide.asp" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
<li><a href="https://wa.me/+6588792879?text=我有问题" target="_blank"
class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm mb-4 md:mb-0">&copy; Copyright 2025.Capitalmaster Pte Ltd All Rights
Reserved.<br /></p>
<div class="flex space-x-6">
如需帮助，请及时联系我们！
</div>
</div>
</div>
</footer>
<!-- 表单提交成功提示 -->
<div id="successModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all">
<div class="text-center">
<div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-6">
<i class="fa fa-check text-secondary text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">注册成功！</h3>
<p class="text-gray-600 mb-6">感谢您的注册，我们的顾问将尽快与您联系。</p>
<button id="closeModal"
class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
确定
</button>
</div>
</div>
</div>
<!-- JavaScript -->
<script>
// 移动端菜单切换
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');
menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
// 切换图标
const icon = menuBtn.querySelector('i');
if (icon.classList.contains('fa-bars')) {
icon.classList.replace('fa-bars', 'fa-times');
} else {
icon.classList.replace('fa-times', 'fa-bars');
}
});
// 导航栏滚动效果
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.classList.add('py-2', 'shadow');
header.classList.remove('py-3');
} else {
header.classList.add('py-3');
header.classList.remove('py-2', 'shadow');
}
});
// 表单提交处理
const registrationForm = document.getElementById('registrationForm');
const successModal = document.getElementById('successModal');
const closeModal = document.getElementById('closeModal');
registrationForm.addEventListener('submit', (e) => {
e.preventDefault();
var unameinfo = document.getElementById("unameinfo").value;
var zbtype = document.getElementById("zbtype").value;
var countryinfo = document.getElementById("countryinfo").value;
var umoblie = document.getElementById("umoblie").value;
var uwechat = document.getElementById("uwechat").value;
var uemail = document.getElementById("uemail").value;
var datastr = "unameinfo=" + encodeURIComponent(unameinfo) +
"&zbtype=" + encodeURIComponent(zbtype) +
"&countryinfo=" + encodeURIComponent(countryinfo) + // 关键：编码+号
"&umoblie=" + encodeURIComponent(umoblie) +
"&uwechat=" + encodeURIComponent(uwechat) +
"&uemail=" + encodeURIComponent(uemail);
alert(countryinfo);
$.ajax({
type: "POST",
url: "dbqbty.asp",
data: datastr,
success: function (date) {
if (date == '1') {
successModal.classList.remove('hidden');
registrationForm.reset();
}
if (date == '2') {
successModal.classList.remove('hidden');
registrationForm.reset();
}
}
});
});
closeModal.addEventListener('click', () => {
successModal.classList.add('hidden');
});
// 点击模态框外部关闭
successModal.addEventListener('click', (e) => {
if (e.target === successModal) {
successModal.classList.add('hidden');
}
});
// 滚动动画
const animateOnScroll = () => {
const elements = document.querySelectorAll('.animate-fade-in');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (elementPosition < windowHeight - 100) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
};
// 初始加载时执行一次
window.addEventListener('load', animateOnScroll);
// 滚动时执行
window.addEventListener('scroll', animateOnScroll);
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save