247 lines
12 KiB
HTML
247 lines
12 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>
|
|
<meta name="description" content="联系结伴客平台，获取旅行结伴、动物认领、送花服务等相关咨询和帮助。">
|
|
<meta name="keywords" content="结伴客, 联系我们, 旅行结伴, 动物认领, 送花服务, 客服咨询">
|
|
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="css/style.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
|
<div class="container">
|
|
<!-- 添加Logo -->
|
|
<a class="navbar-brand" href="index.html">
|
|
<img src="images/logo.png" alt="结伴客 Logo" width="30" height="30" class="d-inline-block align-top me-2">
|
|
<i class="bi bi-map-fill me-2"></i>结伴客
|
|
</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="case.html">成功案例</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="merchant/">商家合作</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="contact.html">联系我们</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 联系我们横幅 -->
|
|
<section class="hero-section">
|
|
<div class="container text-center position-relative">
|
|
<h1 class="display-2 fw-bold mb-4">联系我们</h1>
|
|
<p class="lead mb-5 fs-4">人生本就是一段孤独的旅程，但联系让我们不再孤单<br>有任何问题或建议？欢迎随时与我们联系</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 联系信息 -->
|
|
<section class="container mb-5">
|
|
<div class="row">
|
|
<div class="col-12 mb-5">
|
|
<h2 class="display-5 fw-bold section-title">联系信息</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 mb-4">
|
|
<div class="contact-info">
|
|
<div class="contact-icon">
|
|
<i class="bi bi-geo-alt-fill"></i>
|
|
</div>
|
|
<h3>公司地址</h3>
|
|
<p class="mb-0">北京市朝阳区某某大厦</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
<div class="contact-info">
|
|
<div class="contact-icon">
|
|
<i class="bi bi-telephone-fill"></i>
|
|
</div>
|
|
<h3>联系电话</h3>
|
|
<p class="mb-0">400-123-4567</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
<div class="contact-info">
|
|
<div class="contact-icon">
|
|
<i class="bi bi-envelope-fill"></i>
|
|
</div>
|
|
<h3>联系邮箱</h3>
|
|
<p class="mb-0">contact@jiebanke.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 联系表单 -->
|
|
<section class="form-section">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="contact-form">
|
|
<h2 class="mb-4">留言给我们</h2>
|
|
<p class="lead text-muted mb-4">有任何问题或建议，请填写以下表单，我们会尽快回复您。</p>
|
|
|
|
<form>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4">
|
|
<label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="name" required placeholder="请输入您的姓名">
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-4">
|
|
<label for="email" class="form-label">邮箱 <span class="text-danger">*</span></label>
|
|
<input type="email" class="form-control" id="email" required placeholder="请输入您的邮箱">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4">
|
|
<label for="phone" class="form-label">电话</label>
|
|
<input type="tel" class="form-control" id="phone" placeholder="请输入您的电话">
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-4">
|
|
<label for="subject" class="form-label">主题 <span class="text-danger">*</span></label>
|
|
<select class="form-select" id="subject" required>
|
|
<option value="">请选择主题</option>
|
|
<option value="business">商务合作</option>
|
|
<option value="support">技术支持</option>
|
|
<option value="complaint">投诉建议</option>
|
|
<option value="other">其他问题</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12 mb-4">
|
|
<label for="message" class="form-label">留言内容 <span class="text-danger">*</span></label>
|
|
<textarea class="form-control" id="message" rows="5" required placeholder="请输入您的留言内容"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">发送留言</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 地图 -->
|
|
<section class="container mb-5">
|
|
<div class="row">
|
|
<div class="col-12 mb-5">
|
|
<h2 class="display-5 fw-bold section-title">我们在哪</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="map-container">
|
|
<iframe src="https://map.baidu.com/" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-4 mb-4">
|
|
<h5 class="mb-4">
|
|
<i class="bi bi-map-fill me-2"></i>结伴客
|
|
</h5>
|
|
<p>专注于结伴旅行活动的平台，包含独特的动物认领功能。</p>
|
|
<div class="d-flex">
|
|
<a href="#" class="social-icon me-2">
|
|
<i class="bi bi-wechat"></i>
|
|
</a>
|
|
<a href="#" class="social-icon me-2">
|
|
<i class="bi bi-weibo"></i>
|
|
</a>
|
|
<a href="#" class="social-icon">
|
|
<i class="bi bi-tencent-qq"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 mb-4">
|
|
<h5 class="mb-4">产品</h5>
|
|
<ul class="list-unstyled">
|
|
<li><a href="#" class="d-block py-1">旅行结伴</a></li>
|
|
<li><a href="#" class="d-block py-1">动物认领</a></li>
|
|
<li><a href="#" class="d-block py-1">送花服务</a></li>
|
|
<li><a href="#" class="d-block py-1">推广奖励</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-2 mb-4">
|
|
<h5 class="mb-4">关于</h5>
|
|
<ul class="list-unstyled">
|
|
<li><a href="about.html" class="d-block py-1">关于我们</a></li>
|
|
<li><a href="case.html" class="d-block py-1">成功案例</a></li>
|
|
<li><a href="merchant/" class="d-block py-1">商家合作</a></li>
|
|
<li><a href="contact.html" class="d-block py-1">联系我们</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-4 mb-4">
|
|
<h5 class="mb-4">联系我们</h5>
|
|
<ul class="list-unstyled">
|
|
<li class="d-flex align-items-start mb-3">
|
|
<i class="bi bi-envelope-fill me-2 mt-1"></i>
|
|
<span>contact@jiebanke.com</span>
|
|
</li>
|
|
<li class="d-flex align-items-start mb-3">
|
|
<i class="bi bi-telephone-fill me-2 mt-1"></i>
|
|
<span>400-123-4567</span>
|
|
</li>
|
|
<li class="d-flex align-items-start mb-3">
|
|
<i class="bi bi-geo-alt-fill me-2 mt-1"></i>
|
|
<span>北京市朝阳区某某大厦</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-4 mt-4 border-top border-secondary">
|
|
<div class="col-md-6 text-center text-md-start">
|
|
<p class="mb-0">© 2025 结伴客. 保留所有权利.</p>
|
|
<p class="mb-0 small">Copyright 2015 All rights reserved 鄂ICP备15009094号-1 jiebanke.com 武汉高灏科技有限责任公司</p>
|
|
</div>
|
|
<div class="col-md-6 text-center text-md-end">
|
|
<ul class="list-inline mb-0">
|
|
<li class="list-inline-item"><a href="#">用户协议</a></li>
|
|
<li class="list-inline-item"><a href="#">隐私政策</a></li>
|
|
<li class="list-inline-item"><a href="#">网站地图</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.js"></script>
|
|
</body>
|
|
</html> |