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

更新项目文件结构，统一文档风格

Browse Source
This commit is contained in:
ylweng
2025-09-01 02:45:51 +08:00
parent 5ea25b7bac
commit 216cf80eab
95 changed files with 210 additions and 75446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
website/about.html Normal file
View File

@@ -0,0 +1,198 @@
<!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.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- 自定义CSS -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="index.html">
<i class="bi bi-cloud-sun-fill me-2"></i>
<span>锡林郭勒盟畜牧数字化管理平台</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="index.html#features">平台功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="data.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="about.html">关于我们</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 蒙古族风格装饰条 -->
<div class="gold-pattern"></div>
<!-- 关于我们内容 -->
<section class="py-5 mt-5">
<div class="container">
<div class="text-center mb-5">
<h1 class="fw-bold display-4 mb-3">关于我们</h1>
<p class="lead text-muted">锡林郭勒盟畜牧数字化管理平台致力于推动畜牧业现代化发展</p>
</div>
<div class="row g-5 align-items-center mb-5">
<div class="col-lg-6">
<h2 class="h3 fw-bold text-success mb-4">平台简介</h2>
<p>锡林郭勒盟畜牧数字化管理平台是由锡林郭勒盟政府主导建设的现代化畜牧业管理平台。我们运用先进的数字化技术，为畜牧业全产业链提供智能化解决方案。</p>
<p>平台整合了养殖管理、疫病防控、质量追溯、市场交易等多个模块，实现了畜牧业生产、经营、管理和服务的数字化转型。</p>
<p>我们的目标是打造全国领先的畜牧业数字化管理示范平台，为锡林郭勒盟建设绿色农畜产品生产加工基地提供有力支撑。</p>
</div>
<div class="col-lg-6">
<img src="images/about-1.jpg" alt="平台概览" class="img-fluid rounded shadow">
</div>
</div>
<div class="row g-5 align-items-center mb-5">
<div class="col-lg-6 order-lg-2">
<h2 class="h3 fw-bold text-success mb-4">我们的使命</h2>
<p>推动锡林郭勒盟畜牧业高质量发展，提升畜牧业生产效率和产品质量，保障食品安全，促进牧民增收。</p>
<p>通过数字化技术赋能传统畜牧业，实现精准养殖、智能管理和科学决策，打造现代化畜牧业新模式。</p>
<p>构建完善的畜牧业全产业链数字化生态，推动畜牧业与信息技术深度融合，引领行业发展。</p>
</div>
<div class="col-lg-6 order-lg-1">
<img src="images/about-2.jpg" alt="我们的使命" class="img-fluid rounded shadow">
</div>
</div>
<div class="text-center mt-5">
<h2 class="fw-bold display-5 mb-4">核心团队</h2>
<p class="lead text-muted mb-5">我们拥有一支由行业专家、技术精英和管理人才组成的多元化团队</p>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100 border-success">
<div class="card-body text-center">
<div class="bg-success bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
<i class="bi bi-person-circle fs-1 text-success"></i>
</div>
<h3 class="h5">张明华</h3>
<p class="text-success mb-2">技术总监</p>
<p class="text-muted small">10年畜牧业信息化建设经验，主导多个省级数字化农业项目</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 border-success">
<div class="card-body text-center">
<div class="bg-success bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
<i class="bi bi-person-circle fs-1 text-success"></i>
</div>
<h3 class="h5">李雪梅</h3>
<p class="text-success mb-2">产品经理</p>
<p class="text-muted small">专注于畜牧业数字化产品设计，擅长用户需求分析和体验优化</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 border-success">
<div class="card-body text-center">
<div class="bg-success bg-opacity-10 rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
<i class="bi bi-person-circle fs-1 text-success"></i>
</div>
<h3 class="h5">王建国</h3>
<p class="text-success mb-2">运营总监</p>
<p class="text-muted small">畜牧业专家，熟悉行业政策法规，具有丰富的项目运营经验</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer 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>

95
website/css/style.css Normal file
View File

@@ -0,0 +1,95 @@
/* 基础样式重置 */
:root {
--grass-green: #2e8b57;
--golden-yellow: #ffd700;
--dark-green: #1e5631;
--light-gold: #ffec80;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
}
/* 蒙古族风格装饰元素 */
.gold-pattern {
background-image: url('../images/gold-pattern.png');
background-repeat: repeat-x;
height: 10px;
}
/* 导航栏增强 */
.navbar {
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.navbar.scrolled {
background-color: var(--dark-green) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 英雄区域动画 */
.hero-section {
animation: fadeIn 1.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 功能卡片增强 */
.feature-card {
border-radius: 12px;
overflow: hidden;
}
.feature-card .card-body {
position: relative;
z-index: 1;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--grass-green), var(--dark-green));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
}
.feature-card:hover::before {
opacity: 0.1;
}
/* 轮播指示器样式 */
.carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ccc;
border: none;
margin: 0 5px;
transition: background-color 0.3s ease;
}
.carousel-indicators button.active {
background-color: var(--grass-green);
}
/* 响应式调整 */
@media (max-width: 768px) {
.hero-section {
min-height: 50vh;
}
.display-3 {
font-size: 2.5rem;
}
}

434
website/data.html Normal file
View File

@@ -0,0 +1,434 @@
<!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.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- 自定义CSS -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="index.html">
<i class="bi bi-cloud-sun-fill me-2"></i>
<span>锡林郭勒盟畜牧数字化管理平台</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="index.html#features">平台功能</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="data.html">数据看板</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">新闻资讯</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">关于我们</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 蒙古族风格装饰条 -->
<div class="gold-pattern"></div>
<!-- 数据看板内容 -->
<section class="py-5 mt-5">
<div class="container">
<div class="text-center mb-5">
<h1 class="fw-bold display-4 mb-3">畜牧业数据看板</h1>
<p class="lead text-muted">实时掌握锡林郭勒盟畜牧业发展动态</p>
</div>
<!-- 数据统计卡片 -->
<div class="row g-4 mb-5">
<div class="col-md-3">
<div class="card text-white bg-success h-100">
<div class="card-body text-center">
<i class="bi bi-cow fs-1 mb-3"></i>
<h3 class="display-5 fw-bold">120万</h3>
<p class="card-text">牛存栏量</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-success h-100">
<div class="card-body text-center">
<i class="bi bi-shop fs-1 mb-3"></i>
<h3 class="display-5 fw-bold">85万</h3>
<p class="card-text">羊存栏量</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-success h-100">
<div class="card-body text-center">
<i class="bi bi-currency-dollar fs-1 mb-3"></i>
<h3 class="display-5 fw-bold">2.8亿</h3>
<p class="card-text">年产值(元)</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-success h-100">
<div class="card-body text-center">
<i class="bi bi-people fs-1 mb-3"></i>
<h3 class="display-5 fw-bold">1.2万</h3>
<p class="card-text">牧户数</p>
</div>
</div>
</div>
</div>
<!-- 图表区域 -->
<div class="row g-4 mb-5">
<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="row g-4 mb-5">
<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="beefProductionChart"></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="incomeChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- 数据表格 -->
<div class="card">
<div class="card-body">
<h3 class="h4 mb-4">各旗县畜牧业数据对比</h3>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-success">
<tr>
<th>旗县</th>
<th>牛存栏量(万头)</th>
<th>羊存栏量(万只)</th>
<th>马存栏量(万匹)</th>
<th>年产值(万元)</th>
<th>同比增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>锡林浩特市</td>
<td>35.2</td>
<td>28.6</td>
<td>8.3</td>
<td>8600</td>
<td class="text-success">+5.2%</td>
</tr>
<tr>
<td>二连浩特市</td>
<td>22.8</td>
<td>18.4</td>
<td>5.1</td>
<td>5400</td>
<td class="text-success">+3.8%</td>
</tr>
<tr>
<td>阿巴嘎旗</td>
<td>18.6</td>
<td>15.2</td>
<td>4.7</td>
<td>4200</td>
<td class="text-danger">-1.2%</td>
</tr>
<tr>
<td>苏尼特左旗</td>
<td>15.4</td>
<td>12.8</td>
<td>3.9</td>
<td>3800</td>
<td class="text-success">+2.5%</td>
</tr>
<tr>
<td>苏尼特右旗</td>
<td>12.9</td>
<td>10.7</td>
<td>3.2</td>
<td>3100</td>
<td class="text-success">+4.1%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer 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>
<!-- 图表脚本 -->
<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
}
}
}
}
});
// 月度牛肉产量趋势
const beefProductionCtx = document.getElementById('beefProductionChart');
new Chart(beefProductionCtx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [{
label: '牛肉产量(吨)',
data: [8500, 9200, 10500, 11800, 12600, 13400],
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
tension: 0.1
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: '月度牛肉产量趋势'
}
}
}
});
// 畜牧业收入分布
const incomeCtx = document.getElementById('incomeChart');
new Chart(incomeCtx, {
type: 'doughnut',
data: {
labels: ['牛肉销售', '羊肉销售', '奶制品', '其他'],
datasets: [{
label: '收入占比',
data: [45, 35, 15, 5],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)'
]
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: '畜牧业收入分布'
}
}
}
});
</script>
</body>
</html>

BIN
website/images/grassland-banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 KiB

BIN
website/images/news-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
website/images/news-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
website/images/news-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1000 KiB

512
website/index.html Normal file
View File

@@ -0,0 +1,512 @@
<!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>

92
website/js/main.js Normal file
View File

@@ -0,0 +1,92 @@
// 导航栏滚动效果
document.addEventListener('DOMContentLoaded', function() {
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 70,
behavior: 'smooth'
});
}
});
});
// 新闻轮播
const newsContainer = document.querySelector('#news .row');
const newsItems = document.querySelectorAll('#news .col-md-4');
if (newsItems.length > 0) {
// 创建轮播指示器
const indicatorsContainer = document.createElement('div');
indicatorsContainer.className = 'carousel-indicators d-flex justify-content-center mt-3';
// 为每个新闻项创建指示器
newsItems.forEach((item, index) => {
const indicator = document.createElement('button');
indicator.type = 'button';
indicator.className = index === 0 ? 'active' : '';
indicator.setAttribute('data-bs-target', '#news');
indicator.setAttribute('data-bs-slide-to', index.toString());
indicator.addEventListener('click', () => {
showNews(index);
});
indicatorsContainer.appendChild(indicator);
});
// 将指示器添加到新闻区域
newsContainer.parentNode.insertBefore(indicatorsContainer, newsContainer.nextSibling);
let currentIndex = 0;
function showNews(index) {
// 隐藏所有新闻项
newsItems.forEach(item => {
item.classList.remove('d-block');
item.classList.add('d-none');
});
// 显示指定新闻项
newsItems[index].classList.remove('d-none');
newsItems[index].classList.add('d-block');
// 更新指示器
const indicators = indicatorsContainer.querySelectorAll('button');
indicators.forEach((indicator, i) => {
if (i === index) {
indicator.classList.add('active');
} else {
indicator.classList.remove('active');
}
});
currentIndex = index;
}
// 初始化第一个新闻项
showNews(0);
// 每5秒自动轮播
setInterval(() => {
const nextIndex = (currentIndex + 1) % newsItems.length;
showNews(nextIndex);
}, 5000);
}
});

246
website/news.html Normal file
View File

@@ -0,0 +1,246 @@
<!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.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- 自定义CSS -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="index.html">
<i class="bi bi-cloud-sun-fill me-2"></i>
<span>锡林郭勒盟畜牧数字化管理平台</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="index.html#features">平台功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="data.html">数据看板</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="news.html">新闻资讯</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">关于我们</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 蒙古族风格装饰条 -->
<div class="gold-pattern"></div>
<!-- 新闻资讯内容 -->
<section class="py-5 mt-5">
<div class="container">
<div class="text-center mb-5">
<h1 class="fw-bold display-4 mb-3">行业动态</h1>
<p class="lead text-muted">了解畜牧业最新政策与市场资讯</p>
</div>
<div class="row g-4 mb-5">
<!-- 分类筛选 -->
<div class="col-12">
<div class="d-flex flex-wrap gap-2 justify-content-center">
<button class="btn btn-success active" type="button">全部</button>
<button class="btn btn-outline-success" type="button">政策解读</button>
<button class="btn btn-outline-success" type="button">市场动态</button>
<button class="btn btn-outline-success" type="button">技术前沿</button>
<button class="btn btn-outline-success" type="button">行业报告</button>
</div>
</div>
</div>
<div class="row g-4">
<!-- 新闻项1 -->
<div class="col-md-6 col-lg-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-6 col-lg-4">
<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-6 col-lg-4">
<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>
<!-- 新闻项4 -->
<div class="col-md-6 col-lg-4">
<div class="card h-100">
<img src="images/news-1.jpg" class="card-img-top" alt="新闻图片4">
<div class="card-body">
<span class="badge bg-success mb-2">行业报告</span>
<h3 class="h5">2025年上半年锡林郭勒盟畜牧业发展报告</h3>
<p class="text-muted small">2025-07-20</p>
<p class="card-text">报告显示，上半年全盟畜牧业总产值同比增长6.8%，数字化转型成效显著...</p>
<a href="#" class="btn btn-link p-0 text-success">阅读全文 <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<!-- 新闻项5 -->
<div class="col-md-6 col-lg-4">
<div class="card h-100">
<img src="images/news-2.jpg" class="card-img-top" alt="新闻图片5">
<div class="card-body">
<span class="badge bg-success mb-2">政策解读</span>
<h3 class="h5">国家出台草原生态保护补助奖励政策</h3>
<p class="text-muted small">2025-07-15</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>
<!-- 新闻项6 -->
<div class="col-md-6 col-lg-4">
<div class="card h-100">
<img src="images/news-3.jpg" class="card-img-top" alt="新闻图片6">
<div class="card-body">
<span class="badge bg-success mb-2">市场动态</span>
<h3 class="h5">锡林郭勒盟羊肉获欧盟有机认证</h3>
<p class="text-muted small">2025-07-10</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="row mt-5">
<div class="col-12">
<nav aria-label="新闻分页">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">上一页</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer 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>