Files
niumalll/website/contact.html

333 lines
18 KiB
HTML
Raw Normal View History

<!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>&copy; 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>