324 lines
16 KiB
HTML
324 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="联系我们 - 爱鉴花团队很乐意听取您的意见和建议，您可以通过在线表单、电话或邮件与我们取得联系。">
|
||
<meta name="keywords" content="联系我们,在线留言,客服支持,爱鉴花团队">
|
||
<meta name="author" content="爱鉴花团队">
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:title" content="联系我们 - 爱鉴花">
|
||
<meta property="og:description" content="联系我们 - 爱鉴花团队很乐意听取您的意见和建议。">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://aijianhua.com/contact.html">
|
||
<meta property="og:image" content="https://aijianhua.com/images/contact-og.png">
|
||
|
||
<!-- Twitter Card -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="联系我们 - 爱鉴花">
|
||
<meta name="twitter:description" content="联系我们 - 爱鉴花团队很乐意听取您的意见和建议。">
|
||
|
||
<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 mx-auto">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body p-5">
|
||
<h2 class="card-title text-center mb-4">发送消息</h2>
|
||
<form id="contactForm">
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="name" required>
|
||
<div class="invalid-feedback">请输入您的姓名</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="email" class="form-label">邮箱 <span class="text-danger">*</span></label>
|
||
<input type="email" class="form-control" id="email" required>
|
||
<div class="invalid-feedback">请输入有效的邮箱地址</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="phone" class="form-label">电话</label>
|
||
<input type="tel" class="form-control" id="phone">
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="subject" class="form-label">主题 <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="subject" required>
|
||
<div class="invalid-feedback">请输入消息主题</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="message" class="form-label">消息内容 <span class="text-danger">*</span></label>
|
||
<textarea class="form-control" id="message" rows="5" required></textarea>
|
||
<div class="invalid-feedback">请输入消息内容</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check mb-3">
|
||
<input class="form-check-input" type="checkbox" id="privacyPolicy" required>
|
||
<label class="form-check-label" for="privacyPolicy">
|
||
我同意 <a href="#" class="text-primary">隐私政策</a> 和 <a href="#" class="text-primary">服务条款</a> <span class="text-danger">*</span>
|
||
</label>
|
||
<div class="invalid-feedback">请同意隐私政策和服务条款</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 text-center">
|
||
<button type="submit" class="btn btn-primary btn-lg px-5">发送消息</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="card contact-card border-0 shadow-sm h-100 text-center">
|
||
<div class="card-body p-4">
|
||
<div class="contact-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||
<i class="fas fa-map-marker-alt fa-2x"></i>
|
||
</div>
|
||
<h5 class="card-title">公司地址</h5>
|
||
<p class="card-text">武汉光谷软件园F2栋</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card contact-card border-0 shadow-sm h-100 text-center">
|
||
<div class="card-body p-4">
|
||
<div class="contact-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||
<i class="fas fa-phone fa-2x"></i>
|
||
</div>
|
||
<h5 class="card-title">联系电话</h5>
|
||
<p class="card-text">客服热线：400-123-4567<br>工作时间：周一至周五 9:00-18:00</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card contact-card border-0 shadow-sm h-100 text-center">
|
||
<div class="card-body p-4">
|
||
<div class="contact-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||
<i class="fas fa-envelope fa-2x"></i>
|
||
</div>
|
||
<h5 class="card-title">电子邮箱</h5>
|
||
<p class="card-text">商务合作：business@aijianhua.com<br>技术支持：support@aijianhua.com</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 在线地图 -->
|
||
<section class="py-5">
|
||
<div class="container py-5">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h2 class="text-center display-5 fw-bold text-dark mb-5">公司位置</h2>
|
||
<div class="ratio ratio-21x9">
|
||
<iframe src="https://map.baidu.com/" title="公司位置地图" allowfullscreen></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 社交媒体 -->
|
||
<section class="bg-light py-5">
|
||
<div class="container py-5">
|
||
<div class="row">
|
||
<div class="col-12 text-center">
|
||
<h2 class="display-5 fw-bold text-dark mb-4">关注我们</h2>
|
||
<p class="lead text-muted mb-5">通过社交媒体与我们保持联系</p>
|
||
<div class="social-contact-links">
|
||
<a href="#" class="btn btn-primary btn-lg me-3 mb-3"><i class="fab fa-weixin me-2"></i> 微信</a>
|
||
<a href="#" class="btn btn-info btn-lg me-3 mb-3"><i class="fab fa-weibo me-2"></i> 微博</a>
|
||
<a href="#" class="btn btn-dark btn-lg mb-3"><i class="fab fa-github me-2"></i> GitHub</a>
|
||
</div>
|
||
</div>
|
||
</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-4 mb-4">
|
||
<h6 class="mb-3">联系我们</h6>
|
||
<p class="text-muted mb-1"><i class="fas fa-map-marker-alt me-2"></i>北京市海淀区中关村大街</p>
|
||
<p class="text-muted mb-1"><i class="fas fa-phone me-2"></i>400-123-4567</p>
|
||
<p class="text-muted"><i class="fas fa-envelope me-2"></i>contact@aijianhua.com</p>
|
||
</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-muted mb-0">© 2024 爱鉴花. 保留所有权利.</p>
|
||
</div>
|
||
<div class="col-md-6 text-center text-md-end">
|
||
<p class="text-muted mb-0">
|
||
<a href="#" class="text-muted text-decoration-none me-3">隐私政策</a>
|
||
<a href="#" class="text-muted text-decoration-none me-3">服务条款</a>
|
||
<a href="#" class="text-muted text-decoration-none">京ICP备12345678号</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-center mt-3">
|
||
<p class="text-muted small">
|
||
友情链接：
|
||
<a href="#" class="text-muted text-decoration-none me-2">中国花卉协会</a>
|
||
<a href="#" class="text-muted text-decoration-none me-2">植物智</a>
|
||
<a href="#" class="text-muted text-decoration-none">园林在线</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="js/main.js"></script>
|
||
|
||
<script>
|
||
// 表单验证
|
||
document.getElementById('contactForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
// 获取表单元素
|
||
const name = document.getElementById('name');
|
||
const email = document.getElementById('email');
|
||
const subject = document.getElementById('subject');
|
||
const message = document.getElementById('message');
|
||
const privacyPolicy = document.getElementById('privacyPolicy');
|
||
|
||
// 重置验证状态
|
||
[name, email, subject, message, privacyPolicy].forEach(element => {
|
||
element.classList.remove('is-invalid');
|
||
});
|
||
|
||
let isValid = true;
|
||
|
||
// 验证姓名
|
||
if (!name.value.trim()) {
|
||
name.classList.add('is-invalid');
|
||
isValid = false;
|
||
}
|
||
|
||
// 验证邮箱
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
if (!emailRegex.test(email.value)) {
|
||
email.classList.add('is-invalid');
|
||
isValid = false;
|
||
}
|
||
|
||
// 验证主题
|
||
if (!subject.value.trim()) {
|
||
subject.classList.add('is-invalid');
|
||
isValid = false;
|
||
}
|
||
|
||
// 验证消息内容
|
||
if (!message.value.trim()) {
|
||
message.classList.add('is-invalid');
|
||
isValid = false;
|
||
}
|
||
|
||
// 验证隐私政策
|
||
if (!privacyPolicy.checked) {
|
||
privacyPolicy.classList.add('is-invalid');
|
||
isValid = false;
|
||
}
|
||
|
||
// 如果表单有效，显示成功消息
|
||
if (isValid) {
|
||
alert('感谢您的消息！我们会尽快回复您。');
|
||
// 重置表单
|
||
this.reset();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |