官网添加案例详情和新闻动态详情
This commit is contained in:
@@ -592,6 +592,8 @@ img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
loading: lazy;
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* 减少重绘重排 */
|
||||
@@ -599,12 +601,368 @@ img {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card, .btn, .navbar {
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* GPU加速 */
|
||||
.gpu-accelerated {
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.hero-section, .feature-card, .case-card, .news-card {
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* 新闻页面专用样式 */
|
||||
.news-article {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.news-article:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
|
||||
}
|
||||
|
||||
.news-article .card-title a {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.news-article .card-title a:hover {
|
||||
color: var(--bs-primary) !important;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
line-height: 1.8;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.news-content h6 {
|
||||
color: var(--bs-primary);
|
||||
font-weight: 600;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.news-content ul {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.news-content li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* 新闻分类按钮样式 */
|
||||
.btn-group .btn {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-group .btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* 侧边栏卡片样式 */
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card-header .card-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 热门新闻列表样式 */
|
||||
.list-group-item-action:hover {
|
||||
background-color: var(--bs-light);
|
||||
transform: translateX(5px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 新闻归档样式 */
|
||||
.list-group-item .badge {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-group-item:hover .badge {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 模态框样式优化 */
|
||||
.modal-content {
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
|
||||
color: white;
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
|
||||
.modal-header .modal-title {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-header .btn-close {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* 面包屑导航样式 */
|
||||
.breadcrumb-item a {
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.breadcrumb-item a:hover {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* 搜索框样式 */
|
||||
.input-group .form-control:focus {
|
||||
border-color: var(--bs-primary);
|
||||
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.pagination .page-link {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pagination .page-link:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* 案例详情页面样式 */
|
||||
.case-detail-content .card {
|
||||
border: none;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 2rem;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.case-detail-content .card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.case-detail-content .card-header {
|
||||
border-bottom: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.case-detail-content .case-meta p {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.case-detail-content .case-meta strong {
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.case-detail-content .solution-item {
|
||||
padding: 1rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.case-detail-content .solution-item h6 {
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.case-detail-content .solution-item p {
|
||||
color: #6c757d;
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.case-detail-content .effect-item {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.case-detail-content .effect-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.case-detail-content .effect-label {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.case-detail-content .related-case {
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.case-detail-content .related-case:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.case-detail-content .related-case:hover {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
margin: 0 -0.75rem;
|
||||
}
|
||||
|
||||
.case-detail-content .related-case h6 {
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.case-detail-content .related-case small {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* 首页案例卡片悬停效果优化 */
|
||||
.case-card {
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.case-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.case-card .case-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.case-card .case-image img {
|
||||
transition: transform 0.3s ease;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.case-card:hover .case-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.case-card .case-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.case-card .case-content h5 {
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.case-card .case-content p {
|
||||
color: #6c757d;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.case-card .case-link .btn {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.case-card:hover .case-link .btn {
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
|
||||
/* 面包屑导航样式 */
|
||||
.breadcrumb {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
content: ">";
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.breadcrumb-item a {
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.breadcrumb-item a:hover {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
/* 响应式优化 */
|
||||
@media (max-width: 768px) {
|
||||
.case-detail-content .effect-number {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.case-detail-content .solution-item {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.case-detail-content .card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.case-card .case-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.case-card .case-image img {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.case-detail-content .effect-item {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.case-detail-content .effect-number {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.case-detail-content .effect-label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
.news-content {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* 系统入口功能区 */
|
||||
.systems-section {
|
||||
padding: 5rem 0;
|
||||
|
||||
387
website/case-detail.html
Normal file
387
website/case-detail.html
Normal file
@@ -0,0 +1,387 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>成功案例详情 - 宁夏智慧养殖监管平台</title>
|
||||
|
||||
<!-- SEO优化 -->
|
||||
<meta name="description" content="宁夏智慧养殖监管平台成功案例详情，展示我们为客户提供的数字化养殖管理解决方案的实际效果和价值。">
|
||||
<meta name="keywords" content="智慧养殖,成功案例,数字化管理,养殖监管,宁夏,案例详情">
|
||||
<meta name="author" content="宁夏智慧养殖监管平台">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="成功案例详情 - 宁夏智慧养殖监管平台">
|
||||
<meta property="og:description" content="查看我们为客户提供的智慧养殖解决方案的详细案例和实际效果">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="assets/images/logo.svg">
|
||||
|
||||
<!-- 图标 -->
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="alternate icon" href="favicon.ico">
|
||||
|
||||
<!-- 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 href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<!-- 自定义CSS -->
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||||
<img src="assets/images/logo.svg" alt="Logo" width="40" height="40" class="me-2">
|
||||
<span class="fw-bold">宁夏智慧养殖监管平台</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 active" href="index.html#cases">客户案例</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" 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: 60vh; background: linear-gradient(135deg, #0d6efd 0%, #198754 100%);">
|
||||
<div class="container">
|
||||
<div class="row align-items-center min-vh-60">
|
||||
<div class="col-lg-12 text-center">
|
||||
<!-- 面包屑导航 -->
|
||||
<nav aria-label="breadcrumb" class="mb-4">
|
||||
<ol class="breadcrumb justify-content-center">
|
||||
<li class="breadcrumb-item"><a href="index.html" class="text-white">首页</a></li>
|
||||
<li class="breadcrumb-item"><a href="index.html#cases" class="text-white">客户案例</a></li>
|
||||
<li class="breadcrumb-item active text-white-50" aria-current="page">案例详情</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="display-4 fw-bold text-white mb-4" id="case-title">
|
||||
成功案例详情
|
||||
</h1>
|
||||
<p class="lead text-white mb-4" id="case-subtitle">
|
||||
了解我们为客户提供的智慧养殖解决方案的详细实施过程和实际效果
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 案例详情内容 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- 主要内容 -->
|
||||
<div class="col-lg-8">
|
||||
<div class="case-detail-content">
|
||||
<!-- 案例概述 -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary mb-4" id="case-name">宁夏某大型养殖集团</h2>
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<img src="assets/images/case1.jpg" alt="案例图片" class="img-fluid rounded shadow" id="case-image">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5 class="text-secondary mb-3">项目概述</h5>
|
||||
<p class="mb-3" id="case-overview">
|
||||
该集团是宁夏地区规模最大的现代化养殖企业之一，拥有多个养殖基地，年出栏量超过10万头。
|
||||
为了提高管理效率和产品质量，该集团选择了我们的智慧养殖监管平台。
|
||||
</p>
|
||||
<div class="case-meta">
|
||||
<p><strong>项目规模：</strong><span id="case-scale">大型</span></p>
|
||||
<p><strong>实施时间：</strong><span id="case-time">2024年3月-2024年8月</span></p>
|
||||
<p><strong>服务类型：</strong><span id="case-type">全流程数字化管理</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实施方案 -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h4 class="card-title mb-0">
|
||||
<i class="bi bi-gear-fill me-2"></i>实施方案
|
||||
</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="solution-item">
|
||||
<h6><i class="bi bi-cpu text-primary me-2"></i>智能监控系统</h6>
|
||||
<p>部署物联网传感器，实时监控环境参数、动物健康状态等关键指标。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="solution-item">
|
||||
<h6><i class="bi bi-database text-primary me-2"></i>数据管理平台</h6>
|
||||
<p>建立统一的数据管理平台，实现数据的集中存储和智能分析。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="solution-item">
|
||||
<h6><i class="bi bi-phone text-primary me-2"></i>移动应用</h6>
|
||||
<p>开发专用移动应用，方便管理人员随时随地查看和管理养殖情况。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="solution-item">
|
||||
<h6><i class="bi bi-shield-check text-primary me-2"></i>预警系统</h6>
|
||||
<p>建立智能预警系统，及时发现和处理异常情况，降低养殖风险。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实施效果 -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h4 class="card-title mb-0">
|
||||
<i class="bi bi-graph-up-arrow me-2"></i>实施效果
|
||||
</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-3 text-center mb-3">
|
||||
<div class="effect-item">
|
||||
<div class="effect-number text-success display-4 fw-bold">30%</div>
|
||||
<div class="effect-label">生产效率提升</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 text-center mb-3">
|
||||
<div class="effect-item">
|
||||
<div class="effect-number text-success display-4 fw-bold">25%</div>
|
||||
<div class="effect-label">成本降低</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 text-center mb-3">
|
||||
<div class="effect-item">
|
||||
<div class="effect-number text-success display-4 fw-bold">60%</div>
|
||||
<div class="effect-label">疫病发生率下降</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 text-center mb-3">
|
||||
<div class="effect-item">
|
||||
<div class="effect-number text-success display-4 fw-bold">95%</div>
|
||||
<div class="effect-label">数据准确率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<h6>具体改善：</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>实现了全流程数字化管理，大大提高了管理效率</li>
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>通过精准饲喂和环境控制，显著降低了饲料成本</li>
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>早期预警系统有效预防了疫病爆发，保障了动物健康</li>
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>产品质量追溯系统提升了品牌价值和市场竞争力</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 客户评价 -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h4 class="card-title mb-0">
|
||||
<i class="bi bi-chat-quote me-2"></i>客户评价
|
||||
</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-3" id="case-testimonial">
|
||||
"智慧养殖监管平台的实施让我们的管理水平上了一个新台阶。系统不仅帮助我们实现了全流程数字化管理，
|
||||
还大大提高了养殖效率和经济效益。特别是预警系统，让我们能够及时发现和处理问题，避免了很多损失。
|
||||
这是一次非常成功的数字化转型。"
|
||||
</p>
|
||||
<footer class="blockquote-footer">
|
||||
<cite title="客户评价" id="case-client">集团总经理 张先生</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="related-case mb-3">
|
||||
<a href="javascript:void(0)" onclick="loadCaseDetail('case2')" class="text-decoration-none">
|
||||
<div class="d-flex">
|
||||
<img src="assets/images/case2.jpg" alt="案例2" class="rounded me-3" style="width: 60px; height: 60px; object-fit: cover;">
|
||||
<div>
|
||||
<h6 class="mb-1">某现代农业示范区</h6>
|
||||
<small class="text-muted">智能化监控系统</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="related-case mb-3">
|
||||
<a href="javascript:void(0)" onclick="loadCaseDetail('case3')" class="text-decoration-none">
|
||||
<div class="d-flex">
|
||||
<img src="assets/images/case3.jpg" alt="案例3" class="rounded me-3" style="width: 60px; height: 60px; object-fit: cover;">
|
||||
<div>
|
||||
<h6 class="mb-1">某生态养殖基地</h6>
|
||||
<small class="text-muted">环境精准调控</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系我们 -->
|
||||
<div class="card">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-telephone me-2"></i>联系我们
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-3">想了解更多案例详情或咨询解决方案？</p>
|
||||
<div class="d-grid gap-2">
|
||||
<a href="index.html#contact" class="btn btn-primary">
|
||||
<i class="bi bi-envelope me-2"></i>立即咨询
|
||||
</a>
|
||||
<a href="tel:400-123-4567" class="btn btn-outline-primary">
|
||||
<i class="bi bi-telephone me-2"></i>400-123-4567
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-dark text-white py-4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p class="mb-0">© 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>
|
||||
// 案例数据
|
||||
const caseData = {
|
||||
case1: {
|
||||
title: "宁夏某大型养殖集团",
|
||||
subtitle: "全流程数字化管理解决方案",
|
||||
name: "宁夏某大型养殖集团",
|
||||
image: "assets/images/case1.jpg",
|
||||
overview: "该集团是宁夏地区规模最大的现代化养殖企业之一，拥有多个养殖基地，年出栏量超过10万头。为了提高管理效率和产品质量，该集团选择了我们的智慧养殖监管平台。",
|
||||
scale: "大型",
|
||||
time: "2024年3月-2024年8月",
|
||||
type: "全流程数字化管理",
|
||||
testimonial: "智慧养殖监管平台的实施让我们的管理水平上了一个新台阶。系统不仅帮助我们实现了全流程数字化管理，还大大提高了养殖效率和经济效益。特别是预警系统，让我们能够及时发现和处理问题，避免了很多损失。这是一次非常成功的数字化转型。",
|
||||
client: "集团总经理 张先生"
|
||||
},
|
||||
case2: {
|
||||
title: "某现代农业示范区",
|
||||
subtitle: "智能化监控系统解决方案",
|
||||
name: "某现代农业示范区",
|
||||
image: "assets/images/case2.jpg",
|
||||
overview: "该示范区是当地政府重点打造的现代农业项目，占地面积5000亩，集养殖、种植、加工于一体。通过部署我们的智能化监控系统，实现了园区的统一管理和精准控制。",
|
||||
scale: "中大型",
|
||||
time: "2024年1月-2024年6月",
|
||||
type: "智能化监控系统",
|
||||
testimonial: "智能化监控系统让我们的管理更加科学规范，不仅降低了人工成本，还提高了生产效率。系统的数据分析功能帮助我们优化了生产流程，为现代农业发展提供了有力支撑。",
|
||||
client: "示范区主任 李女士"
|
||||
},
|
||||
case3: {
|
||||
title: "某生态养殖基地",
|
||||
subtitle: "环境精准调控解决方案",
|
||||
name: "某生态养殖基地",
|
||||
image: "assets/images/case3.jpg",
|
||||
overview: "该基地专注于生态养殖，注重环境保护和产品品质。通过我们的环境精准调控系统，实现了养殖环境的智能化管理，确保了产品的高品质和环境的可持续发展。",
|
||||
scale: "中型",
|
||||
time: "2024年4月-2024年9月",
|
||||
type: "环境精准调控",
|
||||
testimonial: "环境精准调控系统帮助我们实现了真正的生态养殖。系统能够精确控制各项环境参数，不仅提升了产品品质，还减少了对环境的影响，实现了经济效益和生态效益的双赢。",
|
||||
client: "基地负责人 王先生"
|
||||
}
|
||||
};
|
||||
|
||||
// 页面加载时获取案例ID并加载对应数据
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const caseId = urlParams.get('case') || 'case1';
|
||||
loadCaseDetail(caseId);
|
||||
});
|
||||
|
||||
// 加载案例详情
|
||||
function loadCaseDetail(caseId) {
|
||||
const data = caseData[caseId];
|
||||
if (!data) return;
|
||||
|
||||
// 更新页面内容
|
||||
document.getElementById('case-title').textContent = data.title;
|
||||
document.getElementById('case-subtitle').textContent = data.subtitle;
|
||||
document.getElementById('case-name').textContent = data.name;
|
||||
document.getElementById('case-image').src = data.image;
|
||||
document.getElementById('case-image').alt = data.name;
|
||||
document.getElementById('case-overview').textContent = data.overview;
|
||||
document.getElementById('case-scale').textContent = data.scale;
|
||||
document.getElementById('case-time').textContent = data.time;
|
||||
document.getElementById('case-type').textContent = data.type;
|
||||
document.getElementById('case-testimonial').textContent = data.testimonial;
|
||||
document.getElementById('case-client').textContent = data.client;
|
||||
|
||||
// 更新页面标题
|
||||
document.title = `${data.title} - 成功案例详情 - 宁夏智慧养殖监管平台`;
|
||||
|
||||
// 更新URL但不刷新页面
|
||||
const newUrl = `${window.location.pathname}?case=${caseId}`;
|
||||
window.history.pushState({case: caseId}, '', newUrl);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -55,15 +55,17 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#technology">技术优势</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#systems">系统入口</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#cases">客户案例</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#news">新闻动态</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#systems">系统入口</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#contact">联系我们</a>
|
||||
</li>
|
||||
@@ -297,35 +299,50 @@
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="assets/images/case1.jpg" alt="案例1" class="img-fluid">
|
||||
</div>
|
||||
<div class="case-content">
|
||||
<h5>宁夏某大型养殖集团</h5>
|
||||
<p>实现全流程数字化管理，生产效率提升30%</p>
|
||||
</div>
|
||||
<a href="case-detail.html?case=case1" class="text-decoration-none text-dark">
|
||||
<div class="case-image">
|
||||
<img src="assets/images/case1.jpg" alt="案例1" class="img-fluid">
|
||||
</div>
|
||||
<div class="case-content">
|
||||
<h5>宁夏某大型养殖集团</h5>
|
||||
<p>实现全流程数字化管理，生产效率提升30%</p>
|
||||
<div class="case-link mt-2">
|
||||
<span class="btn btn-outline-primary btn-sm">查看详情 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="assets/images/case2.jpg" alt="案例2" class="img-fluid">
|
||||
</div>
|
||||
<div class="case-content">
|
||||
<h5>某现代农业示范区</h5>
|
||||
<p>智能化监控系统，降低人工成本40%</p>
|
||||
</div>
|
||||
<a href="case-detail.html?case=case2" class="text-decoration-none text-dark">
|
||||
<div class="case-image">
|
||||
<img src="assets/images/case2.jpg" alt="案例2" class="img-fluid">
|
||||
</div>
|
||||
<div class="case-content">
|
||||
<h5>某现代农业示范区</h5>
|
||||
<p>智能化监控系统，降低人工成本40%</p>
|
||||
<div class="case-link mt-2">
|
||||
<span class="btn btn-outline-primary btn-sm">查看详情 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="case-card">
|
||||
<div class="case-image">
|
||||
<img src="assets/images/case3.jpg" alt="案例3" class="img-fluid">
|
||||
</div>
|
||||
<div class="case-content">
|
||||
<h5>某生态养殖基地</h5>
|
||||
<p>环境精准调控，产品品质显著提升</p>
|
||||
</div>
|
||||
<a href="case-detail.html?case=case3" class="text-decoration-none text-dark">
|
||||
<div class="case-image">
|
||||
<img src="assets/images/case3.jpg" alt="案例3" class="img-fluid">
|
||||
</div>
|
||||
<div class="case-content">
|
||||
<h5>某生态养殖基地</h5>
|
||||
<p>环境精准调控，产品品质显著提升</p>
|
||||
<div class="case-link mt-2">
|
||||
<span class="btn btn-outline-primary btn-sm">查看详情 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -343,28 +360,33 @@
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="news-card">
|
||||
<div class="news-date">2025-01-15</div>
|
||||
<h5>平台v2.0版本发布</h5>
|
||||
<h5><a href="news.html" class="text-decoration-none text-dark">平台v2.0版本发布</a></h5>
|
||||
<p>新增智能预警和移动端优化功能</p>
|
||||
<a href="#" class="news-link">阅读更多 →</a>
|
||||
<a href="news.html" class="news-link">阅读更多 →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="news-card">
|
||||
<div class="news-date">2025-01-10</div>
|
||||
<h5>智慧养殖技术研讨会</h5>
|
||||
<h5><a href="news.html" class="text-decoration-none text-dark">智慧养殖技术研讨会</a></h5>
|
||||
<p>成功举办行业技术交流会议</p>
|
||||
<a href="#" class="news-link">阅读更多 →</a>
|
||||
<a href="news.html" class="news-link">阅读更多 →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="news-card">
|
||||
<div class="news-date">2025-01-05</div>
|
||||
<h5>养殖行业政策解读</h5>
|
||||
<h5><a href="news.html" class="text-decoration-none text-dark">养殖行业政策解读</a></h5>
|
||||
<p>最新政策对智慧养殖的影响分析</p>
|
||||
<a href="#" class="news-link">阅读更多 →</a>
|
||||
<a href="news.html" class="news-link">阅读更多 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-4">
|
||||
<a href="news.html" class="btn btn-outline-primary">
|
||||
查看更多新闻 <i class="bi bi-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -467,71 +489,71 @@
|
||||
<!-- 自定义脚本 -->
|
||||
<script src="assets/js/script.js"></script>
|
||||
<!-- 百度地图API -->
|
||||
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=SOawZTeQbxdgrKYYx0o2hn34G0DyU2uo"></script>
|
||||
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=SOawZTeQbxdgrKYYx0o2hn34G0DyU2uo"></script> -->
|
||||
|
||||
<script>
|
||||
// 初始化百度地图
|
||||
function initBaiduMap() {
|
||||
try {
|
||||
// 创建地图实例
|
||||
var map = new BMap.Map("baidu-map-container");
|
||||
// function initBaiduMap() {
|
||||
// try {
|
||||
// // 创建地图实例
|
||||
// var map = new BMap.Map("baidu-map-container");
|
||||
|
||||
// 设置中心点坐标（银川市金凤区）
|
||||
var point = new BMap.Point(106.278179, 38.46637);
|
||||
// // 设置中心点坐标（银川市金凤区）
|
||||
// var point = new BMap.Point(106.278179, 38.46637);
|
||||
|
||||
// 初始化地图，设置中心点坐标和地图级别
|
||||
map.centerAndZoom(point, 15);
|
||||
// // 初始化地图，设置中心点坐标和地图级别
|
||||
// map.centerAndZoom(point, 15);
|
||||
|
||||
// 启用滚轮放大缩小
|
||||
map.enableScrollWheelZoom(true);
|
||||
// // 启用滚轮放大缩小
|
||||
// map.enableScrollWheelZoom(true);
|
||||
|
||||
// 添加地图类型控件
|
||||
map.addControl(new BMap.MapTypeControl());
|
||||
// // 添加地图类型控件
|
||||
// map.addControl(new BMap.MapTypeControl());
|
||||
|
||||
// 添加缩放控件
|
||||
map.addControl(new BMap.NavigationControl());
|
||||
// // 添加缩放控件
|
||||
// map.addControl(new BMap.NavigationControl());
|
||||
|
||||
// 添加比例尺控件
|
||||
map.addControl(new BMap.ScaleControl());
|
||||
// // 添加比例尺控件
|
||||
// map.addControl(new BMap.ScaleControl());
|
||||
|
||||
// 创建标注
|
||||
var marker = new BMap.Marker(point);
|
||||
map.addOverlay(marker);
|
||||
// // 创建标注
|
||||
// var marker = new BMap.Marker(point);
|
||||
// map.addOverlay(marker);
|
||||
|
||||
// 创建信息窗口
|
||||
var infoWindow = new BMap.InfoWindow("<div style='padding:10px;'><h6>宁夏智慧养殖监管平台</h6><p>宁夏·银川（金凤区）</p></div>");
|
||||
// // 创建信息窗口
|
||||
// var infoWindow = new BMap.InfoWindow("<div style='padding:10px;'><h6>宁夏智慧养殖监管平台</h6><p>宁夏·银川（金凤区）</p></div>");
|
||||
|
||||
// 点击标注显示信息窗口
|
||||
marker.addEventListener("click", function(){
|
||||
map.openInfoWindow(infoWindow, point);
|
||||
});
|
||||
// // 点击标注显示信息窗口
|
||||
// marker.addEventListener("click", function(){
|
||||
// map.openInfoWindow(infoWindow, point);
|
||||
// });
|
||||
|
||||
// 默认显示信息窗口
|
||||
map.openInfoWindow(infoWindow, point);
|
||||
// // 默认显示信息窗口
|
||||
// map.openInfoWindow(infoWindow, point);
|
||||
|
||||
console.log('百度地图初始化成功');
|
||||
} catch (error) {
|
||||
console.error('百度地图初始化失败:', error);
|
||||
// 如果地图加载失败，显示备用内容
|
||||
document.getElementById('baidu-map-container').innerHTML =
|
||||
'<div class="d-flex align-items-center justify-content-center h-100 bg-light text-muted">' +
|
||||
'<div class="text-center">' +
|
||||
'<i class="bi bi-geo-alt-fill display-4 mb-3"></i>' +
|
||||
'<h5>地图加载中...</h5>' +
|
||||
'<p>如果地图无法显示，请检查网络连接</p>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
}
|
||||
}
|
||||
// console.log('百度地图初始化成功');
|
||||
// } catch (error) {
|
||||
// console.error('百度地图初始化失败:', error);
|
||||
// // 如果地图加载失败，显示备用内容
|
||||
// document.getElementById('baidu-map-container').innerHTML =
|
||||
// '<div class="d-flex align-items-center justify-content-center h-100 bg-light text-muted">' +
|
||||
// '<div class="text-center">' +
|
||||
// '<i class="bi bi-geo-alt-fill display-4 mb-3"></i>' +
|
||||
// '<h5>地图加载中...</h5>' +
|
||||
// '<p>如果地图无法显示，请检查网络连接</p>' +
|
||||
// '</div>' +
|
||||
// '</div>';
|
||||
// }
|
||||
// }
|
||||
|
||||
// 页面加载完成后初始化地图
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 延迟初始化，确保百度地图API已加载
|
||||
setTimeout(initBaiduMap, 1000);
|
||||
});
|
||||
// // 页面加载完成后初始化地图
|
||||
// document.addEventListener('DOMContentLoaded', function() {
|
||||
// // 延迟初始化，确保百度地图API已加载
|
||||
// setTimeout(initBaiduMap, 1000);
|
||||
// });
|
||||
|
||||
// 如果百度地图API加载失败的回调
|
||||
window.BMap_loadScriptTime = (new Date).getTime();
|
||||
// // 如果百度地图API加载失败的回调
|
||||
// window.BMap_loadScriptTime = (new Date).getTime();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
742
website/news.html
Normal file
742
website/news.html
Normal file
@@ -0,0 +1,742 @@
|
||||
<!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">
|
||||
<img src="assets/images/logo.svg" alt="宁夏智慧养殖监管平台" height="40" class="me-2">
|
||||
<span class="d-none d-md-inline">宁夏智慧养殖监管平台</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</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: linear-gradient(135deg, #0d6efd 0%, #6f42c1 100%);">
|
||||
<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">© 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>
|
||||
Reference in New Issue
Block a user