481 lines
24 KiB
HTML
481 lines
24 KiB
HTML
<!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 href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||
<link href="css/style.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="index.html">
|
||
<i class="fas fa-flower text-primary me-2"></i>
|
||
<span class="fw-bold text-primary">爱鉴花</span>
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="index.html">首页</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="about.html">关于我们</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="products.html">产品介绍</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="news.html">新闻中心</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="contact.html">联系我们</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 页面标题 -->
|
||
<section class="page-header bg-gradient-primary text-white py-5">
|
||
<div class="container py-5">
|
||
<div class="row">
|
||
<div class="col-12 text-center">
|
||
<h1 class="display-4 fw-bold mb-3">联系我们</h1>
|
||
<p class="lead">我们很乐意听取您的意见和建议</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系信息 -->
|
||
<section class="py-5">
|
||
<div class="container py-5">
|
||
<div class="row">
|
||
<div class="col-lg-8">
|
||
<!-- 联系表单 -->
|
||
<div class="card border-0 shadow-sm mb-5">
|
||
<div class="card-body p-5">
|
||
<h2 class="fw-bold mb-4 text-dark">发送消息</h2>
|
||
<form id="contactForm">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="name" class="form-label">姓名 *</label>
|
||
<input type="text" class="form-control" id="name" required>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label for="email" class="form-label">邮箱 *</label>
|
||
<input type="email" class="form-control" id="email" required>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="phone" class="form-label">电话</label>
|
||
<input type="tel" class="form-control" id="phone">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="subject" class="form-label">主题 *</label>
|
||
<select class="form-select" id="subject" required>
|
||
<option value="">请选择主题</option>
|
||
<option value="general">一般咨询</option>
|
||
<option value="technical">技术支持</option>
|
||
<option value="business">商务合作</option>
|
||
<option value="feedback">产品反馈</option>
|
||
<option value="other">其他</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="message" class="form-label">消息内容 *</label>
|
||
<textarea class="form-control" id="message" rows="5" required></textarea>
|
||
</div>
|
||
<div class="mb-3 form-check">
|
||
<input type="checkbox" class="form-check-input" id="agree" required>
|
||
<label class="form-check-label" for="agree">
|
||
我同意<a href="#" class="text-primary">隐私政策</a>
|
||
</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary btn-lg w-100">发送消息</button>
|
||
<div class="mt-3 text-center">
|
||
<small class="text-muted">我们将在24小时内回复您的消息</small>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- 表单提交成功提示 -->
|
||
<div class="alert alert-success mt-4 d-none" id="successAlert">
|
||
<i class="fas fa-check-circle me-2"></i>
|
||
消息发送成功！我们会尽快与您联系。
|
||
</div>
|
||
|
||
<!-- 表单提交失败提示 -->
|
||
<div class="alert alert-danger mt-4 d-none" id="errorAlert">
|
||
<i class="fas fa-exclamation-circle me-2"></i>
|
||
发送失败，请检查表单内容后重试。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<!-- 联系信息卡片 -->
|
||
<div class="card border-0 shadow-sm mb-4">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||
<i class="fas fa-map-marker-alt fa-2x"></i>
|
||
</div>
|
||
<h5 class="fw-bold">公司地址</h5>
|
||
<p class="text-muted">
|
||
北京市海淀区中关村大街<br>
|
||
科技园区A座1001室
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card border-0 shadow-sm mb-4">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||
<i class="fas fa-phone fa-2x"></i>
|
||
</div>
|
||
<h5 class="fw-bold">联系电话</h5>
|
||
<p class="text-muted">
|
||
400-123-4567<br>
|
||
+86 10-8888-7777
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card border-0 shadow-sm mb-4">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||
<i class="fas fa-envelope fa-2x"></i>
|
||
</div>
|
||
<h5 class="fw-bold">电子邮箱</h5>
|
||
<p class="text-muted">
|
||
contact@aijianhua.com<br>
|
||
support@aijianhua.com
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon bg-warning text-white rounded-circle mx-auto mb-3">
|
||
<i class="fas fa-clock fa-2x"></i>
|
||
</div>
|
||
<h5 class="fw-bold">工作时间</h5>
|
||
<p class="text-muted">
|
||
周一至周五: 9:00-18:00<br>
|
||
周末: 10:00-16:00
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 地图 -->
|
||
<section class="bg-light py-5">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 text-center mb-5">
|
||
<h2 class="display-5 fw-bold text-dark">我们的位置</h2>
|
||
<p class="lead text-muted">欢迎来访我们的办公室</p>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body p-0">
|
||
<!-- 地图占位图 -->
|
||
<div class="map-placeholder bg-secondary text-white text-center py-5">
|
||
<i class="fas fa-map-marked-alt fa-4x mb-3"></i>
|
||
<h4>地图位置</h4>
|
||
<p>北京市海淀区中关村大街科技园区A座</p>
|
||
<small class="text-white-50">（实际部署时可集成百度地图或高德地图）</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 常见问题 -->
|
||
<section class="py-5">
|
||
<div class="container py-5">
|
||
<div class="row">
|
||
<div class="col-12 text-center mb-5">
|
||
<h2 class="display-5 fw-bold text-dark">常见问题</h2>
|
||
<p class="lead text-muted">快速找到您需要的答案</p>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="accordion" id="faqAccordion">
|
||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||
<h3 class="accordion-header">
|
||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
|
||
如何开始使用爱鉴花小程序？
|
||
</button>
|
||
</h3>
|
||
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
<p class="text-muted">
|
||
在微信中搜索"爱鉴花"即可找到我们的小程序，
|
||
点击进入后即可开始使用花卉识别功能。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||
<h3 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
|
||
识别准确率如何？
|
||
</button>
|
||
</h3>
|
||
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
<p class="text-muted">
|
||
我们的AI识别准确率目前达到95%，
|
||
在良好光线和清晰图片条件下准确率更高。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="accordion" id="faqAccordion2">
|
||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||
<h3 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
|
||
是否支持企业定制？
|
||
</button>
|
||
</h3>
|
||
<div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2">
|
||
<div class="accordion-body">
|
||
<p class="text-muted">
|
||
是的，我们提供企业定制服务，包括私有化部署、
|
||
定制模型训练等，请联系商务合作部门。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||
<h3 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
|
||
技术支持响应时间？
|
||
</button>
|
||
</h3>
|
||
<div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2">
|
||
<div class="accordion-body">
|
||
<p class="text-muted">
|
||
普通咨询：24小时内回复<br>
|
||
紧急问题：4小时内响应<br>
|
||
企业客户：专属技术支持
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-center mt-4">
|
||
<a href="#" class="btn btn-outline-primary">查看更多问题</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-dark text-white py-5">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-4 mb-4">
|
||
<h5 class="fw-bold mb-3">爱鉴花</h5>
|
||
<p class="text-white-50">
|
||
用AI技术连接人与自然，让植物识别变得简单有趣。
|
||
</p>
|
||
<div class="social-links">
|
||
<a href="#" class="text-white-50 me-3"><i class="fab fa-weixin"></i></a>
|
||
<a href="#" class="text-white-50 me-3"><i class="fab fa-weibo"></i></a>
|
||
<a href="#" class="text-white-50"><i class="fab fa-github"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-2 col-md-4 mb-4">
|
||
<h6 class="fw-bold mb-3">产品</h6>
|
||
<ul class="list-unstyled">
|
||
<li><a href="products.html" class="text-white-50 text-decoration-none">微信小程序</a></li>
|
||
<li><a href="products.html" class="text-white-50 text-decoration-none">API服务</a></li>
|
||
<li><a href="products.html" class="text-white-50 text-decoration-none">企业版</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-lg-2 col-md-4 mb-4">
|
||
<h6 class="fw-bold mb-3">关于</h6>
|
||
<ul class="list-unstyled">
|
||
<li><a href="about.html" class="text-white-50 text-decoration-none">关于我们</a></li>
|
||
<li><a href="about.html" class="text-white-50 text-decoration-none">团队介绍</a></li>
|
||
<li><a href="news.html" class="text-white-50 text-decoration-none">新闻动态</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-lg-2 col-md-4 mb-4">
|
||
<h6 class="fw-bold mb-3">支持</h6>
|
||
<ul class="list-unstyled">
|
||
<li><a href="#" class="text-white-50 text-decoration-none">帮助中心</a></li>
|
||
<li><a href="#" class="text-white-50 text-decoration-none">API文档</a></li>
|
||
<li><a href="contact.html" class="text-white-50 text-decoration-none">联系我们</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-lg-2 col-md-4 mb-4">
|
||
<h6 class="fw-bold mb-3">法律</h6>
|
||
<ul class="list-unstyled">
|
||
<li><a href="#" class="text-white-50 text-decoration-none">隐私政策</a></li>
|
||
<li><a href="#" class="text-white-50 text-decoration-none">服务条款</a></li>
|
||
<li><a href="#" class="text-white-50 text-decoration-none">版权声明</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<hr class="my-4">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-6 text-center text-md-start">
|
||
<p class="text-white-50 mb-0">© 2024 爱鉴花. 保留所有权利</p>
|
||
</div>
|
||
<div class="col-md-6 text-center text-md-end">
|
||
<p class="text-white-50 mb-0">
|
||
<a href="#" class="text-white-50 text-decoration-none me-3">隐私政策</a>
|
||
<a href="#" class="text-white-50 text-decoration-none me-3">服务条款</a>
|
||
<a href="#" class="text-white-50 text-decoration-none">京ICP备12345678号</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-center mt-3">
|
||
<p class="text-white-50 small">
|
||
友情链接：
|
||
<a href="#" class="text-white-50 text-decoration-none me-2">中国花卉协会</a>
|
||
<a href="#" class="text-white-50 text-decoration-none me-2">植物智</a>
|
||
<a href="#" class="text-white-50 text-decoration-none">园林在线</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||
<script src="js/main.js"></script>
|
||
|
||
<!-- 表单验证脚本 -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const contactForm = document.getElementById('contactForm');
|
||
const successAlert = document.getElementById('successAlert');
|
||
const errorAlert = document.getElementById('errorAlert');
|
||
|
||
// 实时表单验证
|
||
const inputs = contactForm.querySelectorAll('input, textarea, select');
|
||
inputs.forEach(input => {
|
||
input.addEventListener('blur', function() {
|
||
validateField(this);
|
||
});
|
||
|
||
input.addEventListener('input', function() {
|
||
clearValidation(this);
|
||
});
|
||
});
|
||
|
||
// 表单提交处理
|
||
contactForm.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
let isValid = true;
|
||
inputs.forEach(input => {
|
||
if (!validateField(input)) {
|
||
isValid = false;
|
||
}
|
||
});
|
||
|
||
if (isValid) {
|
||
// 模拟表单提交成功
|
||
simulateFormSubmission();
|
||
}
|
||
});
|
||
|
||
function validateField(field) {
|
||
let isValid = true;
|
||
let errorMessage = '';
|
||
|
||
if (field.required && !field.value.trim()) {
|
||
isValid = false;
|
||
errorMessage = '此字段为必填项';
|
||
} else if (field.type === 'email' && field.value) {
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
if (!emailRegex.test(field.value)) {
|
||
isValid = false;
|
||
errorMessage = '请输入有效的邮箱地址';
|
||
}
|
||
} else if (field.type === 'tel' && field.value) {
|
||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||
if (!phoneRegex.test(field.value)) {
|
||
isValid = false;
|
||
errorMessage = '请输入有效的手机号码';
|
||
}
|
||
}
|
||
|
||
if (!isValid) {
|
||
showError(field, errorMessage);
|
||
} else {
|
||
clearValidation(field);
|
||
}
|
||
|
||
return isValid;
|
||
}
|
||
|
||
function showError(field, message) {
|
||
clearValidation(field);
|
||
field.classList.add('is-invalid');
|
||
|
||
const errorDiv = document.createElement('div');
|
||
errorDiv.className = 'invalid-feedback';
|
||
errorDiv.textContent = message;
|
||
field.parentNode.appendChild(errorDiv);
|
||
}
|
||
|
||
function clearValidation(field) {
|
||
field.classList.remove('is-invalid');
|
||
const errorDiv = field.parentNode.querySelector('.invalid-feedback');
|
||
if (errorDiv) {
|
||
errorDiv.remove();
|
||
}
|
||
}
|
||
|
||
function simulateFormSubmission() {
|
||
// 显示加载状态
|
||
const submitBtn = contactForm.querySelector('button[type="submit"]');
|
||
const originalText = submitBtn.textContent;
|
||
submitBtn.disabled = true;
|
||
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 发送中...';
|
||
|
||
// 模拟网络请求延迟
|
||
setTimeout(() => {
|
||
// 恢复按钮状态
|
||
submitBtn.disabled = false;
|
||
submitBtn.textContent = originalText;
|
||
|
||
// 显示成功消息
|
||
successAlert.classList.remove('d-none');
|
||
errorAlert.classList.add('d-none');
|
||
|
||
// 重置表单
|
||
contactForm.reset();
|
||
|
||
// 3秒后隐藏成功消息
|
||
setTimeout(() => {
|
||
successAlert.classList.add('d-none');
|
||
}, 3000);
|
||
}, 2000);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |