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

修改大屏，继续完善官网

Browse Source
This commit is contained in:
dengyuxin
2025-09-15 17:53:30 +08:00
parent bc3b3d7b52
commit fab7e3e4ea
15 changed files with 1146 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
website/index.html
View File

@@ -5,7 +5,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宁夏智慧养殖监管平台 - 数字化养殖管理解决方案</title>
<meta name="description" content="宁夏智慧养殖监管平台，提供全面的数字化养殖管理解决方案，实时监控、数据分析、智能预警，助力养殖业数字化转型">
<meta name="keywords" content="智慧养殖,养殖监管,数字化管理,宁夏养殖,物联网养殖">
<meta name="keywords" content="智慧养殖,养殖监管,数字化管理,宁夏养殖,物联网养殖,农业科技,畜牧业管理">
<!-- SEO优化 -->
<meta name="author" content="宁夏智慧养殖监管平台">
<meta name="robots" content="index, follow">
<meta property="og:title" content="宁夏智慧养殖监管平台 - 数字化养殖管理解决方案">
<meta property="og:description" content="提供全面的数字化养殖管理解决方案，实时监控、数据分析、智能预警">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.nxfarm.com">
<meta property="og:image" content="assets/images/hero-image.png">
<meta name="twitter:card" content="summary_large_image">
<!-- 网站图标 -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="apple-touch-icon" href="assets/images/logo.svg">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
@@ -24,8 +38,8 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#home">
<i class="bi bi-cloud-fog2 me-2"></i>
宁夏智慧养殖监管平台
<img src="assets/images/logo.svg" alt="宁夏智慧养殖监管平台" height="40" class="me-2">
<span class="d-none d-md-inline">宁夏智慧养殖监管平台</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
@@ -85,7 +99,7 @@
</div>
</div>
<div class="col-lg-6 text-center">
<img src="assets/images/hero-image.png" alt="智慧养殖平台" class="img-fluid hero-image" style="max-width: 500px;">
<img src="assets/images/hero-image.png" alt="智慧养殖平台" class="img-fluid hero-image" style="width: 800px;height: 500px;">
</div>
</div>
</div>
@@ -161,7 +175,7 @@
<div class="col-md-4 mb-4">
<div class="feature-card">
<div class="feature-icon">
<i class="bi bi-map-marked"></i>
<i class="bi bi-geo-alt-fill"></i>
</div>
<h4>地图管理</h4>
<p>基于地理位置的可视化管理，直观展示养殖场分布和状态</p>
@@ -170,7 +184,7 @@
<div class="col-md-4 mb-4">
<div class="feature-card">
<div class="feature-icon">
<i class="bi bi-users"></i>
<i class="bi bi-shield-lock-fill"></i>
</div>
<h4>权限管理</h4>
<p>多级权限控制系统，确保数据安全和操作规范</p>
@@ -179,7 +193,7 @@
<div class="col-md-4 mb-4">
<div class="feature-card">
<div class="feature-icon">
<i class="bi bi-mobile-alt"></i>
<i class="bi bi-laptop"></i>
</div>
<h4>移动办公</h4>
<p>支持多终端访问，随时随地管理养殖业务</p>
@@ -193,7 +207,7 @@
<section id="technology" class="technology-section py-5 bg-dark text-white">
<div class="container">
<div class="text-center mb-5">
<h2 class="section-title">技术优势</h2>
<h2 class="section-title" style="color: #fff;">技术优势</h2>
<p class="section-subtitle">领先的技术架构，确保系统稳定可靠</p>
</div>
<div class="row">
@@ -213,8 +227,8 @@
</div>
<div class="col-lg-6">
<div class="tech-image text-center">
<img src="assets/images/tech-architecture.png" alt="技术架构" class="img-fluid rounded">
<p class="mt-2 text-muted">系统技术架构图</p>
<img src="assets/images/tech-architecture.png" alt="技术架构" class="img-fluid rounded" style="width: 600px;height: 400px;">
<p class="mt-2 text-muted" style="color: #fff;">系统技术架构图</p>
</div>
</div>
</div>
@@ -361,50 +375,75 @@
<h2 class="section-title">联系我们</h2>
<p class="section-subtitle">期待与您合作</p>
</div>
<div class="row">
<div class="row g-4 align-items-stretch">
<!-- 左侧：百度地图 -->
<div class="col-lg-6">
<div class="contact-info">
<div class="contact-item">
<i class="bi bi-geo-alt"></i>
<div>
<h5>地址</h5>
<p>宁夏回族自治区银川市金凤区</p>
</div>
</div>
<div class="contact-item">
<i class="bi bi-telephone"></i>
<div>
<h5>电话</h5>
<p>0951-88888888</p>
</div>
</div>
<div class="contact-item">
<i class="bi bi-envelope"></i>
<div>
<h5>邮箱</h5>
<p>info@nxfarm.com</p>
<div id="baidu-map-container" class="rounded shadow-sm" style="height:360px;width:100%;background:#f8f9fa;">
<div class="d-flex align-items-center justify-content-center h-100 text-muted">
<div class="text-center">
<div class="spinner-border text-primary mb-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p>地图加载中...</p>
</div>
</div>
</div>
</div>
<!-- 右侧：表单 -->
<div class="col-lg-6">
<div class="contact-form">
<h4>发送消息</h4>
<form>
<div class="mb-3">
<input type="text" class="form-control" placeholder="您的姓名" required>
<div class="contact-form p-4 bg-white rounded shadow-sm h-100">
<h4 class="mb-3">发送消息</h4>
<form id="contact-form" onsubmit="submitContactForm(event)">
<div class="row">
<div class="col-md-6 mb-3">
<input type="text" class="form-control" placeholder="您的姓名" required>
</div>
<div class="col-md-6 mb-3">
<input type="email" class="form-control" placeholder="您的邮箱" required>
</div>
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="您的邮箱" required>
<input type="tel" class="form-control" placeholder="您的电话" required>
</div>
<div class="mb-3">
<textarea class="form-control" rows="4" placeholder="您的消息" required></textarea>
<textarea class="form-control" rows="5" placeholder="其他说明" required></textarea>
</div>
<button type="submit" class="btn btn-primary w-100">发送消息</button>
</form>
</div>
</div>
</div>
<!-- 底部：联系信息 -->
<div class="row text-center mt-5 g-4">
<div class="col-12 col-md-3">
<div class="p-3">
<div class="display-6 text-primary mb-2"><i class="bi bi-geo-alt-fill"></i></div>
<h6 class="mb-1">地址</h6>
<div class="text-muted small">宁夏回族自治区银川市金凤区</div>
</div>
</div>
<div class="col-12 col-md-3">
<div class="p-3">
<div class="display-6 text-success mb-2"><i class="bi bi-envelope-fill"></i></div>
<h6 class="mb-1">Email</h6>
<div class="text-muted small">info@nxfarm.com</div>
</div>
</div>
<div class="col-12 col-md-3">
<div class="p-3">
<div class="display-6 text-info mb-2"><i class="bi bi-globe"></i></div>
<h6 class="mb-1">官网</h6>
<div class="text-muted small">www.nxfarm.com</div>
</div>
</div>
<div class="col-12 col-md-3">
<div class="p-3">
<div class="display-6 text-warning mb-2"><i class="bi bi-telephone-outbound-fill"></i></div>
<h6 class="mb-1">电话</h6>
<div class="text-muted small">0951-88888888</div>
</div>
</div>
</div>
</div>
</section>
@@ -427,5 +466,72 @@
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<!-- 自定义脚本 -->
<script src="assets/js/script.js"></script>
<!-- 百度地图API -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=SOawZTeQbxdgrKYYx0o2hn34G0DyU2uo"></script>
<script>
// 初始化百度地图
function initBaiduMap() {
try {
// 创建地图实例
var map = new BMap.Map("baidu-map-container");
// 设置中心点坐标（银川市金凤区）
var point = new BMap.Point(106.278179, 38.46637);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
// 启用滚轮放大缩小
map.enableScrollWheelZoom(true);
// 添加地图类型控件
map.addControl(new BMap.MapTypeControl());
// 添加缩放控件
map.addControl(new BMap.NavigationControl());
// 添加比例尺控件
map.addControl(new BMap.ScaleControl());
// 创建标注
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 创建信息窗口
var infoWindow = new BMap.InfoWindow("<div style='padding:10px;'><h6>宁夏智慧养殖监管平台</h6><p>宁夏·银川（金凤区）</p></div>");
// 点击标注显示信息窗口
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, point);
});
// 默认显示信息窗口
map.openInfoWindow(infoWindow, point);
console.log('百度地图初始化成功');
} catch (error) {
console.error('百度地图初始化失败:', error);
// 如果地图加载失败，显示备用内容
document.getElementById('baidu-map-container').innerHTML =
'<div class="d-flex align-items-center justify-content-center h-100 bg-light text-muted">' +
'<div class="text-center">' +
'<i class="bi bi-geo-alt-fill display-4 mb-3"></i>' +
'<h5>地图加载中...</h5>' +
'<p>如果地图无法显示，请检查网络连接</p>' +
'</div>' +
'</div>';
}
}
// 页面加载完成后初始化地图
document.addEventListener('DOMContentLoaded', function() {
// 延迟初始化，确保百度地图API已加载
setTimeout(initBaiduMap, 1000);
});
// 如果百度地图API加载失败的回调
window.BMap_loadScriptTime = (new Date).getTime();
</script>
</body>
</html>