Files
nxxmdata/website/news.html

741 lines
42 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻动态 - 宁夏智慧养殖监管平台</title>
<meta name="description" content="宁夏智慧养殖监管平台最新资讯、行业动态、技术更新和政策解读">
<meta name="keywords" content="智慧养殖,新闻动态,行业资讯,技术更新,政策解读">
<!-- Open Graph Meta Tags -->
<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/news.html">
<!-- <meta property="og:image" content="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">
<!-- 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="assets/css/style.css">
<!-- Favicon -->
<!-- <link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="apple-touch-icon" href="assets/images/logo.svg"> -->
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<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="index.html#technology">技术优势</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#systems">系统入口</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#cases">客户案例</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="index.html#contact">联系我们</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-light ms-2" href="download.html">
<i class="bi bi-download me-1"></i>下载中心
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 页面头部 -->
<section class="hero-section" style="min-height: 40vh; background: #0d6efd;">
<div class="container">
<div class="row align-items-center" style="min-height: 40vh;">
<div class="col-lg-8">
<nav aria-label="breadcrumb" class="mb-3">
<ol class="breadcrumb text-white-50" style="margin-top: 20px;">
<li class="breadcrumb-item"><a href="index.html" class="text-white-50">首页</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">新闻动态</li>
</ol>
</nav>
<h1 class="display-4 fw-bold text-white mb-4">
新闻动态
</h1>
<p class="lead text-white mb-4">
了解最新的行业资讯、技术更新和政策动态,掌握智慧养殖发展趋势
</p>
</div>
</div>
</div>
</section>
<!-- 新闻内容 -->
<section class="py-5">
<div class="container">
<div class="row">
<!-- 新闻列表 -->
<div class="col-lg-8">
<!-- 新闻分类标签 -->
<div class="mb-4">
<div class="btn-group" role="group" aria-label="新闻分类">
<button type="button" class="btn btn-outline-primary active" data-category="all" >全部</button>
<button type="button" class="btn btn-outline-primary" data-category="platform">平台更新</button>
<button type="button" class="btn btn-outline-primary" data-category="industry">行业动态</button>
<button type="button" class="btn btn-outline-primary" data-category="policy">政策解读</button>
<button type="button" class="btn btn-outline-primary" data-category="technology">技术分享</button>
</div>
</div>
<!-- 新闻文章列表 -->
<div class="news-list">
<!-- 新闻文章1 -->
<article class="news-article mb-4" data-category="platform">
<div class="card shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-3">
<span class="badge bg-primary">平台更新</span>
<small class="text-muted">2025-01-15</small>
</div>
<h3 class="card-title h4 mb-3">
<a href="#news1" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#newsModal1">
平台v2.0版本发布,新增智能预警和移动端优化功能
</a>
</h3>
<p class="card-text text-muted mb-3">
宁夏智慧养殖监管平台v2.0版本正式发布,本次更新重点加强了智能预警系统,优化了移动端用户体验,新增多项实用功能...
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="text-muted small">
<i class="bi bi-eye me-1"></i>1,234 次阅读
<i class="bi bi-chat-dots ms-3 me-1"></i>15 条评论
</div>
<a href="#news1" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newsModal1">
阅读全文 <i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
</article>
<!-- 新闻文章2 -->
<article class="news-article mb-4" data-category="industry">
<div class="card shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-3">
<span class="badge bg-success">行业动态</span>
<small class="text-muted">2025-01-10</small>
</div>
<h3 class="card-title h4 mb-3">
<a href="#news2" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#newsModal2">
智慧养殖技术研讨会成功举办,行业专家共话发展前景
</a>
</h3>
<p class="card-text text-muted mb-3">
由宁夏农业农村厅主办的智慧养殖技术研讨会在银川成功举办,来自全国各地的行业专家、学者和企业代表齐聚一堂...
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="text-muted small">
<i class="bi bi-eye me-1"></i>2,156 次阅读
<i class="bi bi-chat-dots ms-3 me-1"></i>28 条评论
</div>
<a href="#news2" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newsModal2">
阅读全文 <i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
</article>
<!-- 新闻文章3 -->
<article class="news-article mb-4" data-category="policy">
<div class="card shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-3">
<span class="badge bg-warning text-dark">政策解读</span>
<small class="text-muted">2025-01-05</small>
</div>
<h3 class="card-title h4 mb-3">
<a href="#news3" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#newsModal3">
养殖行业政策解读:数字化转型迎来新机遇
</a>
</h3>
<p class="card-text text-muted mb-3">
近日,农业农村部发布了关于推进养殖业数字化转型的指导意见,为智慧养殖发展指明了方向,带来了新的发展机遇...
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="text-muted small">
<i class="bi bi-eye me-1"></i>3,421 次阅读
<i class="bi bi-chat-dots ms-3 me-1"></i>42 条评论
</div>
<a href="#news3" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newsModal3">
阅读全文 <i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
</article>
<!-- 新闻文章4 -->
<article class="news-article mb-4" data-category="technology">
<div class="card shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-3">
<span class="badge bg-info">技术分享</span>
<small class="text-muted">2024-12-28</small>
</div>
<h3 class="card-title h4 mb-3">
<a href="#news4" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#newsModal4">
物联网技术在智慧养殖中的应用与实践
</a>
</h3>
<p class="card-text text-muted mb-3">
物联网技术作为智慧养殖的核心技术之一通过传感器、RFID、GPS等设备实现对养殖环境和动物状态的实时监控...
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="text-muted small">
<i class="bi bi-eye me-1"></i>1,876 次阅读
<i class="bi bi-chat-dots ms-3 me-1"></i>23 条评论
</div>
<a href="#news4" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newsModal4">
阅读全文 <i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
</article>
<!-- 新闻文章5 -->
<article class="news-article mb-4" data-category="industry">
<div class="card shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-3">
<span class="badge bg-success">行业动态</span>
<small class="text-muted">2024-12-20</small>
</div>
<h3 class="card-title h4 mb-3">
<a href="#news5" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#newsModal5">
宁夏智慧养殖示范基地建设取得重要进展
</a>
</h3>
<p class="card-text text-muted mb-3">
宁夏回族自治区智慧养殖示范基地建设项目取得重要进展首批10个示范基地已完成智能化改造成效显著...
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="text-muted small">
<i class="bi bi-eye me-1"></i>2,543 次阅读
<i class="bi bi-chat-dots ms-3 me-1"></i>31 条评论
</div>
<a href="#news5" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newsModal5">
阅读全文 <i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
</article>
</div>
<!-- 分页 -->
<nav aria-label="新闻分页">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</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 class="col-lg-4">
<!-- 搜索框 -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">搜索新闻</h5>
</div>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="输入关键词搜索...">
<button class="btn btn-primary" type="button">
<i class="bi bi-search"></i>
</button>
</div>
</div>
</div>
<!-- 热门新闻 -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">热门新闻</h5>
</div>
<div class="card-body">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action border-0 px-0">
<div class="d-flex align-items-start">
<span class="badge bg-danger me-2">1</span>
<small class="text-muted">智慧养殖技术研讨会成功举办</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action border-0 px-0">
<div class="d-flex align-items-start">
<span class="badge bg-warning me-2">2</span>
<small class="text-muted">平台v2.0版本发布</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action border-0 px-0">
<div class="d-flex align-items-start">
<span class="badge bg-success me-2">3</span>
<small class="text-muted">养殖行业政策解读</small>
</div>
</a>
</div>
</div>
</div>
<!-- 新闻归档 -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">新闻归档</h5>
</div>
<div class="card-body">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action border-0 px-0 d-flex justify-content-between">
<span>2025年1月</span>
<span class="badge bg-primary">3</span>
</a>
<a href="#" class="list-group-item list-group-item-action border-0 px-0 d-flex justify-content-between">
<span>2024年12月</span>
<span class="badge bg-primary">5</span>
</a>
<a href="#" class="list-group-item list-group-item-action border-0 px-0 d-flex justify-content-between">
<span>2024年11月</span>
<span class="badge bg-primary">8</span>
</a>
</div>
</div>
</div>
<!-- 联系我们 -->
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">联系我们</h5>
</div>
<div class="card-body">
<p class="card-text small text-muted">
如果您有新闻线索或合作意向,欢迎联系我们。
</p>
<div class="d-grid">
<a href="index.html#contact" class="btn btn-outline-primary btn-sm">
<i class="bi bi-envelope me-1"></i>联系我们
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 新闻详情模态框 -->
<!-- 新闻1详情 -->
<div class="modal fade" id="newsModal1" tabindex="-1" aria-labelledby="newsModal1Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newsModal1Label">平台v2.0版本发布</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<span class="badge bg-primary me-2">平台更新</span>
<small class="text-muted">发布时间2025-01-15</small>
</div>
<div class="news-content">
<p>宁夏智慧养殖监管平台v2.0版本正式发布!本次重大更新为用户带来了更加智能化、便捷化的使用体验。</p>
<h6>主要更新内容:</h6>
<ul>
<li><strong>智能预警系统升级</strong>新增AI算法支持能够更准确地预测养殖风险提前发出预警通知。</li>
<li><strong>移动端优化</strong>:全面优化移动端界面,支持离线模式,随时随地管理养殖业务。</li>
<li><strong>数据分析增强</strong>:新增多维度数据分析报表,帮助用户更好地了解养殖状况。</li>
<li><strong>用户体验提升</strong>:优化操作流程,简化复杂功能,提高工作效率。</li>
</ul>
<h6>技术亮点:</h6>
<p>本次更新采用了最新的机器学习算法,通过分析历史数据和实时监控数据,能够更准确地预测动物健康状况和环境变化趋势。同时,新增的边缘计算功能大大提高了数据处理速度。</p>
<p>欢迎广大用户升级体验,如有任何问题或建议,请及时联系我们的技术支持团队。</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<a href="download.html" class="btn btn-primary">立即下载</a>
</div>
</div>
</div>
</div>
<!-- 新闻2详情 -->
<div class="modal fade" id="newsModal2" tabindex="-1" aria-labelledby="newsModal2Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newsModal2Label">智慧养殖技术研讨会成功举办</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<span class="badge bg-success me-2">行业动态</span>
<small class="text-muted">发布时间2025-01-10</small>
</div>
<div class="news-content">
<p>由宁夏农业农村厅主办的"智慧养殖技术研讨会"在银川成功举办,来自全国各地的行业专家、学者和企业代表齐聚一堂,共同探讨智慧养殖技术的发展前景。</p>
<h6>会议亮点:</h6>
<ul>
<li><strong>技术分享</strong>:多位专家分享了物联网、人工智能在养殖业中的最新应用成果。</li>
<li><strong>案例展示</strong>:展示了多个成功的智慧养殖项目案例,为行业发展提供了宝贵经验。</li>
<li><strong>政策解读</strong>:相关部门负责人详细解读了支持智慧养殖发展的最新政策。</li>
<li><strong>合作签约</strong>:现场签署了多项技术合作协议,推动产学研深度融合。</li>
</ul>
<h6>专家观点:</h6>
<p>与会专家一致认为,智慧养殖是现代农业发展的必然趋势,通过技术创新能够有效提高养殖效率,降低环境影响,保障食品安全。</p>
<p>本次研讨会为推动宁夏乃至全国智慧养殖产业发展起到了重要的促进作用。</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!-- 新闻3详情 -->
<div class="modal fade" id="newsModal3" tabindex="-1" aria-labelledby="newsModal3Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newsModal3Label">养殖行业政策解读</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<span class="badge bg-warning text-dark me-2">政策解读</span>
<small class="text-muted">发布时间2025-01-05</small>
</div>
<div class="news-content">
<p>近日,农业农村部发布了《关于推进养殖业数字化转型的指导意见》,为智慧养殖发展指明了方向,带来了新的发展机遇。</p>
<h6>政策要点:</h6>
<ul>
<li><strong>数字化转型目标</strong>到2025年规模养殖场数字化转型率达到80%以上。</li>
<li><strong>技术支持</strong>:加大对物联网、大数据、人工智能等技术在养殖业应用的支持力度。</li>
<li><strong>资金扶持</strong>:设立专项资金,支持智慧养殖技术研发和推广应用。</li>
<li><strong>标准制定</strong>:建立健全智慧养殖技术标准体系和认证机制。</li>
</ul>
<h6>影响分析:</h6>
<p>该政策的出台将极大推动养殖业的数字化转型进程,为智慧养殖企业带来更多发展机遇。同时,也对传统养殖企业提出了转型升级的要求。</p>
<h6>实施建议:</h6>
<p>建议养殖企业积极拥抱数字化转型,加强与技术服务商的合作,充分利用政策红利,提升自身竞争力。</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!-- 新闻4详情 -->
<div class="modal fade" id="newsModal4" tabindex="-1" aria-labelledby="newsModal4Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newsModal4Label">物联网技术在智慧养殖中的应用与实践</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<span class="badge bg-info me-2">技术分享</span>
<small class="text-muted">发布时间2024-12-28</small>
</div>
<div class="news-content">
<p>物联网技术作为智慧养殖的核心技术之一通过传感器、RFID、GPS等设备实现对养殖环境和动物状态的实时监控为现代养殖业带来了革命性的变化。</p>
<h6>技术应用场景:</h6>
<ul>
<li><strong>环境监控</strong>:实时监测温度、湿度、空气质量等环境参数。</li>
<li><strong>动物健康监测</strong>:通过可穿戴设备监测动物的生理指标和行为模式。</li>
<li><strong>饲料管理</strong>:智能化饲料投放系统,精确控制饲料用量和时间。</li>
<li><strong>安全防护</strong>:视频监控和入侵检测系统,保障养殖场安全。</li>
</ul>
<h6>实践案例:</h6>
<p>某大型养牛场通过部署物联网系统实现了对1000头牛的精准管理不仅提高了生产效率还降低了疾病发生率年收益增长了25%。</p>
<h6>发展趋势:</h6>
<p>随着5G、边缘计算等新技术的发展物联网在智慧养殖中的应用将更加广泛和深入为行业发展注入新的活力。</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!-- 新闻5详情 -->
<div class="modal fade" id="newsModal5" tabindex="-1" aria-labelledby="newsModal5Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newsModal5Label">宁夏智慧养殖示范基地建设取得重要进展</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<span class="badge bg-success me-2">行业动态</span>
<small class="text-muted">发布时间2024-12-20</small>
</div>
<div class="news-content">
<p>宁夏回族自治区智慧养殖示范基地建设项目取得重要进展首批10个示范基地已完成智能化改造成效显著。</p>
<h6>建设成果:</h6>
<ul>
<li><strong>技术应用</strong>:全面应用物联网、大数据、人工智能等先进技术。</li>
<li><strong>效率提升</strong>平均提高养殖效率30%降低人工成本40%。</li>
<li><strong>质量改善</strong>:产品质量显著提升,市场竞争力增强。</li>
<li><strong>环保效果</strong>:减少环境污染,实现绿色可持续发展。</li>
</ul>
<h6>示范效应:</h6>
<p>这些示范基地的成功建设,为全区智慧养殖发展树立了标杆,吸引了众多养殖企业前来学习交流。</p>
<h6>下一步计划:</h6>
<p>计划在2025年再建设20个智慧养殖示范基地进一步扩大示范效应推动全区养殖业转型升级。</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="bg-dark text-white py-4">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="mb-0">&copy; 2025 宁夏智慧养殖监管平台. 保留所有权利.</p>
</div>
<div class="col-md-6 text-md-end">
<a href="index.html" class="text-white-50 text-decoration-none me-3">首页</a>
<a href="index.html#contact" class="text-white-50 text-decoration-none me-3">联系我们</a>
<a href="download.html" class="text-white-50 text-decoration-none">下载中心</a>
</div>
</div>
</div>
</footer>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<!-- 自定义JS -->
<script src="assets/js/script.js"></script>
<!-- 新闻页面专用JS -->
<script>
// 新闻分类筛选和分页功能
document.addEventListener('DOMContentLoaded', function() {
const categoryButtons = document.querySelectorAll('[data-category]');
const newsArticles = document.querySelectorAll('.news-article');
const paginationLinks = document.querySelectorAll('.pagination .page-link');
const articlesPerPage = 3; // 每页显示的文章数量
let currentPage = 1;
let currentCategory = 'all';
// 新闻分类筛选
categoryButtons.forEach(button => {
button.addEventListener('click', function() {
currentCategory = this.getAttribute('data-category');
currentPage = 1; // 重置到第一页
// 更新按钮状态
categoryButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
// 重新显示文章和分页
displayArticles();
updatePagination();
});
});
// 分页点击事件
paginationLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const text = this.textContent.trim();
const parentLi = this.parentElement;
// 如果是禁用状态,不处理
if (parentLi.classList.contains('disabled')) {
return;
}
if (text === '上一页') {
if (currentPage > 1) {
currentPage--;
}
} else if (text === '下一页') {
const totalPages = getTotalPages();
if (currentPage < totalPages) {
currentPage++;
}
} else if (!isNaN(parseInt(text))) {
currentPage = parseInt(text);
}
displayArticles();
updatePagination();
// 滚动到页面顶部
document.querySelector('.news-content').scrollIntoView({
behavior: 'smooth'
});
});
});
// 显示当前页的文章
function displayArticles() {
const filteredArticles = Array.from(newsArticles).filter(article => {
return currentCategory === 'all' || article.getAttribute('data-category') === currentCategory;
});
// 隐藏所有文章
newsArticles.forEach(article => {
article.style.display = 'none';
});
// 计算当前页应该显示的文章
const startIndex = (currentPage - 1) * articlesPerPage;
const endIndex = startIndex + articlesPerPage;
const articlesToShow = filteredArticles.slice(startIndex, endIndex);
// 显示当前页的文章
articlesToShow.forEach(article => {
article.style.display = 'block';
});
}
// 获取总页数
function getTotalPages() {
const filteredArticles = Array.from(newsArticles).filter(article => {
return currentCategory === 'all' || article.getAttribute('data-category') === currentCategory;
});
return Math.ceil(filteredArticles.length / articlesPerPage);
}
// 更新分页状态
function updatePagination() {
const totalPages = getTotalPages();
const pagination = document.querySelector('.pagination');
// 清空现有分页
pagination.innerHTML = '';
// 上一页按钮
const prevLi = document.createElement('li');
prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
prevLi.innerHTML = `<a class="page-link" href="#" tabindex="-1">上一页</a>`;
pagination.appendChild(prevLi);
// 页码按钮
for (let i = 1; i <= totalPages; i++) {
const pageLi = document.createElement('li');
pageLi.className = `page-item ${i === currentPage ? 'active' : ''}`;
pageLi.innerHTML = `<a class="page-link" href="#">${i}</a>`;
pagination.appendChild(pageLi);
}
// 下一页按钮
const nextLi = document.createElement('li');
nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
nextLi.innerHTML = `<a class="page-link" href="#">下一页</a>`;
pagination.appendChild(nextLi);
// 重新绑定事件
const newPaginationLinks = pagination.querySelectorAll('.page-link');
newPaginationLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const text = this.textContent.trim();
const parentLi = this.parentElement;
if (parentLi.classList.contains('disabled')) {
return;
}
if (text === '上一页') {
if (currentPage > 1) {
currentPage--;
}
} else if (text === '下一页') {
if (currentPage < totalPages) {
currentPage++;
}
} else if (!isNaN(parseInt(text))) {
currentPage = parseInt(text);
}
displayArticles();
updatePagination();
// 滚动到页面顶部
document.querySelector('.news-content').scrollIntoView({
behavior: 'smooth'
});
});
});
}
// 初始化显示
displayArticles();
updatePagination();
});
</script>
</body>
</html>