Files
nxxmdata/website/case-detail.html

386 lines
22 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>
<!-- 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">
<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: #0d6efd;">
<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">&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>
// 案例数据
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>