diff --git a/assets/css/style.css b/assets/css/style.css
index 9c6c281..0a17014 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -161,11 +161,6 @@ img {
max-width: 100%;
}
-@font-face {
-ß
- src: url("/fonts/Flaticon.woff2") format("woff2"),
- url("/fonts/themify.woff") format("woff");
-}
/*--------------------------------------------------------------
#0.2 Global Elements
--------------------------------------------------------------*/
@@ -2832,6 +2827,7 @@ color:#ffffff;
display: flex;
position: relative;
z-index: 0;
+ background: #0d1f38;
}
@media (max-width: 991px) {
@@ -2848,7 +2844,10 @@ color:#ffffff;
.hero-slider .swiper-slide {
overflow: hidden;
+ background-position: center;
+ background-repeat: no-repeat;
background-size: cover;
+ background-color: #0d1f38;
color: #fff;
}
@@ -2861,15 +2860,16 @@ color:#ffffff;
}
.hero-slider .slide-inner {
- width: 100%;
+ width: 132%;
height: 100%;
position: absolute;
background-size: cover;
- left: 0;
+ left: -16%;
top: 0;
z-index: 1;
-
background-position: center;
+ background-repeat: no-repeat;
+ background-color: #0d1f38;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@@ -2880,6 +2880,25 @@ color:#ffffff;
-ms-flex-align: center;
align-items: center;
text-align: left;
+ will-change: transform;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+
+@media (max-width: 991px) {
+ .hero-slider .slide-inner {
+ width: 120%;
+ left: -10%;
+ }
+}
+
+@media (max-width: 767px) {
+ .hero-slider .slide-inner {
+ width: 112%;
+ left: -6%;
+ }
}
.hero-slider .swiper-button-prev,
@@ -3485,7 +3504,7 @@ color:#ffffff;
--------------------------------------------------------------*/
@media screen and (min-width: 992px) {
.features-section {
- margin-top: -101px;
+ margin-top: -96px;
}
}
diff --git a/assets/css/timeline.css b/assets/css/timeline.css
index 113b0d3..c405f69 100644
--- a/assets/css/timeline.css
+++ b/assets/css/timeline.css
@@ -3,8 +3,6 @@
Smart Timeline Component - Horizontal Expansion
============================================ */
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Oswald:wght@400;700&display=swap');
-
:root {
--tl-bg-color: #f8fafc;
--tl-line-color: rgba(20, 129, 255, 0.3);
@@ -12,6 +10,10 @@
--tl-text-color: #2a3e5d;
--tl-year-color: #102541;
--tl-transition-speed: 0.5s;
+ --tl-font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+ "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
+ --tl-font-display: "DIN Alternate", "Arial Narrow", "Helvetica Neue",
+ Arial, sans-serif;
}
/* Section 容器 */
@@ -20,7 +22,7 @@
background-image:
radial-gradient(circle at 10% 20%, rgba(20, 129, 255, 0.08) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(20, 129, 255, 0.05) 0%, transparent 20%);
- font-family: 'Noto Sans SC', sans-serif;
+ font-family: var(--tl-font-sans);
overflow: hidden;
display: flex;
flex-direction: column;
@@ -124,7 +126,7 @@
transform-origin: 0 0;
transform: rotate(90deg);
- font-family: 'Oswald', sans-serif;
+ font-family: var(--tl-font-display);
font-size: 14px;
color: var(--tl-year-color);
white-space: nowrap;
@@ -140,7 +142,7 @@
/* 竖向文字中的简短描述 */
.short-desc {
- font-family: 'Noto Sans SC', sans-serif;
+ font-family: var(--tl-font-sans);
font-size: 12px;
opacity: 0.6;
font-weight: 300;
@@ -194,7 +196,7 @@
.content-date {
display: block;
color: var(--tl-active-color);
- font-family: 'Oswald', sans-serif;
+ font-family: var(--tl-font-display);
font-size: 2rem;
margin-bottom: 15px;
font-weight: bold;
diff --git a/assets/fonts/themify.woff b/assets/fonts/themify.woff
index 847ebd1..23debda 100644
Binary files a/assets/fonts/themify.woff and b/assets/fonts/themify.woff differ
diff --git a/assets/images/tangshangang.jpg b/assets/images/tangshangang.jpg
index 76c7c20..3ae5ea4 100644
Binary files a/assets/images/tangshangang.jpg and b/assets/images/tangshangang.jpg differ
diff --git a/assets/images/tangshanshiye.jpg b/assets/images/tangshanshiye.jpg
new file mode 100644
index 0000000..674bd42
Binary files /dev/null and b/assets/images/tangshanshiye.jpg differ
diff --git a/assets/js/script.js b/assets/js/script.js
index 908e8fc..92bf285 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -50,11 +50,11 @@
// Function for small menu
- function smallNavFunctionality() {
- var windowWidth = window.innerWidth;
- var mainNav = $(".navigation-holder");
- var smallNav = $(".navigation-holder > .small-nav");
- var subMenu = smallNav.find(".sub-menu");
+ function smallNavFunctionality() {
+ var windowWidth = window.innerWidth;
+ var mainNav = $(".navigation-holder");
+ var smallNav = $(".navigation-holder > .small-nav");
+ var subMenu = smallNav.find(".sub-menu");
var megamenu = smallNav.find(".mega-menu");
var menuItemWidthSubMenu = smallNav.find(".menu-item-has-children > a");
@@ -70,10 +70,30 @@
} else if (windowWidth > 991) {
mainNav.find(".sub-menu").show();
mainNav.find(".mega-menu").show();
- }
- }
-
- smallNavFunctionality();
+ }
+ }
+
+ function initKefuWidget() {
+ if (typeof Kefu !== "function" || !document.body || document.querySelector(".kefubox")) {
+ return;
+ }
+
+ new Kefu({
+ tel: "0535－2106025",
+ qq: "278294683",
+ wechatPerson: {
+ state: false,
+ imgURL: "./imgs/2wm.png"
+ },
+ wechatofficial: {
+ state: true,
+ imgURL: "assets/images/wechat.webp"
+ }
+ });
+ }
+
+ smallNavFunctionality();
+ initKefuWidget();
// Parallax background
@@ -95,11 +115,86 @@
}
}
+ function getSlideBackgroundUrls() {
+ var backgroundUrls = [];
+
+ $(".hero-slider .slide-bg-image[data-background]").each(function() {
+ var backgroundUrl = $(this).data("background");
+
+ if (backgroundUrl && $.inArray(backgroundUrl, backgroundUrls) === -1) {
+ backgroundUrls.push(backgroundUrl);
+ }
+ });
+
+ return backgroundUrls;
+ }
+
+ function waitForHeroBackgrounds(onComplete) {
+ var backgroundUrls = getSlideBackgroundUrls();
+ var remaining = backgroundUrls.length;
+ var hasCompleted = false;
+
+ function finish() {
+ if (hasCompleted) {
+ return;
+ }
+
+ hasCompleted = true;
+ onComplete();
+ }
+
+ if (!remaining) {
+ finish();
+ return;
+ }
+
+ var fallbackTimer = setTimeout(finish, 2500);
+
+ $.each(backgroundUrls, function(index, backgroundUrl) {
+ var image = new Image();
+ var resolved = false;
+
+ function markResolved() {
+ if (resolved) {
+ return;
+ }
+
+ resolved = true;
+ remaining -= 1;
+
+ if (!remaining) {
+ clearTimeout(fallbackTimer);
+ finish();
+ }
+ }
+
+ image.onload = markResolved;
+ image.onerror = markResolved;
+ image.src = backgroundUrl;
+
+ if (image.complete) {
+ markResolved();
+ }
+ });
+ }
+
// DATA BACKGROUND IMAGE
var sliderBgSetting = $(".slide-bg-image");
sliderBgSetting.each(function(indx){
- if ($(this).attr("data-background")){
- $(this).css("background-image", "url(" + $(this).data("background") + ")");
+ var backgroundUrl = $(this).attr("data-background");
+ var $slide = $(this).closest(".swiper-slide");
+
+ if (backgroundUrl){
+ $(this).css("background-image", "url(" + backgroundUrl + ")");
+
+ if ($slide.length) {
+ $slide.css({
+ "background-image": "url(" + backgroundUrl + ")",
+ "background-position": "center center",
+ "background-repeat": "no-repeat",
+ "background-size": "cover"
+ });
+ }
}
});
@@ -110,9 +205,13 @@
jQuery('.swiper-slide').each( function(index){
menu.push( jQuery(this).find('.slide-inner').attr("data-text") );
});
- var interleaveOffset = 0.5;
+ var totalSlides = jQuery(".swiper-slide").length;
+ var interleaveOffset = 0.16;
var swiperOptions = {
loop: true,
+ loopedSlides: totalSlides,
+ preloadImages: true,
+ updateOnImagesReady: true,
speed: 1000,
parallax: true,
autoplay: {
@@ -137,8 +236,12 @@
var slideProgress = swiper.slides[i].progress;
var innerOffset = swiper.width * interleaveOffset;
var innerTranslate = slideProgress * innerOffset;
- swiper.slides[i].querySelector(".slide-inner").style.transform =
- "translate3d(" + innerTranslate + "px, 0, 0)";
+ var slideInner = swiper.slides[i].querySelector(".slide-inner");
+
+ if (slideInner) {
+ slideInner.style.transform =
+ "translate3d(" + innerTranslate + "px, 0, 0)";
+ }
}
},
@@ -153,8 +256,11 @@
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = speed + "ms";
- swiper.slides[i].querySelector(".slide-inner").style.transition =
- speed + "ms";
+ var slideInner = swiper.slides[i].querySelector(".slide-inner");
+
+ if (slideInner) {
+ slideInner.style.transition = speed + "ms";
+ }
}
}
}
@@ -168,19 +274,23 @@
/*------------------------------------------
= HIDE PRELOADER
-------------------------------------------*/
+ function hidePreloader() {
+ $('.preloader').delay(100).fadeOut(500, function() {
+
+ //active wow
+ if (wow) {
+ wow.init();
+ }
+
+
+ });
+ }
+
function preloader() {
if($('.preloader').length) {
- $('.preloader').delay(100).fadeOut(500, function() {
-
- //active wow
- if (wow) {
- wow.init();
- }
-
-
- });
+ waitForHeroBackgrounds(hidePreloader);
}
- }
+ }
/*------------------------------------------
@@ -701,16 +811,17 @@
/*==========================================================================
WHEN DOCUMENT LOADING
==========================================================================*/
- $(window).on('load', function() {
-
- preloader();
-
-
- toggleMobileNavigation();
-
- smallNavFunctionality();
-
- });
+ $(window).on('load', function() {
+
+ preloader();
+
+
+ toggleMobileNavigation();
+
+ smallNavFunctionality();
+ initKefuWidget();
+
+ });
diff --git a/classiccase.html b/classiccase.html
index d3800fc..6996a69 100644
--- a/classiccase.html
+++ b/classiccase.html
@@ -150,11 +150,12 @@
{id: 30, title: "河北黄骅港", desc: "我国\"西煤东运、北煤南运\"核心枢纽港口，货物吞吐量连续五年超3亿吨，年疏港车辆通行量突破120万辆次...", img: "assets/images/huanghua.jpg", href: "classiccase/huanghua_vehicle_analysis.html",category:["fleet","logistics","port"]},
{id: 32, title: "华海国际船舶代理有限公司", desc: "华海集团创立于2003年，主营船舶代理、货物代理、国际远洋及国内沿海运输、租船订舱...", img: "assets/images/huahai.png", href: "classiccase/rizhao_huahai_shipping.html",category:["ship-agent","freight-forwarder","logistics"]},
{id: 34, title: "上海港船务代理有限公司", desc: "1993年8月成立，植根上海并深度依托国际航运中心优势，专注水上运输领域的专业船舶代理服务...", img: "assets/images/shanghaigang.png", href: "classiccase/shanghai_port_coastal_system.html",category:["shipping-company","ship-agent","freight-forwarder"]},
- {id: 35, title: "唐山港口实业集团有限公司", desc: "河北省港口整合平台核心企业，负责运营唐山港\"三港四区\"中的京唐港区与曹妃甸港区，年吞吐量逾3亿吨...", img: "assets/images/tangshangang.jpg", href: "classiccase/tangshan_bigdata_platform.html",category:["port"]},
+ {id: 35, title: "唐山港口实业集团有限公司", desc: "河北省港口整合平台核心企业，负责运营唐山港\"三港四区\"中的京唐港区与曹妃甸港区，年吞吐量逾3亿吨...", img: "assets/images/tangshanshiye.jpg", href: "classiccase/tangshan_bigdata_platform.html",category:["port"]},
{id: 37, title: "上海鹏华船务有限公司", desc: "2004年成立的中国首家公共船舶代理合资企业，致力于为全球客户提供全方位、高效率国际船舶代理服务...", img: "assets/images/shanghaipenghua.jpg", href: "classiccase/shanghai_penghua_platform.html",category:["ship-agent","shipping-company","freight-forwarder"]},
{id: 38, title: "上海新海国际船舶代理有限公司", desc: "1993年3月29日成立于上海，专注提供全方位国际船舶代理服务，作为连接船东、租家、港口及相关方的关键纽带...", img: "assets/images/xinhai.jpg", href: "classiccase/shanghai_xinhai_freight.html",category:["ship-agent","shipping-company","freight-forwarder"]},
{id: 39, title: "济宁港航建设有限公司", desc: "济宁能源集团核心子公司，主营京杭运河济宁段港口、航道、船闸一体化投资运营，年吞吐量超3000万吨...", img: "assets/images/jining.png", href: "classiccase/canal_logistics_supervision.html",category:["port","logistics"]}
- ];
+
+ ];
// 渲染卡片函数
function renderCards(category) {
diff --git a/header.html b/header.html
index 296de98..4fb2a96 100644
--- a/header.html
+++ b/header.html
@@ -189,21 +189,5 @@
-
-