304 lines
16 KiB
HTML
304 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">
|
||
<title>联系我们 - 活牛采购智能数字化系统</title>
|
||
<meta name="description" content="联系活牛采购智能数字化系统团队，获取产品演示、报价咨询和技术支持，我们为您提供专业的数字化采购解决方案。">
|
||
|
||
<!-- Bootstrap 5 CSS -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- Font Awesome Icons -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||
<!-- AOS Animation -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||
<!-- 自定义样式 -->
|
||
<link href="css/custom.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">
|
||
<span class="ms-2 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="product.html">产品介绍</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="solutions.html">解决方案</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="cases.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="news.html">新闻动态</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="contact.html">联系我们</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="ms-3">
|
||
<a href="contact.html" class="btn btn-primary">免费试用</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 页面头部 -->
|
||
<section class="bg-primary py-5 mt-5">
|
||
<div class="container py-5">
|
||
<div class="row">
|
||
<div class="col-lg-8 mx-auto text-center">
|
||
<h1 class="display-4 fw-bold text-white mb-4">联系我们</h1>
|
||
<p class="lead text-white-50 mb-0">
|
||
我们期待为您提供专业的数字化采购解决方案，立即联系获取产品演示和报价
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系信息 -->
|
||
<section class="py-5">
|
||
<div class="container">
|
||
<div class="row g-5">
|
||
<!-- 联系表单 -->
|
||
<div class="col-lg-8">
|
||
<div class="card border-0 shadow-lg">
|
||
<div class="card-body p-5">
|
||
<h3 class="fw-bold text-dark mb-4">发送咨询</h3>
|
||
<p class="text-muted mb-4">填写以下信息，我们的专业顾问会尽快联系您</p>
|
||
|
||
<form id="contactForm" class="needs-validation" novalidate>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label for="name" class="form-label fw-bold">姓名 *</label>
|
||
<input type="text" class="form-control" id="name" required>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="company" class="form-label fw-bold">公司名称</label>
|
||
<input type="text" class="form-control" id="company">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="phone" class="form-label fw-bold">手机号 *</label>
|
||
<input type="tel" class="form-control" id="phone" required>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="email" class="form-label fw-bold">邮箱 *</label>
|
||
<input type="email" class="form-control" id="email" required>
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="interest" class="form-label fw-bold">您感兴趣的是</label>
|
||
<select class="form-select" id="interest">
|
||
<option value="">请选择...</option>
|
||
<option value="demo">产品演示</option>
|
||
<option value="quote">报价咨询</option>
|
||
<option value="cooperation">合作洽谈</option>
|
||
<option value="support">技术支持</option>
|
||
<option value="other">其他</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="message" class="form-label fw-bold">详细需求 *</label>
|
||
<textarea class="form-control" id="message" rows="5" required></textarea>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" id="agree" required>
|
||
<label class="form-check-label text-muted" for="agree">
|
||
我同意隐私政策和服务条款
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<button type="submit" class="btn btn-primary btn-lg w-100">
|
||
<i class="bi bi-send me-2"></i>发送咨询
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 联系信息 -->
|
||
<div class="col-lg-4">
|
||
<div class="sticky-top" style="top: 100px;">
|
||
<div class="card border-0 shadow-lg">
|
||
<div class="card-body p-4">
|
||
<h4 class="fw-bold text-dark mb-4">联系信息</h4>
|
||
|
||
<div class="d-flex align-items-center mb-4">
|
||
<div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
|
||
<i class="bi bi-telephone text-primary fs-5"></i>
|
||
</div>
|
||
<div>
|
||
<h6 class="fw-bold mb-0">联系电话</h6>
|
||
<p class="text-light mb-0">15927219038(周经理)</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex align-items-center mb-4">
|
||
<div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
|
||
<i class="bi bi-envelope text-success fs-5"></i>
|
||
</div>
|
||
<div>
|
||
<h6 class="fw-bold mb-0">商务邮箱</h6>
|
||
<p class="text-light mb-0">service@aiotagro.com</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex align-items-center mb-4">
|
||
<div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
|
||
<i class="bi bi-geo-alt text-warning fs-5"></i>
|
||
</div>
|
||
<div>
|
||
<h6 class="fw-bold mb-0">公司地址</h6>
|
||
<p class="text-light mb-0">武汉光谷软件园F2栋</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex align-items-center mb-4">
|
||
<div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
|
||
<i class="bi bi-clock text-info fs-5"></i>
|
||
</div>
|
||
<div>
|
||
<h6 class="fw-bold mb-0">工作时间</h6>
|
||
<p class="text-light mb-0">周一至周五 9:00-18:00</p>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<h6 class="fw-bold mb-3">关注我们</h6>
|
||
<div class="d-flex gap-3">
|
||
<a href="#" class="text-primary fs-4">
|
||
<i class="bi bi-wechat"></i>
|
||
</a>
|
||
<a href="#" class="text-primary fs-4">
|
||
<i class="bi bi-weibo"></i>
|
||
</a>
|
||
<a href="#" class="text-primary fs-4">
|
||
<i class="bi bi-linkedin"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速联系卡片 -->
|
||
<div class="card border-0 shadow-lg mt-4">
|
||
<div class="card-body p-4 text-center bg-dark">
|
||
<h6 class="fw-bold mb-3 text-light">急需技术支持？</h6>
|
||
<p class="text-light small mb-3">
|
||
我们的技术团队提供7×24小时紧急支持服务
|
||
</p>
|
||
<a href="tel:400-123-4567" class="btn btn-outline-light btn-sm w-100">
|
||
<i class="bi bi-telephone me-2"></i>紧急联系
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 地图区域 -->
|
||
<section class="bg-light py-5">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-lg">
|
||
<div class="card-body p-0">
|
||
<div class="ratio ratio-21x9">
|
||
<!-- 这里可以嵌入实际的地图 -->
|
||
<div class="d-flex align-items-center justify-content-center bg-primary bg-opacity-10">
|
||
<div class="text-center">
|
||
<i class="bi bi-map text-primary fs-1 mb-3"></i>
|
||
<h5 class="fw-bold text-dark">公司位置地图</h5>
|
||
<p class="text-muted">北京市朝阳区科技园区创新大厦A座12层</p>
|
||
<a href="#" class="btn btn-primary btn-sm">
|
||
<i class="bi bi-geo-alt me-2"></i>查看详细地图
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-dark text-light 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-light">
|
||
专业的数字化采购管理解决方案，
|
||
助力养殖企业提升采购效率和经济效益。
|
||
</p>
|
||
</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="product.html" class="text-light text-decoration-none">功能特性</a></li>
|
||
<li><a href="solutions.html" class="text-light 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="cases.html" class="text-light text-decoration-none">客户案例</a></li>
|
||
<li><a href="#" class="text-light text-decoration-none">文档中心</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-4 col-md-4 mb-4">
|
||
<h6 class="fw-bold mb-3">联系我们</h6>
|
||
<ul class="list-unstyled text-light">
|
||
<li><i class="bi bi-telephone me-2"></i> 400-123-4567</li>
|
||
<li><i class="bi bi-envelope me-2"></i> info@niumall.com</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="my-4 bg-secondary">
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col-md-6">
|
||
<p class="text-light mb-0">© 2024 活牛采购智能数字化系统. 保留所有权利.</p>
|
||
</div>
|
||
<div class="col-md-6 text-md-end">
|
||
<a href="#" class="text-light text-decoration-none me-3">隐私政策</a>
|
||
<a href="#" class="text-light text-decoration-none">服务条款</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Bootstrap JS -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<!-- 自定义JS -->
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html> |