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

修改背景图片即文字

milestone-20251013-宣传夺宝奇兵
zhaoruhui 3 months ago
parent
ed318b25ed
commit
c6eac6807e
1 changed files with 38 additions and 16 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. 54
      index.html

54
index.html
View File

@ -49,7 +49,7 @@
<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://hc.homilychart.com/hc/250121/img/20230711171637.png"
<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">
@ -313,13 +313,13 @@
</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="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">
<!-- 左侧区域 - 已替换背景 -->
<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>
<p class="text-gray-300 mb-10 leading-relaxed paragraph-text">
填写报名表，即可快速解锁专业投资AI工具，助力您把握投资机会！
@ -334,7 +334,7 @@
<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="AI预测大模型" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png">
@ -344,7 +344,7 @@
<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="夺宝利剑" src="https://hc.homilychart.com/hc/250121/img/duobaolijian.png">
@ -356,7 +356,8 @@
</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">
@ -366,7 +367,7 @@
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"
placeholder="请输入您的姓名" required>
</div>
<div>
<label for="countryInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">国家/地区代码</label>
<select id="countryInfo" name="countryInfo"
@ -414,28 +415,27 @@
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"
autocomplete="off" required>
</div>
<div>
<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"
<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">
</div>
<div>
<label for="userEmail" class="block text-sm font-medium text-gray-700 mb-1 form-label">电子邮箱</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"
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 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">
提交注册
@ -448,7 +448,7 @@
</section>
<!-- 页脚区域 -->
<footer class="bg-dark text-white py-12 px-4">
<footer class="footer-bg 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>
@ -524,7 +524,7 @@
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
<div class=" 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 paragraph-text">
&copy; Copyright 2025.Capitalmaster Pte Ltd All Rights Reserved.
</p>
@ -1115,6 +1115,28 @@
border-radius: 50%;
animation: spin 1s linear infinite;
}
.gradient-background {
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}
.bg-image-overlay {
background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
url('https://d31zlh4on95l9h.cloudfront.net/images/3b28e7abdfc4b495324cc3e6d9210b51.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.gradient-background {
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}
.footer-bg {
background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
url('https://d31zlh4on95l9h.cloudfront.net/images/22576b3fe6f29e642f322d4d315ae426.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
</body>
Write Preview
Loading…
Cancel
Save