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

写完首页一部分样式

fanwenqing/feature-20260202203448-美股市场改版前台
zxz 3 weeks ago
parent
0bd8fb4e07
commit
6b6f72d081
1 changed files with 540 additions and 440 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. 290
      index.html

290
index.html
View File

@ -64,50 +64,128 @@
<!-- 头部导航区域 -->
<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-background flex items-center justify-center">
<img alt="赢在美股" src="https://d31zlh4on95l9h.cloudfront.net/images/497d8b38ab9f738e9720d5d7bddf3beb.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">
<div class="container mx-auto px-10 py-6 flex justify-between items-center max-w-[1600px]">
<a href="#" class="flex items-center gap-3">
<img
src="https://d31zlh4on95l9h.cloudfront.net/images/497d8b38ab9f738e9720d5d7bddf3beb.png"
alt="Logo"
class="w-10 h-10"
/>
<span
class="font-bold text-[22px]"
style="
background: linear-gradient(270deg, #F9BF59 28.37%, #FFDBA1 50%, #F9BF59 70.67%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
"
>
赢在美股
</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.html" class="font-medium hover:text-primary transition-colors">操作指南</a> -->
<a href="https://api.whatsapp.com/send?phone=85255110485&text=我需要帮助" target="_blank"
class="px-5 py-2 rounded-full gradient-background text-white font-medium hover:shadow-lg transition-all">
加入我们
<nav class="hidden lg:flex items-center space-x-14">
<!-- 首页（带下拉） -->
<div class="relative group ">
<!-- 首页文字 -->
<div>
<a class="relative font-medium text-[#333333] hover:text-[#FFA300] cursor-pointer pb-4">
首页
</a>
<span class="arrow-box"></span>
</div>
<!-- 下拉菜单 -->
<div class="home-dropdown">
<a class="dropdown-item">
特色功能
</a>
<a class="dropdown-item">
DeepChart下载
</a>
<a class="dropdown-item">
夺宝岛下载
</a>
<a class="dropdown-item">
赢在美股专题课
</a>
</div>
</div>
<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="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>
</nav>
</div>
</header>
<!-- 移动端菜单按钮 -->
<button id="menuBtn" class="md:hidden text-xl">
<i class="fa fa-bars"></i>
</button>
<main class="" id="app">
<div style="height: 24px; align-self: stretch; background: #FFF3DD;" class="pt-28"></div>
<!-- 特色功能区域 -->
<section id="features" class="py-16 px-4 bg-white pt-32 bg-[url('https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg58gif4guu1200qbnj3a.png')]
bg-cover bg-center bg-no-repeat">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-16 animate-fade-in">
<h2 class="text-[clamp(2rem,4vw,3rem)] font-bold mb-6 text-white heading-secondary">加入赢在美股，您可以免费体验什么？</h2>
<p class="text-white max-w-2xl mx-auto paragraph-text">您可以免费体验最前沿的AI工具,全球最懂机构行为的Deepchart,机构的黑科技夺宝奇兵,最前沿的分析课程和操作策略!</p>
</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.html" class="font-medium py-2 hover:text-primary transition-colors">操作指南</a> -->
<!-- <a href="#" class="font-medium py-2 hover:text-primary transition-colors">操作指南</a> -->
<a href="https://api.whatsapp.com/send?phone=85255110485&text=我需要帮助" target="_blank"
class="py-2 rounded-full gradient-background text-white font-medium text-center hover:shadow-lg transition-all">
加入我们
</a>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="animate-fade-in delay-100">
<div
class="p-8 rounded-2xl shadow-lg
bg-[#FBEFEF]
border-t-4 border-[#ED1818]
transition-all duration-300 ease-out
hover:-translate-y-2 hover:shadow-xl"
>
<div class="w-14 h-14 rounded-xl bg-red-100 flex items-center justify-center mb-6">
<img src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bad6avznn400jwiqwu.png" />
</div>
<h3 class="text-xl font-semibold mb-3">DeepChart</h3>
<p class="text-gray-600">您的股市随身顾问<br />深度解读机构行为，祝您股海乘风破浪</p>
</div>
</div>
<div class="animate-fade-in delay-200">
<div
class="p-8 rounded-2xl shadow-lg
bg-[#F1F6FF]
border-t-4 border-[#3B93FF]
transition-all duration-300 ease-out
hover:-translate-y-2 hover:shadow-xl"
>
<div class="w-14 h-14 rounded-xl bg-blue-100 flex items-center justify-center mb-6">
<img src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bapwystqy500k1h6xw.png" />
</div>
<h3 class="text-xl font-semibold mb-3">夺宝奇兵</h3>
<p class="text-gray-600">采用最先进的安全技术，保护您的数据和隐私，让您高枕无忧的开展业务</p>
</div>
</div>
</header>
<!-- 英雄区域 -->
<div class="animate-fade-in delay-300">
<div
class="p-8 rounded-2xl shadow-lg
bg-[#FBF6EF]
border-t-4 border-[#EC8D0E]
transition-all duration-300 ease-out
hover:-translate-y-2 hover:shadow-xl"
>
<div class="w-14 h-14 rounded-xl bg-orange-100 flex items-center justify-center mb-6">
<img src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bb0rllyv0600wgiveo.png" />
</div>
<h3 class="text-xl font-semibold mb-3">赢在美股专题课</h3>
<p class="text-gray-600">根据您的具体需求提供个性化解决方案，灵活适应不同业务场景和规模</p>
</div>
</div>
</div>
</div>
</section>
<!-- 英雄区域
<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">
@ -145,52 +223,19 @@
</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 heading-secondary">加入赢在美股，您可以免费体验什么？</h2>
<p class="text-gray-600 max-w-2xl mx-auto paragraph-text">您可以免费体验超级云脑 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-effect 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 heading-tertiary">超级云脑</h3>
<p class="text-gray-600 paragraph-text">您的股票该体检了！<br />从十大维度，为您的股票进行全面体检！</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect 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 heading-tertiary">AI预测大模型</h3>
<p class="text-gray-600 paragraph-text">采用最先进的安全技术，保护您的数据和隐私，让您高枕无忧地开展业务。</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect 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 heading-tertiary">夺宝利剑</h3>
<p class="text-gray-600 paragraph-text">根据您的具体需求提供个性化解决方案，灵活适应不同业务场景和规模。</p>
</div>
</div>
</div>
</section>
</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">
<!-- <div class="text-center mb-16 animate-fade-in">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 heading-secondary">我们的创新解决方案</h2>
<p class="text-gray-600 max-w-2xl mx-auto paragraph-text">探索我们的核心产品和服务，了解如何为您的业务创造价值</p>
</div> -->
<div class="mb-6 text-center">
<h4 class="text-3xl md:text-4xl font-semibold text-gray-800">
教育精英化 · 武器AI化
</h4>
</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">
@ -198,21 +243,22 @@
</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-base font-medium mb-4 breadcrumb-text">
HomilyLink > 夺宝奇兵 > 超级云脑
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 mb-4 heading-tertiary">超级云脑:股票体检专家</h3>
<p class="text-gray-600 mb-6 paragraph-text">
利用人工智能和机器学习技术，快速处理和分析海量数据，通过十大维度为您的股票进行专科体检，追踪机构行为。
<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个名额，抢完即止!
</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>云脑探秘：深度解析股市底层数据</span>
<span>Deepmate: Al通用大模型(弘历特色)</span>
</li>
<li class="flex items-start list-item">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
<span>机构动向：实时追踪机构资金动向</span>
<span>深度探索:</span>
<span>股市正在从"判断方向"，进入"识别资金"的时代。<br>“深度探索”带您看透机构，深度理解市场资本本质!</span>
</li>
<li class="flex items-start list-item">
<i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
@ -226,17 +272,22 @@
</div>
<!-- 宣传项 2 - AI预测大模型 -->
<div class="mb-6 text-center">
<h4 class="text-xl md:text-2xl 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>
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
<span
<!-- <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-2xl md:text-3xl font-bold mb-4 heading-tertiary">AI预测大模型</h3>
</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与时空共振精准识别变盘点。
</p>
@ -260,7 +311,7 @@
</div>
</div>
<!-- 宣传项 3 - 夺宝利剑 -->
<!-- 宣传项 3 - 夺宝利剑
<div
class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row animate-fade-in delay-100">
<div class="md:w-1/2 promotion-image">
@ -293,9 +344,14 @@
加入赢在美股，解锁更多资讯 <i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div> -->
<!-- 宣传项 4 - 专题讲座 -->
<div class="mb-6 text-center">
<h4 class="text-3xl md:text-4xl font-semibold text-gray-800">
赢家粉内部专题讲座
</h4>
</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">
@ -303,7 +359,7 @@
</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-base font-medium mb-4 breadcrumb-text">
class="inline-block px-4 py-1 rounded-full bg-amber-100 text-amber-600 text-base font-medium mb-4 breadcrumb-text">
HomilyLink > 消息 > 赢在美股班级群
</span>
<h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">HomilyLink专题讲座</h3>
@ -465,7 +521,7 @@
</div>
</div>
</section>
</main>
<!-- 页脚区域 -->
<footer class="footer-bg text-white py-12 px-4">
<div class="container mx-auto max-w-6xl">
@ -554,7 +610,6 @@
</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 relative">
@ -1158,14 +1213,6 @@
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-hover-effect {
transition: all 0.3s ease;
}
.card-hover-effect:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transform: translateY(-4px);
}
.gradient-background {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
@ -1220,6 +1267,59 @@
background-position: center;
background-repeat: no-repeat;
}
.arrow-box {
display: inline-block;
width: 8px;
height: 8px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: rotate(45deg) translateY(-4px);
margin-left: 6px;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.group:hover .arrow-box {
border-color: #FFA300;
transform: rotate(225deg);
}
/* 下拉菜单 */
.home-dropdown {
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
background: #fff;
min-width: 150px;
padding: 0px 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
display: none;
z-index: 50;
}
.group:hover .home-dropdown {
display: block;
}
.group:hover .dropdown-item:first-child {
border-top: 2px solid #FFA300;
}
/* 下拉项 */
.dropdown-item {
display: block;
padding: 14px 20px;
font-size: 16px; /* 字体变大 */
font-weight: 400;
color: #333;
text-align: center; /* 文本居中 */
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease;
}
.dropdown-item:hover {
color: #FFA300;
}
</style>
</body>
Write Preview
Loading…
Cancel
Save