初版
This commit is contained in:
hkyc
201
contact.html
Normal file
201
contact.html
Normal 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>© 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
536
css/style.css
Normal 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
164
index.html
Normal 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>© 2023 听泉科技. 保留所有权利.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
75
js/main.js
Normal file
75
js/main.js
Normal 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
293
pricing.html
Normal 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>© 2023 听泉科技. 保留所有权利.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
245
products.html
Normal file
245
products.html
Normal 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>© 2023 听泉科技. 保留所有权利.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user