aiotagro/niumalll
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(website): 重构关于页面布局和内容

Browse Source 
- 更新页面布局，优化导航栏和面包屑导航
- 重新组织页面内容，突出公司使命和价值观
- 添加发展历程和核心团队介绍
- 更新合作伙伴展示方式
- 调整页脚内容，增加社交媒体链接
This commit is contained in:
mapleaf
2025-09-10 20:09:58 +08:00
parent 59cfe620fe
commit a9209b9c75
38 changed files with 10067 additions and 1989 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
website/contact.html
View File

@@ -59,75 +59,110 @@
</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>
<!-- 面包屑导航 -->
<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>
</section>
</nav>
<!-- 联系信息 -->
<!-- 联系我们 -->
<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>
<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 fw-bold">姓名 *</label>
<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 fw-bold">公司名称</label>
<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 fw-bold">手机号 *</label>
<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 fw-bold">邮箱 *</label>
<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="interest" class="form-label fw-bold">您感兴趣的是</label>
<select class="form-select" id="interest">
<option value="">请选择...</option>
<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="quote">报价咨询</option>
<option value="cooperation">合作洽谈</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 fw-bold">详细需求 *</label>
<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">
<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 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>
@@ -135,81 +170,18 @@
</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 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>
<!-- 快速联系卡片 -->
<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 class="mt-4">
<h5>工作时间</h5>
<p>周一至周五：9:00 - 18:00</p>
<p>周六至周日：10:00 - 16:00</p>
</div>
</div>
</div>
@@ -218,24 +190,62 @@
</div>
</section>
<!-- 地图区域 -->
<section class="bg-light py-5">
<!-- 常见问题 -->
<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-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 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>
@@ -245,60 +255,79 @@
</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="bg-dark text-light py-5">
<footer class="footer">
<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 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">
<h6 class="fw-bold mb-3">产品</h6>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">产品</h5>
<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>
<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">
<h6 class="fw-bold mb-3">资源</h6>
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
<h5 class="footer-title">支持</h5>
<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>
<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 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>
<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>
<hr class="my-4 bg-secondary">
<div class="row align-items-center">
<div class="col-md-6">
<p class="text-light mb-0">&copy; 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 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.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 自定义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>