512 lines
21 KiB
HTML
512 lines
21 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>
|
||
|
||
<!-- Bootstrap 5 CSS -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
|
||
|
||
<!-- Bootstrap Icons -->
|
||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css">
|
||
|
||
<!-- 自定义CSS -->
|
||
<link rel="stylesheet" href="css/style.css">
|
||
|
||
<!-- Chart.js -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
||
|
||
<!-- Chart.js CDN -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
||
|
||
<style>
|
||
:root {
|
||
--grass-green: #2e8b57;
|
||
--golden-yellow: #ffd700;
|
||
}
|
||
|
||
.hero-section {
|
||
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
|
||
url('images/grassland-banner.jpg') no-repeat center center;
|
||
background-size: cover;
|
||
min-height: 60vh;
|
||
color: white;
|
||
}
|
||
|
||
.feature-card {
|
||
transition: all 0.3s ease;
|
||
border: 2px solid var(--golden-yellow);
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.gold-border {
|
||
border: 3px solid var(--golden-yellow);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 顶部导航栏 -->
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-success sticky-top gold-border">
|
||
<div class="container">
|
||
<a class="navbar-brand fs-3 fw-bold" href="#">
|
||
<i class="bi bi-cloud-sun-fill me-2"></i>
|
||
锡林郭勒盟畜牧数字化管理平台
|
||
</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 active" href="#home">
|
||
<i class="bi bi-house-door me-1"></i> 首页
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#features">
|
||
<i class="bi bi-stack me-1"></i> 平台功能
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="data.html">
|
||
<i class="bi bi-bar-chart-line me-1"></i> 数据看板
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="news.html">
|
||
<i class="bi bi-newspaper me-1"></i> 新闻资讯
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="about.html">
|
||
<i class="bi bi-info-circle me-1"></i> 关于我们
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 英雄区域 -->
|
||
<section id="home" class="hero-section d-flex align-items-center">
|
||
<div class="container text-center text-white">
|
||
<h1 class="display-3 fw-bold mb-4">
|
||
畜牧数字化 赋能新牧区
|
||
</h1>
|
||
<p class="lead fs-4 mb-5">
|
||
打造锡林郭勒盟现代化畜牧业全产业链数字化管理平台
|
||
</p>
|
||
<div class="d-flex justify-content-center gap-4">
|
||
<a href="#features" class="btn btn-success btn-lg px-4 py-2">
|
||
<i class="bi bi-play-circle me-2"></i> 平台演示
|
||
</a>
|
||
<a href="#contact" class="btn btn-outline-light btn-lg px-4 py-2">
|
||
<i class="bi bi-telephone me-2"></i> 联系我们
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 功能展示区 -->
|
||
<section id="features" class="py-5 bg-light">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h2 class="fw-bold display-5 mb-3">
|
||
<i class="bi bi-stars text-success me-2"></i>
|
||
核心功能
|
||
</h2>
|
||
<p class="lead text-muted">六大数字化管理模块助力畜牧业现代化发展</p>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<!-- 养殖管理 -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card feature-card h-100">
|
||
<div class="card-body text-center p-4">
|
||
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
|
||
<i class="bi bi-egg-fill fs-1 text-success"></i>
|
||
</div>
|
||
<h3 class="h4">数字化养殖管理</h3>
|
||
<p class="text-muted">
|
||
全生命周期档案管理
|
||
饲喂计划与健康监测
|
||
电子耳标追溯系统
|
||
</p>
|
||
<a href="#" class="btn btn-outline-success">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 活体抵押 -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card feature-card h-100">
|
||
<div class="card-body text-center p-4">
|
||
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
|
||
<i class="bi bi-cash-coin fs-1 text-success"></i>
|
||
</div>
|
||
<h3 class="h4">活体抵押贷款</h3>
|
||
<p class="text-muted">
|
||
银行监管系统对接
|
||
资产评估与风险控制
|
||
贷款全流程数字化
|
||
</p>
|
||
<a href="#" class="btn btn-outline-success">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 保险监管 -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card feature-card h-100">
|
||
<div class="card-body text-center p-4">
|
||
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
|
||
<i class="bi bi-shield-check fs-1 text-success"></i>
|
||
</div>
|
||
<h3 class="h4">养殖保险监管</h3>
|
||
<p class="text-muted">
|
||
保险产品数字化对接
|
||
理赔流程透明化
|
||
风险预警系统
|
||
</p>
|
||
<a href="#" class="btn btn-outline-success">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 政府监管 -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card feature-card h-100">
|
||
<div class="card-body text-center p-4">
|
||
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
|
||
<i class="bi bi-building fs-1 text-success"></i>
|
||
</div>
|
||
<h3 class="h4">政府监管平台</h3>
|
||
<p class="text-muted">
|
||
畜牧业数据可视化
|
||
政策法规发布
|
||
产业分析报告
|
||
</p>
|
||
<a href="#" class="btn btn-outline-success">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 活牛交易 -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card feature-card h-100">
|
||
<div class="card-body text-center p-4">
|
||
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
|
||
<i class="bi bi-cart-check fs-1 text-success"></i>
|
||
</div>
|
||
<h3 class="h4">线上活牛交易</h3>
|
||
<p class="text-muted">
|
||
电子交易平台
|
||
质量认证体系
|
||
物流跟踪系统
|
||
</p>
|
||
<a href="#" class="btn btn-outline-success">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 牛肉商城 -->
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card feature-card h-100">
|
||
<div class="card-body text-center p-4">
|
||
<div class="bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3">
|
||
<i class="bi bi-shop fs-1 text-success"></i>
|
||
</div>
|
||
<h3 class="h4">优质牛肉商城</h3>
|
||
<p class="text-muted">
|
||
品牌直销平台
|
||
质量追溯系统
|
||
冷链物流对接
|
||
</p>
|
||
<a href="#" class="btn btn-outline-success">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数据可视化区 -->
|
||
<section id="data" class="py-5 bg-white">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h2 class="fw-bold display-5 mb-3">
|
||
<i class="bi bi-bar-chart-line text-success me-2"></i>
|
||
畜牧业数据看板
|
||
</h2>
|
||
<p class="lead text-muted">实时掌握锡林郭勒盟畜牧业发展动态</p>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h3 class="h4 text-center mb-4">牲畜存栏量统计</h3>
|
||
<div class="ratio ratio-16x9">
|
||
<canvas id="livestockChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h3 class="h4 text-center mb-4">牧草产量与价格</h3>
|
||
<div class="ratio ratio-16x9">
|
||
<canvas id="forageChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-4">
|
||
<a href="#" class="btn btn-success px-4">
|
||
<i class="bi bi-arrow-right-circle me-2"></i> 查看更多数据
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 新闻动态区 -->
|
||
<section id="news" class="py-5 bg-light">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h2 class="fw-bold display-5 mb-3">
|
||
<i class="bi bi-newspaper text-success me-2"></i>
|
||
行业动态
|
||
</h2>
|
||
<p class="lead text-muted">了解畜牧业最新政策与市场资讯</p>
|
||
</div>
|
||
|
||
<div class="row g-4 position-relative">
|
||
<!-- 新闻项1 -->
|
||
<div class="col-md-4">
|
||
<div class="card h-100">
|
||
<img src="images/news-1.jpg" class="card-img-top" alt="新闻图片1">
|
||
<div class="card-body">
|
||
<span class="badge bg-success mb-2">政策解读</span>
|
||
<h3 class="h5">锡林郭勒盟出台畜牧业数字化发展三年规划</h3>
|
||
<p class="text-muted small">2025-08-15</p>
|
||
<p class="card-text">规划提出到2027年实现全盟畜牧业数字化覆盖率90%以上...</p>
|
||
<a href="#" class="btn btn-link p-0 text-success">阅读全文 <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新闻项2 -->
|
||
<div class="col-md-4 d-none">
|
||
<div class="card h-100">
|
||
<img src="images/news-2.jpg" class="card-img-top" alt="新闻图片2">
|
||
<div class="card-body">
|
||
<span class="badge bg-success mb-2">市场动态</span>
|
||
<h3 class="h5">优质牛肉价格连续三月上涨</h3>
|
||
<p class="text-muted small">2025-08-10</p>
|
||
<p class="card-text">受市场需求增加影响，优质牛肉价格环比上涨8.5%...</p>
|
||
<a href="#" class="btn btn-link p-0 text-success">阅读全文 <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新闻项3 -->
|
||
<div class="col-md-4 d-none">
|
||
<div class="card h-100">
|
||
<img src="images/news-3.jpg" class="card-img-top" alt="新闻图片3">
|
||
<div class="card-body">
|
||
<span class="badge bg-success mb-2">技术前沿</span>
|
||
<h3 class="h5">区块链技术在畜牧业追溯系统中的应用</h3>
|
||
<p class="text-muted small">2025-08-05</p>
|
||
<p class="card-text">新型区块链技术可实现牲畜从养殖到餐桌的全流程追溯...</p>
|
||
<a href="#" class="btn btn-link p-0 text-success">阅读全文 <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-4">
|
||
<a href="#" class="btn btn-outline-success px-4">
|
||
<i class="bi bi-collection me-2"></i> 查看更多新闻
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 畜牧业数据看板 -->
|
||
|
||
|
||
<script>
|
||
// 牲畜存栏量统计图表
|
||
const livestockCtx = document.getElementById('livestockChart');
|
||
new Chart(livestockCtx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['牛', '羊', '马', '骆驼'],
|
||
datasets: [{
|
||
label: '存栏量(万头)',
|
||
data: [120, 85, 32, 8],
|
||
backgroundColor: [
|
||
'rgba(54, 162, 235, 0.7)',
|
||
'rgba(75, 192, 192, 0.7)',
|
||
'rgba(255, 159, 64, 0.7)',
|
||
'rgba(153, 102, 255, 0.7)'
|
||
],
|
||
borderWidth: 1
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: {
|
||
position: 'top',
|
||
},
|
||
title: {
|
||
display: true,
|
||
text: '牲畜存栏量统计'
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 牧草产量与价格图表
|
||
const forageCtx = document.getElementById('forageChart');
|
||
new Chart(forageCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||
datasets: [
|
||
{
|
||
label: '产量(万吨)',
|
||
data: [12, 19, 15, 22, 28, 35],
|
||
borderColor: 'rgb(75, 192, 192)',
|
||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||
yAxisID: 'y'
|
||
},
|
||
{
|
||
label: '价格(元/吨)',
|
||
data: [1800, 1750, 1850, 1900, 1950, 2000],
|
||
borderColor: 'rgb(255, 159, 64)',
|
||
backgroundColor: 'rgba(255, 159, 64, 0.2)',
|
||
yAxisID: 'y1'
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
interaction: {
|
||
mode: 'index',
|
||
intersect: false
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
text: '牧草产量与价格趋势'
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
type: 'linear',
|
||
display: true,
|
||
position: 'left',
|
||
title: {
|
||
display: true,
|
||
text: '产量(万吨)'
|
||
}
|
||
},
|
||
y1: {
|
||
type: 'linear',
|
||
display: true,
|
||
position: 'right',
|
||
title: {
|
||
display: true,
|
||
text: '价格(元/吨)'
|
||
},
|
||
grid: {
|
||
drawOnChartArea: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- 页脚 -->
|
||
<footer id="contact" class="bg-success text-white py-5">
|
||
<div class="container">
|
||
<div class="row g-4">
|
||
<div class="col-lg-4">
|
||
<h3 class="h4 mb-4">
|
||
<i class="bi bi-cloud-sun-fill me-2"></i>
|
||
锡林郭勒盟畜牧数字化管理平台
|
||
</h3>
|
||
<p>
|
||
打造现代化畜牧业全产业链数字化管理平台，推动锡林郭勒盟畜牧业高质量发展。
|
||
</p>
|
||
<div class="d-flex gap-3">
|
||
<a href="#" class="text-white fs-4"><i class="bi bi-wechat"></i></a>
|
||
<a href="#" class="text-white fs-4"><i class="bi bi-weibo"></i></a>
|
||
<a href="#" class="text-white fs-4"><i class="bi bi-youtube"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<h3 class="h4 mb-4">快速链接</h3>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><a href="index.html" class="text-white text-decoration-none">平台首页</a></li>
|
||
<li class="mb-2"><a href="index.html#features" class="text-white text-decoration-none">核心功能</a></li>
|
||
<li class="mb-2"><a href="data.html" class="text-white text-decoration-none">数据看板</a></li>
|
||
<li class="mb-2"><a href="news.html" class="text-white text-decoration-none">新闻资讯</a></li>
|
||
<li class="mb-2"><a href="about.html" class="text-white text-decoration-none">关于我们</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<h3 class="h4 mb-4">联系我们</h3>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2">
|
||
<i class="bi bi-geo-alt-fill me-2"></i>
|
||
内蒙古自治区锡林郭勒盟锡林浩特市
|
||
</li>
|
||
<li class="mb-2">
|
||
<i class="bi bi-telephone-fill me-2"></i>
|
||
0479-8888888
|
||
</li>
|
||
<li class="mb-2">
|
||
<i class="bi bi-envelope-fill me-2"></i>
|
||
contact@xlxumu.com
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="my-4 opacity-25">
|
||
|
||
<div class="text-center">
|
||
<p class="mb-0">
|
||
© 2025 锡林郭勒盟畜牧数字化管理平台. 保留所有权利 |
|
||
<a href="#" class="text-white text-decoration-none">隐私政策</a> |
|
||
<a href="#" class="text-white text-decoration-none">使用条款</a>
|
||
</p>
|
||
</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> |