Compare commits
merge into: qimaohong:master
qimaohong:dev
qimaohong:fanwenqing/feature-20260202142430-美股市场落地页改版前台
qimaohong:fanwenqing/feature-20260202203448-美股市场改版前台
qimaohong:heads/milestone-20251128-获客渠道
qimaohong:lizida/feature-20260202202735-milestone-20260202-美股市场改版
qimaohong:master
qimaohong:milestone-20251013-宣传夺宝奇兵
qimaohong:milestone-20251107-后台登录页面
qimaohong:milestone-20260202-美股市场改版
qimaohong:milestone-20260202-美股市场落地页改版
qimaohong:milestone-20260409-港股市场落地页
pull from: qimaohong:milestone-20260409-港股市场落地页
qimaohong:dev
qimaohong:fanwenqing/feature-20260202142430-美股市场落地页改版前台
qimaohong:fanwenqing/feature-20260202203448-美股市场改版前台
qimaohong:heads/milestone-20251128-获客渠道
qimaohong:lizida/feature-20260202202735-milestone-20260202-美股市场改版
qimaohong:master
qimaohong:milestone-20251013-宣传夺宝奇兵
qimaohong:milestone-20251107-后台登录页面
qimaohong:milestone-20260202-美股市场改版
qimaohong:milestone-20260202-美股市场落地页改版
qimaohong:milestone-20260409-港股市场落地页
4 Commits
master
...
milestone-
| Author | SHA1 | Message | Date |
|---|---|---|---|
zhaoruhui
|
21a9ce66d3 |
港股完整功能初版
|
14 hours ago |
|
zhaoruhui
|
aa6a910663 |
对接后台接口
|
17 hours ago |
|
zhaoruhui
|
bba9e41bec |
修改跳转
|
18 hours ago |
|
zhaoruhui
|
6f865890ee |
港股基本的页面
|
2 days ago |
13 changed files with 6504 additions and 3 deletions
-
2hcdbqb-guide.html
-
351hkLogiManagement.html
-
539hkRegister.html
-
270hkRegisterSuccess.html
-
138hkRegisterTip.html
-
716hkfeedback.html
-
826hkhcdbqb.html
-
2076hkhcdbqbDownload.html
-
669hkhcdbqbGuide.html
-
860hkhcdbqbManagement.html
-
47src/api/hkmember.js
-
2src/api/member.js
-
11vite.config.js
@ -0,0 +1,351 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="zh-CN"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>系统登录</title> |
||||
|
<style> |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
background: linear-gradient(135deg, #ACC9FC 0%, #ACC9FC 100%); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
min-height: 100vh; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.login-container { |
||||
|
background-color: white; |
||||
|
border-radius: 12px; |
||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); |
||||
|
width: 100%; |
||||
|
max-width: 420px; |
||||
|
padding: 40px 30px; |
||||
|
transition: transform 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.login-container:hover { |
||||
|
transform: translateY(-5px); |
||||
|
} |
||||
|
|
||||
|
.login-header { |
||||
|
text-align: center; |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
|
||||
|
.login-header h1 { |
||||
|
color: #333; |
||||
|
font-size: 28px; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.login-header p { |
||||
|
color: #666; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.form-group { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
label { |
||||
|
display: block; |
||||
|
margin-bottom: 8px; |
||||
|
color: #555; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
width: 100%; |
||||
|
padding: 14px 16px; |
||||
|
border: 1px solid #ddd; |
||||
|
border-radius: 8px; |
||||
|
font-size: 16px; |
||||
|
transition: all 0.3s; |
||||
|
} |
||||
|
|
||||
|
input:focus { |
||||
|
border-color: #4a90e2; |
||||
|
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2); |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.error-message { |
||||
|
color: #e74c3c; |
||||
|
font-size: 14px; |
||||
|
margin-top: 5px; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.login-button { |
||||
|
background: linear-gradient(to right, #6a11cb, #2575fc); |
||||
|
color: white; |
||||
|
border: none; |
||||
|
border-radius: 8px; |
||||
|
padding: 14px; |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
cursor: pointer; |
||||
|
width: 100%; |
||||
|
transition: all 0.3s; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.login-button:hover { |
||||
|
background: linear-gradient(to right, #5a0db5, #1c68e8); |
||||
|
box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4); |
||||
|
} |
||||
|
|
||||
|
.login-button:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
.login-footer { |
||||
|
text-align: center; |
||||
|
margin-top: 25px; |
||||
|
color: #777; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.alert { |
||||
|
padding: 12px 16px; |
||||
|
border-radius: 8px; |
||||
|
margin-bottom: 20px; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.alert-error { |
||||
|
background-color: #ffebee; |
||||
|
color: #c62828; |
||||
|
border: 1px solid #ffcdd2; |
||||
|
} |
||||
|
|
||||
|
.alert-success { |
||||
|
background-color: #e8f5e9; |
||||
|
color: #2e7d32; |
||||
|
border: 1px solid #c8e6c9; |
||||
|
} |
||||
|
|
||||
|
.password-requirements { |
||||
|
font-size: 12px; |
||||
|
color: #777; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
|
||||
|
.input-error { |
||||
|
border-color: #e74c3c; |
||||
|
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2); |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div class="login-container"> |
||||
|
<div class="login-header"> |
||||
|
<h1>系统登录</h1> |
||||
|
<p>请输入您的账号和密码</p> |
||||
|
</div> |
||||
|
|
||||
|
<div id="usernameAlert" class="alert alert-error"> |
||||
|
账号不存在，请检查后重试！ |
||||
|
</div> |
||||
|
|
||||
|
<div id="passwordAlert" class="alert alert-error"> |
||||
|
密码错误，请检查后重试！ |
||||
|
</div> |
||||
|
|
||||
|
<form id="loginForm"> |
||||
|
<div class="form-group"> |
||||
|
<label for="username">账号</label> |
||||
|
<input type="text" id="username" name="username" placeholder="请输入账号" required> |
||||
|
<div class="error-message" id="usernameError">账号不能为空</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label for="password">密码</label> |
||||
|
<input type="password" id="password" name="password" placeholder="请输入密码" required> |
||||
|
<div class="error-message" id="passwordError">密码不能为空</div> |
||||
|
<div class="password-requirements">密码必须为8位数字</div> |
||||
|
</div> |
||||
|
|
||||
|
<button type="submit" class="login-button">登录</button> |
||||
|
</form> |
||||
|
</div> |
||||
|
|
||||
|
<script> |
||||
|
document.addEventListener('DOMContentLoaded', function () { |
||||
|
const loginForm = document.getElementById('loginForm'); |
||||
|
const usernameInput = document.getElementById('username'); |
||||
|
const passwordInput = document.getElementById('password'); |
||||
|
const usernameError = document.getElementById('usernameError'); |
||||
|
const passwordError = document.getElementById('passwordError'); |
||||
|
const usernameAlert = document.getElementById('usernameAlert'); |
||||
|
const passwordAlert = document.getElementById('passwordAlert'); |
||||
|
|
||||
|
// 正确的账号和密码 |
||||
|
const CORRECT_USERNAME = 'admin'; |
||||
|
const CORRECT_PASSWORD = '20260408'; |
||||
|
|
||||
|
// 表单提交事件 |
||||
|
loginForm.addEventListener('submit', function (e) { |
||||
|
e.preventDefault(); |
||||
|
|
||||
|
// 重置错误状态 |
||||
|
resetErrors(); |
||||
|
|
||||
|
// 获取表单数据 |
||||
|
const username = usernameInput.value.trim(); |
||||
|
const password = passwordInput.value.trim(); |
||||
|
|
||||
|
// 表单验证 |
||||
|
let isValid = true; |
||||
|
|
||||
|
if (!username) { |
||||
|
showError(usernameError, '账号不能为空'); |
||||
|
usernameInput.classList.add('input-error'); |
||||
|
isValid = false; |
||||
|
} |
||||
|
|
||||
|
if (!password) { |
||||
|
showError(passwordError, '密码不能为空'); |
||||
|
passwordInput.classList.add('input-error'); |
||||
|
isValid = false; |
||||
|
} else if (!/^\d{8}$/.test(password)) { |
||||
|
showError(passwordError, '密码必须为8位数字'); |
||||
|
passwordInput.classList.add('input-error'); |
||||
|
isValid = false; |
||||
|
} |
||||
|
|
||||
|
// 如果验证通过，尝试登录 |
||||
|
if (isValid) { |
||||
|
// 验证账号密码 |
||||
|
if (username === CORRECT_USERNAME && password === CORRECT_PASSWORD) { |
||||
|
// 登录成功，保存登录状态 |
||||
|
localStorage.setItem('isLoggedIn', 'true'); |
||||
|
localStorage.setItem('loginTime', new Date().getTime()); |
||||
|
|
||||
|
// 显示成功消息（短暂显示后跳转） |
||||
|
showSuccessMessage(); |
||||
|
|
||||
|
// 延迟跳转，让用户看到成功消息 |
||||
|
setTimeout(function () { |
||||
|
window.location.href = 'hkhcdbqbManagement.html'; |
||||
|
}, 1000); |
||||
|
} else { |
||||
|
// 登录失败，明确提示是账号还是密码错误 |
||||
|
if (username !== CORRECT_USERNAME) { |
||||
|
usernameAlert.style.display = 'block'; |
||||
|
usernameInput.classList.add('input-error'); |
||||
|
usernameInput.focus(); |
||||
|
} else { |
||||
|
passwordAlert.style.display = 'block'; |
||||
|
passwordInput.classList.add('input-error'); |
||||
|
passwordInput.value = ''; |
||||
|
passwordInput.focus(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 实时验证 |
||||
|
usernameInput.addEventListener('blur', function () { |
||||
|
if (!this.value.trim()) { |
||||
|
showError(usernameError, '账号不能为空'); |
||||
|
this.classList.add('input-error'); |
||||
|
} else { |
||||
|
hideError(usernameError); |
||||
|
this.classList.remove('input-error'); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
passwordInput.addEventListener('blur', function () { |
||||
|
const password = this.value.trim(); |
||||
|
if (!password) { |
||||
|
showError(passwordError, '密码不能为空'); |
||||
|
this.classList.add('input-error'); |
||||
|
} else if (!/^\d{8}$/.test(password)) { |
||||
|
showError(passwordError, '密码必须为8位数字'); |
||||
|
this.classList.add('input-error'); |
||||
|
} else { |
||||
|
hideError(passwordError); |
||||
|
this.classList.remove('input-error'); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 输入时隐藏错误提示 |
||||
|
usernameInput.addEventListener('input', function () { |
||||
|
hideError(usernameError); |
||||
|
hideAlert(usernameAlert); |
||||
|
this.classList.remove('input-error'); |
||||
|
}); |
||||
|
|
||||
|
passwordInput.addEventListener('input', function () { |
||||
|
hideError(passwordError); |
||||
|
hideAlert(passwordAlert); |
||||
|
this.classList.remove('input-error'); |
||||
|
}); |
||||
|
|
||||
|
// 辅助函数 |
||||
|
function showError(element, message) { |
||||
|
element.textContent = message; |
||||
|
element.style.display = 'block'; |
||||
|
} |
||||
|
|
||||
|
function hideError(element) { |
||||
|
element.style.display = 'none'; |
||||
|
} |
||||
|
|
||||
|
function hideAlert(alertElement) { |
||||
|
alertElement.style.display = 'none'; |
||||
|
} |
||||
|
|
||||
|
function resetErrors() { |
||||
|
hideError(usernameError); |
||||
|
hideError(passwordError); |
||||
|
hideAlert(usernameAlert); |
||||
|
hideAlert(passwordAlert); |
||||
|
usernameInput.classList.remove('input-error'); |
||||
|
passwordInput.classList.remove('input-error'); |
||||
|
} |
||||
|
|
||||
|
function showSuccessMessage() { |
||||
|
// 临时创建一个成功提示 |
||||
|
const successAlert = document.createElement('div'); |
||||
|
successAlert.className = 'alert alert-success'; |
||||
|
successAlert.textContent = '登录成功，正在跳转...'; |
||||
|
usernameAlert.parentNode.insertBefore(successAlert, usernameAlert); |
||||
|
successAlert.style.display = 'block'; |
||||
|
|
||||
|
// 移除错误提示（如果有） |
||||
|
hideAlert(usernameAlert); |
||||
|
hideAlert(passwordAlert); |
||||
|
} |
||||
|
|
||||
|
// 检查是否已经登录（如果已经登录，直接跳转） |
||||
|
if (localStorage.getItem('isLoggedIn') === 'true') { |
||||
|
// 检查登录时间，如果超过24小时需要重新登录 |
||||
|
const loginTime = parseInt(localStorage.getItem('loginTime')); |
||||
|
const currentTime = new Date().getTime(); |
||||
|
const hoursDiff = (currentTime - loginTime) / (1000 * 60 * 60); |
||||
|
|
||||
|
if (hoursDiff < 24) { |
||||
|
window.location.href = 'hcdbqb-management.html'; |
||||
|
} else { |
||||
|
// 超过24小时，清除登录状态 |
||||
|
localStorage.removeItem('isLoggedIn'); |
||||
|
localStorage.removeItem('loginTime'); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,539 @@ |
|||||
|
<!DOCTYPE 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,DeepChart"> |
||||
|
<meta http-equiv="description" content="HomilyLink"> |
||||
|
<title>夺宝奇兵免费体验</title> |
||||
|
<!-- 引入外部资源 --> |
||||
|
<script src="https://cdn.tailwindcss.com?v=3.3.5"></script> |
||||
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> |
||||
|
|
||||
|
<!-- 基础样式配置 --> |
||||
|
<script> |
||||
|
tailwind.config = { |
||||
|
theme: { |
||||
|
extend: { |
||||
|
colors: { |
||||
|
primary: '#3B82F6', |
||||
|
secondary: '#8B5CF6' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style type="text/tailwindcss"> |
||||
|
@layer utilities { |
||||
|
.card-hover { |
||||
|
@apply transition-all duration-300 hover:shadow-xl; |
||||
|
} |
||||
|
.btn-effect { |
||||
|
@apply relative overflow-hidden transition-all duration-300; |
||||
|
} |
||||
|
.btn-effect::after { |
||||
|
content: ''; |
||||
|
@apply absolute top-0 left-[-100%] w-full h-full bg-white/20 transform skew-x-12 transition-all duration-500; |
||||
|
} |
||||
|
.btn-effect:hover::after { |
||||
|
@apply left-[100%]; |
||||
|
} |
||||
|
.input-focus { |
||||
|
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none; |
||||
|
} |
||||
|
/* 图标容器样式 - 确保绝对居中 */ |
||||
|
.form-icon-container { |
||||
|
@apply absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none z-10; |
||||
|
} |
||||
|
.form-icon { |
||||
|
@apply text-gray-500 text-base; |
||||
|
} |
||||
|
.form-group { |
||||
|
@apply mb-5 relative; |
||||
|
} |
||||
|
.form-label { |
||||
|
@apply block text-gray-700 font-medium mb-2; |
||||
|
} |
||||
|
/* 统一输入框高度和内边距 */ |
||||
|
.form-control { |
||||
|
@apply w-full pl-10 py-3 border border-gray-300 rounded-lg input-focus transition-colors; |
||||
|
height: 54px; /* 固定高度确保垂直对齐 */ |
||||
|
} |
||||
|
/* 选择框样式统一 */ |
||||
|
.form-select { |
||||
|
@apply form-control pr-8 appearance-none bg-white; |
||||
|
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" fill=\"%23333\"/></svg>'); |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: right 0.5rem center; |
||||
|
background-size: 1em; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style> |
||||
|
/* 基础动画 */ |
||||
|
@keyframes fadeIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(10px); |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fade-in { |
||||
|
animation: fadeIn 0.5s ease-out forwards; |
||||
|
} |
||||
|
|
||||
|
.delay-100 { |
||||
|
animation-delay: 0.1s; |
||||
|
} |
||||
|
|
||||
|
.delay-200 { |
||||
|
animation-delay: 0.2s; |
||||
|
} |
||||
|
|
||||
|
.delay-300 { |
||||
|
animation-delay: 0.3s; |
||||
|
} |
||||
|
|
||||
|
/* 确保所有输入控件垂直对齐 */ |
||||
|
input.form-control, |
||||
|
select.form-select { |
||||
|
box-sizing: border-box; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
/* 解决不同浏览器下select元素的高度差异 */ |
||||
|
select.form-select { |
||||
|
-webkit-appearance: none; |
||||
|
-moz-appearance: none; |
||||
|
appearance: none; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body class="bg-gray-50 text-gray-800 font-sans"> |
||||
|
<!-- 导航栏 --> |
||||
|
<header class="fixed top-0 left-0 right-0 bg-white/95 shadow-sm z-50"> |
||||
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
||||
|
<div class="flex items-center space-x-2"> |
||||
|
<div |
||||
|
class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary to-secondary 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-secondary">夺宝奇兵免费体验</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 桌面导航 --> |
||||
|
<nav class="hidden md:flex items-center space-x-8"> |
||||
|
<a href="hkhcdbqb.html" class="hover:text-primary transition-colors">首页</a> |
||||
|
<a href="hkhcdbqbDownload.html" class="hover:text-primary transition-colors">下载中心</a> |
||||
|
<a href="hkhcdbqbGuide.html" class="text-primary font-medium">操作指南</a> |
||||
|
<a href="https://wa.me/+6588792879?text=我要体验夺宝奇兵" target="_blank" |
||||
|
class="px-5 py-2 rounded-full bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg transition-all">联系我们</a> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- 移动端菜单 --> |
||||
|
<button id="mobileMenuBtn" class="md:hidden text-xl"> |
||||
|
<i class="fa fa-bars"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 移动端菜单内容 --> |
||||
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t"> |
||||
|
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3"> |
||||
|
<a href="hkhcdbqb.html" class="py-2 hover:text-primary transition-colors">首页</a> |
||||
|
<a href="hkhcdbqbDownload.html" class="py-2 hover:text-primary transition-colors">下载中心</a> |
||||
|
<a href="hkhcdbqbGuide.html" class="py-2 text-primary">操作指南</a> |
||||
|
<a href="https://wa.me/+6588792879?text=我要体验夺宝奇兵" target="_blank" |
||||
|
class="py-2 mt-2 rounded-full bg-gradient-to-r from-primary to-secondary text-white text-center">联系我们</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
|
||||
|
<!-- 主要内容 --> |
||||
|
|
||||
|
<main class="pt-28 pb-16 px-4"> |
||||
|
<div class="container mx-auto max-w-6xl"> |
||||
|
<!-- 页面标题 --> |
||||
|
<div class="text-center mb-12 fade-in"> |
||||
|
<h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">夺宝奇兵+内部班级课程<br />免费体验</h1> |
||||
|
<p class="text-gray-600 max-w-2xl mx-auto">财富粉报名即可获得体验的机会！<br />超级云脑 夺宝利剑 AI预测大模型</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8 max-w-5xl mx-auto"> |
||||
|
<!-- 注册表单 --> |
||||
|
<div class="lg:col-span-3 fade-in delay-100"> |
||||
|
<div class="bg-white rounded-xl shadow-md p-6 md:p-8 card-hover"> |
||||
|
<form id="registrationForm" action="./hkRegisterTip.html" method="post"> |
||||
|
<!-- 姓名 --> |
||||
|
<div class="form-group"> |
||||
|
<label for="fullname" class="form-label">姓名 <span class="text-red-500">*</span></label> |
||||
|
<div class="relative"> |
||||
|
<div class="form-icon-container"> |
||||
|
<i class="form-icon fa fa-user"></i> |
||||
|
</div> |
||||
|
<input type="text" id="unameinfo" name="unameinfo" class="form-control" |
||||
|
autocomplete="off" placeholder="请输入您的姓名"> |
||||
|
</div> |
||||
|
<div id="nameError" class="text-red-500" style="display: none;">请输入您的姓名 [ Please enter |
||||
|
your name ] </div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 手机号 - 图标垂直居中优化 --> |
||||
|
<div class="form-group"> |
||||
|
<label class="form-label">手机号码 <span class="text-red-500">*</span></label> |
||||
|
<input type="hidden" name="zbtype" id="zbtype" value="2"> |
||||
|
<div class="flex gap-3"> |
||||
|
<!-- 国家编号选择框 --> |
||||
|
<div class="w-30 relative"> |
||||
|
<div class="form-icon-container"> |
||||
|
<i class="form-icon fa fa-globe"></i> |
||||
|
</div> |
||||
|
<select name="countryinfo" id="countryinfo" class="form-select"> |
||||
|
|
||||
|
<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 class="flex-1 relative"> |
||||
|
<div class="form-icon-container"> |
||||
|
<i class="form-icon fa fa-whatsapp"></i> |
||||
|
</div> |
||||
|
<input type="tel" id="umoblie" name="umoblie" class="form-control" |
||||
|
onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0/g,'')" |
||||
|
autocomplete="off" placeholder="不带国家编号的纯机号"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div id="phoneError" class="text-red-500" style="display: none;">请输入正确的手机号（纯手机号 不含国家编号 ） |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 微信ID --> |
||||
|
<div class="form-group"> |
||||
|
<label for="wechat" class="form-label">微信ID <span class="text-red-500"></span></label> |
||||
|
<div class="relative"> |
||||
|
<div class="form-icon-container"> |
||||
|
<i class="form-icon fa fa-weixin"></i> |
||||
|
</div> |
||||
|
<input type="text" id="uwechat" name="uwechat" class="form-control" |
||||
|
placeholder="微信ID ( 如没有WhatsApp )" autocomplete="off"> |
||||
|
</div> |
||||
|
<div id="wechatError" class="text-red-500" style="display: none;">请输入微信ID</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 邮箱地址 --> |
||||
|
<div class="form-group mb-6"> |
||||
|
<label for="email" class="form-label">邮箱地址 <span class="text-red-500">*</span></label> |
||||
|
<div class="relative"> |
||||
|
<div class="form-icon-container"> |
||||
|
<i class="form-icon fa fa-envelope"></i> |
||||
|
</div> |
||||
|
<input type="email" id="uemail" name="uemail" class="form-control" |
||||
|
autocomplete="off" placeholder="请输入您的邮箱地址"> |
||||
|
</div> |
||||
|
<div id="emailError" class="text-red-500" style="display: none;">请输入您的有效邮箱地址</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 提交按钮 --> |
||||
|
<button type="submit" |
||||
|
class="btn-effect w-full py-3 rounded-lg bg-gradient-to-r from-primary to-secondary text-white font-medium text-lg"> |
||||
|
<i class="fa fa-check-circle mr-2"></i>提交注册 |
||||
|
</button> |
||||
|
|
||||
|
<p class="text-center text-gray-500 text-sm mt-4"> |
||||
|
如需帮助？<a href="https://wa.me/+6588792879?text=我要体验DEEPCHART" target="_blank" |
||||
|
class="text-primary hover:underline">点击发WhatsApp</a> |
||||
|
</p> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 注册说明 --> |
||||
|
<div class="lg:col-span-2 fade-in delay-200"> |
||||
|
<div class="bg-white rounded-xl shadow-md p-6 md:p-8 h-full card-hover"> |
||||
|
<h3 class="text-xl font-bold mb-5 flex items-center"> |
||||
|
<i class="fa fa-info-circle text-primary mr-2"></i>注册说明 |
||||
|
</h3> |
||||
|
|
||||
|
<div class="space-y-4 text-gray-600"> |
||||
|
<div class="flex"> |
||||
|
<div |
||||
|
class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mr-3 mt-0.5"> |
||||
|
<i class="fa fa-user"></i> |
||||
|
</div> |
||||
|
<p>请填写方便称呼您的姓名信息。</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex"> |
||||
|
<div |
||||
|
class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mr-3 mt-0.5"> |
||||
|
<i class="fa fa-whatsapp"></i> |
||||
|
</div> |
||||
|
<p>手机号码最好支持WhatsApp联系。</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex"> |
||||
|
<div |
||||
|
class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mr-3 mt-0.5"> |
||||
|
<i class="fa fa-weixin"></i> |
||||
|
</div> |
||||
|
<p>微信的联系方式我们也支持。</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex"> |
||||
|
<div |
||||
|
class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mr-3 mt-0.5"> |
||||
|
<i class="fa fa-envelope"></i> |
||||
|
</div> |
||||
|
<p>邮箱作为联系您的备用联系方式。</p> |
||||
|
</div> |
||||
|
<div class="mt-6 pt-5 border-t border-gray-100"> |
||||
|
<h4 class="font-semibold mb-3 text-gray-700">温馨提示</h4> |
||||
|
<p class="text-sm"> |
||||
|
财富粉可以进入HomilyLink内部班级群<br />免费学习。<br /> |
||||
|
免费体验包括：夺宝奇兵三大模板<br /> |
||||
|
铁粉可以体验部分DeepChart功能！ |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="mt-6 pt-5 border-t border-gray-100"> |
||||
|
<h4 class="font-semibold mb-3 text-gray-700">郑重声明</h4> |
||||
|
<p class="text-sm"> |
||||
|
我们将严格保护您的个人信息安全，绝对不会向第三方泄露。<br /> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</main> |
||||
|
|
||||
|
<!-- 页脚 --> |
||||
|
<footer class="bg-gray-900 text-white py-10 px-4 mt-16"> |
||||
|
<div class="container mx-auto max-w-6xl text-center"> |
||||
|
<div class="mb-6"> |
||||
|
<div class="inline-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="font-bold">夺宝奇兵免费体验</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<p class="text-gray-400 text-sm mb-4">Copyright 2026.Capitalmaster Pte Ltd All Rights Reserved.</p> |
||||
|
</div> |
||||
|
</footer> |
||||
|
|
||||
|
<!-- 交互脚本 --> |
||||
|
<script type="module"> |
||||
|
// 从外部文件导入 registerMemberApi 函数 |
||||
|
import { registerMemberApi } from './src/api/hkmember.js'; |
||||
|
|
||||
|
// 获取表单元素 |
||||
|
const form = document.getElementById('registrationForm'); |
||||
|
|
||||
|
// 错误提示元素 |
||||
|
const nameError = document.getElementById('nameError'); |
||||
|
const phoneError = document.getElementById('phoneError'); |
||||
|
const emailError = document.getElementById('emailError'); |
||||
|
|
||||
|
// 隐藏所有错误提示 |
||||
|
function hideAllErrors() { |
||||
|
nameError.style.display = 'none'; |
||||
|
phoneError.style.display = 'none'; |
||||
|
emailError.style.display = 'none'; |
||||
|
} |
||||
|
|
||||
|
// 邮箱校验 |
||||
|
function isValidEmail(email) { |
||||
|
const emailRegex = /^[^\s@]+@([^\s@]+\.)+[^\s@]+$/; |
||||
|
if (!emailRegex.test(email)) return false; |
||||
|
if (email.length > 254) return false; |
||||
|
if (email.includes('..')) return false; |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
// 手机号校验 |
||||
|
function isValidPhone(phone) { |
||||
|
if (!phone || phone.trim() === '') return false; |
||||
|
const digitsOnly = phone.replace(/[^\d]/g, ''); |
||||
|
if (digitsOnly.length < 4 || digitsOnly.length > 20) return false; |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
// 清理手机号 |
||||
|
function cleanPhoneNumber(phone) { |
||||
|
if (!phone) return ''; |
||||
|
let cleaned = phone.replace(/[^\d]/g, ''); |
||||
|
cleaned = cleaned.replace(/^(00)/, ''); |
||||
|
return cleaned; |
||||
|
} |
||||
|
|
||||
|
// 表单提交处理 - 先调用API保存数据，然后继续表单提交跳转 |
||||
|
form.addEventListener('submit', async function (e) { |
||||
|
// 先进行前端校验 |
||||
|
hideAllErrors(); |
||||
|
|
||||
|
const name = document.getElementById('unameinfo').value.trim(); |
||||
|
const countryCode = document.getElementById('countryinfo').value; |
||||
|
const phoneRaw = document.getElementById('umoblie').value.trim(); |
||||
|
const wechat = document.getElementById('uwechat').value.trim(); |
||||
|
const email = document.getElementById('uemail').value.trim(); |
||||
|
|
||||
|
let isValid = true; |
||||
|
|
||||
|
if (!name) { |
||||
|
nameError.style.display = 'block'; |
||||
|
isValid = false; |
||||
|
} |
||||
|
|
||||
|
if (!phoneRaw || !isValidPhone(phoneRaw)) { |
||||
|
phoneError.style.display = 'block'; |
||||
|
isValid = false; |
||||
|
} |
||||
|
|
||||
|
if (!email || !isValidEmail(email)) { |
||||
|
emailError.style.display = 'block'; |
||||
|
isValid = false; |
||||
|
} |
||||
|
|
||||
|
if (!isValid) { |
||||
|
e.preventDefault(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 阻止默认提交，先调用API |
||||
|
e.preventDefault(); |
||||
|
|
||||
|
// 清理手机号 |
||||
|
const cleanedPhone = cleanPhoneNumber(phoneRaw); |
||||
|
|
||||
|
// 组装请求参数 |
||||
|
const requestData = { |
||||
|
name: name, |
||||
|
code: countryCode, |
||||
|
tel: cleanedPhone, |
||||
|
email: email |
||||
|
}; |
||||
|
|
||||
|
if (wechat) { |
||||
|
requestData.weChat = wechat; |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
const result = await registerMemberApi(requestData); |
||||
|
if (result.code === 200) { |
||||
|
// API调用成功，继续表单提交跳转 |
||||
|
form.submit(); |
||||
|
} else { |
||||
|
alert('注册失败：' + (result.msg || '未知错误，请稍后重试')); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('提交注册出错:', error); |
||||
|
alert('网络错误或接口异常，请稍后重试'); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 移动端菜单切换 |
||||
|
document.getElementById('mobileMenuBtn').addEventListener('click', function () { |
||||
|
const menu = document.getElementById('mobileMenu'); |
||||
|
menu.classList.toggle('hidden'); |
||||
|
const icon = this.querySelector('i'); |
||||
|
if (icon.classList.contains('fa-bars')) { |
||||
|
icon.classList.replace('fa-bars', 'fa-times'); |
||||
|
} else { |
||||
|
icon.classList.replace('fa-times', 'fa-bars'); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 页面加载动画 |
||||
|
document.addEventListener('DOMContentLoaded', function () { |
||||
|
document.querySelectorAll('.fade-in').forEach(el => { |
||||
|
el.style.opacity = '1'; |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,270 @@ |
|||||
|
<!DOCTYPE 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> |
||||
|
<script src="https://cdn.tailwindcss.com?v=3.3.5"></script> |
||||
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> |
||||
|
|
||||
|
<!-- 基础样式配置 --> |
||||
|
<script> |
||||
|
tailwind.config = { |
||||
|
theme: { |
||||
|
extend: { |
||||
|
colors: { |
||||
|
primary: '#3B82F6', |
||||
|
secondary: '#8B5CF6', |
||||
|
success: '#10B981' // 成功状态颜色 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style type="text/tailwindcss"> |
||||
|
@layer utilities { |
||||
|
.card-hover { |
||||
|
@apply transition-all duration-300 hover:shadow-xl; |
||||
|
} |
||||
|
.btn-effect { |
||||
|
@apply relative overflow-hidden transition-all duration-300; |
||||
|
} |
||||
|
.btn-effect::after { |
||||
|
content: ''; |
||||
|
@apply absolute top-0 left-[-100%] w-full h-full bg-white/20 transform skew-x-12 transition-all duration-500; |
||||
|
} |
||||
|
.btn-effect:hover::after { |
||||
|
@apply left-[100%]; |
||||
|
} |
||||
|
.pulse-animation { |
||||
|
animation: pulse 2s infinite; |
||||
|
} |
||||
|
@keyframes pulse { |
||||
|
0% { transform: scale(1); } |
||||
|
50% { transform: scale(1.05); } |
||||
|
100% { transform: scale(1); } |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style> |
||||
|
/* 基础动画 */ |
||||
|
@keyframes fadeIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(20px); |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.delay-400 { |
||||
|
animation-delay: 0.4s; |
||||
|
} |
||||
|
|
||||
|
.delay-500 { |
||||
|
animation-delay: 0.5s; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body class="bg-gray-50 text-gray-800 font-sans min-h-screen"> |
||||
|
<!-- 导航栏 --> |
||||
|
<header class="fixed top-0 left-0 right-0 bg-white/95 shadow-sm z-50"> |
||||
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
||||
|
<div class="flex items-center space-x-2"> |
||||
|
<div |
||||
|
class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary to-secondary 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-secondary">夺宝奇兵-免费体验</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 桌面导航 --> |
||||
|
<nav class="hidden md:flex items-center space-x-8"> |
||||
|
<a href="./hkhcdbqb.html" class="hover:text-primary transition-colors">首页</a> |
||||
|
<a href="./hkhcdbqbDownload.html" class="hover:text-primary transition-colors">下载中心</a> |
||||
|
<a href="./hkhcdbqbGuide.html" class="text-primary font-medium">操作指南</a> |
||||
|
<a href="https://wa.me/+6588792879?text=我要体验夺宝奇兵" target="_blank" |
||||
|
class="px-5 py-2 rounded-full bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg transition-all">联系我们</a> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- 移动端菜单 --> |
||||
|
<button id="mobileMenuBtn" class="md:hidden text-xl"> |
||||
|
<i class="fa fa-bars"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 移动端菜单内容 --> |
||||
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t"> |
||||
|
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3"> |
||||
|
<a href="./hkhcdbqb.html" class="py-2 hover:text-primary transition-colors">首页</a> |
||||
|
<a href="./hkhcdbqbDownload.html" class="py-2 hover:text-primary transition-colors">下载中心</a> |
||||
|
<a href="./hkhcdbqbGuide.html" class="py-2 text-primary">操作指南</a> |
||||
|
<a href="https://wa.me/+6588792879?text=我要体验夺宝奇兵" target="_blank" |
||||
|
class="py-2 mt-2 rounded-full bg-gradient-to-r from-primary to-secondary text-white text-center">联系我们</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
|
||||
|
<!-- 主要内容 --> |
||||
|
<main class="pt-28 pb-16 px-4 flex-grow"> |
||||
|
<div class="container mx-auto max-w-4xl"> |
||||
|
<!-- 成功提示卡片 --> |
||||
|
<div class="bg-white rounded-2xl shadow-lg p-8 md:p-10 max-w-3xl mx-auto fade-in"> |
||||
|
<!-- 成功图标 --> |
||||
|
<div |
||||
|
class="w-20 h-20 mx-auto mb-6 rounded-full bg-success/10 flex items-center justify-center text-success pulse-animation delay-100"> |
||||
|
<i class="fa fa-check text-4xl"></i> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 标题 --> |
||||
|
<div class="text-center mb-6 delay-200 fade-in"> |
||||
|
<h1 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-gray-800 mb-2">注册成功！</h1> |
||||
|
<p class="text-gray-600 text-lg">感谢您参加DeepChart VS 夺宝奇兵体验</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 成功图片 --> |
||||
|
<div class="mb-8 rounded-xl overflow-hidden shadow-md delay-300 fade-in"> |
||||
|
<a href="./hkhcdbqbDownload.html"><img src="https://hc.homilychart.com/hc/250121/img/homilylink-down.jpeg" |
||||
|
alt="点我跳转多平台设备软件安装" class="w-full h-auto rounded-xl shadow-lg"></a> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 成功信息 --> |
||||
|
<div class="space-y-4 mb-8 text-gray-600 delay-400 fade-in"> |
||||
|
<div class="flex items-start"> |
||||
|
<div |
||||
|
class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5 mr-3"> |
||||
|
<i class="fa fa-envelope-o text-sm"></i> |
||||
|
</div> |
||||
|
<p>我们很快将通过Whatsapp或者微信与您取得联系！</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex items-start"> |
||||
|
<div |
||||
|
class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5 mr-3"> |
||||
|
<i class="fa fa-mobile text-sm"></i> |
||||
|
</div> |
||||
|
<p>同时，点击面图片跳转到HomilyLink安装界面！</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex items-start"> |
||||
|
<div |
||||
|
class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5 mr-3"> |
||||
|
<i class="fa fa-mobile text-sm"></i> |
||||
|
</div> |
||||
|
<p>手机商店搜索"DeepChart"并下载安装！</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex items-start"> |
||||
|
<div |
||||
|
class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5 mr-3"> |
||||
|
<i class="fa fa-mobile text-sm"></i> |
||||
|
</div> |
||||
|
<p>DeepChart的体验账号和夺宝奇兵账号一致！</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex items-start"> |
||||
|
<div |
||||
|
class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5 mr-3"> |
||||
|
<i class="fa fa-clock-o text-sm"></i> |
||||
|
</div> |
||||
|
<p>您不需要自己注册，我们的老师会为您发送体验的iD和密码！</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 操作按钮 --> |
||||
|
<div class="flex flex-col sm:flex-row gap-4 delay-500 fade-in"> |
||||
|
<a href="./hkhcdbqbGuide.html" |
||||
|
class="btn-effect flex-1 py-3 rounded-lg bg-gradient-to-r from-primary to-secondary text-white font-medium text-center"> |
||||
|
<i class="fa fa-home mr-2"></i>查看操作指南 |
||||
|
</a> |
||||
|
<a href="https://wa.me/+6588792879?text=我要体验夺宝奇兵" |
||||
|
class="btn-effect flex-1 py-3 rounded-lg border border-primary text-primary font-medium text-center hover:bg-primary/5 transition-colors"> |
||||
|
<i class="fa fa-user mr-2"></i>需要联系帮助 |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 帮助信息 --> |
||||
|
<div class="text-center mt-8 text-gray-500 text-sm max-w-xl mx-auto delay-500 fade-in"> |
||||
|
<p>如果您没有收到我们老师的消息，请及时<a href="https://wa.me/+6588792879?text=我要体验夺宝奇兵" target="_blank" |
||||
|
class="text-primary hover:underline">联系我们</a></p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</main> |
||||
|
|
||||
|
<!-- 页脚 --> |
||||
|
<footer class="bg-gray-900 text-white py-10 px-4 mt-16"> |
||||
|
<div class="container mx-auto max-w-6xl text-center"> |
||||
|
<div class="mb-6"> |
||||
|
<div class="inline-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="font-bold">夺宝奇兵</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<p class="text-gray-400 text-sm mb-4">Copyright 2026.Capitalmaster Pte Ltd All Rights Reserved.</p> |
||||
|
</div> |
||||
|
</footer> |
||||
|
|
||||
|
<!-- 交互脚本 --> |
||||
|
<script> |
||||
|
// 移动端菜单切换 |
||||
|
document.getElementById('mobileMenuBtn').addEventListener('click', function () { |
||||
|
const menu = document.getElementById('mobileMenu'); |
||||
|
menu.classList.toggle('hidden'); |
||||
|
const icon = this.querySelector('i'); |
||||
|
if (icon.classList.contains('fa-bars')) { |
||||
|
icon.classList.replace('fa-bars', 'fa-times'); |
||||
|
} else { |
||||
|
icon.classList.replace('fa-times', 'fa-bars'); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 页面加载动画 |
||||
|
document.addEventListener('DOMContentLoaded', function () { |
||||
|
document.querySelectorAll('.fade-in').forEach(el => { |
||||
|
el.style.opacity = '1'; |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
// 可选：5秒后自动跳转到首页 |
||||
|
// setTimeout(() => { |
||||
|
// window.location.href = '#'; // 替换为实际首页URL |
||||
|
// }, 5000); |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,138 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<title>HomilyChart-弘历软件</title> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<meta http-equiv="pragma" content="no-cache"> |
||||
|
<meta http-equiv="cache-control" content="no-cache"> |
||||
|
<meta http-equiv="expires" content="0"> |
||||
|
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> |
||||
|
<meta http-equiv="description" content="This is my page"> |
||||
|
<style> |
||||
|
* { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
font-family: Arial, sans-serif; |
||||
|
background-color: #f5f5f5; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 100vh; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
max-width: 600px; |
||||
|
margin: 0 auto; |
||||
|
padding: 20px; |
||||
|
background-color: #fff; |
||||
|
border-radius: 5px; |
||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
text-align: center; |
||||
|
color: #4caf50; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-size: 18px; |
||||
|
line-height: 1.5; |
||||
|
margin: 20px 0; |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
display: block; |
||||
|
margin: 0 auto; |
||||
|
padding: 10px 20px; |
||||
|
background-color: #4caf50; |
||||
|
color: #fff; |
||||
|
border: none; |
||||
|
border-radius: 5px; |
||||
|
font-size: 18px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 600px) { |
||||
|
.container { |
||||
|
max-width: 100%; |
||||
|
border-radius: 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<!-- |
||||
|
<link rel="stylesheet" type="text/css" href="styles.css"> |
||||
|
--> |
||||
|
<script type="text/javascript"> |
||||
|
function closew() { |
||||
|
window.location.href = "about:blank"; |
||||
|
window.opener = null; |
||||
|
window.open('', '_self'); |
||||
|
window.close(); |
||||
|
} |
||||
|
function bakcj() { |
||||
|
window.location.href = "https://hc.homilychart.com/hc/homilyjg.asp"; |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
function closew() { |
||||
|
window.location.href = "about:blank"; |
||||
|
window.opener = null; |
||||
|
window.open('', '_self'); |
||||
|
window.close(); |
||||
|
} |
||||
|
window.onload = function () { |
||||
|
// 设置倒计时时间（以毫秒为单位） |
||||
|
var countdownTime = 5000; // 5秒 |
||||
|
|
||||
|
// 显示倒计时 |
||||
|
var countdownElement = document.getElementById('countdown'); |
||||
|
countdownElement.textContent = Math.ceil(countdownTime / 1000); |
||||
|
|
||||
|
// 开始倒计时 |
||||
|
setTimeout(function () { |
||||
|
// 在倒计时结束后跳转到目标页面 |
||||
|
window.location.href = './hkRegisterSuccess.html'; |
||||
|
}, countdownTime); |
||||
|
|
||||
|
// 更新倒计时显示 |
||||
|
var countdownInterval = setInterval(function () { |
||||
|
countdownTime -= 1000; |
||||
|
countdownElement.textContent = Math.ceil(countdownTime / 1000); |
||||
|
if (countdownTime <= 0) { |
||||
|
clearInterval(countdownInterval); |
||||
|
} |
||||
|
}, 1000); |
||||
|
}; |
||||
|
</script> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<div class="container"> |
||||
|
|
||||
|
<h1>报名成功</h1> |
||||
|
<p>恭喜您，课程报名成功！</p> |
||||
|
<p>稍后我们的助教老师会与您取得联系！</p> |
||||
|
<p>在开课之前会发给您听课信息！</p> |
||||
|
<p>我们建议您安装弘历听课平台！</p> |
||||
|
<p>所以本页面将在</p> |
||||
|
<h3><span id="countdown" style="font-size: 23px;color: red"></span> |
||||
|
<font color="red"> 秒</font> 后自动跳转到弘历听课平台安装界面 |
||||
|
</h3> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<!----> |
||||
|
</div> |
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,716 @@ |
|||||
|
<!DOCTYPE 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="夺宝奇兵,意见反馈,用户反馈"> |
||||
|
<meta http-equiv="description" content="夺宝奇兵用户意见反馈页面"> |
||||
|
<title>夺宝奇兵 - 意见反馈</title> |
||||
|
<!-- 引入外部资源 --> |
||||
|
<script src="https://cdn.tailwindcss.com?v=3.3.5"></script> |
||||
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> |
||||
|
|
||||
|
<!-- 基础样式配置 --> |
||||
|
<script> |
||||
|
tailwind.config = { |
||||
|
theme: { |
||||
|
extend: { |
||||
|
colors: { |
||||
|
primary: '#3B82F6', |
||||
|
secondary: '#8B5CF6', |
||||
|
danger: '#EF4444', |
||||
|
success: '#10B981' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style type="text/tailwindcss"> |
||||
|
@layer utilities { |
||||
|
.input-focus { |
||||
|
@apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none; |
||||
|
} |
||||
|
.input-error { |
||||
|
@apply border-danger focus:ring-danger/20 focus:border-danger; |
||||
|
} |
||||
|
.btn-effect { |
||||
|
@apply relative overflow-hidden transition-all duration-300; |
||||
|
} |
||||
|
.btn-effect::after { |
||||
|
content: ''; |
||||
|
@apply absolute top-0 left-[-100%] w-full h-full bg-white/20 transform skew-x-12 transition-all duration-500; |
||||
|
} |
||||
|
.btn-effect:hover::after { |
||||
|
@apply left-[100%]; |
||||
|
} |
||||
|
.card-shadow { |
||||
|
@apply shadow-md hover:shadow-lg transition-shadow duration-300; |
||||
|
} |
||||
|
.modal-backdrop { |
||||
|
@apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300; |
||||
|
} |
||||
|
.modal-backdrop.active { |
||||
|
@apply opacity-100 pointer-events-auto; |
||||
|
} |
||||
|
.modal-content { |
||||
|
@apply bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 transform translate-y-8 transition-transform duration-300; |
||||
|
} |
||||
|
.modal-backdrop.active .modal-content { |
||||
|
@apply translate-y-0; |
||||
|
} |
||||
|
.error-message { |
||||
|
@apply text-danger text-sm mt-1 hidden; |
||||
|
} |
||||
|
.country-select-container { |
||||
|
@apply relative; |
||||
|
} |
||||
|
.country-select { |
||||
|
@apply appearance-none bg-white border border-gray-300 rounded-lg py-3 pl-10 pr-10 input-focus transition-colors w-full; |
||||
|
} |
||||
|
.loading-spinner { |
||||
|
@apply inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style> |
||||
|
/* 确保基础样式生效 */ |
||||
|
body { |
||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
||||
|
} |
||||
|
|
||||
|
/* 简单动画 */ |
||||
|
@keyframes fadeIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(10px); |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fade-in { |
||||
|
animation: fadeIn 0.5s ease-out forwards; |
||||
|
} |
||||
|
|
||||
|
.delay-100 { |
||||
|
animation-delay: 0.1s; |
||||
|
} |
||||
|
|
||||
|
.delay-200 { |
||||
|
animation-delay: 0.2s; |
||||
|
} |
||||
|
|
||||
|
.delay-300 { |
||||
|
animation-delay: 0.3s; |
||||
|
} |
||||
|
|
||||
|
/* 国家选择框箭头样式 */ |
||||
|
.country-select-arrow { |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
/* 国家选择下拉列表样式 */ |
||||
|
.country-select option { |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
|
||||
|
/* 确保3:7比例在所有中等及以上屏幕生效 */ |
||||
|
@media (min-width: 640px) { |
||||
|
.whatsapp-container { |
||||
|
display: flex; |
||||
|
gap: 1rem; |
||||
|
} |
||||
|
|
||||
|
.country-code-wrapper { |
||||
|
width: 30%; |
||||
|
} |
||||
|
|
||||
|
.phone-number-wrapper { |
||||
|
width: 70%; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body class="bg-gray-50 text-gray-800"> |
||||
|
<!-- 导航栏 --> |
||||
|
<header class="fixed top-0 left-0 right-0 bg-white/95 shadow-sm z-50"> |
||||
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
||||
|
<div class="flex items-center space-x-2"> |
||||
|
<div |
||||
|
class="w-10 h-10 rounded-lg bg-gradient-to-r from-primary to-secondary 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-secondary">意见反馈</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 桌面导航 --> |
||||
|
<nav class="hidden md:flex items-center space-x-8"> |
||||
|
<a href="./hkhcdbqb.html" class="hover:text-primary transition-colors">首页</a> |
||||
|
<a href="#" class="text-primary font-medium">意见反馈</a> |
||||
|
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵我需要帮助" target="_blank" |
||||
|
class="px-5 py-2 rounded-full bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg transition-all">联系我们</a> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- 移动端菜单 --> |
||||
|
<button id="mobileMenuBtn" class="md:hidden text-xl"> |
||||
|
<i class="fa fa-bars"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 移动端菜单内容 --> |
||||
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t"> |
||||
|
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3"> |
||||
|
<a href="#" class="py-2 hover:text-primary transition-colors">首页</a> |
||||
|
<a href="#" class="py-2 text-primary">意见反馈</a> |
||||
|
<a href="https://api.whatsapp.com/send?phone=6588792879&text=夺宝奇兵我需要帮助" target="_blank" |
||||
|
class="py-2 mt-2 rounded-full bg-gradient-to-r from-primary to-secondary text-white text-center">联系我们</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
|
||||
|
<!-- 主要内容 --> |
||||
|
<main class="pt-28 pb-16 px-4"> |
||||
|
<div class="container mx-auto max-w-4xl"> |
||||
|
<!-- 页面标题 --> |
||||
|
<div class="text-center mb-12 fade-in"> |
||||
|
<h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">意见反馈</h1> |
||||
|
<p class="text-gray-600 max-w-2xl mx-auto">感谢您对Adam说港股团队的支持!<br>请留下您的宝贵意见和建议,我们将不断的提升服务质量！</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 反馈表单卡片 --> |
||||
|
<div class="bg-white rounded-xl p-6 md:p-8 mb-10 fade-in delay-100 card-shadow"> |
||||
|
<form id="feedbackForm" class="space-y-6"> |
||||
|
<!-- 姓名输入 --> |
||||
|
<div class="form-group"> |
||||
|
<label for="name" class="block text-gray-700 font-medium mb-2">姓名 <span |
||||
|
class="text-danger">*</span></label> |
||||
|
<div class="relative"> |
||||
|
<div |
||||
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400"> |
||||
|
<i class="fa fa-user"></i> |
||||
|
</div> |
||||
|
<input type="text" id="fusername" name="fusername" required |
||||
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-colors" |
||||
|
placeholder="请输入您的姓名"> |
||||
|
<div class="error-message" id="nameError">请输入您的姓名</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- WhatsApp号码 - 精确3:7比例布局 --> |
||||
|
<div class="form-group"> |
||||
|
<label class="block text-gray-700 font-medium mb-2">Whatsapp <span |
||||
|
class="text-danger">*</span></label> |
||||
|
<div class="whatsapp-container flex flex-col sm:flex-row gap-3"> |
||||
|
<!-- 国家选择（30%宽度） --> |
||||
|
<div class="country-code-wrapper country-select-container"> |
||||
|
<div |
||||
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400"> |
||||
|
<i class="fa fa-whatsapp"></i> |
||||
|
</div> |
||||
|
<select id="countryinfo" name="countryinfo" required class="country-select"> |
||||
|
|
||||
|
<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 |
||||
|
class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400 country-select-arrow"> |
||||
|
<i class="fa fa-chevron-down"></i> |
||||
|
</div> |
||||
|
<div class="error-message" id="countryCodeError">请选择国家/地区</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 手机号（70%宽度） --> |
||||
|
<div class="phone-number-wrapper relative"> |
||||
|
<div |
||||
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400"> |
||||
|
<i class="fa fa-mobile text-lg"></i> |
||||
|
</div> |
||||
|
<input type="tel" id="umoblie" name="umoblie" required |
||||
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-colors" |
||||
|
placeholder="请输入手机号码"> |
||||
|
<div class="error-message" id="phoneError">请输入有效的手机号码</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 微信ID输入 --> |
||||
|
<div class="form-group"> |
||||
|
<label for="wechatId" class="block text-gray-700 font-medium mb-2">微信ID</label> |
||||
|
<div class="relative"> |
||||
|
<div |
||||
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400"> |
||||
|
<i class="fa fa-weixin"></i> |
||||
|
</div> |
||||
|
<input type="text" id="fwechat" name="fwechat" |
||||
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-colors" |
||||
|
placeholder="请输入您的微信ID（选填）"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 邮箱输入 --> |
||||
|
<div class="form-group"> |
||||
|
<label for="email" class="block text-gray-700 font-medium mb-2">邮箱 <span |
||||
|
class="text-danger">*</span></label> |
||||
|
<div class="relative"> |
||||
|
<div |
||||
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400"> |
||||
|
<i class="fa fa-envelope"></i> |
||||
|
</div> |
||||
|
<input type="email" id="femail" name="femail" required |
||||
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-colors" |
||||
|
placeholder="请输入您的邮箱地址"> |
||||
|
<div class="error-message" id="emailError">请输入有效的邮箱地址</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 反馈类型 --> |
||||
|
<div class="form-group"> |
||||
|
<label for="feedbackType" class="block text-gray-700 font-medium mb-2">反馈类型</label> |
||||
|
<div class="relative"> |
||||
|
<div |
||||
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400"> |
||||
|
<i class="fa fa-tag"></i> |
||||
|
</div> |
||||
|
<select id="ftype" name="ftype" |
||||
|
class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus transition-colors appearance-none bg-white"> |
||||
|
<option value="功能建议">功能建议</option> |
||||
|
<option value="问题反馈">问题反馈</option> |
||||
|
<option value="体验优化">体验优化</option> |
||||
|
<option value="其他建议">其他建议</option> |
||||
|
</select> |
||||
|
<div |
||||
|
class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400"> |
||||
|
<i class="fa fa-chevron-down"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 反馈内容（增加最大长度500字的实时限制与校验） --> |
||||
|
<div class="form-group"> |
||||
|
<label for="feedbackContent" class="block text-gray-700 font-medium mb-2">反馈内容 <span |
||||
|
class="text-danger">*</span></label> |
||||
|
<div class="relative"> |
||||
|
<textarea id="fcontent" name="fcontent" rows="5" required maxlength="500" |
||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus transition-colors resize-none" |
||||
|
placeholder="请详细描述您的意见或建议...（最多500字）"></textarea> |
||||
|
<div class="absolute right-3 bottom-3 text-gray-400 text-sm"> |
||||
|
<span id="charCount">0</span> / 500 |
||||
|
</div> |
||||
|
<div class="error-message" id="feedbackContentError">请输入反馈内容（至少10个字符，最多500字）</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 提交按钮 --> |
||||
|
<div class="pt-4"> |
||||
|
<button type="submit" id="submitBtn" |
||||
|
class="btn-effect w-full py-3 px-6 rounded-lg bg-gradient-to-r from-primary to-secondary text-white font-medium text-lg flex items-center justify-center"> |
||||
|
<i class="fa fa-paper-plane mr-2"></i> |
||||
|
<span>提交反馈</span> |
||||
|
<span id="loadingIndicator" class="ml-2 hidden"> |
||||
|
<span class="loading-spinner"></span> |
||||
|
</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 反馈须知 --> |
||||
|
<div |
||||
|
class="bg-gradient-to-r from-primary/5 to-secondary/5 border border-primary/20 rounded-xl p-6 mb-16 fade-in delay-200"> |
||||
|
<h3 class="font-semibold text-lg text-gray-800 mb-4 flex items-center"> |
||||
|
<i class="fa fa-info-circle text-primary mr-2"></i>反馈须知 |
||||
|
</h3> |
||||
|
<ul class="space-y-2 text-gray-700"> |
||||
|
<li class="flex items-start"> |
||||
|
<i class="fa fa-check-circle text-success mt-1 mr-2 flex-shrink-0"></i> |
||||
|
<span>我们会在1-3个工作日内处理您的反馈并给予回复</span> |
||||
|
</li> |
||||
|
<li class="flex items-start"> |
||||
|
<i class="fa fa-check-circle text-success mt-1 mr-2 flex-shrink-0"></i> |
||||
|
<span>带 <span class="text-danger">*</span> 的为必填项，请确保信息准确无误</span> |
||||
|
</li> |
||||
|
<li class="flex items-start"> |
||||
|
<i class="fa fa-check-circle text-success mt-1 mr-2 flex-shrink-0"></i> |
||||
|
<span>您的个人信息仅用于反馈跟进，我们将严格保密</span> |
||||
|
</li> |
||||
|
<li class="flex items-start"> |
||||
|
<i class="fa fa-check-circle text-success mt-1 mr-2 flex-shrink-0"></i> |
||||
|
<span>反馈内容限500字以内，请合理控制字数</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</main> |
||||
|
|
||||
|
<!-- 成功弹窗（与参考页面样式一致，点击确定按钮关闭） --> |
||||
|
<div id="successModal" class="modal-backdrop" role="dialog" aria-modal="true"> |
||||
|
<div class="modal-content p-6"> |
||||
|
<div class="text-center"> |
||||
|
<div class="w-16 h-16 rounded-full bg-success/20 flex items-center justify-center mx-auto mb-4"> |
||||
|
<i class="fa fa-check-circle text-success text-3xl"></i> |
||||
|
</div> |
||||
|
<h3 class="text-xl font-bold mb-2">反馈成功！</h3> |
||||
|
<p class="text-gray-600 mb-6">感谢您的反馈，我们将持续优化更新</p> |
||||
|
<button id="closeModalBtn" |
||||
|
class="px-6 py-2 bg-gradient-to-r from-primary to-secondary text-white rounded-lg hover:shadow-lg transition-all"> |
||||
|
确定 |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 页脚 --> |
||||
|
<footer class="bg-gray-900 text-white py-10 px-4"> |
||||
|
<div class="container mx-auto max-w-6xl text-center"> |
||||
|
<div class="mb-6"> |
||||
|
<div class="inline-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="font-bold">夺宝奇兵</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<p class="text-gray-400 text-sm mb-4">Copyright 2026.Capitalmaster Pte Ltd All Rights Reserved.</p> |
||||
|
</div> |
||||
|
</footer> |
||||
|
|
||||
|
<script type="module"> |
||||
|
// 从外部文件导入 registerMemberApi 函数 |
||||
|
import { registerMemberApi } from './src/api/hkmember.js'; |
||||
|
|
||||
|
// DOM 元素 |
||||
|
const form = document.getElementById('feedbackForm'); |
||||
|
const submitBtn = document.getElementById('submitBtn'); |
||||
|
const loadingIndicator = document.getElementById('loadingIndicator'); |
||||
|
const successModal = document.getElementById('successModal'); |
||||
|
const closeModalBtn = document.getElementById('closeModalBtn'); |
||||
|
|
||||
|
// 字符计数 |
||||
|
const fcontent = document.getElementById('fcontent'); |
||||
|
const charCount = document.getElementById('charCount'); |
||||
|
|
||||
|
// 错误提示元素 |
||||
|
const nameError = document.getElementById('nameError'); |
||||
|
const phoneError = document.getElementById('phoneError'); |
||||
|
const emailError = document.getElementById('emailError'); |
||||
|
const feedbackContentError = document.getElementById('feedbackContentError'); |
||||
|
|
||||
|
// 隐藏所有错误提示 |
||||
|
function hideAllErrors() { |
||||
|
nameError.style.display = 'none'; |
||||
|
phoneError.style.display = 'none'; |
||||
|
emailError.style.display = 'none'; |
||||
|
feedbackContentError.style.display = 'none'; |
||||
|
} |
||||
|
|
||||
|
// 显示错误提示 |
||||
|
function showError(element, message) { |
||||
|
if (element) { |
||||
|
element.textContent = message; |
||||
|
element.style.display = 'block'; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 显示成功弹窗 |
||||
|
function showSuccessModal() { |
||||
|
successModal.classList.add('active'); |
||||
|
} |
||||
|
|
||||
|
// 隐藏成功弹窗 |
||||
|
function hideSuccessModal() { |
||||
|
successModal.classList.remove('active'); |
||||
|
} |
||||
|
|
||||
|
// 关闭弹窗事件 |
||||
|
closeModalBtn.addEventListener('click', hideSuccessModal); |
||||
|
|
||||
|
// 点击模态框背景关闭 |
||||
|
successModal.addEventListener('click', function (e) { |
||||
|
if (e.target === successModal) { |
||||
|
hideSuccessModal(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 邮箱校验 |
||||
|
function isValidEmail(email) { |
||||
|
const emailRegex = /^[^\s@]+@([^\s@]+\.)+[^\s@]+$/; |
||||
|
if (!emailRegex.test(email)) return false; |
||||
|
if (email.length > 254) return false; |
||||
|
if (email.includes('..')) return false; |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
// 手机号校验 |
||||
|
function isValidPhone(phone) { |
||||
|
if (!phone || phone.trim() === '') return false; |
||||
|
const digitsOnly = phone.replace(/[^\d]/g, ''); |
||||
|
if (digitsOnly.length < 4 || digitsOnly.length > 20) return false; |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
// 清理手机号 |
||||
|
function cleanPhoneNumber(phone) { |
||||
|
if (!phone) return ''; |
||||
|
let cleaned = phone.replace(/[^\d]/g, ''); |
||||
|
cleaned = cleaned.replace(/^(00)/, ''); |
||||
|
return cleaned; |
||||
|
} |
||||
|
|
||||
|
// 反馈类型映射 |
||||
|
function getFeedbackTypeValue(typeText) { |
||||
|
const typeMap = { |
||||
|
'功能建议': '1', |
||||
|
'问题反馈': '2', |
||||
|
'体验优化': '3', |
||||
|
'其他建议': '4' |
||||
|
}; |
||||
|
return typeMap[typeText] || '4'; |
||||
|
} |
||||
|
|
||||
|
// 字符计数 & 实时限制（确保不超过500字，与maxlength配合） |
||||
|
if (fcontent && charCount) { |
||||
|
// 初始化显示 |
||||
|
charCount.textContent = fcontent.value.length; |
||||
|
|
||||
|
fcontent.addEventListener('input', function () { |
||||
|
let len = this.value.length; |
||||
|
// 双重保险：如果超过500则截断 |
||||
|
if (len > 500) { |
||||
|
this.value = this.value.substring(0, 500); |
||||
|
len = 500; |
||||
|
} |
||||
|
charCount.textContent = len; |
||||
|
|
||||
|
// 实时移除字数超限的错误提示（如果之前是因为超限报错） |
||||
|
if (len <= 500 && feedbackContentError && feedbackContentError.style.display === 'block' && feedbackContentError.textContent.includes('最多500字')) { |
||||
|
// 但避免移除其他类型错误，通过文本内容判断 |
||||
|
if (feedbackContentError.textContent.includes('最多500字')) { |
||||
|
feedbackContentError.style.display = 'none'; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 增加blur时再次校验，保证用户粘贴超长内容时提示 |
||||
|
fcontent.addEventListener('blur', function () { |
||||
|
let len = this.value.length; |
||||
|
if (len > 500) { |
||||
|
this.value = this.value.substring(0, 500); |
||||
|
charCount.textContent = 500; |
||||
|
showError(feedbackContentError, '反馈内容不能超过500字'); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 移动端菜单切换 |
||||
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
||||
|
if (mobileMenuBtn) { |
||||
|
mobileMenuBtn.addEventListener('click', function () { |
||||
|
const menu = document.getElementById('mobileMenu'); |
||||
|
menu.classList.toggle('hidden'); |
||||
|
const icon = this.querySelector('i'); |
||||
|
if (icon.classList.contains('fa-bars')) { |
||||
|
icon.classList.replace('fa-bars', 'fa-times'); |
||||
|
} else { |
||||
|
icon.classList.replace('fa-times', 'fa-bars'); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 表单提交处理 - 调用API保存数据，成功后显示弹窗，额外校验500字限制 |
||||
|
form.addEventListener('submit', async function (e) { |
||||
|
e.preventDefault(); |
||||
|
|
||||
|
// 前端校验 |
||||
|
hideAllErrors(); |
||||
|
|
||||
|
const name = document.getElementById('fusername').value.trim(); |
||||
|
const countryCode = document.getElementById('countryinfo').value; |
||||
|
const phoneRaw = document.getElementById('umoblie').value.trim(); |
||||
|
const wechat = document.getElementById('fwechat').value.trim(); |
||||
|
const email = document.getElementById('femail').value.trim(); |
||||
|
const feedbackTypeText = document.getElementById('ftype').value; |
||||
|
let feedbackContent = document.getElementById('fcontent').value.trim(); |
||||
|
|
||||
|
let isValid = true; |
||||
|
|
||||
|
// 姓名校验 |
||||
|
if (!name) { |
||||
|
showError(nameError, '请输入您的姓名'); |
||||
|
isValid = false; |
||||
|
} |
||||
|
|
||||
|
// 手机号校验 |
||||
|
if (!phoneRaw || !isValidPhone(phoneRaw)) { |
||||
|
showError(phoneError, '请输入有效的手机号码'); |
||||
|
isValid = false; |
||||
|
} |
||||
|
|
||||
|
// 邮箱校验 |
||||
|
if (!email || !isValidEmail(email)) { |
||||
|
showError(emailError, '请输入有效的邮箱地址'); |
||||
|
isValid = false; |
||||
|
} |
||||
|
|
||||
|
// 反馈内容校验: 不能为空且长度必须在10~500之间 |
||||
|
if (!feedbackContent) { |
||||
|
showError(feedbackContentError, '请输入反馈内容（至少10个字符，最多500字）'); |
||||
|
isValid = false; |
||||
|
} else { |
||||
|
// 重新获取实际内容（防止中间有特殊空格导致长度偏差） |
||||
|
const rawLen = feedbackContent.length; |
||||
|
if (rawLen < 10) { |
||||
|
showError(feedbackContentError, '反馈内容至少需要10个字符，请详细描述'); |
||||
|
isValid = false; |
||||
|
} else if (rawLen > 500) { |
||||
|
// 如果因为某些意外情况（例如直接通过开发者工具修改）导致超长，再次截断并提示 |
||||
|
feedbackContent = feedbackContent.substring(0, 500); |
||||
|
document.getElementById('fcontent').value = feedbackContent; |
||||
|
charCount.textContent = 500; |
||||
|
showError(feedbackContentError, '反馈内容不能超过500字，已自动截断'); |
||||
|
isValid = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (!isValid) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 清理手机号 |
||||
|
const cleanedPhone = cleanPhoneNumber(phoneRaw); |
||||
|
|
||||
|
// 组装请求参数 |
||||
|
const requestData = { |
||||
|
name: name, |
||||
|
code: countryCode, |
||||
|
tel: cleanedPhone, |
||||
|
email: email, |
||||
|
feedback_content: feedbackContent, |
||||
|
feedback_type: getFeedbackTypeValue(feedbackTypeText) |
||||
|
}; |
||||
|
|
||||
|
// 微信ID有值才传递 |
||||
|
if (wechat) { |
||||
|
requestData.weChat = wechat; |
||||
|
} |
||||
|
|
||||
|
// 显示加载状态 |
||||
|
submitBtn.disabled = true; |
||||
|
loadingIndicator.classList.remove('hidden'); |
||||
|
|
||||
|
try { |
||||
|
const result = await registerMemberApi(requestData); |
||||
|
if (result.code === 200) { |
||||
|
// API调用成功，显示成功弹窗 |
||||
|
showSuccessModal(); |
||||
|
// 清空表单 |
||||
|
form.reset(); |
||||
|
// 重置字符计数 |
||||
|
if (charCount) charCount.textContent = '0'; |
||||
|
// 清空所有隐藏错误显示 |
||||
|
hideAllErrors(); |
||||
|
} else { |
||||
|
alert('提交失败：' + (result.msg || '请稍后重试')); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('提交出错:', error); |
||||
|
alert('网络错误或接口异常，请稍后重试'); |
||||
|
} finally { |
||||
|
submitBtn.disabled = false; |
||||
|
loadingIndicator.classList.add('hidden'); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 页面加载动画 |
||||
|
document.addEventListener('DOMContentLoaded', function () { |
||||
|
document.querySelectorAll('.fade-in').forEach(el => { |
||||
|
el.style.opacity = '1'; |
||||
|
}); |
||||
|
// 确保字符计数初始正确 |
||||
|
if (fcontent && charCount) { |
||||
|
charCount.textContent = fcontent.value.length; |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,826 @@ |
|||||
|
<!DOCTYPE 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,HomilyLink,夺宝奇兵HomilyLink,股票体检专家,AI预测大模型,AI炒股时代,AI情绪大模型,超级云脑,夺宝利剑,AI金牛,AI探牛,AI雷达,AI小财神,大牛有型,金牛送福,牛刀小试,HomilyChart,免费体验,机构界的黑科技,数据分析时代,John Lu谈股,John Lu谈股财富圈"> |
||||
|
<meta http-equiv="description" content="HomilyLink"> |
||||
|
<title>夺宝奇兵 - AI炒股时代，机构界的黑科技！</title> |
||||
|
<!-- 引入Tailwind CSS --> |
||||
|
<script src="https://cdn.tailwindcss.com"></script> |
||||
|
<script type="text/javascript" src="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> |
||||
|
/* 加载字体 */ |
||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
||||
|
|
||||
|
/* 全局动画定义 */ |
||||
|
@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; |
||||
|
} |
||||
|
</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="./hkfeedback.html" class="font-medium hover:text-primary transition-colors">意见反馈</a> |
||||
|
<a href="./hkhcdbqbGuide.html" class="font-medium hover:text-primary transition-colors">操作指南</a> |
||||
|
<a href="https://api.whatsapp.com/send?phone=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="./hkfeedback.html" class="font-medium py-2 hover:text-primary transition-colors">意见反馈</a> |
||||
|
<a href="./hkhcdbqbGuide.html" class="font-medium py-2 hover:text-primary transition-colors">操作指南</a> |
||||
|
<a href="https://api.whatsapp.com/send?phone=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="./hkhcdbqbDownload.html" |
||||
|
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">立即注册，开启属于你的AI时代！</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="请输入您的手机号码（可包含空格、连字符等）" |
||||
|
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://api.whatsapp.com/send?phone=6588792879&text=我要了解弘历云版软件" target="_blank" |
||||
|
class="text-gray-400 hover:text-white transition-colors">弘历云版软件</a></li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解HomilyChart" |
||||
|
target="_blank" class="text-gray-400 hover:text-white transition-colors">HomilyChart</a> |
||||
|
</li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解夺宝奇兵" target="_blank" |
||||
|
class="text-gray-400 hover:text-white transition-colors">夺宝奇兵</a></li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解博股会员" |
||||
|
class="text-gray-400 hover:text-white transition-colors">博股会员</a></li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=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://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank" |
||||
|
class="text-gray-400 hover:text-white transition-colors">关于我们</a></li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank" |
||||
|
class="text-gray-400 hover:text-white transition-colors">团队介绍</a></li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=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="./hkhcdbqbGuide.html" |
||||
|
class="text-gray-400 hover:text-white transition-colors">帮助中心</a> |
||||
|
</li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=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">© Copyright 2026.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 - 从外部文件导入API，并包含表单提交与全球兼容的校验逻辑 --> |
||||
|
<script type="module"> |
||||
|
// 从指定路径导入 registerMemberApi 函数 |
||||
|
import { registerMemberApi } from './src/api/hkmember.js'; |
||||
|
|
||||
|
// 等待 DOM 加载完成 |
||||
|
document.addEventListener('DOMContentLoaded', function () { |
||||
|
const form = document.getElementById('registrationForm'); |
||||
|
const successModal = document.getElementById('successModal'); |
||||
|
const closeModalBtn = document.getElementById('closeModal'); |
||||
|
const submitBtn = form.querySelector('button[type="submit"]'); |
||||
|
|
||||
|
// 关闭模态框 |
||||
|
function closeModal() { |
||||
|
successModal.classList.add('hidden'); |
||||
|
} |
||||
|
|
||||
|
closeModalBtn.addEventListener('click', closeModal); |
||||
|
successModal.addEventListener('click', function (e) { |
||||
|
if (e.target === successModal) closeModal(); |
||||
|
}); |
||||
|
|
||||
|
// ============================================ |
||||
|
// 全球兼容的校验函数 |
||||
|
// ============================================ |
||||
|
|
||||
|
/** |
||||
|
* 邮箱校验 - 支持全球各种域名格式 |
||||
|
* @param {string} email - 邮箱地址 |
||||
|
* @returns {boolean} - 是否有效 |
||||
|
*/ |
||||
|
function isValidEmail(email) { |
||||
|
// 基础格式校验：必须包含@和点号，不能有空格 |
||||
|
const emailRegex = /^[^\s@]+@([^\s@]+\.)+[^\s@]+$/; |
||||
|
if (!emailRegex.test(email)) return false; |
||||
|
|
||||
|
// 长度限制（RFC 5322 标准：本地部分最长64，域名最长255，总长不超过254） |
||||
|
if (email.length > 254) return false; |
||||
|
|
||||
|
// 检查是否包含连续的点号（如 user..name@example.com） |
||||
|
if (email.includes('..')) return false; |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 手机号校验 - 全球宽松模式，不限制具体格式 |
||||
|
* 只做最基本的检查：不能为空，清理后至少包含4位数字 |
||||
|
* 注意：真正的号码有效性验证应在后端完成 |
||||
|
* @param {string} phone - 原始手机号输入 |
||||
|
* @returns {boolean} - 是否通过基础检查 |
||||
|
*/ |
||||
|
function isValidPhone(phone) { |
||||
|
if (!phone || phone.trim() === '') return false; |
||||
|
|
||||
|
// 移除所有非数字字符（保留数字） |
||||
|
const digitsOnly = phone.replace(/[^\d]/g, ''); |
||||
|
|
||||
|
// 检查是否至少包含4位数字（全球最短手机号约为4-5位） |
||||
|
// 同时不超过20位数字（全球最长手机号约15位，20位留有足够余量） |
||||
|
if (digitsOnly.length < 4 || digitsOnly.length > 20) { |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 清理手机号 - 提取纯数字部分，用于提交给后端 |
||||
|
* 注意：国家代码已经通过下拉框单独传递，这里只提取用户输入的本地号码部分 |
||||
|
* @param {string} phone - 原始手机号输入 |
||||
|
* @returns {string} - 清理后的纯数字字符串 |
||||
|
*/ |
||||
|
function cleanPhoneNumber(phone) { |
||||
|
if (!phone) return ''; |
||||
|
// 移除所有非数字字符，只保留数字 |
||||
|
let cleaned = phone.replace(/[^\d]/g, ''); |
||||
|
|
||||
|
// 如果用户输入了国家代码（如开头有00或+86的情况），自动移除开头的00或+后面的数字 |
||||
|
// 因为国家代码已经通过下拉框单独传递了 |
||||
|
// 移除开头的00（国际长途前缀） |
||||
|
cleaned = cleaned.replace(/^(00)/, ''); |
||||
|
|
||||
|
return cleaned; |
||||
|
} |
||||
|
|
||||
|
// 表单提交处理 |
||||
|
form.addEventListener('submit', async function (e) { |
||||
|
e.preventDefault(); |
||||
|
|
||||
|
// 获取表单字段值 |
||||
|
const name = document.getElementById('unameinfo').value.trim(); |
||||
|
const countryCode = document.getElementById('countryinfo').value; |
||||
|
const phoneRaw = document.getElementById('umoblie').value.trim(); |
||||
|
const wechat = document.getElementById('uwechat').value.trim(); |
||||
|
const email = document.getElementById('uemail').value.trim(); |
||||
|
const agreement = document.getElementById('agreement').checked; |
||||
|
|
||||
|
// 姓名校验 |
||||
|
if (!name) { |
||||
|
alert('请输入姓名'); |
||||
|
document.getElementById('unameinfo').focus(); |
||||
|
return; |
||||
|
} |
||||
|
if (name.length > 50) { |
||||
|
alert('姓名长度不能超过50个字符'); |
||||
|
document.getElementById('unameinfo').focus(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 手机号校验（宽松模式，全球兼容） |
||||
|
if (!phoneRaw) { |
||||
|
alert('请输入电话号码'); |
||||
|
document.getElementById('umoblie').focus(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isValidPhone(phoneRaw)) { |
||||
|
alert('请输入有效的电话号码（至少4位数字）\n\n示例：\n• 91234567\n• 09123456789\n• 123-4567\n• 1234 5678'); |
||||
|
document.getElementById('umoblie').focus(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 邮箱校验 |
||||
|
if (!email) { |
||||
|
alert('请输入电子邮箱'); |
||||
|
document.getElementById('uemail').focus(); |
||||
|
return; |
||||
|
} |
||||
|
if (!isValidEmail(email)) { |
||||
|
alert('请输入有效的电子邮箱地址\n\n示例：\n• username@example.com\n• name@company.co.uk'); |
||||
|
document.getElementById('uemail').focus(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 协议确认 |
||||
|
if (!agreement) { |
||||
|
alert('请同意接收相关产品和服务的资讯'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 清理手机号（提取纯数字） |
||||
|
const cleanedPhone = cleanPhoneNumber(phoneRaw); |
||||
|
|
||||
|
// 组装接口参数（按照 registerMemberApi 要求的格式） |
||||
|
const requestData = { |
||||
|
name: name, |
||||
|
code: countryCode, |
||||
|
tel: cleanedPhone, |
||||
|
weChat: wechat || '', |
||||
|
email: email, |
||||
|
feedback_content: '', |
||||
|
feedback_type: '' // 4:其他建议 |
||||
|
}; |
||||
|
|
||||
|
// 显示加载状态 |
||||
|
const originalBtnText = submitBtn.innerHTML; |
||||
|
submitBtn.disabled = true; |
||||
|
submitBtn.innerHTML = '提交中...'; |
||||
|
|
||||
|
try { |
||||
|
// 调用导入的 registerMemberApi 函数 |
||||
|
const result = await registerMemberApi(requestData); |
||||
|
// 根据返回结果判断是否成功 |
||||
|
if (result.code === 200) { |
||||
|
successModal.classList.remove('hidden'); |
||||
|
form.reset(); |
||||
|
document.getElementById('agreement').checked = false; |
||||
|
} else { |
||||
|
alert('注册失败：' + (result.msg || '未知错误，请稍后重试')); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('提交注册出错:', error); |
||||
|
alert('网络错误或接口异常，请稍后重试'); |
||||
|
} finally { |
||||
|
submitBtn.disabled = false; |
||||
|
submitBtn.innerHTML = originalBtnText; |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
2076
hkhcdbqbDownload.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,669 @@ |
|||||
|
<!DOCTYPE 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,HomilyLink,夺宝奇兵HomilyLink,股票体检专家,AI预测大模型,AI炒股时代,AI情绪大模型,超级云脑,夺宝利剑,AI金牛,AI探牛,AI雷达,AI小财神,大牛有型,金牛送福,牛刀小试,HomilyChart,免费体验,机构界的黑科技,数据分析时代,John Lu谈股,John Lu谈股财富圈"> |
||||
|
<meta http-equiv="description" content="HomilyLink"> |
||||
|
<title>夺宝奇兵 - AI炒股时代，机构界的黑科技！</title> |
||||
|
<!-- 引入Tailwind CSS --> |
||||
|
<script src="https://cdn.tailwindcss.com"></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 { |
||||
|
opacity: 0; |
||||
|
animation: fadeIn 0.6s ease-out forwards; |
||||
|
} |
||||
|
|
||||
|
.delay-100 { |
||||
|
animation-delay: 0.1s; |
||||
|
} |
||||
|
|
||||
|
.delay-200 { |
||||
|
animation-delay: 0.2s; |
||||
|
} |
||||
|
|
||||
|
/* 平滑滚动 */ |
||||
|
html { |
||||
|
scroll-behavior: smooth; |
||||
|
} |
||||
|
|
||||
|
/* 视频容器比例控制 */ |
||||
|
.video-container { |
||||
|
position: relative; |
||||
|
padding-bottom: 56.25%; |
||||
|
/* 16:9 比例 */ |
||||
|
height: 0; |
||||
|
overflow: hidden; |
||||
|
border-radius: 1.5rem; |
||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.video-container iframe, |
||||
|
.video-container video { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
/* 图片展示样式 */ |
||||
|
.image-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
||||
|
gap: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.image-item { |
||||
|
border-radius: 1rem; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
||||
|
transition: all 0.3s ease; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.image-item img { |
||||
|
width: 100%; |
||||
|
height: 200px; |
||||
|
object-fit: cover; |
||||
|
transition: transform 0.5s ease; |
||||
|
} |
||||
|
|
||||
|
.image-item:hover { |
||||
|
transform: translateY(-5px); |
||||
|
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12); |
||||
|
} |
||||
|
|
||||
|
.image-item:hover img { |
||||
|
transform: scale(1.05); |
||||
|
} |
||||
|
|
||||
|
.image-caption { |
||||
|
padding: 1rem; |
||||
|
background-color: white; |
||||
|
} |
||||
|
|
||||
|
/* 图片查看器 */ |
||||
|
.image-viewer { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: rgba(0, 0, 0, 0.9); |
||||
|
display: none; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
z-index: 100; |
||||
|
padding: 2rem; |
||||
|
} |
||||
|
|
||||
|
.image-viewer.active { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.viewer-content { |
||||
|
max-width: 90%; |
||||
|
max-height: 90%; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.viewer-image { |
||||
|
max-width: 100%; |
||||
|
max-height: 80vh; |
||||
|
border-radius: 0.5rem; |
||||
|
} |
||||
|
|
||||
|
.viewer-caption { |
||||
|
color: white; |
||||
|
text-align: center; |
||||
|
margin-top: 1rem; |
||||
|
font-size: 1.2rem; |
||||
|
} |
||||
|
|
||||
|
.close-viewer { |
||||
|
position: absolute; |
||||
|
top: -40px; |
||||
|
right: 0; |
||||
|
color: white; |
||||
|
font-size: 2rem; |
||||
|
cursor: pointer; |
||||
|
transition: color 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.viewer-nav { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
transform: translateY(-50%); |
||||
|
padding: 0 1rem; |
||||
|
} |
||||
|
|
||||
|
.viewer-nav button { |
||||
|
background-color: rgba(255, 255, 255, 0.2); |
||||
|
border: none; |
||||
|
color: white; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
cursor: pointer; |
||||
|
transition: background-color 0.3s ease; |
||||
|
} |
||||
|
</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-6"> |
||||
|
<a href="#video-guide" class="font-medium hover:text-primary transition-colors">视频指南</a> |
||||
|
<a href="#image-guide" class="font-medium hover:text-primary transition-colors">图片说明</a> |
||||
|
<a href="./hkhcdbqbDownload.html" class="font-medium hover:text-primary transition-colors">软件下载</a> |
||||
|
<a href="https://api.whatsapp.com/send?phone=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="#video-guide" class="font-medium py-2 hover:text-primary transition-colors">视频指南</a> |
||||
|
<a href="#image-guide" class="font-medium py-2 hover:text-primary transition-colors">图片说明</a> |
||||
|
<a href="hcdbqb-download.asp" class="font-medium py-2 hover:text-primary transition-colors">图片说明</a> |
||||
|
<a href="https://api.whatsapp.com/send?phone=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 text-center"> |
||||
|
<div class="animate-fade-in"> |
||||
|
<h1 class="text-[clamp(2rem,5vw,3rem)] font-bold leading-tight text-shadow mb-6"> |
||||
|
操作指南中心 |
||||
|
</h1> |
||||
|
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto"> |
||||
|
通过视频以及图文说明，教你如何使用夺宝奇兵软件以及如何观看直播和观看重播！ |
||||
|
</p> |
||||
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
||||
|
<a href="#video-guide" |
||||
|
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="#image-guide" |
||||
|
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> |
||||
|
</section> |
||||
|
|
||||
|
<!-- 视频指南区域 --> |
||||
|
<section id="video-guide" class="py-20 px-4 bg-white"> |
||||
|
<div class="container mx-auto max-w-5xl"> |
||||
|
<div class="text-center mb-12 animate-fade-in"> |
||||
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">HomilyLink指南视频</h2> |
||||
|
<p class="text-gray-600 max-w-2xl mx-auto">详细的视频教程，如何体验夺宝奇兵，如何听课，如何看重播！</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 主视频播放窗口 --> |
||||
|
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 animate-fade-in delay-100"> |
||||
|
<h3 class="text-xl md:text-2xl font-semibold mb-4">HomilyLink操作指南 | 课程直播以及重播指南</h3> |
||||
|
<div class="video-container"> |
||||
|
<!-- 兼容性视频播放器 --> |
||||
|
<video id="guideVideo" controls poster="https://d31zlh4on95l9h.cloudfront.net/images/7da138ae80e260196f892a1fd813c66d.jpg" controlsList="nodownload" |
||||
|
class="w-full"></video> |
||||
|
</div> |
||||
|
<div class="mt-6 flex flex-wrap items-center justify-between gap-4"> |
||||
|
<div> |
||||
|
<p class="text-gray-600">时长: 02:14</p> |
||||
|
<p class="text-gray-500 text-sm mt-1">HomilyLink操作指南 </p> |
||||
|
</div> |
||||
|
<div class="flex space-x-3"> |
||||
|
<button |
||||
|
class="flex items-center space-x-1 px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors"> |
||||
|
<img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/20230711171637.png" style="width: 30px;height: 30px;"> |
||||
|
<span><a href="https://api.whatsapp.com/send?phone=6588792879&text=进HomilyLink听课需要帮助" |
||||
|
target="_blank" class="text-gray-400 transition-colors" |
||||
|
style="color: black">点击寻求帮助</a></span> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<!-- 图片说明区域 --> |
||||
|
<section id="image-guide" class="py-20 px-4 bg-gray-50"> |
||||
|
<div class="container mx-auto max-w-6xl" style="display: none;"> |
||||
|
<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> |
||||
|
|
||||
|
<!-- 图片过滤标签 --> |
||||
|
<div class="flex flex-wrap justify-center gap-3 mb-10 animate-fade-in delay-100"> |
||||
|
<button class="filter-btn active px-5 py-2 rounded-full bg-primary text-white font-medium" |
||||
|
data-filter="all">全部步骤</button> |
||||
|
<button |
||||
|
class="filter-btn px-5 py-2 rounded-full bg-white text-gray-700 font-medium hover:bg-gray-100 transition-colors" |
||||
|
data-filter="setup">安装登录</button> |
||||
|
<button |
||||
|
class="filter-btn px-5 py-2 rounded-full bg-white text-gray-700 font-medium hover:bg-gray-100 transition-colors" |
||||
|
data-filter="operation">观看直播</button> |
||||
|
<button |
||||
|
class="filter-btn px-5 py-2 rounded-full bg-white text-gray-700 font-medium hover:bg-gray-100 transition-colors" |
||||
|
data-filter="advanced">观看重播</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 图片网格 --> |
||||
|
<div class="image-grid animate-fade-in delay-200"> |
||||
|
<!-- 安装设置 --> |
||||
|
<div class="image-item" data-category="setup" data-caption="步骤1：开箱与配件检查"> |
||||
|
<img src="https://picsum.photos/seed/setup1/600/400" alt="开箱与配件检查"> |
||||
|
<div class="image-caption"> |
||||
|
<h4 class="font-medium">步骤1：开箱与配件检查</h4> |
||||
|
<p class="text-gray-600 text-sm mt-1">检查包装内物品是否完整，包含主机、电源线、数据线和说明书</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="image-item" data-category="setup" data-caption="步骤2：设备连接与安装"> |
||||
|
<img src="https://picsum.photos/seed/setup2/600/400" alt="设备连接与安装"> |
||||
|
<div class="image-caption"> |
||||
|
<h4 class="font-medium">步骤2：设备连接与安装</h4> |
||||
|
<p class="text-gray-600 text-sm mt-1">按照图示连接电源和数据线，固定设备到合适位置</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 基本操作 --> |
||||
|
<div class="image-item" data-category="operation" data-caption="步骤3：开机与初始设置"> |
||||
|
<img src="https://picsum.photos/seed/operate1/600/400" alt="开机与初始设置"> |
||||
|
<div class="image-caption"> |
||||
|
<h4 class="font-medium">步骤3：开机与初始设置</h4> |
||||
|
<p class="text-gray-600 text-sm mt-1">首次开机后按照向导完成语言、网络等基本设置</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="image-item" data-category="operation" data-caption="步骤4：主界面功能介绍"> |
||||
|
<img src="https://picsum.photos/seed/operate2/600/400" alt="主界面功能介绍"> |
||||
|
<div class="image-caption"> |
||||
|
<h4 class="font-medium">步骤4：主界面功能介绍</h4> |
||||
|
<p class="text-gray-600 text-sm mt-1">了解主界面布局和各功能模块的位置与作用</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 高级功能 --> |
||||
|
<div class="image-item" data-category="advanced" data-caption="步骤5：用户权限管理"> |
||||
|
<img src="https://picsum.photos/seed/advanced1/600/400" alt="用户权限管理"> |
||||
|
<div class="image-caption"> |
||||
|
<h4 class="font-medium">步骤5：用户权限管理</h4> |
||||
|
<p class="text-gray-600 text-sm mt-1">如何创建和管理不同权限的用户账户</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="image-item" data-category="advanced" data-caption="步骤6：数据备份与恢复"> |
||||
|
<img src="https://picsum.photos/seed/advanced2/600/400" alt="数据备份与恢复"> |
||||
|
<div class="image-caption"> |
||||
|
<h4 class="font-medium">步骤6：数据备份与恢复</h4> |
||||
|
<p class="text-gray-600 text-sm mt-1">设置自动备份和手动备份，以及数据恢复方法</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<!-- 图片查看器 --> |
||||
|
<div class="image-viewer" id="imageViewer"> |
||||
|
<div class="viewer-content"> |
||||
|
<span class="close-viewer" id="closeViewer">×</span> |
||||
|
<div class="viewer-nav"> |
||||
|
<button id="prevImage"><i class="fa fa-chevron-left"></i></button> |
||||
|
<button id="nextImage"><i class="fa fa-chevron-right"></i></button> |
||||
|
</div> |
||||
|
<img src="" alt="" class="viewer-image" id="viewerImage"> |
||||
|
<div class="viewer-caption" id="viewerCaption"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 页脚 --> |
||||
|
<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://api.whatsapp.com/send?phone=6588792879&text=我要了解弘历云版软件" target="_blank" |
||||
|
class="text-gray-400 hover:text-white transition-colors">弘历云版软件</a></li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解HomilyChart" |
||||
|
target="_blank" class="text-gray-400 hover:text-white transition-colors">HomilyChart</a> |
||||
|
</li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解夺宝奇兵" target="_blank" |
||||
|
class="text-gray-400 hover:text-white transition-colors">夺宝奇兵</a></li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要了解博股会员" |
||||
|
class="text-gray-400 hover:text-white transition-colors">博股会员</a></li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=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://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank" |
||||
|
class="text-gray-400 hover:text-white transition-colors">关于我们</a></li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=6588792879&text=我要咨询" target="_blank" |
||||
|
class="text-gray-400 hover:text-white transition-colors">团队介绍</a></li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=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="./hkhcdbqbGuide.html" class="text-gray-400 hover:text-white transition-colors">帮助中心</a> |
||||
|
</li> |
||||
|
<li><a href="https://api.whatsapp.com/send?phone=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">© Copyright 2026.Capitalmaster Pte Ltd All Rights |
||||
|
Reserved.<br /></p> |
||||
|
<div class="flex space-x-6"> |
||||
|
如需帮助，请及时联系我们！ |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</footer> |
||||
|
|
||||
|
<!-- 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 imageViewer = document.getElementById('imageViewer'); |
||||
|
const viewerImage = document.getElementById('viewerImage'); |
||||
|
const viewerCaption = document.getElementById('viewerCaption'); |
||||
|
const closeViewer = document.getElementById('closeViewer'); |
||||
|
const prevImage = document.getElementById('prevImage'); |
||||
|
const nextImage = document.getElementById('nextImage'); |
||||
|
const imageItems = document.querySelectorAll('.image-item'); |
||||
|
let currentImageIndex = 0; |
||||
|
let filteredImages = Array.from(imageItems); |
||||
|
|
||||
|
// 打开图片查看器 |
||||
|
imageItems.forEach((item) => { |
||||
|
item.addEventListener('click', () => { |
||||
|
currentImageIndex = filteredImages.indexOf(item); |
||||
|
updateViewer(); |
||||
|
imageViewer.classList.add('active'); |
||||
|
document.body.style.overflow = 'hidden'; |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
// 关闭图片查看器 |
||||
|
closeViewer.addEventListener('click', () => { |
||||
|
imageViewer.classList.remove('active'); |
||||
|
document.body.style.overflow = ''; |
||||
|
}); |
||||
|
|
||||
|
// 点击查看器外部关闭 |
||||
|
imageViewer.addEventListener('click', (e) => { |
||||
|
if (e.target === imageViewer) { |
||||
|
imageViewer.classList.remove('active'); |
||||
|
document.body.style.overflow = ''; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 上一张/下一张图片 |
||||
|
prevImage.addEventListener('click', (e) => { |
||||
|
e.stopPropagation(); |
||||
|
currentImageIndex = (currentImageIndex - 1 + filteredImages.length) % filteredImages.length; |
||||
|
updateViewer(); |
||||
|
}); |
||||
|
|
||||
|
nextImage.addEventListener('click', (e) => { |
||||
|
e.stopPropagation(); |
||||
|
currentImageIndex = (currentImageIndex + 1) % filteredImages.length; |
||||
|
updateViewer(); |
||||
|
}); |
||||
|
|
||||
|
// 更新查看器内容 |
||||
|
function updateViewer() { |
||||
|
const currentItem = filteredImages[currentImageIndex]; |
||||
|
const imgSrc = currentItem.querySelector('img').src; |
||||
|
const caption = currentItem.dataset.caption; |
||||
|
|
||||
|
viewerImage.src = imgSrc; |
||||
|
viewerImage.alt = caption; |
||||
|
viewerCaption.textContent = caption; |
||||
|
} |
||||
|
|
||||
|
// 图片过滤功能 |
||||
|
const filterBtns = document.querySelectorAll('.filter-btn'); |
||||
|
|
||||
|
filterBtns.forEach(btn => { |
||||
|
btn.addEventListener('click', () => { |
||||
|
// 更新按钮样式 |
||||
|
filterBtns.forEach(b => { |
||||
|
b.classList.remove('active', 'bg-primary', 'text-white'); |
||||
|
b.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-100'); |
||||
|
}); |
||||
|
btn.classList.add('active', 'bg-primary', 'text-white'); |
||||
|
btn.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-100'); |
||||
|
|
||||
|
const filter = btn.dataset.filter; |
||||
|
|
||||
|
// 过滤图片 |
||||
|
filteredImages = []; |
||||
|
imageItems.forEach(item => { |
||||
|
if (filter === 'all' || item.dataset.category === filter) { |
||||
|
item.style.display = 'block'; |
||||
|
filteredImages.push(item); |
||||
|
} else { |
||||
|
item.style.display = 'none'; |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
// 滚动动画 |
||||
|
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); |
||||
|
|
||||
|
// 键盘导航支持 |
||||
|
document.addEventListener('keydown', (e) => { |
||||
|
if (imageViewer.classList.contains('active')) { |
||||
|
if (e.key === 'Escape') { |
||||
|
imageViewer.classList.remove('active'); |
||||
|
document.body.style.overflow = ''; |
||||
|
} else if (e.key === 'ArrowLeft') { |
||||
|
currentImageIndex = (currentImageIndex - 1 + filteredImages.length) % filteredImages.length; |
||||
|
updateViewer(); |
||||
|
} else if (e.key === 'ArrowRight') { |
||||
|
currentImageIndex = (currentImageIndex + 1) % filteredImages.length; |
||||
|
updateViewer(); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<script> |
||||
|
// 等页面完全加载后再执行（避免播放器还没渲染好） |
||||
|
window.onload = function () { |
||||
|
const video = document.getElementById('guideVideo'); |
||||
|
// 这里放你的真实视频地址（本地/网络都可以） |
||||
|
const realVideoSrc = "https://hc.homilychart.com/hc/250121/img/homilylink-guide.mp4"; |
||||
|
|
||||
|
// 动态添加视频源（支持多格式，兼容性更好） |
||||
|
const mp4Source = document.createElement('source'); |
||||
|
mp4Source.src = realVideoSrc; |
||||
|
mp4Source.type = 'video/mp4'; |
||||
|
|
||||
|
video.appendChild(mp4Source); |
||||
|
// 触发播放器加载（可选，确保视频能正常播放） |
||||
|
video.load(); |
||||
|
}; |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,860 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="zh-CN"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="utf-8" /> |
||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
||||
|
<title>管理后台 · Adam说港股导流</title> |
||||
|
<style> |
||||
|
.tab-container { |
||||
|
max-width: 1200px; |
||||
|
margin: 0 0 12px 0; |
||||
|
padding: 0 16px; |
||||
|
} |
||||
|
|
||||
|
.tabs { |
||||
|
display: flex; |
||||
|
gap: 50px; |
||||
|
padding: 4px; |
||||
|
border-radius: 8px; |
||||
|
width: fit-content; |
||||
|
} |
||||
|
|
||||
|
.tab { |
||||
|
padding: 10px 20px; |
||||
|
border-radius: 6px; |
||||
|
border: none; |
||||
|
background: transparent; |
||||
|
color: #131212; |
||||
|
font-weight: 700; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
font-size: 16px; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.tab:hover { |
||||
|
background: rgba(46, 125, 50, 0.1); |
||||
|
color: #25D366; |
||||
|
} |
||||
|
|
||||
|
.tab.active { |
||||
|
background: #BAF7D0; |
||||
|
color: #0E4322; |
||||
|
box-shadow: 0 2px 4px rgba(46, 125, 50, 0.3); |
||||
|
} |
||||
|
* { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; |
||||
|
padding: 24px; |
||||
|
background: #f0f2f6; |
||||
|
color: #1e293b; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
background: #ffffff; |
||||
|
padding: 20px 16px 24px 16px; |
||||
|
border-radius: 20px; |
||||
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); |
||||
|
max-width: 100%; |
||||
|
overflow-x: auto; |
||||
|
} |
||||
|
|
||||
|
/* 表格容器实现横向滚动（移动端友好），同时保证单元格内容溢出省略 */ |
||||
|
.table-wrapper { |
||||
|
overflow-x: auto; |
||||
|
border-radius: 14px; |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
|
||||
|
table { |
||||
|
width: 100%; |
||||
|
border-collapse: collapse; |
||||
|
min-width: 1000px; |
||||
|
font-size: 13.5px; |
||||
|
} |
||||
|
|
||||
|
th, |
||||
|
td { |
||||
|
padding: 12px 10px; |
||||
|
border-bottom: 1px solid #e9edf2; |
||||
|
text-align: center; |
||||
|
vertical-align: middle; |
||||
|
max-width: 0; |
||||
|
/* 辅助溢出省略 */ |
||||
|
} |
||||
|
|
||||
|
/* 表头固定宽度 + 允许文字折行但优先省略 */ |
||||
|
th { |
||||
|
background: #f8fafc; |
||||
|
font-weight: 600; |
||||
|
color: #1e293b; |
||||
|
letter-spacing: 0.3px; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
/* 单元格内容超出宽度后隐藏文字，鼠标悬浮显示完整内容 */ |
||||
|
td { |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
max-width: 180px; |
||||
|
transition: background 0.1s; |
||||
|
} |
||||
|
|
||||
|
/* 针对特定列单独控制最大宽度，确保不超出表头宽度 */ |
||||
|
td:nth-child(1) { |
||||
|
max-width: 55px; |
||||
|
} |
||||
|
|
||||
|
/* 姓名 */ |
||||
|
td:nth-child(2) { |
||||
|
max-width: 100px; |
||||
|
} |
||||
|
|
||||
|
/* WhatsApp按钮列 */ |
||||
|
td:nth-child(3) { |
||||
|
max-width: 100px; |
||||
|
overflow: visible; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
|
||||
|
/* 国家代码 */ |
||||
|
td:nth-child(4) { |
||||
|
max-width: 90px; |
||||
|
} |
||||
|
|
||||
|
/* 电话号码 */ |
||||
|
td:nth-child(5) { |
||||
|
max-width: 120px; |
||||
|
} |
||||
|
|
||||
|
/* 微信ID */ |
||||
|
td:nth-child(6) { |
||||
|
max-width: 120px; |
||||
|
} |
||||
|
|
||||
|
/* 邮箱 */ |
||||
|
td:nth-child(7) { |
||||
|
max-width: 150px; |
||||
|
} |
||||
|
|
||||
|
/* 反馈内容 */ |
||||
|
td:nth-child(8) { |
||||
|
max-width: 120px; |
||||
|
} |
||||
|
|
||||
|
/* 反馈类型 */ |
||||
|
td:nth-child(9) { |
||||
|
max-width: 100px; |
||||
|
} |
||||
|
|
||||
|
/* 添加时间 */ |
||||
|
td:nth-child(10) { |
||||
|
max-width: 160px; |
||||
|
} |
||||
|
|
||||
|
/* 是否联系 */ |
||||
|
td:nth-child(11) { |
||||
|
max-width: 100px; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
|
||||
|
/* 备注 */ |
||||
|
td:nth-child(12) { |
||||
|
max-width: 160px; |
||||
|
} |
||||
|
|
||||
|
/* 操作 */ |
||||
|
td:nth-child(13) { |
||||
|
max-width: 100px; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
|
||||
|
/* 悬浮显示完整内容（自定义title特性，但使用全局title亦可，增强体验）*/ |
||||
|
td[title] { |
||||
|
cursor: help; |
||||
|
} |
||||
|
|
||||
|
.controls { |
||||
|
display: flex; |
||||
|
gap: 16px; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
margin-top: 20px; |
||||
|
background: #ffffff; |
||||
|
padding: 8px 4px; |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
gap: 6px; |
||||
|
align-items: center; |
||||
|
margin-left: auto; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
padding: 6px 12px; |
||||
|
border-radius: 30px; |
||||
|
border: 1px solid #d4d9e2; |
||||
|
background: #fff; |
||||
|
cursor: pointer; |
||||
|
font-size: 12.5px; |
||||
|
font-weight: 500; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.btn:hover:not(:disabled) { |
||||
|
background-color: #f1f5f9; |
||||
|
border-color: #94a3b8; |
||||
|
} |
||||
|
|
||||
|
.btn:disabled { |
||||
|
opacity: 0.5; |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.btn.primary { |
||||
|
background: #2563eb; |
||||
|
color: white; |
||||
|
border-color: #2563eb; |
||||
|
} |
||||
|
|
||||
|
.btn.primary:hover:not(:disabled) { |
||||
|
background: #1d4ed8; |
||||
|
} |
||||
|
|
||||
|
.btn.whatsapp { |
||||
|
background: #25D366; |
||||
|
color: #fff; |
||||
|
border-color: #1da15a; |
||||
|
} |
||||
|
|
||||
|
.btn.whatsapp:hover { |
||||
|
background: #20b859; |
||||
|
} |
||||
|
|
||||
|
.status-btn { |
||||
|
padding: 5px 12px; |
||||
|
border-radius: 24px; |
||||
|
border: none; |
||||
|
font-weight: 500; |
||||
|
cursor: pointer; |
||||
|
font-size: 12px; |
||||
|
transition: 0.1s; |
||||
|
} |
||||
|
|
||||
|
.status-0 { |
||||
|
background: #fee2e2; |
||||
|
color: #b91c1c; |
||||
|
border: 1px solid #fecaca; |
||||
|
} |
||||
|
|
||||
|
.status-1 { |
||||
|
background: #dcfce7; |
||||
|
color: #15803d; |
||||
|
border: 1px solid #bbf7d0; |
||||
|
} |
||||
|
|
||||
|
.btn.active { |
||||
|
background: #2563eb; |
||||
|
color: white; |
||||
|
border-color: #2563eb; |
||||
|
} |
||||
|
|
||||
|
select, |
||||
|
input[type="number"] { |
||||
|
padding: 6px 12px; |
||||
|
border-radius: 30px; |
||||
|
border: 1px solid #cbd5e1; |
||||
|
background: white; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.small { |
||||
|
font-size: 13px; |
||||
|
color: #475569; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 720px) { |
||||
|
.controls { |
||||
|
flex-direction: column; |
||||
|
align-items: stretch; |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
margin-left: 0; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 备注模态框 */ |
||||
|
#noteModal { |
||||
|
display: none; |
||||
|
position: fixed; |
||||
|
inset: 0; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
backdrop-filter: blur(3px); |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
z-index: 10000; |
||||
|
} |
||||
|
|
||||
|
#noteModal .dialog { |
||||
|
background: #fff; |
||||
|
padding: 24px; |
||||
|
border-radius: 28px; |
||||
|
width: 90%; |
||||
|
max-width: 520px; |
||||
|
box-shadow: 0 25px 40px rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
|
||||
|
#noteModal textarea { |
||||
|
width: 100%; |
||||
|
min-height: 130px; |
||||
|
padding: 12px; |
||||
|
border-radius: 18px; |
||||
|
border: 1px solid #cbd5e1; |
||||
|
font-size: 14px; |
||||
|
font-family: inherit; |
||||
|
resize: vertical; |
||||
|
} |
||||
|
|
||||
|
.toast { |
||||
|
position: fixed; |
||||
|
top: 24px; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%) translateY(-30px); |
||||
|
background: #1e293b; |
||||
|
color: white; |
||||
|
padding: 10px 20px; |
||||
|
border-radius: 60px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
opacity: 0; |
||||
|
transition: all 0.2s ease; |
||||
|
z-index: 11000; |
||||
|
pointer-events: none; |
||||
|
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.toast.show { |
||||
|
opacity: 1; |
||||
|
transform: translateX(-50%) translateY(0); |
||||
|
} |
||||
|
|
||||
|
/* 登录遮罩 */ |
||||
|
#loginCheckModal { |
||||
|
display: none; |
||||
|
position: fixed; |
||||
|
inset: 0; |
||||
|
background: rgba(0, 0, 0, 0.75); |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
|
||||
|
#loginCheckModal .dialog { |
||||
|
background: #fff; |
||||
|
padding: 32px; |
||||
|
border-radius: 32px; |
||||
|
width: 90%; |
||||
|
max-width: 380px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
#loginCheckModal h3 { |
||||
|
margin: 0 0 12px; |
||||
|
color: #e11d48; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<div id="loginCheckModal"> |
||||
|
<div class="dialog"> |
||||
|
<h3>🔐 访问被拒绝</h3> |
||||
|
<p>您尚未登录或登录已过期，请重新登录系统。</p> |
||||
|
<button class="btn primary" id="goToLoginBtn">前往登录页面</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tab-container"> |
||||
|
<div class="tabs"> |
||||
|
<button class="tab active" data-tab="win-us-stock">Adam说港股导流</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card"> |
||||
|
<div class="table-wrapper"> |
||||
|
<table aria-describedby="成员反馈列表"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th style="width: 50px">序号</th> |
||||
|
<th style="width: 100px">姓名</th> |
||||
|
<th style="width: 100px">WhatsApp</th> |
||||
|
<th style="width: 90px">国家/地区代码</th> |
||||
|
<th style="width: 120px">电话号码</th> |
||||
|
<th style="width: 120px">微信ID</th> |
||||
|
<th style="width: 150px">邮箱</th> |
||||
|
<th style="width: 130px">反馈内容</th> |
||||
|
<th style="width: 100px">反馈类型</th> |
||||
|
<th style="width: 160px">添加时间</th> |
||||
|
<th style="width: 100px">是否联系</th> |
||||
|
<th style="width: 160px">备注</th> |
||||
|
<th style="width: 100px">操作</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody id="tableBody"></tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
|
||||
|
<div class="controls"> |
||||
|
<div class="small"> |
||||
|
每页显示 |
||||
|
<select id="pageSizeSelect"> |
||||
|
<option value="20" selected>20</option> |
||||
|
<option value="50">50</option> |
||||
|
<option value="100">100</option> |
||||
|
<option value="200">200</option> |
||||
|
</select> |
||||
|
条 |
||||
|
</div> |
||||
|
<div class="small">共 <span id="totalCount">0</span> 条</div> |
||||
|
<div class="pagination" id="pagination"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div id="noteModal"> |
||||
|
<div class="dialog"> |
||||
|
<h3 style="margin-top: 0;">✏️ 编辑备注</h3> |
||||
|
<textarea id="noteTextarea" rows="4" placeholder="输入备注信息..."></textarea> |
||||
|
<div style="margin-top: 20px; display: flex; justify-content: flex-end; gap: 12px;"> |
||||
|
<button class="btn" id="noteCancelBtn">取消</button> |
||||
|
<button class="btn primary" id="noteSaveBtn">保存</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div id="toast" class="toast"></div> |
||||
|
|
||||
|
<script type="module"> |
||||
|
import { getMemberListApi, updateMemberStateApi, editMemberNoteApi } from './src/api/hkmember.js' |
||||
|
|
||||
|
// ---------- 登录验证 ---------- |
||||
|
function checkLoginStatus() { |
||||
|
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'; |
||||
|
const loginTime = parseInt(localStorage.getItem('loginTime'), 10); |
||||
|
if (!isLoggedIn || isNaN(loginTime)) return false; |
||||
|
const hoursDiff = (new Date().getTime() - loginTime) / (1000 * 60 * 60); |
||||
|
return hoursDiff < 24; |
||||
|
} |
||||
|
|
||||
|
function showLoginCheckModal() { |
||||
|
const modal = document.getElementById('loginCheckModal'); |
||||
|
if (modal) modal.style.display = 'flex'; |
||||
|
} |
||||
|
function hideLoginCheckModal() { |
||||
|
const modal = document.getElementById('loginCheckModal'); |
||||
|
if (modal) modal.style.display = 'none'; |
||||
|
} |
||||
|
function redirectToLogin() { |
||||
|
window.location.href = 'hkLogiManagement.html'; |
||||
|
} |
||||
|
|
||||
|
// 全局前置守卫：如果未登录则显示弹窗，返回false |
||||
|
function requireAuth() { |
||||
|
if (!checkLoginStatus()) { |
||||
|
showLoginCheckModal(); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
document.getElementById('goToLoginBtn')?.addEventListener('click', redirectToLogin); |
||||
|
|
||||
|
// ---------- 映射反馈类型文字 ---------- |
||||
|
function formatFeedbackType(typeValue) { |
||||
|
// 后端返回可能是字符串或数字 "1", 2, 3, 4 |
||||
|
const val = parseInt(typeValue, 10); |
||||
|
switch (val) { |
||||
|
case 1: return '功能建议'; |
||||
|
case 2: return '问题反馈'; |
||||
|
case 3: return '体验优化'; |
||||
|
case 4: return '其他建议'; |
||||
|
default: return typeValue || '—'; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
let state = { |
||||
|
pageSize: 20, |
||||
|
currentPage: 1, |
||||
|
total: 0, |
||||
|
items: [] |
||||
|
}; |
||||
|
|
||||
|
const tableBody = document.getElementById("tableBody"); |
||||
|
const paginationEl = document.getElementById("pagination"); |
||||
|
const totalCountEl = document.getElementById("totalCount"); |
||||
|
const pageSizeSelect = document.getElementById("pageSizeSelect"); |
||||
|
|
||||
|
const noteModal = document.getElementById("noteModal"); |
||||
|
const noteTextarea = document.getElementById("noteTextarea"); |
||||
|
const noteCancelBtn = document.getElementById("noteCancelBtn"); |
||||
|
const noteSaveBtn = document.getElementById("noteSaveBtn"); |
||||
|
const toastEl = document.getElementById("toast"); |
||||
|
|
||||
|
let editingRowId = null; |
||||
|
|
||||
|
function showToast(msg, isError = false) { |
||||
|
toastEl.textContent = msg; |
||||
|
toastEl.style.background = isError ? '#e11d48' : '#1e293b'; |
||||
|
toastEl.classList.add("show"); |
||||
|
setTimeout(() => { |
||||
|
toastEl.classList.remove("show"); |
||||
|
toastEl.style.background = '#1e293b'; |
||||
|
}, 1800); |
||||
|
} |
||||
|
|
||||
|
// 获取数据 |
||||
|
async function fetchPage(page, pageSize) { |
||||
|
if (!requireAuth()) return { items: [], total: 0 }; |
||||
|
|
||||
|
try { |
||||
|
const res = await getMemberListApi({ |
||||
|
page: page, |
||||
|
page_size: pageSize, |
||||
|
}); |
||||
|
if (res && typeof res.code !== "undefined" && res.code !== 200) { |
||||
|
throw new Error(res.msg || "接口异常"); |
||||
|
} |
||||
|
const payload = res?.data || {}; |
||||
|
state.items = payload.list || []; |
||||
|
state.total = payload.total || 0; |
||||
|
return { items: state.items, total: state.total }; |
||||
|
} catch (err) { |
||||
|
console.error(err); |
||||
|
showToast("获取数据失败: " + (err.message || '网络错误'), true); |
||||
|
state.items = []; |
||||
|
state.total = 0; |
||||
|
return { items: [], total: 0 }; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 辅助函数：给td增加title悬浮完整内容（自动处理每个单元格） |
||||
|
function applyTitleToCells() { |
||||
|
const rows = tableBody.querySelectorAll('tr'); |
||||
|
rows.forEach(row => { |
||||
|
const cells = row.querySelectorAll('td'); |
||||
|
cells.forEach(cell => { |
||||
|
// 跳过按钮列（第三列WhatsApp按钮，第11列状态按钮，第13列操作按钮）避免title干扰 |
||||
|
const isButtonCell = cell.querySelector('button') && |
||||
|
(cell.previousElementSibling?.innerText?.includes('WhatsApp') || |
||||
|
cell.querySelector('.status-btn') || |
||||
|
cell.querySelector('[data-action="editNote"]')); |
||||
|
if (!isButtonCell && cell.innerText && cell.innerText.trim() !== '') { |
||||
|
const rawText = cell.innerText; |
||||
|
if (!cell.hasAttribute('data-has-title')) { |
||||
|
cell.setAttribute('title', rawText); |
||||
|
cell.setAttribute('data-has-title', 'true'); |
||||
|
} else if (cell.getAttribute('title') !== rawText) { |
||||
|
cell.setAttribute('title', rawText); |
||||
|
} |
||||
|
} else if (!isButtonCell && cell.innerText === '') { |
||||
|
cell.removeAttribute('title'); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 渲染表格（带溢出省略 + 悬浮显示完整内容） |
||||
|
function renderTable() { |
||||
|
const startIndex = (state.currentPage - 1) * state.pageSize; |
||||
|
const items = state.items || []; |
||||
|
|
||||
|
tableBody.innerHTML = items.map((item, idx) => { |
||||
|
const serial = startIndex + idx + 1; |
||||
|
const statusClass = item.isRelated ? "status-1" : "status-0"; |
||||
|
const statusText = item.isRelated ? "已联系" : "未联系"; |
||||
|
// 反馈类型文字转换 |
||||
|
const feedbackTypeText = formatFeedbackType(item.feedback_type); |
||||
|
|
||||
|
// 构建WhatsApp链接 (清理+号) |
||||
|
const cleanCode = (item.code || '').replace(/\+/g, ''); |
||||
|
const whatsappPhone = cleanCode + (item.telephone || ''); |
||||
|
const whatsappUrl = `https://api.whatsapp.com/send?phone=${encodeURIComponent(whatsappPhone)}&text=${encodeURIComponent('hello欢迎来到Adam说港股')}`; |
||||
|
|
||||
|
// 安全转义 |
||||
|
const name = escapeHtml(item.name || ""); |
||||
|
const code = escapeHtml(item.code || ""); |
||||
|
const telephone = escapeHtml(item.telephone || ""); |
||||
|
const wechat = escapeHtml(item.wechat || ""); |
||||
|
const email = escapeHtml(item.email || ""); |
||||
|
const feedbackContent = escapeHtml(item.feedback_content || ""); |
||||
|
const createdAt = escapeHtml(item.createdAt || ""); |
||||
|
const note = escapeHtml(item.note || ""); |
||||
|
|
||||
|
// 注意：表格结构保持13列，反馈类型用转换后的文字 |
||||
|
return ` |
||||
|
<tr> |
||||
|
<td title="${serial}">${serial}</td> |
||||
|
<td title="${name}">${name}</td> |
||||
|
<td style="overflow: visible; white-space: normal;"> |
||||
|
<button class="btn whatsapp" data-action="whatsapp" data-id="${item.id}">💬 WhatsApp</button> |
||||
|
</td> |
||||
|
<td title="${code}">${code}</td> |
||||
|
<td title="${telephone}">${telephone}</td> |
||||
|
<td title="${wechat}">${wechat}</td> |
||||
|
<td title="${email}">${email}</td> |
||||
|
<td title="${feedbackContent}">${feedbackContent}</td> |
||||
|
<td title="${feedbackTypeText}">${feedbackTypeText}</td> |
||||
|
<td title="${createdAt}">${createdAt}</td> |
||||
|
<td style="white-space: normal;"> |
||||
|
<button class="status-btn ${statusClass}" data-action="toggle" data-id="${item.id}">${statusText}</button> |
||||
|
</td> |
||||
|
<td title="${note}">${note}</td> |
||||
|
<td> |
||||
|
<button class="btn" data-action="editNote" data-id="${item.id}" style="font-size:12px;">✎ 备注</button> |
||||
|
</td> |
||||
|
</tr> |
||||
|
`; |
||||
|
}).join(""); |
||||
|
|
||||
|
// 为所有普通单元格添加完整文本悬浮（动态渲染后） |
||||
|
const rows = tableBody.querySelectorAll('tr'); |
||||
|
rows.forEach(row => { |
||||
|
const cells = row.querySelectorAll('td'); |
||||
|
cells.forEach(cell => { |
||||
|
// 跳过按钮占位列（第三列、操作列以及状态列，这些列已经有点击元素，不干扰title） |
||||
|
const hasImportantBtn = cell.querySelector('[data-action="whatsapp"]') || |
||||
|
cell.querySelector('[data-action="toggle"]') || |
||||
|
cell.querySelector('[data-action="editNote"]'); |
||||
|
if (!hasImportantBtn) { |
||||
|
const txt = cell.innerText.trim(); |
||||
|
if (txt) cell.setAttribute('title', txt); |
||||
|
else cell.removeAttribute('title'); |
||||
|
} else if (cell.querySelector('[data-action="toggle"]')) { |
||||
|
// 状态按钮列保留其自身文字悬浮展示状态文字 |
||||
|
const statusBtn = cell.querySelector('.status-btn'); |
||||
|
if (statusBtn) cell.setAttribute('title', statusBtn.innerText); |
||||
|
} else if (cell.querySelector('[data-action="editNote"]')) { |
||||
|
// 操作列一般不需要悬浮，但为了统一，展示当前按钮文字 |
||||
|
const btnText = cell.innerText.trim(); |
||||
|
if (btnText) cell.setAttribute('title', btnText); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
totalCountEl.textContent = state.total; |
||||
|
} |
||||
|
|
||||
|
// 事件监听（委托） |
||||
|
tableBody.addEventListener("click", async (e) => { |
||||
|
if (!requireAuth()) return; |
||||
|
|
||||
|
const whatsappBtn = e.target.closest('[data-action="whatsapp"]'); |
||||
|
if (whatsappBtn) { |
||||
|
const id = whatsappBtn.getAttribute("data-id"); |
||||
|
handleWhatsApp(id); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const toggler = e.target.closest('[data-action="toggle"]'); |
||||
|
if (toggler) { |
||||
|
const id = toggler.getAttribute("data-id"); |
||||
|
await handleToggle(id, toggler); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const editBtn = e.target.closest('[data-action="editNote"]'); |
||||
|
if (editBtn) { |
||||
|
const id = editBtn.getAttribute("data-id"); |
||||
|
openNoteModal(id); |
||||
|
return; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
function handleWhatsApp(id) { |
||||
|
const item = state.items.find((it) => String(it.id) === String(id)); |
||||
|
if (!item) return; |
||||
|
const cleanCode = (item.code || '').replace(/\+/g, ''); |
||||
|
const whatsappPhone = cleanCode + (item.telephone || ''); |
||||
|
if (!whatsappPhone) { |
||||
|
showToast("电话号码无效", true); |
||||
|
return; |
||||
|
} |
||||
|
const whatsappUrl = `https://api.whatsapp.com/send?phone=${encodeURIComponent(whatsappPhone)}&text=${encodeURIComponent('hello欢迎来到赢在美股')}`; |
||||
|
window.open(whatsappUrl, '_blank'); |
||||
|
} |
||||
|
|
||||
|
async function handleToggle(id, btnEl) { |
||||
|
const item = state.items.find((it) => String(it.id) === String(id)); |
||||
|
if (!item) return; |
||||
|
const prev = item.isRelated; |
||||
|
const newVal = prev ? 0 : 1; |
||||
|
// 乐观更新UI |
||||
|
item.isRelated = newVal; |
||||
|
btnEl.textContent = newVal ? "已联系" : "未联系"; |
||||
|
btnEl.classList.toggle("status-1", !!newVal); |
||||
|
btnEl.classList.toggle("status-0", !newVal); |
||||
|
try { |
||||
|
const res = await updateMemberStateApi({ id: item.id, state: newVal }); |
||||
|
if (res && typeof res.code !== "undefined" && res.code !== 200) { |
||||
|
throw new Error(res.msg || "更新失败"); |
||||
|
} |
||||
|
showToast("状态已更新"); |
||||
|
} catch (err) { |
||||
|
// 回滚 |
||||
|
item.isRelated = prev; |
||||
|
btnEl.textContent = prev ? "已联系" : "未联系"; |
||||
|
btnEl.classList.toggle("status-1", !!prev); |
||||
|
btnEl.classList.toggle("status-0", !prev); |
||||
|
showToast("更新失败: " + (err.message || '网络错误'), true); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function openNoteModal(id) { |
||||
|
if (!requireAuth()) return; |
||||
|
const item = state.items.find((it) => String(it.id) === String(id)); |
||||
|
if (!item) return; |
||||
|
editingRowId = id; |
||||
|
noteTextarea.value = item.note || ""; |
||||
|
noteModal.style.display = "flex"; |
||||
|
noteTextarea.focus(); |
||||
|
} |
||||
|
|
||||
|
function closeNoteModal() { |
||||
|
editingRowId = null; |
||||
|
noteTextarea.value = ""; |
||||
|
noteModal.style.display = "none"; |
||||
|
} |
||||
|
|
||||
|
noteCancelBtn.addEventListener("click", closeNoteModal); |
||||
|
noteSaveBtn.addEventListener("click", async () => { |
||||
|
if (!requireAuth()) return; |
||||
|
if (!editingRowId) return closeNoteModal(); |
||||
|
const newNote = noteTextarea.value.trim(); |
||||
|
const item = state.items.find((it) => String(it.id) === String(editingRowId)); |
||||
|
if (!item) return closeNoteModal(); |
||||
|
|
||||
|
const oldNote = item.note; |
||||
|
item.note = newNote; |
||||
|
// 乐观刷新当前行备注显示 (可局部更新但简单重新渲染) |
||||
|
renderTable(); |
||||
|
try { |
||||
|
const res = await editMemberNoteApi({ id: item.id, note: newNote }); |
||||
|
if (res && typeof res.code !== "undefined" && res.code !== 200) { |
||||
|
throw new Error(res.msg || "保存失败"); |
||||
|
} |
||||
|
showToast("备注保存成功"); |
||||
|
} catch (err) { |
||||
|
item.note = oldNote; |
||||
|
renderTable(); |
||||
|
showToast("保存备注失败: " + (err.message || '接口错误'), true); |
||||
|
} finally { |
||||
|
closeNoteModal(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 分页渲染 |
||||
|
function renderPagination() { |
||||
|
const totalPages = Math.max(1, Math.ceil(state.total / state.pageSize)); |
||||
|
let current = Math.min(Math.max(1, state.currentPage), totalPages); |
||||
|
state.currentPage = current; |
||||
|
|
||||
|
const pages = buildPageList(current, totalPages, 2); |
||||
|
let html = ''; |
||||
|
html += `<button class="btn" data-action="prev" ${current === 1 ? 'disabled' : ''}>◀ 上一页</button>`; |
||||
|
pages.forEach(p => { |
||||
|
if (p === '...') { |
||||
|
html += `<span class="small" style="padding:0 6px;">...</span>`; |
||||
|
} else { |
||||
|
html += `<button class="btn ${p === current ? 'active' : ''}" data-page="${p}">${p}</button>`; |
||||
|
} |
||||
|
}); |
||||
|
html += `<button class="btn" data-action="next" ${current === totalPages ? 'disabled' : ''}>下一页 ▶</button>`; |
||||
|
paginationEl.innerHTML = html; |
||||
|
} |
||||
|
|
||||
|
function buildPageList(current, total, delta) { |
||||
|
const pages = []; |
||||
|
const left = Math.max(1, current - delta); |
||||
|
const right = Math.min(total, current + delta); |
||||
|
if (left > 1) { |
||||
|
pages.push(1); |
||||
|
if (left > 2) pages.push('...'); |
||||
|
} |
||||
|
for (let i = left; i <= right; i++) pages.push(i); |
||||
|
if (right < total) { |
||||
|
if (right < total - 1) pages.push('...'); |
||||
|
pages.push(total); |
||||
|
} |
||||
|
return pages; |
||||
|
} |
||||
|
|
||||
|
paginationEl.addEventListener("click", (e) => { |
||||
|
if (!requireAuth()) return; |
||||
|
const btn = e.target.closest("button"); |
||||
|
if (!btn) return; |
||||
|
const action = btn.getAttribute("data-action"); |
||||
|
if (action === "prev") { |
||||
|
if (state.currentPage > 1) state.currentPage--; |
||||
|
} else if (action === "next") { |
||||
|
const totalPages = Math.max(1, Math.ceil(state.total / state.pageSize)); |
||||
|
if (state.currentPage < totalPages) state.currentPage++; |
||||
|
} else { |
||||
|
const p = Number(btn.getAttribute("data-page")); |
||||
|
if (!isNaN(p) && p > 0) state.currentPage = p; |
||||
|
} |
||||
|
update(); |
||||
|
}); |
||||
|
|
||||
|
pageSizeSelect.addEventListener("change", () => { |
||||
|
if (!requireAuth()) return; |
||||
|
const newSize = parseInt(pageSizeSelect.value, 10); |
||||
|
state.pageSize = newSize; |
||||
|
state.currentPage = 1; |
||||
|
update(); |
||||
|
}); |
||||
|
|
||||
|
async function update() { |
||||
|
if (!requireAuth()) return; |
||||
|
await fetchPage(state.currentPage, state.pageSize); |
||||
|
renderTable(); |
||||
|
renderPagination(); |
||||
|
} |
||||
|
|
||||
|
function escapeHtml(s) { |
||||
|
if (s === undefined || s === null) return ''; |
||||
|
return String(s).replace(/[&<>]/g, function (m) { |
||||
|
if (m === '&') return '&'; |
||||
|
if (m === '<') return '<'; |
||||
|
if (m === '>') return '>'; |
||||
|
return m; |
||||
|
}).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function (c) { |
||||
|
return c; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 初始化：如果已登录则加载，否则展示登录遮罩 |
||||
|
if (checkLoginStatus()) { |
||||
|
update(); |
||||
|
} else { |
||||
|
showLoginCheckModal(); |
||||
|
} |
||||
|
|
||||
|
// 监听localStorage变化或者其他页面可能登录跳转后刷新(简单处理) |
||||
|
window.addEventListener('focus', () => { |
||||
|
if (checkLoginStatus() && document.getElementById('loginCheckModal')?.style.display === 'flex') { |
||||
|
hideLoginCheckModal(); |
||||
|
update(); |
||||
|
} else if (!checkLoginStatus() && document.getElementById('loginCheckModal')?.style.display !== 'flex') { |
||||
|
showLoginCheckModal(); |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,47 @@ |
|||||
|
// 用户内容相关接口配置文件
|
||||
|
import { request } from "/src/utils/request.js"; |
||||
|
|
||||
|
// 正确的 Vite 环境变量用法
|
||||
|
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL; |
||||
|
|
||||
|
export function registerMemberApi(data) { |
||||
|
return request({ |
||||
|
url: `${API_BASE_URL}/api/hk/member/insert`, |
||||
|
// url: `http://192.168.1.103:8000/api/hk/member/insert`,
|
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
export function getImageApi(data) { |
||||
|
return request({ |
||||
|
url: `${API_BASE_URL}/api/hk/config/get`, |
||||
|
// url:'http://g8ec6e97.natappfree.cc/api/config/get',
|
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
export function getMemberListApi(data) { |
||||
|
return request({ |
||||
|
url: `${API_BASE_URL}/api/hk/member/getList`, |
||||
|
// url: `http://g8ec6e97.natappfree.cc/api/member/getList`,
|
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}) |
||||
|
} |
||||
|
export function updateMemberStateApi(data) { |
||||
|
return request({ |
||||
|
url: `${API_BASE_URL}/api/hk/member/updateState`, |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function editMemberNoteApi(data) { |
||||
|
return request({ |
||||
|
url: `${API_BASE_URL}/api/hk/member/editNote`, |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}) |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue