优化样式表，更新字体引用，调整背景色，增强响应式设计；更新首页轮播图，添加新图片；重构JavaScript功能，增加客服小部件；修复HTML结构，确保页面加载顺畅。

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;
   }
 }
 

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;

assets/js/script.js

@@ -73,7 +73,27 @@
         }
     }
 
+    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")){
+        var backgroundUrl = $(this).attr("data-background");
-            $(this).css("background-image", "url(" + $(this).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 =
+                        var slideInner = swiper.slides[i].querySelector(".slide-inner");
-                        "translate3d(" + innerTranslate + "px, 0, 0)";
+
+                        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 =
+                        var slideInner = swiper.slides[i].querySelector(".slide-inner");
-                        speed + "ms";
+
+                        if (slideInner) {
+                            slideInner.style.transition = speed + "ms";
+                        }
                     }
                 }
             }
@@ -168,17 +274,21 @@
     /*------------------------------------------
         = 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() {
+            waitForHeroBackgrounds(hidePreloader);
-
-                //active wow
-                if (wow) {
-                    wow.init();
-                }
-
-
-            });
         }
     }
 
@@ -709,6 +819,7 @@
             toggleMobileNavigation();
 
             smallNavFunctionality();
+            initKefuWidget();
 
         });
 

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) {

header.html

@@ -189,21 +189,5 @@
         </div><!-- end of container -->
     </nav>
 </header>
-<script src="assets/js/kefu.js"></script>
-<script>
-    var kefu = new Kefu({
-        // index: "/",
-        tel: "0535－2106025",//电话号码
-        qq: "278294683",//在线QQ
-        wechatPerson: {
-            state: false,// true是开启个人微信二维码, false不开启
-            imgURL: "./imgs/2wm.png" //图片路径
-        },
-        wechatofficial: {
-            state: true,// true是开启微信公众号二维码, false不开启
-            imgURL: "assets/images/wechat.webp" //图片路径
-        }//微信公众号
-    });
-</script>
 </body>
 </html>

index.html

@@ -37,8 +37,9 @@
     <noscript><link rel="stylesheet" href="assets/css/jquery.fancybox.css"></noscript>
     <link href="assets/fonts/Flaticon.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
 
-    <!-- 仅预加载首屏首张轮播背景，避免未使用的预加载告警 -->
+    <!-- 预加载首页首屏轮播背景，减少首屏空白 -->
     <link rel="preload" href="assets/images/slider/slide-1.png" as="image">
+    <link rel="preload" href="assets/images/slider/slide-2.png" as="image">
     <style>
         #map {
             position: relative;
@@ -164,8 +165,8 @@
         <section class="hero-slider hero-style-1">
             <div class="swiper-container">
                 <div class="swiper-wrapper">
-                                        <div class="swiper-slide">
+                    <div class="swiper-slide" style="background-image: url('assets/images/slider/slide-1.png');">
-                        <div class="slide-inner slide-bg-image" data-background="assets/images/slider/slide-1.png" style="max-width: none;">
+                        <div class="slide-inner slide-bg-image" data-background="assets/images/slider/slide-1.png" style="max-width: none; background-image: url('assets/images/slider/slide-1.png');">
 
                             <div class="container">
                                 <div data-swiper-parallax="300" class="slide-title">
@@ -182,8 +183,8 @@
                             </div>
                         </div> <!-- end slide-inner --> 
                     </div>
-                    <div class="swiper-slide">
+                    <div class="swiper-slide" style="background-image: url('assets/images/slider/slide-2.png');">
-                        <div class="slide-inner slide-bg-image" data-background="assets/images/slider/slide-2.png">
+                        <div class="slide-inner slide-bg-image" data-background="assets/images/slider/slide-2.png" style="background-image: url('assets/images/slider/slide-2.png');">
                             <div class="container">
                                 <div data-swiper-parallax="300" class="slide-title">
                                     <h2>携手数字化，智领新航运</h2>

joinus.html

@@ -245,6 +245,7 @@
 
 
     <!-- Plugins for this template -->
+    <script src="assets/js/kefu.js"></script>
     <script src="assets/js/jquery-plugin-collection.js"></script>
 
     <!-- Custom script for this template -->