产品中心 产品详情
This commit is contained in:
364
classiccase.html
364
classiccase.html
@@ -66,259 +66,27 @@
|
||||
</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="shipping"><a href="#">航运</a></li>
|
||||
<li data-category="fleet"><a href="#">车队</a></li>
|
||||
<li data-category="bulky"><a href="#">散杂货</a></li>
|
||||
<li data-category="container"><a href="#">集装箱</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- start services-section -->
|
||||
<section class="services-section services-pg-section section-padding" style="background-color:#fff;">
|
||||
<section class="services-section section-padding" style="background-color:#fff;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col col-md-8 col-md-offset-2">
|
||||
<div class="section-title-s3">
|
||||
<!--<span>Our services</span>-->
|
||||
<h2>合作伙伴</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-xs-12">
|
||||
<div class="service-grids clearfix">
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/logo2.jpg"">
|
||||
</div>
|
||||
<p><a href="#">秦皇岛港股份有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/tangshangang.jpg"">
|
||||
</div>
|
||||
<p><a href="#">唐山港集团股份有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/zhongshanganghang.jpg"">
|
||||
</div>
|
||||
<p><a href="#">中山港航集团股份有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/fangcheng.png"">
|
||||
</div>
|
||||
<p><a href="#">北部湾港防城港码头有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/jining.png"">
|
||||
</div>
|
||||
<p><a href="#">济宁港航发展集团有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/logo1.jpg"">
|
||||
</div>
|
||||
<p><a href="#">上海锦江航运(集团)有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/dongfangguoji.jpg"">
|
||||
</div>
|
||||
<p><a href="#">东方国际物流集团有限公司</a></p>
|
||||
</div>
|
||||
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/tianjinzhongyun.jpg"">
|
||||
</div>
|
||||
<p><a href="#">天津中运海运集团有限公司</a></p>
|
||||
</div>
|
||||
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/logo.jpg"">
|
||||
</div>
|
||||
<p><a href="#">侨益物流股份有限公司</a></p>
|
||||
</div>
|
||||
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/guangzhougangwuju.jpg"">
|
||||
</div>
|
||||
<p><a href="#">广州港务局</a></p>
|
||||
</div>
|
||||
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/logo5.jpg"">
|
||||
</div>
|
||||
<p><a href="#">上海航华国际船务代理有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/liandai.png"">
|
||||
</div>
|
||||
<p><a href="#">上海上港联合国际船舶代理有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/shanghaipenghua.jpg"">
|
||||
</div>
|
||||
<p><a href="#">上海鹏华船务有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/lianyungang.jpg"">
|
||||
</div>
|
||||
<p><a href="#">连云港中韩轮渡有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/weihaigang.jpg"">
|
||||
</div>
|
||||
<p><a href="#">威海港集团有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/shanghaihede.jpg"">
|
||||
</div>
|
||||
<p><a href="#">上海合德国际物流有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/haixia.png"">
|
||||
</div>
|
||||
<p><a href="#">海南海峡航运股份有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/zhujiang.png"">
|
||||
</div>
|
||||
<p><a href="#">珠江船务企业（股份）有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/rizhao.png"">
|
||||
</div>
|
||||
<p><a href="#">日照泓源物流有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/haitong.png"">
|
||||
</div>
|
||||
<p><a href="#">唐山海港海通海运代理有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/hefei.png"">
|
||||
</div>
|
||||
<p><a href="#">安徽省港口集团合肥有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/lingao.png"">
|
||||
</div>
|
||||
<p><a href="#">海南临高金牌港</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/sanshui.png"">
|
||||
</div>
|
||||
<p><a href="#">佛山市三水盈港货运码头有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/wuzhou.png"">
|
||||
</div>
|
||||
<p><a href="#">广西梧州港务有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/xianglongwuliu.jpg"">
|
||||
</div>
|
||||
<p><a href="#">广西钦州市祥龙物流有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/hengtong.png"">
|
||||
</div>
|
||||
<p><a href="#">恒通物流股份有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/hani.png"">
|
||||
</div>
|
||||
<p><a href="#">烟台哈尼泰克集装箱租赁有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/shanghaigang.png"">
|
||||
</div>
|
||||
<p><a href="#">上海港船务代理有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/jiaotong.png"">
|
||||
</div>
|
||||
<p><a href="#">广州交通职业技术学院</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/hanghai.png"">
|
||||
</div>
|
||||
<p><a href="#">广州航海学院</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/guangzhougang.jpg"">
|
||||
</div>
|
||||
<p><a href="#">广州港物流有限公司</a></p>
|
||||
</div>
|
||||
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/anzhida.png"">
|
||||
</div>
|
||||
<p><a href="#">广州市安之达物流有限公司</a></p>
|
||||
</div>
|
||||
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/haiying.png"">
|
||||
</div>
|
||||
<p><a href="#">唐山海盈国际物流有限公司</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/haili.png"">
|
||||
</div>
|
||||
<p><a href="#">广州海力物流集团</a></p>
|
||||
</div>
|
||||
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/chengtong.png"">
|
||||
</div>
|
||||
<p><a href="#">华东诚通物流有限公司</a></p>
|
||||
</div>
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/shiyou.png"">
|
||||
</div>
|
||||
<p><a href="#">广州港发石油化工码头有限公司</a></p>
|
||||
</div>
|
||||
|
||||
<div class="grid1">
|
||||
<div class="icon">
|
||||
<img src="assets/images/jibao.jpg"">
|
||||
</div>
|
||||
<p><a href="#">广州航运交易所</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-cards" id="caseCards">
|
||||
<!-- 卡片将通过JavaScript动态插入 -->
|
||||
</div>
|
||||
</div> <!-- end container -->
|
||||
</section>
|
||||
@@ -345,6 +113,102 @@
|
||||
//如果想要操作header.html中的元素，就得等到header.html加载完成后操作
|
||||
$("#footer").load("footer.html", function(){
|
||||
});
|
||||
|
||||
// 数据定义
|
||||
const caseData = {
|
||||
all: [
|
||||
{id: 1, title: "智慧港口管理系统", desc: "为某大型港口提供全流程数字化管理解决方案，实现船舶调度、货物跟踪、泊位管理的智能化运营", img: "assets/images/blog/pro1.jpg", logo: "港口A", logoClass: "logo-blue"},
|
||||
{id: 2, title: "航运电子商务平台", desc: "打造一站式航运电商服务平台，整合船期查询、在线订舱、支付结算等功能，提升客户体验", img: "assets/images/blog/pro2.jpg", logo: "航运B", logoClass: "logo-orange"},
|
||||
{id: 3, title: "车队调度系统", desc: "优化车队运输调度流程，实现智能路径规划、实时监控、燃油管理，降低运营成本15%", img: "assets/images/blog/pro3.jpg", logo: "物流C", logoClass: "logo-green"},
|
||||
{id: 4, title: "散杂货作业平台", desc: "提供散杂货作业全流程数字化方案，支持装卸作业管理、计费结算、数据分析等功能", img: "assets/images/blog/pro4.jpg", logo: "码头D", logoClass: "logo-purple"},
|
||||
{id: 5, title: "集装箱智能运营", desc: "集装箱全程可视化管理系统，实现箱位跟踪、状态监控、数据分析，提高堆场利用率30%", img: "assets/images/blog/pro5.jpg", logo: "航运E", logoClass: "logo-red"},
|
||||
{id: 6, title: "多式联运平台", desc: "整合海铁公空多种运输方式，提供门到门全程可视化服务，提升物流效率25%", img: "assets/images/blog/pro6.jpg", logo: "联运F", logoClass: "logo-cyan"}
|
||||
],
|
||||
port: [
|
||||
{id: 4, title: "散杂货作业平台", desc: "提供散杂货作业全流程数字化方案，支持装卸作业管理、计费结算、数据分析等功能", img: "assets/images/blog/pro4.jpg", logo: "码头D", logoClass: "logo-purple"},
|
||||
{id: 7, title: "港口生产运营系统", desc: "数字化港口生产运营平台，整合作业计划、资源调度、作业监控等核心功能", img: "assets/images/blog/pro1.jpg", logo: "港口G", logoClass: "logo-blue"},
|
||||
{id: 8, title: "智慧港口安防系统", desc: "基于AI视觉的智能安防解决方案，实现24小时自动化监控与异常预警", img: "assets/images/blog/pro3.jpg", logo: "安防H", logoClass: "logo-orange"},
|
||||
{id: 9, title: "港口设备管理系统", desc: "港口机械设备全生命周期管理平台，支持设备监控、维护计划、故障诊断", img: "assets/images/blog/pro5.jpg", logo: "设备I", logoClass: "logo-green"}
|
||||
],
|
||||
shipping: [
|
||||
{id: 2, title: "航运电子商务平台", desc: "打造一站式航运电商服务平台，整合船期查询、在线订舱、支付结算等功能", img: "assets/images/blog/pro2.jpg", logo: "航运B", logoClass: "logo-orange"},
|
||||
{id: 5, title: "集装箱智能运营", desc: "集装箱全程可视化管理系统，实现箱位跟踪、状态监控、数据分析", img: "assets/images/blog/pro5.jpg", logo: "航运E", logoClass: "logo-red"},
|
||||
{id: 10, title: "船舶管理解决方案", desc: "船舶运营管理信息系统，涵盖船舶档案、船员管理、维修管理等模块", img: "assets/images/blog/pro6.jpg", logo: "航运J", logoClass: "logo-cyan"},
|
||||
{id: 11, title: "航运大数据分析", desc: "航运业大数据平台，深度挖掘运输数据价值，为决策提供支持", img: "assets/images/blog/pro4.jpg", logo: "航运K", logoClass: "logo-purple"}
|
||||
],
|
||||
fleet: [
|
||||
{id: 3, title: "车队调度系统", desc: "优化车队运输调度流程，实现智能路径规划、实时监控、燃油管理", img: "assets/images/blog/pro3.jpg", logo: "物流C", logoClass: "logo-green"},
|
||||
{id: 12, title: "干线运输管理系统", desc: "干线运输标准化管理平台，实现车辆、司机、货物的全流程管控", img: "assets/images/blog/pro2.jpg", logo: "车队L", logoClass: "logo-blue"},
|
||||
{id: 13, title: "冷链物流监控系统", desc: "冷链运输温湿度实时监控解决方案，确保货物质量安全", img: "assets/images/blog/pro5.jpg", logo: "冷链M", logoClass: "logo-orange"},
|
||||
{id: 14, title: "城配智能调度", desc: "城市配送智能调度系统，支持动态路由规划、实时订单分派", img: "assets/images/blog/pro1.jpg", logo: "城配N", logoClass: "logo-purple"}
|
||||
],
|
||||
bulky: [
|
||||
{id: 4, title: "散杂货作业平台", desc: "提供散杂货作业全流程数字化方案，支持装卸作业管理、计费结算等功能", img: "assets/images/blog/pro4.jpg", logo: "码头D", logoClass: "logo-purple"},
|
||||
{id: 15, title: "钢材物流管理系统", desc: "钢材行业专用物流管理系统，支持规格管理、库存跟踪、配送调度", img: "assets/images/blog/pro2.jpg", logo: "钢材O", logoClass: "logo-red"},
|
||||
{id: 16, title: "煤炭运输监管平台", desc: "煤炭公路运输全程监管系统，实现装车、运输、卸货全环节可视化", img: "assets/images/blog/pro6.jpg", logo: "煤炭P", logoClass: "logo-orange"},
|
||||
{id: 17, title: "散货仓储管理系统", desc: "散货仓储数字化管理解决方案，支持入库、出库、库存、盘点等", img: "assets/images/blog/pro3.jpg", logo: "仓储Q", logoClass: "logo-blue"}
|
||||
],
|
||||
container: [
|
||||
{id: 5, title: "集装箱智能运营", desc: "集装箱全程可视化管理系统，实现箱位跟踪、状态监控、数据分析", img: "assets/images/blog/pro5.jpg", logo: "航运E", logoClass: "logo-red"},
|
||||
{id: 18, title: "集装箱码头操作系统", desc: "一体化集装箱码头操作系统，支持船舶配载、堆场管理等功能", img: "assets/images/blog/pro1.jpg", logo: "码头R", logoClass: "logo-blue"},
|
||||
{id: 19, title: "空箱调运优化系统", desc: "基于AI算法的空箱调运优化平台，降低运营成本20%以上", img: "assets/images/blog/pro4.jpg", logo: "调运S", logoClass: "logo-green"},
|
||||
{id: 20, title: "集装箱维修管理", desc: "集装箱维修全生命周期管理系统，实现报修、维修、质检流程数字化", img: "assets/images/blog/pro6.jpg", logo: "维修T", logoClass: "logo-purple"}
|
||||
]
|
||||
};
|
||||
|
||||
// 渲染卡片函数
|
||||
function renderCards(category) {
|
||||
const cardsContainer = document.getElementById('caseCards');
|
||||
const cards = caseData[category] || caseData.all;
|
||||
|
||||
let html = '';
|
||||
cards.forEach(card => {
|
||||
html += `
|
||||
<a 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 class="company-logo ${card.logoClass}">${card.logo}</div>
|
||||
</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);
|
||||
|
||||
// 平滑滚动到卡片区域
|
||||
$('html, body').animate({
|
||||
scrollTop: $('.services-section').offset().top - 100
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="assets/js/kefu.js"></script>
|
||||
<!-- Plugins for this template -->
|
||||
|
||||
Reference in New Issue
Block a user