This commit is contained in:
hkyc
2025-03-13 17:53:21 +08:00
parent 433715b78a
commit 3a61bd1ddb
7 changed files with 1275 additions and 575 deletions

293
api-docs.html Normal file
View File

@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API文档 - 听泉科技</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.api-docs {
padding: 160px 0 80px;
}
.api-section {
background: white;
border-radius: 1rem;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.endpoint {
margin-bottom: 2rem;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 0.5rem;
}
.method {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
font-weight: bold;
margin-right: 1rem;
background: #28a745;
color: white;
}
.code-block {
background: #2d2d2d;
color: #fff;
padding: 1rem;
border-radius: 0.5rem;
margin: 1rem 0;
font-family: monospace;
white-space: pre;
}
.params-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
.params-table th, .params-table td {
padding: 0.75rem;
border: 1px solid #dee2e6;
text-align: left;
}
.params-table th {
background: #f8f9fa;
}
.api-url {
font-family: monospace;
background: #f8f9fa;
padding: 0.5rem;
border-radius: 0.25rem;
border: 1px solid #dee2e6;
}
</style>
</head>
<body>
<div class="overlay"></div>
<!-- 导航栏 -->
<header>
<div class="container">
<div class="logo">
<h1>听泉科技</h1>
</div>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="products.html">产品</a></li>
<li><a href="pricing.html">价格</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="api-docs.html" class="active">API文档</a></li>
</ul>
</nav>
<button class="menu-button">
<span class="menu-icon"></span>
</button>
</div>
</header>
<section class="api-docs">
<div class="container">
<h1>获取账号API - 快速指南</h1>
<div class="api-section">
<div class="endpoint">
<h3><span class="method">POST</span> 获取账号</h3>
<p>获取一个可用的Cursor账号</p>
<h4>接口地址</h4>
<div class="api-url">https://api.cursorpro.com.cn/admin/api.pool/getAccount</div>
<h4>请求方式</h4>
<p>POST</p>
<h4>参数说明</h4>
<table class="params-table">
<tr>
<th>参数名</th>
<th>类型</th>
<th>必填</th>
<th>说明</th>
</tr>
<tr>
<td>identity_key</td>
<td>String</td>
<td></td>
<td>用户身份标识</td>
</tr>
</table>
<h4>请求示例</h4>
<div class="code-block">curl -X POST \
https://api.cursorpro.com.cn/admin/api.pool/getAccount \
-H 'Content-Type: application/x-www-form-urlencoded' \
-d 'identity_key=您的身份标识'</div>
<h4>返回示例</h4>
<div class="code-block">{
"code": 0,
"msg": "获取账号成功",
"data": {
"email": "example@domain.com",
"password": "password123",
"first_name": "John",
"last_name": "Doe",
"access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVzJ9...",
"refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVzJ9...",
"machine_id": "DESKTOP-ABC123",
"user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)...",
"registration_time": "2023-01-01 12:00:00",
"account_id": 123,
"remaining_balance": "99.50",
"is_test": false
}
}</div>
<h4>返回参数说明</h4>
<table class="params-table">
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
</tr>
<tr>
<td>email</td>
<td>String</td>
<td>账号邮箱,可直接用于登录</td>
</tr>
<tr>
<td>password</td>
<td>String</td>
<td>账号密码,可直接用于登录</td>
</tr>
<tr>
<td>access_token</td>
<td>String</td>
<td>访问令牌用于API认证可直接用于开源换号器</td>
</tr>
<tr>
<td>refresh_token</td>
<td>String</td>
<td>刷新令牌用于更新access_token</td>
</tr>
<tr>
<td>machine_id</td>
<td>String</td>
<td>机器ID用于设备识别</td>
</tr>
<tr>
<td>user_agent</td>
<td>String</td>
<td>用户代理,建议在请求时保持一致</td>
</tr>
<tr>
<td>remaining_balance</td>
<td>String</td>
<td>账号剩余额度</td>
</tr>
</table>
<h4>使用建议</h4>
<div style="margin-top: 1rem;">
<h5>方式一:直接登录</h5>
<p>使用返回的email和password可直接在Cursor客户端登录无需额外配置。</p>
<h5>方式二:使用听泉开源换号助手</h5>
<div style="background: #f8f9fa; padding: 1rem; border-radius: 0.5rem; margin: 1rem 0;">
<p><i class="fas fa-info-circle"></i> 推荐使用方式:</p>
<ol style="margin-left: 1.5rem; margin-top: 0.5rem;">
<li>下载我们的开源换号助手:<a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank" style="color: #007bff;">GitHub下载地址</a></li>
<li>运行程序后,只需输入您购买的身份标识(identity_key)</li>
<li>程序会自动完成账号获取、登录和切换,无需其他配置</li>
</ol>
<p style="margin-top: 0.5rem;"><i class="fas fa-check-circle" style="color: #28a745;"></i> 一次配置,永久使用,自动管理所有账号相关操作</p>
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dee2e6;">
<p><i class="fas fa-terminal"></i> 快速开始:</p>
<div class="code-block" style="background: #f8f9fa; color: #333;">
# Windows用户以管理员身份运行
python tingquan_cursor_pro.py
# Linux/macOS用户
sudo python tingquan_cursor_pro.py</div>
</div>
</div>
<h5>方式三:自定义开发</h5>
<p>可以使用完整的返回参数进行自定义开发,支持更复杂的场景:</p>
<ul style="list-style-type: disc; margin-left: 2rem;">
<li>使用access_token和refresh_token实现自动更新认证</li>
<li>通过machine_id和user_agent确保设备一致性</li>
<li>利用remaining_balance实现额度管理</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<h3>听泉科技</h3>
<p>专注于智能软件解决方案</p>
</div>
<div class="footer-col">
<h3>快速链接</h3>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="products.html">产品</a></li>
<li><a href="pricing.html">价格</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="api-docs.html">API文档</a></li>
</ul>
</div>
<div class="footer-col">
<h3>联系我们</h3>
<p><i class="fas fa-envelope"></i> maticarmy@gmail.com</p>
<div class="social-links">
<a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
<a href="javascript:void(0)" onclick="showWechatModal()" title="微信"><i class="fab fa-weixin"></i></a>
</div>
</div>
</div>
<div class="copyright">
<p>&copy; 2024 听泉科技. 保留所有权利.</p>
</div>
</div>
</footer>
<!-- 微信弹窗 -->
<div id="wechatModal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
<div style="position: relative; background: white; max-width: 400px; margin: 100px auto; padding: 2rem; border-radius: 1rem; text-align: center;">
<span onclick="closeWechatModal()" style="position: absolute; right: 1rem; top: 1rem; cursor: pointer; font-size: 1.5rem;">&times;</span>
<img src="img/wechat_qr.png" alt="微信二维码" style="width: 200px; border-radius: 0.5rem;">
<p style="margin-top: 1rem; font-weight: bold;">
<i class="fab fa-weixin"></i> 微信号behikcigar
</p>
</div>
</div>
<script src="js/main.js"></script>
<script>
// 微信弹窗功能
function showWechatModal() {
document.getElementById('wechatModal').style.display = 'block';
document.body.style.overflow = 'hidden';
}
function closeWechatModal() {
document.getElementById('wechatModal').style.display = 'none';
document.body.style.overflow = 'auto';
}
// 点击空白处关闭弹窗
document.getElementById('wechatModal').addEventListener('click', function(e) {
if (e.target === this) {
closeWechatModal();
}
});
</script>
</body>
</html>

View File

@@ -7,64 +7,55 @@
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.contact {
.contact-section {
padding: 160px 0 80px;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
gap: 3rem;
margin-top: 2rem;
}
.contact-info {
padding: 2rem;
}
.contact-info h2 {
margin-bottom: 2rem;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.contact-info-item i {
color: var(--primary-color);
font-size: 1.5rem;
margin-top: 0.25rem;
}
.contact-form {
.contact-card {
background: white;
padding: 3rem;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.form-group {
.contact-info {
margin-bottom: 2rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 0.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-color);
font-weight: 500;
.contact-item i {
font-size: 1.5rem;
color: var(--primary-color);
}
.form-group input,
.form-group textarea {
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border-color);
margin-bottom: 1rem;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
font-size: 1rem;
transition: border-color 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.form-group textarea {
.contact-form textarea {
height: 150px;
resize: vertical;
}
.contact-form button {
width: 100%;
padding: 1rem;
font-size: 1.1rem;
}
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr;
@@ -86,6 +77,7 @@
<li><a href="products.html">产品</a></li>
<li><a href="pricing.html">价格</a></li>
<li><a href="contact.html" class="active">联系我们</a></li>
<li><a href="api-docs.html">API文档</a></li>
</ul>
</nav>
<button class="menu-button">
@@ -94,62 +86,68 @@
</div>
</header>
<section class="contact">
<section class="contact-section">
<div class="container">
<h1>联系我们</h1>
<p>如果您有任何问题或需求,欢迎随时联系我们</p>
<div class="contact-grid">
<div class="contact-info">
<h2>联系方式</h2>
<div class="contact-info-item">
<i class="fas fa-envelope"></i>
<div>
<h3>电子邮件</h3>
<p>contact@tingquan.tech</p>
<div class="contact-card">
<div class="contact-info">
<h3>联系方式</h3>
<div class="contact-item">
<i class="fab fa-weixin"></i>
<div>
<h4>微信咨询</h4>
<p>微信号behikcigar</p>
<a href="javascript:void(0)" onclick="showWechatModal()" class="btn btn-sm btn-primary" style="margin-top: 0.5rem;">
查看二维码
</a>
</div>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<div>
<h4>邮件联系</h4>
<p>maticarmy@gmail.com</p>
</div>
</div>
<div class="contact-item">
<i class="fab fa-github"></i>
<div>
<h4>开源项目</h4>
<p>GitHub<a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank">free_cursor_pro</a></p>
</div>
</div>
</div>
<div class="contact-info-item">
<i class="fab fa-weixin"></i>
<div>
<h3>微信公众号</h3>
<p>tingquantech</p>
</div>
</div>
<div class="contact-info-item">
<i class="fab fa-github"></i>
<div>
<h3>GitHub</h3>
<p><a href="https://github.com/yourusername/cursor-account-switcher" target="_blank">查看我们的开源项目</a></p>
</div>
</div>
<div class="contact-info-item">
<i class="fas fa-clock"></i>
<div>
<h3>工作时间</h3>
<p>周一至周五: 9:00 - 18:00</p>
<p>周末: 10:00 - 16:00</p>
</div>
<div style="margin-top: 2rem;">
<h3>代理合作</h3>
<p>我们诚邀代理合作伙伴,提供:</p>
<ul style="list-style-type: none; margin-top: 1rem;">
<li><i class="fas fa-check"></i> 优惠的代理价格</li>
<li><i class="fas fa-check"></i> 专业的技术支持</li>
<li><i class="fas fa-check"></i> 完善的售后服务</li>
<li><i class="fas fa-check"></i> 稳定的产品质量</li>
</ul>
</div>
</div>
<div class="contact-form">
<h2>发送消息</h2>
<form id="contactForm">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">电子邮件</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="subject">主题</label>
<input type="text" id="subject" name="subject" required>
</div>
<div class="form-group">
<label for="message">消息内容</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit" class="btn btn-primary">发送消息</button>
<div class="contact-card">
<h3>在线咨询</h3>
<form class="contact-form" id="contactForm">
<input type="text" placeholder="您的称呼" required>
<input type="text" placeholder="联系方式(微信/手机/邮箱)" required>
<select style="width: 100%; padding: 0.75rem; margin-bottom: 1rem; border: 1px solid #dee2e6; border-radius: 0.5rem; font-size: 1rem;">
<option value="">请选择咨询类型</option>
<option value="product">产品咨询</option>
<option value="price">价格咨询</option>
<option value="agent">代理合作</option>
<option value="tech">技术支持</option>
<option value="other">其他问题</option>
</select>
<textarea placeholder="请详细描述您的需求..." required></textarea>
<button type="submit" class="btn btn-primary">提交咨询</button>
</form>
</div>
</div>
@@ -171,31 +169,62 @@
<li><a href="products.html">产品</a></li>
<li><a href="pricing.html">价格</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="api-docs.html">API文档</a></li>
</ul>
</div>
<div class="footer-col">
<h3>联系我们</h3>
<p><i class="fas fa-envelope"></i> contact@tingquan.tech</p>
<p><i class="fas fa-envelope"></i> maticarmy@gmail.com</p>
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
<a href="javascript:void(0)" onclick="showWechatModal()" title="微信"><i class="fab fa-weixin"></i></a>
</div>
</div>
</div>
<div class="copyright">
<p>&copy; 2023 听泉科技. 保留所有权利.</p>
<p>&copy; 2024 听泉科技. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<!-- 微信弹窗 -->
<div id="wechatModal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
<div style="position: relative; background: white; max-width: 400px; margin: 100px auto; padding: 2rem; border-radius: 1rem; text-align: center;">
<span onclick="closeWechatModal()" style="position: absolute; right: 1rem; top: 1rem; cursor: pointer; font-size: 1.5rem;">&times;</span>
<img src="img/wechat_qr.png" alt="微信二维码" style="width: 200px; border-radius: 0.5rem;">
<p style="margin-top: 1rem; font-weight: bold;">
<i class="fab fa-weixin"></i> 微信号behikcigar
</p>
</div>
</div>
<script>
// 微信弹窗功能
function showWechatModal() {
document.getElementById('wechatModal').style.display = 'block';
document.body.style.overflow = 'hidden';
}
function closeWechatModal() {
document.getElementById('wechatModal').style.display = 'none';
document.body.style.overflow = 'auto';
}
// 点击空白处关闭弹窗
document.getElementById('wechatModal').addEventListener('click', function(e) {
if (e.target === this) {
closeWechatModal();
}
});
// 表单提交处理
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('感谢您的留言!我们会尽快回复您。');
alert('感谢您的咨询,我们会尽快与您联系!');
this.reset();
});
</script>
<script src="js/main.js"></script>
</body>
</html>

View File

@@ -1,12 +1,23 @@
/* 全局样式 */
:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
--text-color: #1f2937;
--light-text: #6b7280;
--background: #ffffff;
--light-background: #f3f4f6;
--border-color: #e5e7eb;
--primary-color: #4F46E5;
--primary-dark: #3730A3;
--primary-light: #818CF8;
--secondary-color: #06B6D4;
--accent-color: #10B981;
--text-color: #1F2937;
--light-text: #6B7280;
--background: #F8FAFC;
--dark-background: #1E293B;
--card-background: rgba(255, 255, 255, 0.9);
--glass-background: rgba(255, 255, 255, 0.7);
--border-color: rgba(255, 255, 255, 0.2);
--gradient-1: linear-gradient(135deg, #4F46E5, #06B6D4);
--gradient-2: linear-gradient(135deg, #3730A3, #0EA5E9);
--shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
}
* {
@@ -19,23 +30,28 @@ body {
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: var(--text-color);
line-height: 1.6;
background: var(--background);
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
}
/* 导航栏样式更新 */
/* 导航栏样式 */
header {
background: var(--background);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
background: var(--glass-background);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: all 0.3s ease;
border-bottom: 1px solid var(--border-color);
}
header .container {
@@ -43,7 +59,6 @@ header .container {
justify-content: space-between;
align-items: center;
height: 80px;
padding: 0 2rem;
}
.logo {
@@ -53,18 +68,35 @@ header .container {
.logo h1 {
font-size: 1.8rem;
background: linear-gradient(45deg, #4F46E5, #2563EB);
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
position: relative;
}
.logo h1::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background: var(--gradient-1);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
.logo h1:hover::after {
transform: scaleX(1);
transform-origin: left;
}
nav ul {
display: flex;
list-style: none;
gap: 2.5rem;
margin: 0;
padding: 0;
}
nav a {
@@ -74,385 +106,377 @@ nav a {
font-size: 1.1rem;
position: relative;
padding: 0.5rem 0;
transition: color 0.3s ease;
transition: all 0.3s ease;
}
nav a:hover, nav a.active {
color: var(--primary-color);
}
nav a::after {
nav a::before {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--primary-color);
transition: width 0.3s ease;
}
nav a:hover::after, nav a.active::after {
width: 100%;
}
/* 移动端菜单按钮样式 */
.menu-button {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
position: relative;
z-index: 1001;
width: 40px;
height: 40px;
}
.menu-button .menu-icon {
display: block;
width: 24px;
height: 2px;
background: var(--primary-color);
position: relative;
transition: all 0.3s ease;
background: var(--gradient-1);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
.menu-button .menu-icon::before,
.menu-button .menu-icon::after {
nav a:hover::before,
nav a.active::before {
transform: scaleX(1);
transform-origin: left;
}
nav a:hover,
nav a.active {
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 英雄区样式 */
.hero {
padding: 180px 0 100px;
background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 24px;
height: 2px;
background: var(--primary-color);
transition: all 0.3s ease;
}
.menu-button .menu-icon::before {
top: -8px;
}
.menu-button .menu-icon::after {
bottom: -8px;
}
.menu-button.active .menu-icon {
background: transparent;
}
.menu-button.active .menu-icon::before {
top: 0;
transform: rotate(45deg);
}
.menu-button.active .menu-icon::after {
bottom: 0;
transform: rotate(-45deg);
}
/* 蒙层样式 */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 998;
background: url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="%234F46E5" opacity="0.1"/></svg>') repeat;
animation: moveBackground 20s linear infinite;
}
.overlay.active {
display: block;
opacity: 1;
@keyframes moveBackground {
from {
transform: translateX(0) translateY(0);
}
to {
transform: translateX(-100px) translateY(-100px);
}
}
@media (max-width: 768px) {
.menu-button {
display: flex;
align-items: center;
justify-content: center;
.hero-content {
position: relative;
z-index: 1;
text-align: center;
}
.hero-content h1 {
font-size: 4rem;
margin-bottom: 1.5rem;
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: fadeInUp 1s ease;
}
.hero-content p {
font-size: 1.5rem;
color: var(--light-text);
margin-bottom: 2.5rem;
animation: fadeInUp 1s ease 0.2s backwards;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
animation: fadeInUp 1s ease 0.4s backwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
nav {
position: fixed;
top: 0;
right: 0;
width: 80%;
max-width: 300px;
height: 100vh;
background: white;
padding: 100px 2rem 2rem;
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 999;
box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}
nav.active {
transform: translateX(0);
}
nav ul {
flex-direction: column;
gap: 1.5rem;
}
nav a {
display: block;
font-size: 1.2rem;
padding: 0.75rem 0;
}
nav a::after {
display: none;
}
nav a:hover, nav a.active {
color: var(--primary-color);
padding-left: 1rem;
}
/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
nav {
background: white;
}
nav a {
color: var(--text-color);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 2rem;
border-radius: 0.75rem;
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.btn:hover::before {
transform: translateX(0);
}
.btn-primary {
background: var(--primary-color);
background: var(--gradient-1);
color: white;
box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}
.btn-primary:hover {
background: var(--secondary-color);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}
.btn-secondary {
background: white;
background: var(--glass-background);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--primary-color);
border: 2px solid var(--primary-color);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
background: var(--primary-color);
color: white;
}
.btn-large {
padding: 1rem 2rem;
font-size: 1.1rem;
}
.btn-outline {
border: 2px solid var(--border-color);
color: var(--text-color);
}
.btn-outline:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
/* 英雄区样式 */
.hero {
padding: 160px 0 80px;
background: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
text-align: center;
}
.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
color: var(--text-color);
}
.hero-content p {
font-size: 1.25rem;
color: var(--light-text);
margin-bottom: 2rem;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
transform: translateY(-2px);
}
/* 产品卡片样式 */
.products {
padding: 100px 0;
background: var(--background);
position: relative;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
}
.products {
padding: 80px 0;
background: var(--background);
margin-bottom: 4rem;
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
padding: 1rem;
}
.product-card {
background: white;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s;
background: var(--glass-background);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
border-radius: 1.5rem;
padding: 2.5rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-1);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
}
.product-card:hover {
transform: translateY(-5px);
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.product-card:hover::before {
opacity: 0.05;
}
.product-icon {
width: 64px;
height: 64px;
background: var(--primary-color);
width: 80px;
height: 80px;
background: var(--gradient-1);
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.product-icon i {
font-size: 2rem;
font-size: 2.5rem;
color: white;
}
.product-card h3 {
font-size: 1.5rem;
font-size: 1.8rem;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.product-features {
list-style: none;
margin: 1.5rem 0;
position: relative;
z-index: 1;
}
.product-features li {
margin-bottom: 0.5rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
gap: 0.75rem;
}
.product-features i {
color: var(--primary-color);
font-size: 1.2rem;
}
.product-cta {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
margin-top: 2rem;
position: relative;
z-index: 1;
}
/* 特性区域样式 */
.features {
padding: 80px 0;
background: var(--light-background);
padding: 100px 0;
background: linear-gradient(135deg, rgba(79, 70, 229, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
position: relative;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 3rem;
}
.feature-card {
background: var(--glass-background);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
border-radius: 1.5rem;
padding: 2.5rem;
text-align: center;
padding: 2rem;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.feature-icon {
width: 80px;
height: 80px;
background: white;
background: var(--gradient-1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin: 0 auto 2rem;
}
.feature-icon i {
font-size: 2rem;
color: var(--primary-color);
font-size: 2.5rem;
color: white;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text-color);
}
/* CTA区域样式 */
.cta {
padding: 80px 0;
background: var(--primary-color);
padding: 100px 0;
background: var(--gradient-1);
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></svg>') repeat;
animation: moveBackground 20s linear infinite;
}
.cta h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
font-size: 3rem;
margin-bottom: 1.5rem;
position: relative;
}
.cta p {
font-size: 1.25rem;
margin-bottom: 2rem;
margin-bottom: 2.5rem;
opacity: 0.9;
position: relative;
}
.cta .btn-large {
background: white;
color: var(--primary-color);
}
.cta .btn-large:hover {
background: var(--light-background);
padding: 1rem 3rem;
font-size: 1.2rem;
position: relative;
}
/* 页脚样式 */
footer {
background: var(--light-background);
padding: 80px 0 40px;
background: var(--dark-background);
padding: 100px 0 40px;
color: white;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 4rem;
margin-bottom: 4rem;
}
.footer-col h3 {
color: white;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
.footer-col ul {
@@ -460,47 +484,47 @@ footer {
}
.footer-col ul li {
margin-bottom: 0.75rem;
margin-bottom: 1rem;
}
.footer-col a {
text-decoration: none;
color: var(--light-text);
color: rgba(255, 255, 255, 0.7);
transition: color 0.3s;
}
.footer-col a:hover {
color: var(--primary-color);
color: white;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
margin-top: 1.5rem;
}
.social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
color: white;
transition: all 0.3s;
}
.social-links a:hover {
background: var(--primary-color);
color: white;
transform: translateY(-3px);
}
.copyright {
text-align: center;
color: var(--light-text);
color: rgba(255, 255, 255, 0.5);
padding-top: 2rem;
border-top: 1px solid var(--border-color);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* 响应式设计 */
@@ -513,12 +537,9 @@ footer {
font-size: 2rem;
}
.product-grid, .features-grid {
grid-template-columns: 1fr;
}
.hero-buttons {
flex-direction: column;
align-items: stretch;
}
.product-cta {
@@ -533,4 +554,64 @@ footer {
.social-links {
justify-content: center;
}
nav {
position: fixed;
top: 0;
right: 0;
width: 80%;
max-width: 300px;
height: 100vh;
background: var(--glass-background);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 100px 2rem 2rem;
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 999;
border-left: 1px solid var(--border-color);
}
nav.active {
transform: translateX(0);
}
nav ul {
flex-direction: column;
gap: 2rem;
}
nav a {
font-size: 1.2rem;
display: block;
}
.menu-button {
display: flex;
}
}
/* 动画效果 */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
}
}

BIN
img/wechat_qr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 401 KiB

View File

@@ -36,8 +36,14 @@
<h1>智能软件解决方案</h1>
<p>提升您的生产力和开发效率</p>
<div class="hero-buttons">
<a href="products.html" class="btn btn-primary">了解更多</a>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-secondary">前往购买 <i class="fab fa-shopify"></i></a>
<a href="products.html" class="btn btn-primary">
<i class="fas fa-rocket"></i>
了解更多
</a>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-secondary">
<i class="fas fa-shopping-cart"></i>
前往购买
</a>
</div>
</div>
</div>
@@ -48,17 +54,17 @@
<div class="container">
<h2 class="section-title">我们的产品</h2>
<div class="product-grid">
<!-- 听泉助手 -->
<!-- 听泉Cursor助手 -->
<div class="product-card">
<div class="product-icon">
<i class="fas fa-robot"></i>
<i class="fas fa-bolt"></i>
</div>
<h3>听泉助手</h3>
<p>智能化软件助手,提升您的日常工作效率</p>
<h3>听泉Cursor助手</h3>
<p>专业的Cursor账号解决方案每次刷新即获150次Fast对话额度正版授权品质保证</p>
<ul class="product-features">
<li><i class="fas fa-check"></i> 智能文本处理</li>
<li><i class="fas fa-check"></i> 自动化任务执行</li>
<li><i class="fas fa-check"></i> 多平台支持</li>
<li><i class="fas fa-check-circle"></i> 每次刷新获得150次Fast额度理论无限使用</li>
<li><i class="fas fa-check-circle"></i> 正版授权,稳定可靠</li>
<li><i class="fas fa-check-circle"></i> 多平台完美兼容支持</li>
</ul>
<div class="product-cta">
<a href="products.html#tingquan-assistant" class="btn btn-outline">了解详情</a>
@@ -74,9 +80,9 @@
<h3>Cursor账号池API</h3>
<p>高质量Cursor账号池接口为开发团队提供便捷的账号切换服务</p>
<ul class="product-features">
<li><i class="fas fa-check"></i> 开源账号切换工具</li>
<li><i class="fas fa-check"></i> 免费每日使用额度</li>
<li><i class="fas fa-check"></i> 专业API接口</li>
<li><i class="fas fa-check-circle"></i> 开源账号切换工具</li>
<li><i class="fas fa-check-circle"></i> 免费每日使用额度</li>
<li><i class="fas fa-check-circle"></i> 专业API接口</li>
</ul>
<div class="product-cta">
<a href="products.html#cursor-api" class="btn btn-outline">了解详情</a>
@@ -122,7 +128,10 @@
<div class="container">
<h2>立即开始提升您的效率</h2>
<p>选择听泉科技,让您的工作更智能、更高效</p>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-large">前往淘宝店铺 <i class="fab fa-shopify"></i></a>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-large">
<i class="fas fa-shopping-cart"></i>
前往淘宝店铺
</a>
</div>
</section>
@@ -141,24 +150,54 @@
<li><a href="products.html">产品</a></li>
<li><a href="pricing.html">价格</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="api-docs.html">API文档</a></li>
</ul>
</div>
<div class="footer-col">
<h3>联系我们</h3>
<p><i class="fas fa-envelope"></i> contact@tingquan.tech</p>
<p><i class="fas fa-envelope"></i> maticarmy@gmail.com</p>
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
<a href="javascript:void(0)" onclick="showWechatModal()" title="微信"><i class="fab fa-weixin"></i></a>
</div>
</div>
</div>
<div class="copyright">
<p>&copy; 2023 听泉科技. 保留所有权利.</p>
<p>&copy; 2024 听泉科技. 保留所有权利.</p>
</div>
</div>
</footer>
<!-- 微信弹窗 -->
<div id="wechatModal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
<div style="position: relative; background: white; max-width: 400px; margin: 100px auto; padding: 2rem; border-radius: 1rem; text-align: center;">
<span onclick="closeWechatModal()" style="position: absolute; right: 1rem; top: 1rem; cursor: pointer; font-size: 1.5rem;">&times;</span>
<img src="img/wechat_qr.png" alt="微信二维码" style="width: 200px; border-radius: 0.5rem;">
<p style="margin-top: 1rem; font-weight: bold;">
<i class="fab fa-weixin"></i> 微信号behikcigar
</p>
</div>
</div>
<script src="js/main.js"></script>
<script>
// 微信弹窗功能
function showWechatModal() {
document.getElementById('wechatModal').style.display = 'block';
document.body.style.overflow = 'hidden';
}
function closeWechatModal() {
document.getElementById('wechatModal').style.display = 'none';
document.body.style.overflow = 'auto';
}
// 点击空白处关闭弹窗
document.getElementById('wechatModal').addEventListener('click', function(e) {
if (e.target === this) {
closeWechatModal();
}
});
</script>
</body>
</html>

View File

@@ -7,109 +7,176 @@
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.pricing {
.pricing-section {
padding: 160px 0 80px;
}
.pricing-header {
text-align: center;
margin-bottom: 4rem;
}
.pricing-header h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.pricing-header p {
color: var(--light-text);
font-size: 1.2rem;
}
.product-section {
margin-bottom: 6rem;
}
.product-section:last-child {
margin-bottom: 0;
}
.product-section h2 {
text-align: center;
margin-bottom: 3rem;
font-size: 2rem;
color: var(--primary-color);
}
.price-comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.price-card {
background: white;
border-radius: 1rem;
padding: 2rem;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s;
position: relative;
overflow: hidden;
}
.price-card:hover {
transform: translateY(-5px);
.pricing-tabs {
display: flex;
justify-content: center;
gap: 2rem;
margin: 3rem 0;
}
.pricing-tab {
padding: 1rem 2rem;
border: 1px solid var(--border-color);
border-radius: 0.75rem;
cursor: pointer;
background: var(--glass-background);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.3s ease;
font-weight: 500;
}
.pricing-tab.active {
background: var(--gradient-1);
color: white;
border-color: transparent;
}
.pricing-tab:hover:not(.active) {
border-color: var(--primary-color);
transform: translateY(-2px);
}
.pricing-content {
display: none;
}
.pricing-content.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.pricing-card {
background: var(--glass-background);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
border-radius: 1.5rem;
padding: 3rem 2rem;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-1);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
}
.pricing-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.pricing-card:hover::before {
opacity: 0.05;
}
.pricing-card.popular {
border: 2px solid transparent;
background-image: linear-gradient(var(--glass-background), var(--glass-background)), var(--gradient-1);
background-origin: border-box;
background-clip: padding-box, border-box;
position: relative;
}
.popular-tag {
position: absolute;
top: 1rem;
right: -2rem;
background: var(--primary-color);
right: 1rem;
background: var(--gradient-1);
color: white;
padding: 0.5rem 3rem;
transform: rotate(45deg);
font-size: 0.9rem;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.875rem;
font-weight: 500;
}
.price-card h3 {
font-size: 1.5rem;
.pricing-card h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: var(--text-color);
position: relative;
z-index: 1;
}
.price-amount {
.pricing-card .price {
font-size: 3rem;
font-weight: bold;
color: var(--primary-color);
margin-bottom: 2rem;
margin: 1.5rem 0;
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 1;
}
.price-period {
.pricing-card .price small {
font-size: 1rem;
color: var(--light-text);
font-weight: normal;
}
.price-features {
.pricing-card ul {
list-style: none;
margin: 2rem 0;
padding: 0;
text-align: left;
}
.price-features li {
margin-bottom: 1rem;
padding-left: 1.5rem;
position: relative;
z-index: 1;
}
.price-features li:before {
content: "✓";
.pricing-card ul li {
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.pricing-card ul li i {
color: var(--primary-color);
position: absolute;
left: 0;
font-size: 1.2rem;
}
.price-cta {
margin-top: 2rem;
.pricing-card .btn {
width: 100%;
justify-content: center;
position: relative;
z-index: 1;
}
.price-note {
.pricing-note {
text-align: center;
margin-top: 2rem;
color: var(--light-text);
font-size: 0.9rem;
margin-top: 4rem;
padding: 2rem;
background: var(--glass-background);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
border-radius: 1.5rem;
}
.pricing-note h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 768px) {
.pricing {
padding: 120px 0 60px;
.pricing-tabs {
flex-direction: column;
align-items: stretch;
}
.price-comparison {
grid-template-columns: 1fr;
.pricing-tab {
text-align: center;
}
}
</style>
@@ -136,122 +203,155 @@
</div>
</header>
<section class="pricing">
<section class="pricing-section">
<div class="container">
<div class="pricing-header">
<h1>选择适合您的方案</h1>
<p>我们提供灵活的价格方案,满足不同用户的需求</p>
<h2 class="section-title">价格方案</h2>
<div class="pricing-tabs">
<div class="pricing-tab active" data-target="tingquan">听泉助手</div>
<div class="pricing-tab" data-target="cursor">Cursor账号池API</div>
</div>
<!-- 听泉助手价格 -->
<div class="product-section">
<h2>听泉助手</h2>
<div class="price-comparison">
<div class="price-card">
<div class="pricing-content active" id="tingquan">
<div class="pricing-grid">
<div class="pricing-card">
<h3>天卡</h3>
<div class="price-amount">¥9.9<span class="price-period">/天</span></div>
<ul class="price-features">
<li>24小时无限使用</li>
<li>所有功能解锁</li>
<li>基础技术支持</li>
<li>适合短期体验</li>
<div class="price">¥2.9<small>/天</small></div>
<ul>
<li><i class="fas fa-check-circle"></i> 24小时无限使用</li>
<li><i class="fas fa-check-circle"></i> 全球动态IP支持</li>
<li><i class="fas fa-check-circle"></i> 基础技术支持</li>
<li><i class="fas fa-check-circle"></i> 适合短期体验</li>
</ul>
<div class="price-cta">
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
<div class="price-card">
<div class="pricing-card popular">
<div class="popular-tag">最受欢迎</div>
<h3>周卡</h3>
<div class="price-amount">¥39.9<span class="price-period">/周</span></div>
<ul class="price-features">
<li>7天无限使用</li>
<li>所有功能解锁</li>
<li>标准技术支持</li>
<li>每天仅需¥5.7</li>
<li>比天卡节省20%</li>
<div class="price">¥12.9<small>/周</small></div>
<ul>
<li><i class="fas fa-check-circle"></i> 7天无限使用</li>
<li><i class="fas fa-check-circle"></i> 全球动态IP支持</li>
<li><i class="fas fa-check-circle"></i> 优先技术支持</li>
<li><i class="fas fa-check-circle"></i> 每天仅需¥1.8</li>
<li><i class="fas fa-check-circle"></i> 适合项目开发</li>
</ul>
<div class="price-cta">
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
<div class="price-card">
<div class="pricing-card">
<h3>月卡</h3>
<div class="price-amount">¥99.9<span class="price-period">/月</span></div>
<ul class="price-features">
<li>30天无限使用</li>
<li>所有功能解锁</li>
<li>优先技术支持</li>
<li>每天仅需¥3.3</li>
<li>比天卡节省40%</li>
<li>赠送定制功能</li>
<div class="price">¥42.8<small>/月</small></div>
<ul>
<li><i class="fas fa-check-circle"></i> 30天无限使用</li>
<li><i class="fas fa-check-circle"></i> 全球动态IP支持</li>
<li><i class="fas fa-check-circle"></i> 24小时技术支持</li>
<li><i class="fas fa-check-circle"></i> 每天仅需¥1.4</li>
<li><i class="fas fa-check-circle"></i> 适合长期使用</li>
</ul>
<div class="price-cta">
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
</div>
</div>
<!-- Cursor账号池API价格 -->
<div class="product-section">
<h2>Cursor账号池API</h2>
<div class="price-comparison">
<div class="price-card">
<div class="pricing-content" id="cursor">
<div class="pricing-grid">
<div class="pricing-card">
<h3>免费版</h3>
<div class="price">免费</div>
<ul>
<li><i class="fas fa-check-circle"></i> 每日免费使用1次</li>
<li><i class="fas fa-check-circle"></i> 需运行我们的开源项目</li>
<li><i class="fas fa-check-circle"></i> 社区技术支持</li>
<li><i class="fas fa-check-circle"></i> 适合个人学习使用</li>
</ul>
<a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank" class="btn btn-primary">
<i class="fab fa-github"></i> 开始使用
</a>
</div>
<div class="pricing-card">
<h3>体验版</h3>
<div class="price">¥10</div>
<ul>
<li><i class="fas fa-check-circle"></i> 10元测试额度</li>
<li><i class="fas fa-check-circle"></i> 等同于10次使用额度</li>
<li><i class="fas fa-check-circle"></i> 基础技术支持</li>
<li><i class="fas fa-check-circle"></i> 适合功能体验</li>
</ul>
<a href="javascript:void(0)" onclick="showWechatModal()" class="btn btn-primary">联系开通</a>
</div>
<div class="pricing-card">
<h3>基础版</h3>
<div class="price-amount">免费<span class="price-period">/永久</span></div>
<ul class="price-features">
<li>每天1次免费使用</li>
<li>基础功能支持</li>
<li>社区支持</li>
<li>开源代码访问</li>
<li>适合个人用户</li>
<div class="price">¥100</div>
<ul>
<li><i class="fas fa-check-circle"></i> 100次使用额度</li>
<li><i class="fas fa-check-circle"></i> 单价1.00元/次</li>
<li><i class="fas fa-check-circle"></i> 基础技术支持</li>
<li><i class="fas fa-check-circle"></i> 适合个人开发者</li>
</ul>
<div class="price-cta">
<a href="https://github.com/yourusername/cursor-account-switcher" target="_blank" class="btn btn-primary">开始使用</a>
</div>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
<div class="price-card">
<div class="popular-tag">最受欢迎</div>
<h3>开发者版</h3>
<div class="price-amount">¥299<span class="price-period">/月</span></div>
<ul class="price-features">
<li>无限次数使用</li>
<li>专业API接口</li>
<li>技术支持</li>
<li>SLA保障</li>
<li>API调用统计</li>
<li>适合开发团队</li>
<div class="pricing-card">
<h3>进阶版</h3>
<div class="price">¥800</div>
<ul>
<li><i class="fas fa-check-circle"></i> 1000次使用额度</li>
<li><i class="fas fa-check-circle"></i> 单价0.80元/次</li>
<li><i class="fas fa-check-circle"></i> 8折优惠</li>
<li><i class="fas fa-check-circle"></i> 技术支持</li>
<li><i class="fas fa-check-circle"></i> 适合小型团队</li>
</ul>
<div class="price-cta">
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
<div class="price-card">
<div class="pricing-card">
<h3>专业版</h3>
<div class="price">¥3500</div>
<ul>
<li><i class="fas fa-check-circle"></i> 5000次使用额度</li>
<li><i class="fas fa-check-circle"></i> 单价0.70元/次</li>
<li><i class="fas fa-check-circle"></i> 7折优惠</li>
<li><i class="fas fa-check-circle"></i> 优先技术支持</li>
<li><i class="fas fa-check-circle"></i> 适合中型团队</li>
</ul>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
<div class="pricing-card popular">
<div class="popular-tag">性价比最高</div>
<h3>企业版</h3>
<div class="price-amount">定制<span class="price-period">/年付</span></div>
<ul class="price-features">
<li>无限次数使用</li>
<li>专属API接口</li>
<li>7*24小时支持</li>
<li>定制开发服务</li>
<li>专属技术顾问</li>
<li>企业级SLA保障</li>
<div class="price">¥6000</div>
<ul>
<li><i class="fas fa-check-circle"></i> 10000次使用额度</li>
<li><i class="fas fa-check-circle"></i> 单价0.60元/次</li>
<li><i class="fas fa-check-circle"></i> 6折优惠</li>
<li><i class="fas fa-check-circle"></i> 7*24小时技术支持</li>
<li><i class="fas fa-check-circle"></i> 适合大型企业</li>
</ul>
<div class="price-cta">
<a href="contact.html" class="btn btn-primary">联系我们</a>
</div>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
</div>
<div class="price-note">
<p>* 所有价格方案均支持随时升级或降级</p>
<p>* 企业版可提供定制化解决方案,请联系我们获取详细信息</p>
<div style="margin-top: 2rem; padding: 1.5rem; background: rgba(79, 70, 229, 0.1); border-radius: 1rem;">
<h3 style="color: #4F46E5;">开始使用</h3>
<div style="margin-top: 1rem; line-height: 1.6;">
<p><i class="fas fa-gift"></i> <strong>免费体验:</strong>运行我们的开源项目即可每天免费使用1次适合个人学习使用。</p>
<p><i class="fas fa-rocket"></i> <strong>快速测试:</strong>联系客服开通10元测试额度体验完整功能。</p>
<p><i class="fas fa-crown"></i> <strong>正式使用:</strong>选择适合您的套餐,享受完整的服务支持。</p>
</div>
</div>
</div>
<div class="pricing-note">
<h3>灵活的价格方案</h3>
<p>我们提供多种价格方案以满足不同需求,您可以随时升级或降级您的计划。如果您需要更多定制化的解决方案,请联系我们的销售团队。</p>
</div>
</div>
</section>
@@ -270,24 +370,70 @@
<li><a href="products.html">产品</a></li>
<li><a href="pricing.html">价格</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="api-docs.html">API文档</a></li>
</ul>
</div>
<div class="footer-col">
<h3>联系我们</h3>
<p><i class="fas fa-envelope"></i> contact@tingquan.tech</p>
<p><i class="fas fa-envelope"></i> maticarmy@gmail.com</p>
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
<a href="javascript:void(0)" onclick="showWechatModal()" title="微信"><i class="fab fa-weixin"></i></a>
</div>
</div>
</div>
<div class="copyright">
<p>&copy; 2023 听泉科技. 保留所有权利.</p>
<p>&copy; 2024 听泉科技. 保留所有权利.</p>
</div>
</div>
</footer>
<!-- 微信弹窗 -->
<div id="wechatModal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
<div style="position: relative; background: white; max-width: 400px; margin: 100px auto; padding: 2rem; border-radius: 1rem; text-align: center;">
<span onclick="closeWechatModal()" style="position: absolute; right: 1rem; top: 1rem; cursor: pointer; font-size: 1.5rem;">&times;</span>
<img src="img/wechat_qr.png" alt="微信二维码" style="width: 200px; border-radius: 0.5rem;">
<p style="margin-top: 1rem; font-weight: bold;">
<i class="fab fa-weixin"></i> 微信号behikcigar
</p>
</div>
</div>
<script src="js/main.js"></script>
<script>
// 价格标签切换
const tabs = document.querySelectorAll('.pricing-tab');
const contents = document.querySelectorAll('.pricing-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// 移除所有active类
tabs.forEach(t => t.classList.remove('active'));
contents.forEach(c => c.classList.remove('active'));
// 添加active类到当前选中的标签
tab.classList.add('active');
document.getElementById(tab.dataset.target).classList.add('active');
});
});
// 微信弹窗功能
function showWechatModal() {
document.getElementById('wechatModal').style.display = 'block';
document.body.style.overflow = 'hidden';
}
function closeWechatModal() {
document.getElementById('wechatModal').style.display = 'none';
document.body.style.overflow = 'auto';
}
// 点击空白处关闭弹窗
document.getElementById('wechatModal').addEventListener('click', function(e) {
if (e.target === this) {
closeWechatModal();
}
});
</script>
</body>
</html>

View File

@@ -71,6 +71,7 @@
<li><a href="products.html" class="active">产品</a></li>
<li><a href="pricing.html">价格</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="api-docs.html">API文档</a></li>
</ul>
</nav>
<button class="menu-button">
@@ -85,58 +86,99 @@
<div class="product-detail-card" id="tingquan-assistant">
<div class="product-header">
<div class="product-icon">
<i class="fas fa-robot"></i>
<i class="fas fa-bolt"></i>
</div>
<div>
<h2>听泉助手</h2>
<p>智能化软件助手,提升您的日常工作效率</p>
<h2>听泉Cursor助手</h2>
<p>专业的Cursor账号解决方案每次刷新即获150次Fast对话额度远超同类产品50次限制</p>
</div>
</div>
<div class="product-description">
<h3>产品特点</h3>
<ul class="product-features">
<li><i class="fas fa-check"></i> 智能文本处理,提高工作效率</li>
<li><i class="fas fa-check"></i> 自动化任务执行,节省时间</li>
<li><i class="fas fa-check"></i> 多平台支持,随时随地使用</li>
<li><i class="fas fa-check"></i> 定期更新,持续优化体验</li>
<li><i class="fas fa-check-circle"></i> 每次刷新即获150次Fast对话额度理论无限使用远超其他产品50次限制</li>
<li><i class="fas fa-check-circle"></i> 全球动态IP注册与使用稳定性远超同类产品</li>
<li><i class="fas fa-check-circle"></i> 多平台完美兼容Windows/Mac/Linux全支持</li>
<li><i class="fas fa-check-circle"></i> 独立动态IP注册账号质量有保障</li>
<li><i class="fas fa-check-circle"></i> 一键式操作,真正做到省心省力</li>
<li><i class="fas fa-check-circle"></i> 专业技术支持,快速解决问题</li>
</ul>
<div style="margin-top: 2rem;">
<h3>为什么选择我们</h3>
<ul class="product-features">
<li><i class="fas fa-crown"></i> 每次刷新都能获得150次Fast对话额度不受50次限制</li>
<li><i class="fas fa-exclamation-circle"></i> 告别盗用开源代码二次开发商用的不稳定问题</li>
<li><i class="fas fa-shield-alt"></i> 正版授权的完整解决方案,品质保证</li>
<li><i class="fas fa-globe"></i> 全球IP资源池确保账号质量和使用稳定性</li>
</ul>
</div>
<div style="margin-top: 2rem; padding: 1.5rem; background: rgba(79, 70, 229, 0.1); border-radius: 1rem;">
<h3 style="color: #4F46E5;">重要提示</h3>
<p style="margin-top: 1rem; line-height: 1.6;">市面上存在一些盗用开源代码二次开发商用的产品这些产品往往只能提供50次Fast对话额度且稳定性无法保证。我们提供正版授权的完整解决方案每次刷新都能获得150次Fast完整对话额度配合全球动态IP注册系统真正实现无限畅聊帮助您获得最佳的AI对话体验。</p>
</div>
</div>
<div class="price-cards">
<div class="price-card">
<h3>天卡</h3>
<div class="price">¥9.9</div>
<div class="price">¥2.9</div>
<ul>
<li>24小时无限使用</li>
<li>所有功能解锁</li>
<li>技术支持</li>
<li><i class="fas fa-check-circle"></i> 24小时无限使用</li>
<li><i class="fas fa-check-circle"></i> 全球动态IP支持</li>
<li><i class="fas fa-check-circle"></i> 基础技术支持</li>
</ul>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
<div class="price-card">
<div class="price-card popular">
<div class="popular-tag">最受欢迎</div>
<h3>周卡</h3>
<div class="price">¥39.9</div>
<div class="price">¥12.9</div>
<ul>
<li>7天无限使用</li>
<li>所有功能解锁</li>
<li>技术支持</li>
<li>每天节省20%</li>
<li><i class="fas fa-check-circle"></i> 7天无限使用</li>
<li><i class="fas fa-check-circle"></i> 全球动态IP支持</li>
<li><i class="fas fa-check-circle"></i> 优先技术支持</li>
<li><i class="fas fa-check-circle"></i> 每天仅需¥1.8</li>
</ul>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
<div class="price-card">
<h3>月卡</h3>
<div class="price">¥99.9</div>
<div class="price">¥42.8</div>
<ul>
<li>30天无限使用</li>
<li>所有功能解锁</li>
<li>优先技术支持</li>
<li>每天节省40%</li>
<li><i class="fas fa-check-circle"></i> 30天无限使用</li>
<li><i class="fas fa-check-circle"></i> 全球动态IP支持</li>
<li><i class="fas fa-check-circle"></i> 24小时技术支持</li>
<li><i class="fas fa-check-circle"></i> 每天仅需¥1.4</li>
</ul>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
</div>
<div style="margin-top: 2rem; padding: 1.5rem; background: rgba(79, 70, 229, 0.1); border-radius: 1rem;">
<h3 style="color: #4F46E5;"><i class="fas fa-handshake"></i> 代理合作</h3>
<div style="display: flex; gap: 2rem; align-items: flex-start;">
<div style="flex: 1;">
<p style="margin-top: 1rem; line-height: 1.6;">
诚邀代理合作伙伴,我们提供:
<ul style="list-style-type: none; margin-top: 0.5rem;">
<li><i class="fas fa-check"></i> 优惠的代理价格</li>
<li><i class="fas fa-check"></i> 专业的技术支持</li>
<li><i class="fas fa-check"></i> 完善的售后服务</li>
<li><i class="fas fa-check"></i> 稳定的产品质量</li>
</ul>
</p>
</div>
<div style="text-align: center;">
<img src="img/wechat_qr.png" alt="微信二维码" style="width: 200px; border-radius: 0.5rem;">
<p style="margin-top: 1rem; font-weight: bold;">
<i class="fab fa-weixin"></i> 微信号behikcigar
</p>
</div>
</div>
</div>
</div>
<!-- Cursor账号池API -->
@@ -154,52 +196,92 @@
<div class="product-description">
<h3>产品特点</h3>
<ul class="product-features">
<li><i class="fas fa-check"></i> 开源账号切换工具,可自由定制</li>
<li><i class="fas fa-check"></i> 每日免费使用额度,无需付费也能体验</li>
<li><i class="fas fa-check"></i> 专业API接口稳定可靠</li>
<li><i class="fas fa-check"></i> 适合团队协作和二次开发</li>
<li><i class="fas fa-check-circle"></i> 开源账号切换工具,可自由定制</li>
<li><i class="fas fa-check-circle"></i> 每日免费使用额度,无需付费也能体验</li>
<li><i class="fas fa-check-circle"></i> 专业API接口稳定可靠</li>
<li><i class="fas fa-check-circle"></i> 适合团队协作和二次开发</li>
</ul>
<div style="margin-top: 2rem;">
<h3>开源项目</h3>
<p>我们的账号切换软件已在GitHub开源欢迎查看和贡献代码</p>
<a href="https://github.com/yourusername/cursor-account-switcher" target="_blank" class="btn btn-secondary" style="margin-top: 1rem;">
<i class="fab fa-github"></i> 查看GitHub项目
</a>
<div style="margin-top: 1rem; display: flex; gap: 1rem;">
<a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank" class="btn btn-secondary">
<i class="fab fa-github"></i> 查看GitHub项目
</a>
<a href="api-docs.html" class="btn btn-primary">
<i class="fas fa-book"></i> API文档
</a>
</div>
</div>
<div class="price-cards">
<div class="price-cards" style="margin-top: 3rem;">
<div class="price-card">
<h3>基础版</h3>
<div class="price">免费</div>
<ul>
<li>每天1次免费使用</li>
<li>基础功能支持</li>
<li>社区支持</li>
<li><i class="fas fa-check-circle"></i> 每天1次免费使用</li>
<li><i class="fas fa-check-circle"></i> 基础功能支持</li>
<li><i class="fas fa-check-circle"></i> 社区技术支持</li>
<li><i class="fas fa-check-circle"></i> 需运行开源项目</li>
</ul>
<a href="https://github.com/yourusername/cursor-account-switcher" target="_blank" class="btn btn-primary">开始使用</a>
<a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank" class="btn btn-primary">
<i class="fab fa-github"></i> 开始使用
</a>
</div>
<div class="price-card">
<h3>开发者</h3>
<div class="price">¥299/月</div>
<h3>基础</h3>
<div class="price">¥100</div>
<ul>
<li>无限次数使用</li>
<li>专业API接口</li>
<li>技术支持</li>
<li>SLA保障</li>
<li><i class="fas fa-check-circle"></i> 100次使用额度</li>
<li><i class="fas fa-check-circle"></i> 单价1.00元/次</li>
<li><i class="fas fa-check-circle"></i> 基础技术支持</li>
<li><i class="fas fa-check-circle"></i> 适合个人开发者</li>
</ul>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
<a href="javascript:void(0)" onclick="showWechatModal()" class="btn btn-primary">立即购买</a>
</div>
<div class="price-card">
<h3>进阶版</h3>
<div class="price">¥800</div>
<ul>
<li><i class="fas fa-check-circle"></i> 1000次使用额度</li>
<li><i class="fas fa-check-circle"></i> 单价0.80元/次</li>
<li><i class="fas fa-check-circle"></i> 8折优惠</li>
<li><i class="fas fa-check-circle"></i> 技术支持</li>
</ul>
<a href="javascript:void(0)" onclick="showWechatModal()" class="btn btn-primary">立即购买</a>
</div>
<div class="price-card">
<h3>专业版</h3>
<div class="price">¥3500</div>
<ul>
<li><i class="fas fa-check-circle"></i> 5000次使用额度</li>
<li><i class="fas fa-check-circle"></i> 单价0.70元/次</li>
<li><i class="fas fa-check-circle"></i> 7折优惠</li>
<li><i class="fas fa-check-circle"></i> 优先技术支持</li>
</ul>
<a href="javascript:void(0)" onclick="showWechatModal()" class="btn btn-primary">立即购买</a>
</div>
<div class="price-card popular">
<div class="popular-tag">性价比最高</div>
<h3>企业版</h3>
<div class="price">定制</div>
<div class="price">¥6000</div>
<ul>
<li>无限次数使用</li>
<li>专属API接口</li>
<li>7*24小时支持</li>
<li>定制开发服务</li>
<li><i class="fas fa-check-circle"></i> 10000次使用额度</li>
<li><i class="fas fa-check-circle"></i> 单价0.60元/次</li>
<li><i class="fas fa-check-circle"></i> 6折优惠</li>
<li><i class="fas fa-check-circle"></i> 7*24小时技术支持</li>
</ul>
<a href="contact.html" class="btn btn-primary">联系我们</a>
<a href="javascript:void(0)" onclick="showWechatModal()" class="btn btn-primary">立即购买</a>
</div>
</div>
<div style="margin-top: 2rem; padding: 1.5rem; background: rgba(79, 70, 229, 0.1); border-radius: 1rem;">
<h3 style="color: #4F46E5;">开始使用</h3>
<div style="margin-top: 1rem; line-height: 1.6;">
<p><i class="fas fa-gift"></i> <strong>免费体验:</strong>运行我们的开源项目即可每天免费使用1次适合个人学习使用。</p>
<p><i class="fas fa-rocket"></i> <strong>快速测试:</strong>联系客服开通10元测试额度体验完整功能等同于10次使用额度</p>
<p><i class="fas fa-crown"></i> <strong>批量购买:</strong>购买次数越多单次价格越优惠最高可享6折优惠。</p>
</div>
</div>
</div>
@@ -226,20 +308,50 @@
</div>
<div class="footer-col">
<h3>联系我们</h3>
<p><i class="fas fa-envelope"></i> contact@tingquan.tech</p>
<p><i class="fas fa-envelope"></i> maticarmy@gmail.com</p>
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
<a href="javascript:void(0)" onclick="showWechatModal()" title="微信"><i class="fab fa-weixin"></i></a>
</div>
</div>
</div>
<div class="copyright">
<p>&copy; 2023 听泉科技. 保留所有权利.</p>
<p>&copy; 2024 听泉科技. 保留所有权利.</p>
</div>
</div>
</footer>
<!-- 微信弹窗 -->
<div id="wechatModal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
<div style="position: relative; background: white; max-width: 400px; margin: 100px auto; padding: 2rem; border-radius: 1rem; text-align: center;">
<span onclick="closeWechatModal()" style="position: absolute; right: 1rem; top: 1rem; cursor: pointer; font-size: 1.5rem;">&times;</span>
<img src="img/wechat_qr.png" alt="微信二维码" style="width: 200px; border-radius: 0.5rem;">
<p style="margin-top: 1rem; font-weight: bold;">
<i class="fab fa-weixin"></i> 微信号behikcigar
</p>
</div>
</div>
<script>
// 微信弹窗功能
function showWechatModal() {
document.getElementById('wechatModal').style.display = 'block';
document.body.style.overflow = 'hidden';
}
function closeWechatModal() {
document.getElementById('wechatModal').style.display = 'none';
document.body.style.overflow = 'auto';
}
// 点击空白处关闭弹窗
document.getElementById('wechatModal').addEventListener('click', function(e) {
if (e.target === this) {
closeWechatModal();
}
});
</script>
<script src="js/main.js"></script>
</body>
</html>