oadmin/tingquanwebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初版

Browse Source
This commit is contained in:
hkyc
2025-03-13 16:15:54 +08:00
commit 433715b78a
6 changed files with 1514 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
contact.html Normal file
View File

@@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>联系我们 - 听泉科技</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>
.contact {
padding: 160px 0 80px;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.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 {
background: white;
padding: 3rem;
border-radius: 1rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-color);
font-weight: 500;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border-color);
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 {
height: 150px;
resize: vertical;
}
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
</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" class="active">联系我们</a></li>
</ul>
</nav>
<button class="menu-button">
<span class="menu-icon"></span>
</button>
</div>
</header>
<section class="contact">
<div class="container">
<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>
</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>
</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>
</form>
</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>
</ul>
</div>
<div class="footer-col">
<h3>联系我们</h3>
<p><i class="fas fa-envelope"></i> contact@tingquan.tech</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>
</div>
</div>
</div>
<div class="copyright">
<p>&copy; 2023 听泉科技. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('感谢您的留言！我们会尽快回复您。');
this.reset();
});
</script>
</body>
</html>

536
css/style.css Normal file
View File

@@ -0,0 +1,536 @@
/* 全局样式 */
:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
--text-color: #1f2937;
--light-text: #6b7280;
--background: #ffffff;
--light-background: #f3f4f6;
--border-color: #e5e7eb;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
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;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* 导航栏样式更新 */
header {
background: var(--background);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: all 0.3s ease;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
padding: 0 2rem;
}
.logo {
display: flex;
align-items: center;
}
.logo h1 {
font-size: 1.8rem;
background: linear-gradient(45deg, #4F46E5, #2563EB);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
nav ul {
display: flex;
list-style: none;
gap: 2.5rem;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
font-size: 1.1rem;
position: relative;
padding: 0.5rem 0;
transition: color 0.3s ease;
}
nav a:hover, nav a.active {
color: var(--primary-color);
}
nav a::after {
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;
}
.menu-button .menu-icon::before,
.menu-button .menu-icon::after {
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;
}
.overlay.active {
display: block;
opacity: 1;
}
@media (max-width: 768px) {
.menu-button {
display: flex;
align-items: center;
justify-content: center;
}
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);
}
}
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--secondary-color);
}
.btn-secondary {
background: white;
color: var(--primary-color);
border: 2px solid var(--primary-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;
}
/* 产品卡片样式 */
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
}
.products {
padding: 80px 0;
background: var(--background);
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.product-card {
background: white;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
}
.product-icon {
width: 64px;
height: 64px;
background: var(--primary-color);
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.product-icon i {
font-size: 2rem;
color: white;
}
.product-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.product-features {
list-style: none;
margin: 1.5rem 0;
}
.product-features li {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.product-features i {
color: var(--primary-color);
}
.product-cta {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
/* 特性区域样式 */
.features {
padding: 80px 0;
background: var(--light-background);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.feature-card {
text-align: center;
padding: 2rem;
}
.feature-icon {
width: 80px;
height: 80px;
background: white;
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);
}
.feature-icon i {
font-size: 2rem;
color: var(--primary-color);
}
.feature-card h3 {
margin-bottom: 1rem;
}
/* CTA区域样式 */
.cta {
padding: 80px 0;
background: var(--primary-color);
color: white;
text-align: center;
}
.cta h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta p {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta .btn-large {
background: white;
color: var(--primary-color);
}
.cta .btn-large:hover {
background: var(--light-background);
}
/* 页脚样式 */
footer {
background: var(--light-background);
padding: 80px 0 40px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer-col h3 {
margin-bottom: 1.5rem;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 0.75rem;
}
.footer-col a {
text-decoration: none;
color: var(--light-text);
transition: color 0.3s;
}
.footer-col a:hover {
color: var(--primary-color);
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
transition: all 0.3s;
}
.social-links a:hover {
background: var(--primary-color);
color: white;
}
.copyright {
text-align: center;
color: var(--light-text);
padding-top: 2rem;
border-top: 1px solid var(--border-color);
}
/* 响应式设计 */
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.product-grid, .features-grid {
grid-template-columns: 1fr;
}
.hero-buttons {
flex-direction: column;
}
.product-cta {
flex-direction: column;
}
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.social-links {
justify-content: center;
}
}

164
index.html Normal file
View File

@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>听泉科技 - 智能软件解决方案</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">
</head>
<body>
<div class="overlay"></div>
<!-- 导航栏 -->
<header>
<div class="container">
<div class="logo">
<h1>听泉科技</h1>
</div>
<nav>
<ul>
<li><a href="index.html" class="active">首页</a></li>
<li><a href="products.html">产品</a></li>
<li><a href="pricing.html">价格</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
<button class="menu-button">
<span class="menu-icon"></span>
</button>
</div>
</header>
<!-- 英雄区 -->
<section class="hero">
<div class="container">
<div class="hero-content">
<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>
</div>
</div>
</div>
</section>
<!-- 产品展示区 -->
<section class="products">
<div class="container">
<h2 class="section-title">我们的产品</h2>
<div class="product-grid">
<!-- 听泉助手 -->
<div class="product-card">
<div class="product-icon">
<i class="fas fa-robot"></i>
</div>
<h3>听泉助手</h3>
<p>智能化软件助手，提升您的日常工作效率</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>
</ul>
<div class="product-cta">
<a href="products.html#tingquan-assistant" class="btn btn-outline">了解详情</a>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
</div>
<!-- Cursor账号池API -->
<div class="product-card">
<div class="product-icon">
<i class="fas fa-code"></i>
</div>
<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>
</ul>
<div class="product-cta">
<a href="products.html#cursor-api" class="btn btn-outline">了解详情</a>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">购买接口</a>
</div>
</div>
</div>
</div>
</section>
<!-- 优势区域 -->
<section class="features">
<div class="container">
<h2 class="section-title">为什么选择我们</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>安全可靠</h3>
<p>产品经过严格测试，确保稳定运行</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-headset"></i>
</div>
<h3>专业支持</h3>
<p>技术团队提供及时的售后服务</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-sync-alt"></i>
</div>
<h3>持续更新</h3>
<p>定期更新功能，不断提升用户体验</p>
</div>
</div>
</div>
</section>
<!-- 号召性用语 -->
<section class="cta">
<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>
</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>
</ul>
</div>
<div class="footer-col">
<h3>联系我们</h3>
<p><i class="fas fa-envelope"></i> contact@tingquan.tech</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>
</div>
</div>
</div>
<div class="copyright">
<p>&copy; 2023 听泉科技. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>

75
js/main.js Normal file
View File

@@ -0,0 +1,75 @@
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.style.background = 'rgba(255, 255, 255, 0.95)';
header.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
} else {
header.style.background = 'var(--background)';
header.style.boxShadow = 'none';
}
});
// 移动端菜单
function initMobileMenu() {
const menuButton = document.querySelector('.menu-button');
const nav = document.querySelector('nav');
const overlay = document.querySelector('.overlay');
const navLinks = document.querySelectorAll('nav a');
if (!menuButton || !nav || !overlay) return;
menuButton.addEventListener('click', () => {
menuButton.classList.toggle('active');
nav.classList.toggle('active');
overlay.classList.toggle('active');
document.body.style.overflow = nav.classList.contains('active') ? 'hidden' : '';
});
// 点击蒙层关闭菜单
overlay.addEventListener('click', () => {
menuButton.classList.remove('active');
nav.classList.remove('active');
overlay.classList.remove('active');
document.body.style.overflow = '';
});
// 点击导航链接关闭菜单
navLinks.forEach(link => {
link.addEventListener('click', () => {
menuButton.classList.remove('active');
nav.classList.remove('active');
overlay.classList.remove('active');
document.body.style.overflow = '';
});
});
}
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// 产品卡片悬停效果
document.querySelectorAll('.product-card').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-10px)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
initMobileMenu();
});

293
pricing.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>价格方案 - 听泉科技</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>
.pricing {
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);
}
.popular-tag {
position: absolute;
top: 1rem;
right: -2rem;
background: var(--primary-color);
color: white;
padding: 0.5rem 3rem;
transform: rotate(45deg);
font-size: 0.9rem;
}
.price-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text-color);
}
.price-amount {
font-size: 3rem;
font-weight: bold;
color: var(--primary-color);
margin-bottom: 2rem;
}
.price-period {
font-size: 1rem;
color: var(--light-text);
}
.price-features {
list-style: none;
margin: 2rem 0;
padding: 0;
text-align: left;
}
.price-features li {
margin-bottom: 1rem;
padding-left: 1.5rem;
position: relative;
}
.price-features li:before {
content: "✓";
color: var(--primary-color);
position: absolute;
left: 0;
}
.price-cta {
margin-top: 2rem;
}
.price-note {
text-align: center;
margin-top: 2rem;
color: var(--light-text);
font-size: 0.9rem;
}
@media (max-width: 768px) {
.pricing {
padding: 120px 0 60px;
}
.price-comparison {
grid-template-columns: 1fr;
}
}
</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" class="active">价格</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
<button class="menu-button">
<span class="menu-icon"></span>
</button>
</div>
</header>
<section class="pricing">
<div class="container">
<div class="pricing-header">
<h1>选择适合您的方案</h1>
<p>我们提供灵活的价格方案，满足不同用户的需求</p>
</div>
<!-- 听泉助手价格 -->
<div class="product-section">
<h2>听泉助手</h2>
<div class="price-comparison">
<div class="price-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>
</ul>
<div class="price-cta">
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
</div>
<div class="price-card">
<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>
</ul>
<div class="price-cta">
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
</div>
<div class="price-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>
</ul>
<div class="price-cta">
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
</div>
</div>
</div>
<!-- Cursor账号池API价格 -->
<div class="product-section">
<h2>Cursor账号池API</h2>
<div class="price-comparison">
<div class="price-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>
</ul>
<div class="price-cta">
<a href="https://github.com/yourusername/cursor-account-switcher" target="_blank" class="btn btn-primary">开始使用</a>
</div>
</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>
</ul>
<div class="price-cta">
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
</div>
<div class="price-card">
<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>
</ul>
<div class="price-cta">
<a href="contact.html" class="btn btn-primary">联系我们</a>
</div>
</div>
</div>
<div class="price-note">
<p>* 所有价格方案均支持随时升级或降级</p>
<p>* 企业版可提供定制化解决方案，请联系我们获取详细信息</p>
</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>
</ul>
</div>
<div class="footer-col">
<h3>联系我们</h3>
<p><i class="fas fa-envelope"></i> contact@tingquan.tech</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>
</div>
</div>
</div>
<div class="copyright">
<p>&copy; 2023 听泉科技. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>

245
products.html Normal file
View File

@@ -0,0 +1,245 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品详情 - 听泉科技</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>
.product-detail {
padding: 160px 0 80px;
}
.product-detail-card {
background: white;
border-radius: 1rem;
padding: 3rem;
margin-bottom: 3rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.product-header {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
}
.product-header .product-icon {
width: 80px;
height: 80px;
}
.price-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.price-card {
background: var(--light-background);
border-radius: 1rem;
padding: 2rem;
text-align: center;
}
.price-card h3 {
color: var(--primary-color);
margin-bottom: 1rem;
}
.price-card .price {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1.5rem;
}
.price-card ul {
list-style: none;
margin-bottom: 2rem;
}
.price-card ul li {
margin-bottom: 0.5rem;
}
</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" class="active">产品</a></li>
<li><a href="pricing.html">价格</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
<button class="menu-button">
<span class="menu-icon"></span>
</button>
</div>
</header>
<section class="product-detail">
<div class="container">
<!-- 听泉助手 -->
<div class="product-detail-card" id="tingquan-assistant">
<div class="product-header">
<div class="product-icon">
<i class="fas fa-robot"></i>
</div>
<div>
<h2>听泉助手</h2>
<p>智能化软件助手，提升您的日常工作效率</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>
</ul>
</div>
<div class="price-cards">
<div class="price-card">
<h3>天卡</h3>
<div class="price">¥9.9</div>
<ul>
<li>24小时无限使用</li>
<li>所有功能解锁</li>
<li>技术支持</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">¥39.9</div>
<ul>
<li>7天无限使用</li>
<li>所有功能解锁</li>
<li>技术支持</li>
<li>每天节省20%</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>
<ul>
<li>30天无限使用</li>
<li>所有功能解锁</li>
<li>优先技术支持</li>
<li>每天节省40%</li>
</ul>
<a href="https://shop.taobao.com/" target="_blank" class="btn btn-primary">立即购买</a>
</div>
</div>
</div>
<!-- Cursor账号池API -->
<div class="product-detail-card" id="cursor-api">
<div class="product-header">
<div class="product-icon">
<i class="fas fa-code"></i>
</div>
<div>
<h2>Cursor账号池API</h2>
<p>高质量Cursor账号池接口，为开发团队提供便捷的账号切换服务</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> 专业API接口，稳定可靠</li>
<li><i class="fas fa-check"></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>
<div class="price-cards">
<div class="price-card">
<h3>基础版</h3>
<div class="price">免费</div>
<ul>
<li>每天1次免费使用</li>
<li>基础功能支持</li>
<li>社区支持</li>
</ul>
<a href="https://github.com/yourusername/cursor-account-switcher" target="_blank" class="btn btn-primary">开始使用</a>
</div>
<div class="price-card">
<h3>开发者版</h3>
<div class="price">¥299/月</div>
<ul>
<li>无限次数使用</li>
<li>专业API接口</li>
<li>技术支持</li>
<li>SLA保障</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">定制</div>
<ul>
<li>无限次数使用</li>
<li>专属API接口</li>
<li>7*24小时支持</li>
<li>定制开发服务</li>
</ul>
<a href="contact.html" class="btn btn-primary">联系我们</a>
</div>
</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>
</ul>
</div>
<div class="footer-col">
<h3>联系我们</h3>
<p><i class="fas fa-envelope"></i> contact@tingquan.tech</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>
</div>
</div>
</div>
<div class="copyright">
<p>&copy; 2023 听泉科技. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>