mapleaf
a9209b9c75
- 更新页面布局，优化导航栏和面包屑导航 - 重新组织页面内容，突出公司使命和价值观 - 添加发展历程和核心团队介绍 - 更新合作伙伴展示方式 - 调整页脚内容，增加社交媒体链接
333 lines
18 KiB
HTML
333 lines
18 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>
|
||
|
||
<!-- 面包屑导航 -->
|
||
<nav aria-label="breadcrumb" class="pt-5 mt-5">
|
||
<div class="container">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="index.html">首页</a></li>
|
||
<li class="breadcrumb-item active" aria-current="page">联系我们</li>
|
||
</ol>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 联系我们 -->
|
||
<section class="py-5">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h1 class="display-5 fw-bold mb-4">联系我们</h1>
|
||
<p class="lead">我们随时准备为您提供帮助，欢迎通过以下方式联系我们</p>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<!-- 联系方式 -->
|
||
<div class="col-lg-4">
|
||
<div class="card h-100 border-0 shadow-sm">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon mx-auto mb-4">
|
||
<i class="fas fa-map-marker-alt"></i>
|
||
</div>
|
||
<h5 class="card-title">公司地址</h5>
|
||
<p class="card-text">北京市朝阳区xxx街道xxx号<br>邮编：100000</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<div class="card h-100 border-0 shadow-sm">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon mx-auto mb-4">
|
||
<i class="fas fa-phone-alt"></i>
|
||
</div>
|
||
<h5 class="card-title">联系电话</h5>
|
||
<p class="card-text">客服热线：400-xxx-xxxx<br>技术支持：010-xxxx-xxxx</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<div class="card h-100 border-0 shadow-sm">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon mx-auto mb-4">
|
||
<i class="fas fa-envelope"></i>
|
||
</div>
|
||
<h5 class="card-title">电子邮箱</h5>
|
||
<p class="card-text">商务合作：info@example.com<br>技术支持：support@example.com</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-5">
|
||
<div class="col-lg-6">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body">
|
||
<h3 class="card-title mb-4">在线留言</h3>
|
||
<form id="contactForm" class="needs-validation" novalidate>
|
||
<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="company" class="form-label">公司名称</label>
|
||
<input type="text" class="form-control" id="company">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="phone" class="form-label">联系电话 <span class="text-danger">*</span></label>
|
||
<input type="tel" class="form-control" id="phone" 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="subject" class="form-label">主题 <span class="text-danger">*</span></label>
|
||
<select class="form-select" id="subject" required>
|
||
<option value="">请选择</option>
|
||
<option value="product">产品咨询</option>
|
||
<option value="demo">产品演示</option>
|
||
<option value="price">报价咨询</option>
|
||
<option value="support">技术支持</option>
|
||
<option value="other">其他</option>
|
||
</select>
|
||
<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">
|
||
<button class="btn btn-primary btn-lg" type="submit">
|
||
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
|
||
提交留言
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body">
|
||
<h3 class="card-title mb-4">办公地图</h3>
|
||
<div class="ratio ratio-16x9">
|
||
<iframe src="https://map.baidu.com/" title="公司位置" loading="lazy"></iframe>
|
||
</div>
|
||
<div class="mt-4">
|
||
<h5>工作时间</h5>
|
||
<p>周一至周五：9:00 - 18:00</p>
|
||
<p>周六至周日：10:00 - 16:00</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 常见问题 -->
|
||
<section class="py-5 bg-light">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h2 class="display-6 mb-3">常见问题</h2>
|
||
<p class="text-muted">您可能关心的问题</p>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-8 mx-auto">
|
||
<div class="accordion" id="faqAccordion">
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingOne">
|
||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
|
||
如何获取产品演示？
|
||
</button>
|
||
</h2>
|
||
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
您可以通过填写上方联系表单选择"产品演示"主题，我们的销售顾问将在24小时内与您联系并安排演示。您也可以直接致电我们的客服热线400-xxx-xxxx。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingTwo">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
|
||
系统支持哪些设备访问？
|
||
</button>
|
||
</h2>
|
||
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
我们的系统支持PC端和移动端访问，包括Windows、Mac、iOS、Android等主流操作系统。同时我们也提供微信小程序版本，方便您随时处理业务。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingThree">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
|
||
如何进行系统部署？
|
||
</button>
|
||
</h2>
|
||
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
我们提供云部署和本地部署两种方式。云部署由我们负责运维，您只需通过浏览器访问即可；本地部署需要您的IT团队配合，我们提供全程技术支持。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingFour">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour">
|
||
系统安全性如何保障？
|
||
</button>
|
||
</h2>
|
||
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
我们采用多层安全防护机制，包括数据加密传输、访问权限控制、定期安全审计等。同时通过了ISO27001信息安全管理体系认证，确保您的数据安全。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="py-5">
|
||
<div class="container">
|
||
<div class="card bg-primary text-white border-0 shadow">
|
||
<div class="card-body p-5 text-center">
|
||
<h3 class="mb-3">立即体验活牛采购智能数字化系统</h3>
|
||
<p class="mb-4">申请免费试用，感受数字化带来的效率提升</p>
|
||
<a href="#" class="btn btn-light btn-lg">免费试用</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-4 mb-4 mb-lg-0">
|
||
<h5 class="footer-title">活牛采购智能数字化系统</h5>
|
||
<p>专业的活牛采购全流程数字化管理解决方案，提升采购效率，降低经营风险。</p>
|
||
<div class="d-flex">
|
||
<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
|
||
<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
|
||
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
|
||
<h5 class="footer-title">产品</h5>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><a href="product.html">功能介绍</a></li>
|
||
<li class="mb-2"><a href="solutions.html">解决方案</a></li>
|
||
<li class="mb-2"><a href="cases.html">客户案例</a></li>
|
||
<li class="mb-2"><a href="news.html">更新日志</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
|
||
<h5 class="footer-title">支持</h5>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><a href="#">帮助中心</a></li>
|
||
<li class="mb-2"><a href="#">在线客服</a></li>
|
||
<li class="mb-2"><a href="#">开发者文档</a></li>
|
||
<li class="mb-2"><a href="#">合作伙伴</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-4 col-md-4">
|
||
<h5 class="footer-title">联系我们</h5>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区xxx街道xxx号</li>
|
||
<li class="mb-2"><i class="fas fa-phone me-2"></i> 400-xxx-xxxx</li>
|
||
<li class="mb-2"><i class="fas fa-envelope me-2"></i> info@example.com</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="copyright text-center">
|
||
<p>© 2023 活牛采购智能数字化系统. 保留所有权利。</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 返回顶部按钮 -->
|
||
<button class="back-to-top" aria-label="返回顶部">
|
||
<i class="fas fa-arrow-up"></i>
|
||
</button>
|
||
|
||
<!-- Bootstrap JS -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||
<!-- AOS Animation -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||
<!-- 自定义脚本 -->
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html> |