1
0
Files
ag-index/classiccase.html
2025-12-16 16:01:14 +08:00

220 lines
13 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="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="irstheme">
<title>客户案例</title>
<meta name="title" content="烟台岸基网络科技有限公司">
<meta name="Description" content="烟台岸基网络科技有限公司是从事于全程物流链科技服务的互联网软件公司,致力于打造港航企业的互联网生态圈,研发出了航运电子商务平台系统、多码头智能操作系统、全程物流链管理系统等软件产品。">
<meta name="Keywords" content="智慧物流,航运,航运电商,航运物流,智慧物流,航运企业,物流信息平台,物流平台开发,O2O物流平台,航运大数据,航运电商,互联网+航运,数字化航运">
<link href="assets/css/themify-icons.css" rel="stylesheet">
<link href="assets/css/flaticon.css" rel="stylesheet">
<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/css/owl.carousel.css" rel="stylesheet">
<link href="assets/css/owl.theme.css" rel="stylesheet">
<link href="assets/css/slick.css" rel="stylesheet">
<link href="assets/css/slick-theme.css" rel="stylesheet">
<link href="assets/css/swiper.min.css" rel="stylesheet">
<link href="assets/css/owl.transitions.css" rel="stylesheet">
<link href="assets/css/odometer-theme-default.css" rel="stylesheet">
<link href="assets/css/jquery.fancybox.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- start page-wrapper -->
<div class="page-wrapper">
<!-- start preloader -->
<div class="preloader">
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</div>
<!-- end preloader -->
<!-- Start header -->
<div id="header"></div>
<!-- end of header -->
<!-- start page-title -->
<section class="page-title page-title5">
<div class="container">
<div class="row">
<div class="col col-xs-12">
<h2>成功源自创新与合作</h2>
<p>坚持以客户为中心,快速响应客户需求,为客户创造长期价值</p>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</section>
<!-- end page-title -->
<!-- TAB 选项卡区域 -->
<div class="service-tab-nav-fullwidth">
<div class="service-tab-nav">
<div class="widget service-list-widget">
<ul>
<li class="current" data-category="all"><a href="#">全部</a></li>
<li data-category="port"><a href="#">港口码头</a></li>
<li data-category="logistics"><a href="#">物流</a></li>
<li data-category="machinery"><a href="#">机械设备</a></li>
<li data-category="shipping-company"><a href="#">船公司</a></li>
<li data-category="container-yard"><a href="#">集装箱场站</a></li>
<li data-category="freight-forwarder"><a href="#">货代</a></li>
<li data-category="fleet"><a href="#">车队</a></li>
<li data-category="ship-agent"><a href="#">船代</a></li>
<li data-category="warehouse"><a href="#">仓储</a></li>
</ul>
</div>
</div>
</div>
<!-- start services-section -->
<section class="services-section section-padding" style="background-color:#fff;">
<div class="container">
<div class="product-cards" id="caseCards">
<!-- 卡片将通过JavaScript动态插入 -->
</div>
</div> <!-- end container -->
</section>
<!-- end services-section -->
<!-- start site-footer -->
<div id="footer"></div>
<!-- end site-footer -->
</div>
<!-- end of page-wrapper -->
<!-- All JavaScript files
================================================== -->
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#footer").load("footer.html");
$("#header").load("header.html");
//如果想要操作header.html中的元素就得等到header.html加载完成后操作
$("#footer").load("footer.html", function(){
});
// 数据定义
const caseData = {
all: [
{id: 1, title: "智慧港口管理系统", desc: "为某大型港口提供全流程数字化管理解决方案,实现船舶调度、货物跟踪、泊位管理的智能化运营", img: "assets/images/blog/pro1.jpg"},
{id: 2, title: "航运电子商务平台", desc: "打造一站式航运电商服务平台,整合船期查询、在线订舱、支付结算等功能,提升客户体验", img: "assets/images/blog/pro2.jpg"},
{id: 3, title: "车队调度系统", desc: "优化车队运输调度流程实现智能路径规划、实时监控、燃油管理降低运营成本15%", img: "assets/images/blog/pro3.jpg"},
{id: 4, title: "散杂货作业平台", desc: "提供散杂货作业全流程数字化方案,支持装卸作业管理、计费结算、数据分析等功能", img: "assets/images/blog/pro4.jpg"},
{id: 5, title: "集装箱智能运营", desc: "集装箱全程可视化管理系统实现箱位跟踪、状态监控、数据分析提高堆场利用率30%", img: "assets/images/blog/pro5.jpg"},
{id: 6, title: "多式联运平台", desc: "整合海铁公空多种运输方式提供门到门全程可视化服务提升物流效率25%", img: "assets/images/blog/pro6.jpg"}
],
port: [
{id: 4, title: "散杂货作业平台", desc: "提供散杂货作业全流程数字化方案,支持装卸作业管理、计费结算、数据分析等功能", img: "assets/images/blog/pro4.jpg"},
{id: 7, title: "港口生产运营系统", desc: "数字化港口生产运营平台,整合作业计划、资源调度、作业监控等核心功能", img: "assets/images/blog/pro1.jpg"},
{id: 8, title: "智慧港口安防系统", desc: "基于AI视觉的智能安防解决方案实现24小时自动化监控与异常预警", img: "assets/images/blog/pro3.jpg"},
{id: 9, title: "港口设备管理系统", desc: "港口机械设备全生命周期管理平台,支持设备监控、维护计划、故障诊断", img: "assets/images/blog/pro5.jpg"}
],
shipping: [
{id: 2, title: "航运电子商务平台", desc: "打造一站式航运电商服务平台,整合船期查询、在线订舱、支付结算等功能", img: "assets/images/blog/pro2.jpg"},
{id: 5, title: "集装箱智能运营", desc: "集装箱全程可视化管理系统,实现箱位跟踪、状态监控、数据分析", img: "assets/images/blog/pro5.jpg"},
{id: 10, title: "船舶管理解决方案", desc: "船舶运营管理信息系统,涵盖船舶档案、船员管理、维修管理等模块", img: "assets/images/blog/pro6.jpg"},
{id: 11, title: "航运大数据分析", desc: "航运业大数据平台,深度挖掘运输数据价值,为决策提供支持", img: "assets/images/blog/pro4.jpg"}
],
fleet: [
{id: 3, title: "车队调度系统", desc: "优化车队运输调度流程,实现智能路径规划、实时监控、燃油管理", img: "assets/images/blog/pro3.jpg"},
{id: 12, title: "干线运输管理系统", desc: "干线运输标准化管理平台,实现车辆、司机、货物的全流程管控", img: "assets/images/blog/pro2.jpg"},
{id: 13, title: "冷链物流监控系统", desc: "冷链运输温湿度实时监控解决方案,确保货物质量安全", img: "assets/images/blog/pro5.jpg"},
{id: 14, title: "城配智能调度", desc: "城市配送智能调度系统,支持动态路由规划、实时订单分派", img: "assets/images/blog/pro1.jpg"}
],
bulky: [
{id: 4, title: "散杂货作业平台", desc: "提供散杂货作业全流程数字化方案,支持装卸作业管理、计费结算等功能", img: "assets/images/blog/pro4.jpg"},
{id: 15, title: "钢材物流管理系统", desc: "钢材行业专用物流管理系统,支持规格管理、库存跟踪、配送调度", img: "assets/images/blog/pro2.jpg"},
{id: 16, title: "煤炭运输监管平台", desc: "煤炭公路运输全程监管系统,实现装车、运输、卸货全环节可视化", img: "assets/images/blog/pro6.jpg"},
{id: 17, title: "散货仓储管理系统", desc: "散货仓储数字化管理解决方案,支持入库、出库、库存、盘点等", img: "assets/images/blog/pro3.jpg"}
],
container: [
{id: 5, title: "集装箱智能运营", desc: "集装箱全程可视化管理系统,实现箱位跟踪、状态监控、数据分析", img: "assets/images/blog/pro5.jpg"},
{id: 18, title: "集装箱码头操作系统", desc: "一体化集装箱码头操作系统,支持船舶配载、堆场管理等功能", img: "assets/images/blog/pro1.jpg"},
{id: 19, title: "空箱调运优化系统", desc: "基于AI算法的空箱调运优化平台降低运营成本20%以上", img: "assets/images/blog/pro4.jpg"},
{id: 20, title: "集装箱维修管理", desc: "集装箱维修全生命周期管理系统,实现报修、维修、质检流程数字化", img: "assets/images/blog/pro6.jpg"}
]
};
// 渲染卡片函数
function renderCards(category) {
const cardsContainer = document.getElementById('caseCards');
const cards = caseData[category] || caseData.all;
let html = '';
cards.forEach(card => {
const href = card.href || 'classiccase_example.html';
html += `
<a href="${href}" class="product-card">
<div class="card-img">
<img src="${card.img}" alt="${card.title}">
</div>
<div class="card-content">
<div class="card-header">
<h4>${card.title}</h4>
</div>
<p>${card.desc}</p>
</div>
</a>
`;
});
cardsContainer.innerHTML = html;
}
// Tab点击事件处理
$(document).ready(function() {
// 初始化: 渲染全部卡片
renderCards('all');
// Tab点击事件
$('.service-tab-nav li').on('click', function(e) {
e.preventDefault();
// 移除所有当前激活状态
$('.service-tab-nav li').removeClass('current');
// 添加当前激活状态
$(this).addClass('current');
// 获取分类
const category = $(this).data('category');
// 渲染对应的卡片
renderCards(category);
});
});
</script>
<script src="assets/js/kefu.js"></script>
<!-- Plugins for this template -->
<script src="assets/js/jquery-plugin-collection.js"></script>
<!-- Custom script for this template -->
<script src="assets/js/script.js"></script>
</body>
</html>