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

feat(website): 优化新闻轮播功能并更新导航链接

Browse Source
This commit is contained in:
ylweng
2025-08-21 03:22:59 +08:00
parent 5ff7d38904
commit 451bab4a96
6 changed files with 960 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
frontend/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>

15
frontend/website/css/style.css
View File

@@ -68,6 +68,21 @@ body {
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 {

434
frontend/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>

27
frontend/website/index.html
View File

@@ -76,17 +76,17 @@
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#data">
<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">
<i class="bi bi-newspaper me-1"></i> 行业动态
<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">
<a class="nav-link" href="about.html">
<i class="bi bi-info-circle me-1"></i> 关于我们
</a>
</li>
@@ -292,7 +292,8 @@
<p class="lead text-muted">了解畜牧业最新政策与市场资讯</p>
</div>
<div class="row g-4">
<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">
@@ -306,7 +307,8 @@
</div>
</div>
<div class="col-md-4">
<!-- 新闻项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">
@@ -319,7 +321,8 @@
</div>
</div>
<div class="col-md-4">
<!-- 新闻项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">
@@ -461,11 +464,11 @@
<div class="col-lg-4">
<h3 class="h4 mb-4">快速链接</h3>
<ul class="list-unstyled">
<li class="mb-2"><a href="#home" class="text-white text-decoration-none">平台首页</a></li>
<li class="mb-2"><a href="#features" class="text-white text-decoration-none">核心功能</a></li>
<li class="mb-2"><a href="#data" class="text-white text-decoration-none">数据看板</a></li>
<li class="mb-2"><a href="#news" class="text-white text-decoration-none">行业动态</a></li>
<li class="mb-2"><a href="#about" class="text-white text-decoration-none">关于我们</a></li>
<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>

59
frontend/website/js/main.js
View File

@@ -28,20 +28,65 @@ document.addEventListener('DOMContentLoaded', function() {
});
// 新闻轮播
const newsItems = document.querySelectorAll('#news .card');
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 showNextNews() {
newsItems[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % newsItems.length;
newsItems[currentIndex].classList.add('active');
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;
}
// 初始化第一个新闻项
newsItems[0].classList.add('active');
showNews(0);
// 每5秒自动轮播
setInterval(showNextNews, 5000);
setInterval(() => {
const nextIndex = (currentIndex + 1) % newsItems.length;
showNews(nextIndex);
}, 5000);
}
});

246
frontend/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>