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

写好主页面

fanwenqing/feature-20260202203448-美股市场改版前台
zxz 3 weeks ago
parent
6b6f72d081
commit
ab6cf983ee
1 changed files with 235 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 311
      index.html

311
index.html
View File

@ -116,7 +116,7 @@
<span class="text-gray-300">|</span>
<a class="text-gray-700 hover:text-orange-500 font-medium">操作指南</a>
<span class="text-gray-300">|</span>
<a class="bg-orange-500 text-white px-6 py-2 rounded-full font-bold hover:bg-orange-600 shadow-md">
<a class=" text-white px-6 py-2 rounded-full font-bold hover:shadow-lg transition-all" style="background: #FFA300;">
联系我们
</a>
</nav>
@ -238,76 +238,104 @@
</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 promotion-image">
<img src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg" alt="智能数据分析平台" class="w-full h-full">
<div class="md:w-1/2 promotion-image overflow-hidden">
<img
src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg"
alt="DeepChart"
class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
>
</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-red-100 text-red-600 text-base font-medium mb-4 breadcrumb-text">
路径：DeepChart
</span>
<h3 class="text-2xl md:text-3xl font-bold heading-tertiary">DeepChart:全球最懂机构行为的AI</h3>
<br class="text-gray-600 mb-6 paragraph-text">
AI时代就用AI投资!</br>立即下载，免费体验1个月。全球首发500个名额，抢完即止!
<h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">DeepChart: 全球最懂机构行为的AI</h3>
<p class="text-gray-600 mb-6 paragraph-text">
AI时代就用AI投资!<br>立即下载，免费体验1个月。全球首发500个名额，抢完即止!
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start list-item">
<li class="flex items-start text-sm">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>Deepmate: Al通用大模型(弘历特色)</span>
<span class="flex-shrink-0 mr-1 text-gray-500">Deepmate：Al通用大模型(弘历特色)</span>
</li>
<li class="flex items-start list-item">
<li class="flex items-start text-sm">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>深度探索:</span>
<span>股市正在从"判断方向"，进入"识别资金"的时代。<br>“深度探索”带您看透机构，深度理解市场资本本质!</span>
<!-- 2. 修改标题：添加灰色 (text-gray-500)，保持不换行 -->
<span class="flex-shrink-0 text-gray-500">深度探索：</span>
<!-- 3. 右侧文本：通过独立容器确保换行后文字左对齐，而不是跑去图标下面 -->
<span class="text-gray-500 leading-snug">
股市正在从"判断方向"，进入"识别资金"的时代。<br>
“深度探索”带您看透机构，深度理解市场资本本质!
</span>
</li>
<li class="flex items-start list-item">
<!-- <li class="flex items-start list-item">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>体检专家：股票标的全方位健康检测</span>
</li>
</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 href="#register"
class="self-center inline-block text-white text-lg font-bold px-12 py-3 rounded-full transition-all duration-300 hover:-translate-y-[3px] hover:shadow-md
bg-[linear-gradient(90deg,#FFAC19_0%,#FFA300_100%)]">
立即注册
</a>
</div>
</div>
<!-- 宣传项 2 - AI预测大模型 -->
<div class="mb-6 text-center">
<h4 class="text-xl md:text-2xl font-semibold text-gray-800">
<h4 class="text-3xl md:text-4xl font-semibold text-gray-800">
夺宝奇兵下载体验
</h4>
</div>
<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 promotion-image">
<img src="https://hc.homilychart.com/hc/250121/img/aiyucedamoxing.jpg" alt="AI预测大模型" class="w-full h-full">
<!-- 卡片容器 -->
<div class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100">
<!-- 右侧图片 (HTML中排第一，但 flex-row-reverse 会让它显示在右边) -->
<div class="md:w-1/2 promotion-image overflow-hidden">
<!-- 注意：请确保这里 src 引用的是截图中的夺宝奇兵界面图片 -->
<img
src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5ealun9na5700vk67lj.png"
alt="夺宝奇兵界面"
class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
>
</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-base font-medium mb-4 breadcrumb-text">
HomilyLink > 夺宝奇兵 > AI预测大模型
</span> -->
<h3 class="text-3xl md:text-4xl font-bold mb-4 heading-tertiary">AI预测大模型</h3>
<p class="text-gray-600 mb-6 paragraph-text">
AI 预测大模型颠覆传统，以深度学习与算法挖股市数据抓趋势、预测高低点；AI时空共振结合前沿 AI与时空共振精准识别变盘点。
<!-- 左侧内容区域 (HTML中排第二，显示在左边) -->
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center text-left">
<!-- 大标题 -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight mb-6 text-gray-900">
夺宝奇兵，<br>
<!-- 添加了 inline-block 和 mt-3 来增加与上一行的间距 -->
<span class="inline-block mt-3 bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">
现在免费体验！
</span>
</h1>
<!-- 描述文本 -->
<p class="text-gray-600 mb-8 text-base md:text-lg leading-relaxed">
AI 时代股票投资必备机构界的黑科技！<br>
加入「赢在美股」，即可参与夺宝奇兵免费体验 7 天的活动，立刻注册报名吧！
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start list-item">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>AI股价预测术</span>
</li>
<li class="flex items-start list-item">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>AI时空共振</span>
</li>
<li class="flex items-start list-item">
<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 class="flex flex-row gap-4">
<!-- 按钮1：立即注册 (实心蓝) -->
<a href="#register"
class="px-8 py-3 rounded-full bg-[#2563EB] text-white font-medium text-center shadow-md transition-all hover:bg-[#1d4ed8] hover:shadow-lg hover:-translate-y-0.5">
立即注册
</a>
<!-- 按钮2：立刻下载 (空心蓝边框) -->
<a href="hcdbqb-download.html"
class="px-8 py-3 rounded-full border border-[#2563EB] text-[#2563EB] font-medium text-center transition-all hover:-translate-y-0.5">
立刻下载
</a>
</div>
</div>
</div>
@ -354,8 +382,13 @@
</div>
<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 promotion-image">
<img id="lectureImage" src="" alt="John Lu谈股专题讲座" class="w-full h-full">
<div class="md:w-1/2 promotion-image overflow-hidden">
<img
id="lectureImage"
src=""
alt="专题讲座"
class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
>
</div>
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
<span
@ -364,7 +397,7 @@
</span>
<h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">HomilyLink专题讲座</h3>
<p class="text-gray-600 mb-6 paragraph-text">
我们推出 HomilyLink专题讲座；结合市场事实热点与机构领域黑科技 "夺宝奇兵"，助力投资者提升股市获利能力。
我们推出 HomilyLink专题讲座;结合市场事实热点与机构领域黑科技"夺宝奇兵”，助力投资者提升股市获利能力。
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start list-item">
@ -380,7 +413,7 @@
<span>HomilyLink赢在美股班级群专属课程（实时答疑+干货分享）</span>
</li>
</ul>
<a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
<a href="#register" class="inline-flex items-center text-[#EF8800] font-medium hover:text-[#FF5900] transition-colors">
加入赢在美股，解锁更多资讯 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
@ -388,47 +421,55 @@
</div>
</section>
<!-- 注册表单区域 -->
<section id="register" class="py-20 px-4 bg-white">
<div class="container mx-auto max-w-6xl">
<section id="register" class="py-20 bg-gray-50">
<div class="container mx-auto max-w-6xl relative">
<!-- 原有的注册表单部分 - 完全不变 -->
<div class="bg-gradient-to-br 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 bg-image-overlay">
<h2 class="text-2xl md:text-3xl font-bold mb-6 heading-secondary">加入赢在美股，开启赢家人生！</h2>
<h2 class="text-2xl md:text-3xl font-bold mb-6 heading-secondary text-center ">教育精英化 · 武器AI化!</h2>
<p class="text-gray-300 mb-10 leading-relaxed paragraph-text">
填写报名表，即可快速解锁专业投资AI工具，助力您把握投资机会！
</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">
<img alt="超级云脑" src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bad6avznn400jwiqwu.png">
</div>
<div>
<h3 class="font-semibold mb-1 heading-tertiary">超级云脑</h3>
<p class="text-gray-400 text-sm paragraph-text">您的股票体检专家！</p>
<h3 class="font-semibold mb-1 heading-tertiary">DeepChart</h3>
<p class="text-gray-400 text-sm paragraph-text">全球最懂机构行为的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="AI预测大模型" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png">
<img alt="AI预测大模型" src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bapwystqy500k1h6xw.png">
</div>
<div>
<h3 class="font-semibold mb-1 heading-tertiary">AI预测大模型</h3>
<p class="text-gray-400 text-sm paragraph-text">时间空间价格AI精准预测！</p>
<h3 class="font-semibold mb-1 heading-tertiary">夺宝奇兵</h3>
<p class="text-gray-400 text-sm paragraph-text">机构界的黑科技</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">
<img alt="夺宝利剑" src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bb0rllyv0600wgiveo.png">
</div>
<div>
<h3 class="font-semibold mb-1 heading-tertiary">夺宝利剑</h3>
<p class="text-gray-400 text-sm paragraph-text">最聪明的AI智能均线+三维波动量</p>
<h3 class="font-semibold mb-1 heading-tertiary">赢在美股·体系化实战课程</h3>
<p class="text-gray-400 text-sm paragraph-text">[学 · 练 · 战 · 享 ]用体系化思维，掌握最前沿美股分析方法与实战策略</p>
</div>
</div>
</div>
<!-- 在左侧区域底部添加标语 -->
<div class="mt-10 border-t border-white/20 pt-6">
<h3 class="text-3xl font-bold text-center tracking-wider">
加入赢在美股，开启赢家人生!
</h3>
</div>
</div>
<!-- 右侧表单区域 - 保持不变 -->
@ -436,16 +477,16 @@
<form id="registrationForm" class="space-y-6">
<input type="hidden" name="zbtype" id="zbType" value="6">
<div>
<label for="userNameInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">姓名</label>
<label for="userNameInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">姓名 <span class="text-red-500">*</span></label>
<input type="text" id="userNameInfo" name="userNameInfo"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all form-input"
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
placeholder="请输入您的姓名" required>
</div>
<div>
<label for="countryInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">国家/地区代码</label>
<label for="countryInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">国家/地区代码 <span class="text-red-500">*</span></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 form-input"
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
required>
<option value="+65">+65 新加坡</option>
<option value="+60">+60 马来西亚</option>
@ -483,10 +524,10 @@
</select>
</div>
<div>
<label for="userMobile" class="block text-sm font-medium text-gray-700 mb-1 form-label">电话号码</label>
<label for="userMobile" class="block text-sm font-medium text-gray-700 mb-1 form-label">电话号码 <span class="text-red-500">*</span></label>
<input type="tel" name="userMobile" id="userMobile" 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 form-input"
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
autocomplete="off" required>
</div>
@ -494,31 +535,99 @@
<label for="userWechat" class="block text-sm font-medium text-gray-700 mb-1 form-label">微信ID</label>
<input type="text" name="userWechat" id="userWechat" 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 form-input">
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input">
</div>
<div>
<label for="userEmail" class="block text-sm font-medium text-gray-700 mb-1 form-label">电子邮箱</label>
<label for="userEmail" class="block text-sm font-medium text-gray-700 mb-1 form-label">电子邮箱 <span class="text-red-500">*</span></label>
<input type="email" placeholder="请输入您的邮箱" name="userEmail" id="userEmail" 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 form-input"
class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
required>
</div>
<!-- 多选区域 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">请选择您希望优先获取的权益 (可多选) <span class="text-red-500">*</span></label>
<div class="space-y-3">
<label class="flex items-center space-x-3 cursor-pointer group">
<input type="checkbox" name="benefits[]" value="DeepChart"
class="w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox">
<span class="text-sm text-gray-600 group-hover:text-gray-800">获取DeepChart体验权限</span>
</label>
<label class="flex items-center space-x-3 cursor-pointer group">
<input type="checkbox" name="benefits[]" value="夺宝奇兵"
class="w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox">
<span class="text-sm text-gray-600 group-hover:text-gray-800">获取"夺宝奇兵"体验权限</span>
</label>
<label class="flex items-center space-x-3 cursor-pointer group">
<input type="checkbox" name="benefits[]" value="独家课程"
class="w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox">
<span class="text-sm text-gray-600 group-hover:text-gray-800">参加"赢在美股"独家课程 - 学习前沿分析方法与操作策略</span>
</label>
</div>
</div>
<!-- 同意接收咨询 -->
<div class="flex items-start">
<input type="checkbox" id="agreement" name="agreement" class="mt-1 mr-2" required>
<input type="checkbox" id="agreement" name="agreement"
class="mt-1 mr-2 w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox" required>
<label for="agreement" class="text-sm text-gray-600 form-label">
我同意接收相关产品和服务的资讯
我同意接收相关产品和服务的咨询
</label>
</div>
<!-- 提交按钮 -->
<button type="submit" id="submitBtn"
class="w-full py-3 px-6 rounded-lg gradient-background text-white font-medium hover:shadow-lg hover:shadow-primary/20 transition-all transform hover:-translate-y-0.5 form-button">
class="w-full py-3 px-6 rounded-lg text-white font-medium hover:shadow-lg transition-all transform hover:-translate-y-0.5 custom-orange-button">
提交注册
</button>
</form>
</div>
</div>
</div>
<!-- === 声明卡片 === -->
<!-- 在大屏幕上显示，定位在注册表单的右侧外部，紧贴下沿 -->
<!-- 小屏幕隐藏 -->
<div class="hidden lg:block absolute left-full bottom-0 ml-4 w-64">
<div class="bg-white rounded-xl shadow-lg p-4 border border-gray-200">
<div class="mb-4 border-b border-gray-100 pb-3">
<h4 class="font-bold text-gray-900 mb-2 text-sm">注册说明</h4>
<div class="space-y-2 text-xs">
<div class="flex items-start">
<div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
<i class="fa fa-user"></i>
</div>
<p class="text-gray-600">请填写方便称呼您的姓名信息。</p>
</div>
<div class="flex items-start">
<div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
<i class="fa fa-whatsapp"></i>
</div>
<p class="text-gray-600">手机号码最好支持WhatsApp联系。</p>
</div>
<div class="flex items-start">
<div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
<i class="fa fa-comments"></i>
</div>
<p class="text-gray-600">微信的联系方式我们也支持。</p>
</div>
<div class="flex items-start">
<div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
<i class="fa fa-envelope"></i>
</div>
<p class="text-gray-600">邮箱作为联系您的备用联系方式。</p>
</div>
</div>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-1 text-sm">郑重声明</h4>
<p class="text-xs text-gray-500 leading-relaxed">
我们将严格保护您的个人信息安全，绝对不会向第三方泄露。
</p>
</div>
</div>
</div>
</div>
</section>
</main>
@ -528,9 +637,11 @@
<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-background flex items-center justify-center">
<img alt="赢在美股" src="https://d31zlh4on95l9h.cloudfront.net/images/497d8b38ab9f738e9720d5d7bddf3beb.png"
style="width: 40px;height: 40px;">
<div class="w-10 h-10 rounded-lg flex items-center justify-center">
<img
src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5udhzj898b800yp02ol.png"
alt="Logo"
/>
</div>
<span class="text-xl font-bold">赢在美股</span>
</div>
@ -1319,6 +1430,54 @@
.dropdown-item:hover {
color: #FFA300;
}
/* 自定义橙色渐变背景 */
.custom-orange-button {
background: linear-gradient(90deg, #FFAC19 0%, #FFA300 100%);
border: none;
}
.custom-orange-button:hover {
background: linear-gradient(90deg, #FFB433 0%, #FFB020 100%);
box-shadow: 0 4px 12px rgba(255, 172, 25, 0.3);
}
/* 自定义复选框样式 - 使用橙色 */
.custom-orange-checkbox {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
position: relative;
transition: all 0.2s;
}
.custom-orange-checkbox:checked {
background-color: #FFA300;
border-color: #FFA300 !important;
}
.custom-orange-checkbox:checked::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
}
/* 输入框和下拉框样式 */
.form-input {
border-width: 2px;
}
/* 移除所有蓝色边框和聚焦阴影 */
.form-input:focus {
outline: none;
border-color: #FFA300 !important;
box-shadow: 0 0 0 3px rgba(255, 172, 25, 0.1);
}
</style>
</body>

Write Preview
Loading…
Cancel
Save