更新搜索

- Updated badge styles in culture.html for better visual consistency and added backdrop-filter support.
- Introduced a fallback panel for the map in index.html with enhanced styles and responsive design.
- Changed links in product_ecommerce_freight_booking.html, product_full_logistics_chain_cargo_agent.html, product_full_logistics_chain_platform.html, product_full_logistics_chain_ship_agent.html, product_port_cdi_container.html, product_shipping_boat.html, product_shipping_company.html to point to new URLs with query parameters.
- Improved scroll reveal functionality in solution_inland_river_shipping.html, solution_logistics_chain.html, solution_port_supply_chain.html, and solution_supply_chain.html by replacing forEach with a traditional for loop for better performance.

.vsls.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/vsls.json",
+  "excludeFiles": [
+    "nuxt-web"
+  ]
+}

assets/css/product.css

@@ -438,6 +438,35 @@
     display: flex;
 }
 
+.cases-slider {
+    margin-top: 30px;
+}
+
+.cases-slider .owl-stage-outer {
+    padding: 4px 0 12px;
+}
+
+.cases-slider .owl-stage {
+    display: flex;
+}
+
+.cases-slider .owl-item {
+    display: flex;
+    float: none;
+}
+
+.cases-slider .case-slide {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.cases-slider .case-card-link {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
 .case-card {
     background: #fff;
     border-radius: 16px;
@@ -454,9 +483,7 @@
     position: relative;
     padding: 28px;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
+    align-items: flex-end;
     overflow: hidden;
 }
 
@@ -497,15 +524,11 @@
     font-weight: 700;
     color: #fff;
     margin: 0;
-    width: 100%;
-    text-align: center;
 }
 
 .case-card-body {
     padding: 28px;
     flex: 1;
-    display: flex;
-    align-items: flex-start;
 }
 
 .case-project {
@@ -526,6 +549,24 @@
     -webkit-line-clamp: 5;
 }
 
+.cases-slider .owl-controls {
+    margin-top: 22px;
+    text-align: center;
+}
+
+.cases-slider .owl-dots .owl-dot span {
+    width: 12px;
+    height: 12px;
+    margin: 5px 6px;
+    background: rgba(20, 129, 255, 0.18);
+    transition: all 0.2s ease;
+}
+
+.cases-slider .owl-dots .owl-dot.active span,
+.cases-slider .owl-dots .owl-dot:hover span {
+    background: rgba(20, 129, 255, 1);
+}
+
 @media (max-width: 767px) {
     .cases-section .row + .row {
         margin-top: 24px;

assets/css/solution.css

@@ -15,7 +15,25 @@
             align-items: center;
             padding-top: 110px; /* header高度80px + 最小间距30px */
             overflow: hidden;
-            background: url("../images/solution/neihe.png");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+
+        .solution-hero--inland-river {
+            background-image: url("../images/solution/neihe.png");
+        }
+
+        .solution-hero--supply-chain {
+            background-image: url("../images/solution/dazong.png");
+        }
+
+        .solution-hero--port-supply-chain {
+            background-image: url("../images/solution/gangkou.png");
+        }
+
+        .solution-hero--logistics-chain {
+            background-image: url("../images/solution/quancheng.png");
         }
 
         .solution-hero::before {
@@ -255,7 +273,7 @@
 
         /* Pain Points Section */
         .pain-points-section {
-            padding: 100px 0;
+            padding: 70px 0;
             background: #fff;
         }
 
@@ -325,7 +343,7 @@
             color: #0f172a;
             margin-bottom: 12px;
             line-height: 1.4;
-            min-height: 2.8em;
+            min-height: 2em;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
@@ -343,7 +361,7 @@
 
         /* Solution Architecture Section */
         .architecture-section {
-            padding: 100px 0;
+            padding: 70px 0;
             background: linear-gradient(135deg, #005dc7 0%, rgb(1, 79, 212) 100%);
             color: #fff;
             overflow: hidden;
@@ -438,6 +456,7 @@
 
         .arch-grid-item {
             background: rgba(30, 41, 59, 0.8);
+            -webkit-backdrop-filter: blur(8px);
             backdrop-filter: blur(8px);
             border: 1px solid rgba(71, 85, 105, 0.5);
             border-radius: 16px;
@@ -501,6 +520,7 @@
             border-radius: 16px;
             padding: 10px ;
             border: 1px solid rgba(71, 85, 105, 0.5);
+            -webkit-backdrop-filter: blur(8px);
             backdrop-filter: blur(8px);
             box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.3);
             display: flex;
@@ -558,7 +578,7 @@
 
         /* Product Matrix Section */
         .products-section {
-            padding: 100px 0;
+            padding: 70px 0;
             background: #f8fafc;
         }
 
@@ -947,6 +967,35 @@
             margin-top: 30px;
         }
 
+        .cases-slider {
+            margin-top: 30px;
+        }
+
+        .cases-slider .owl-stage-outer {
+            padding: 4px 0 12px;
+        }
+
+        .cases-slider .owl-stage {
+            display: flex;
+        }
+
+        .cases-slider .owl-item {
+            display: flex;
+            float: none;
+        }
+
+        .cases-slider .case-slide {
+            display: flex;
+            width: 100%;
+            height: 100%;
+        }
+
+        .cases-slider .case-card-link {
+            display: flex;
+            width: 100%;
+            height: 100%;
+        }
+
         .case-card {
             background: #fff;
             border-radius: 16px;
@@ -954,6 +1003,7 @@
             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
             border: 1px solid #e2e8f0;
             height: 100%;
+            width: 100%;
             display: flex;
             flex-direction: column;
         }
@@ -1024,6 +1074,24 @@
             margin: 0;
         }
 
+        .cases-slider .owl-controls {
+            margin-top: 22px;
+            text-align: center;
+        }
+
+        .cases-slider .owl-dots .owl-dot span {
+            width: 12px;
+            height: 12px;
+            margin: 5px 6px;
+            background: rgba(20, 129, 255, 0.18);
+            transition: all 0.2s ease;
+        }
+
+        .cases-slider .owl-dots .owl-dot.active span,
+        .cases-slider .owl-dots .owl-dot:hover span {
+            background: rgba(20, 129, 255, 1);
+        }
+
         /* Scroll Animation */
         .reveal {
             opacity: 0;
@@ -1072,11 +1140,7 @@
                 gap: 16px;
             }
 
-            .cases-section .row + .row {
-                margin-top: 24px;
-            }
-
-            .cases-section .col-md-4 + .col-md-4 {
+            .cases-slider {
                 margin-top: 24px;
             }
 

assets/css/style.css

@@ -89,7 +89,14 @@ URL:            http://themeforest.net/user/blue_design
 /*---------------------------
 	Fonts
 ----------------------------*/
-@import url("https://fonts.googleapis.com/css?family=Muli:400,400i,600,700,800&display=swap");
+@font-face {
+  font-family: "Muli";
+  font-style: normal;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: local("Mulish"), local("Muli"),
+    url("../fonts/Mulish-wght.ttf") format("truetype");
+}
 /*--------------------------------------------------------------
 #0.1    Theme Reset Style
 --------------------------------------------------------------*/
@@ -117,7 +124,7 @@ body {
 p {
   color: #1d2f4b;
 
-  line-height: 1.5em;
+  line-height: 2em;
 }
 
 h1,
@@ -154,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
 --------------------------------------------------------------*/
@@ -1249,8 +1251,9 @@ color:#ffffff;
 
 @media (max-width: 991px) {
   .service-sidebar {
-    max-width: 300px;
-    margin-top: 80px;
+    width: 100%;
+    max-width: none;
+    margin-top: 30px;
   }
 }
 
@@ -1315,7 +1318,7 @@ color:#ffffff;
 }
 
 .service-sidebar .contact-widget {
-  background: url("../images/single-contact-widget-bg.jpg") center center/cover no-repeat local;
+  background: url("../images/bg_2.webp") center center/cover no-repeat local;
   padding: 45px 40px;
   position: relative;
   text-align: center;
@@ -1495,6 +1498,89 @@ color:#ffffff;
   }
 }
 
+@media (max-width: 767px) {
+  .page-title {
+    height: 220px;
+  }
+
+  .page-title h2 {
+    font-size: 30px;
+    font-size: 1.875rem;
+    line-height: 1.25;
+  }
+
+  .page-path {
+    line-height: 1.6;
+    word-break: break-word;
+  }
+
+  .features-section-s2 {
+    padding-top: 20px;
+  }
+
+  .project-single-content .content-area > h2:first-child {
+    margin-top: 25px !important;
+    font-size: 24px;
+    line-height: 1.35;
+  }
+
+  .project-single-content .content-area > p:first-of-type {
+    margin: 20px 0 22px !important;
+    line-height: 1.8;
+  }
+
+  .challange-solution-section {
+    margin-top: 10px;
+  }
+
+  .service-sidebar {
+    margin-top: 24px;
+  }
+
+  .service-sidebar > .widget + .widget {
+    margin-top: 24px;
+  }
+
+  .service-sidebar .contact-widget {
+    padding: 28px 22px;
+  }
+
+  .service-sidebar .contact-widget h5 {
+    font-size: 18px;
+    margin: 0.5em 0;
+  }
+
+  .service-sidebar .contact-widget a {
+    margin-top: 15px;
+  }
+
+  .service-sidebar .related-products-widget {
+    padding: 16px;
+  }
+
+  .service-sidebar .related-product-card .product-image {
+    height: auto;
+  }
+
+  .service-sidebar .related-product-card .product-image img {
+    height: auto;
+  }
+
+  .service-sidebar .related-product-card .product-info {
+    padding: 12px 0 0;
+  }
+
+  .service-sidebar .related-product-card .product-title {
+    font-size: 15px;
+    line-height: 1.4;
+  }
+
+  .service-sidebar .related-product-card .product-desc {
+    font-size: 13px;
+    line-height: 1.7;
+  }
+}
+
 /*------------------------------------
 	blog sidebar
 ------------------------------------*/
@@ -1885,6 +1971,7 @@ color:#ffffff;
 .site-header #navbar > ul li a:focus {
   text-decoration: none;
   color: #1481ff !important;
+  outline: none;
 }
 
 @media screen and (min-width: 992px) {
@@ -2825,6 +2912,7 @@ color:#ffffff;
   display: flex;
   position: relative;
   z-index: 0;
+  background: #0d1f38;
 }
 
 @media (max-width: 991px) {
@@ -2841,7 +2929,10 @@ color:#ffffff;
 
 .hero-slider .swiper-slide {
   overflow: hidden;
+  background-position: center;
+  background-repeat: no-repeat;
   background-size: cover;
+  background-color: #0d1f38;
   color: #fff;
 }
 
@@ -2854,15 +2945,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;
@@ -2873,6 +2965,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: 124%;
+    left: -12%;
+  }
+}
+
+@media (max-width: 767px) {
+  .hero-slider .slide-inner {
+    width: 116%;
+    left: -8%;
+  }
 }
 
 .hero-slider .swiper-button-prev,
@@ -3064,7 +3175,7 @@ color:#ffffff;
   font-size: 20px;
   font-size: 1.25rem;
   font-weight: 600;
-  color: #031c5c
+  color: #031c5c;
   margin: 0 0 0.75em;
 }
 
@@ -3082,6 +3193,47 @@ color:#ffffff;
   }
 }
 
+@media (max-width: 480px) {
+  .hero-slider .slide-inner {
+    width: 100%;
+    left: 0;
+  }
+
+  .hero-style-1 .container,
+  .hero-style-2 .container,
+  .hero-style-3 .container {
+    width: 100%;
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  .hero-style-1 .slide-title,
+  .hero-style-2 .slide-title,
+  .hero-style-3 .slide-title,
+  .hero-style-1 .slide-text,
+  .hero-style-2 .slide-text,
+  .hero-style-3 .slide-text {
+    max-width: 100%;
+  }
+
+  .hero-style-1 .slide-title h2,
+  .hero-style-2 .slide-title h2,
+  .hero-style-3 .slide-title h2 {
+    font-size: 30px;
+    font-size: 1.875rem;
+    line-height: 1.25;
+    margin-bottom: 0.5em;
+  }
+
+  .hero-style-1 .slide-text p,
+  .hero-style-2 .slide-text p,
+  .hero-style-3 .slide-text p {
+    font-size: 15px;
+    font-size: 0.9375rem;
+    line-height: 1.6;
+  }
+}
+
 .hero-style-1 .slide-btns > a:first-child, .hero-style-2 .slide-btns > a:first-child, .hero-style-3 .slide-btns > a:first-child {
   margin-right: 15px;
 }
@@ -3478,7 +3630,7 @@ color:#ffffff;
 --------------------------------------------------------------*/
 @media screen and (min-width: 992px) {
   .features-section {
-    margin-top: -101px;
+    margin-top: -96px;
   }
 }
 
@@ -3790,6 +3942,21 @@ color:#ffffff;
   border-radius: 10px;
 }
 
+.services-section .service-grids a.grid {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  -webkit-transition: -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.services-section .service-grids a.grid:hover {
+  -webkit-transform: translateY(-4px);
+  transform: translateY(-4px);
+  -webkit-box-shadow: 0px 16px 42px 0px rgba(16, 37, 65, 0.14);
+  box-shadow: 0px 16px 42px 0px rgba(16, 37, 65, 0.14);
+}
+
 .services-section .service-grids .grid1 {
   background-color: #fff;
   width: calc(25% - 30px);
@@ -4657,6 +4824,7 @@ color:#ffffff;
   box-shadow: -1px 3px 6px rgb(5 99 241 / 67%);
   border-radius: 30px;
   background: rgba(16, 119, 255, 0.918);
+  -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   transform: translateY(-4px);
 }
@@ -7708,16 +7876,18 @@ color:#ffffff;
   display: flex;
   flex-direction: column;
   position: relative;
+
 }
 .product-card .card-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items:top;
+  height: 2em;
   margin-bottom: 12px;
 }
 .product-card .card-header h4 {
   margin: 0;
-  font-size: 17px;
+  font-size: 16px;
   color: #102541;
   font-weight: 600;
   white-space: normal;
@@ -7739,7 +7909,7 @@ color:#ffffff;
   color: #666;
   line-height: 1.6;
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -7964,3 +8134,76 @@ color:#ffffff;
     color: #23527c;
     text-decoration: none;
 }
+
+/* 客户案例详情页项目 Tab */
+.case-project-switcher {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    margin: 40px 0 30px;
+    padding-bottom: 18px;
+    border-bottom: 1px solid #dbe6f3;
+}
+
+.case-project-tab {
+    border: 0;
+    border-radius: 16px;
+    padding: 14px 22px;
+    background: #f2f7ff;
+    color: #39526d;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.4;
+    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
+}
+
+.case-project-tab:hover,
+.case-project-tab:focus {
+    background: #e3efff;
+    color: #173f73;
+    outline: none;
+}
+
+.case-project-tab.is-active {
+    background: linear-gradient(135deg, #0b63ce 0%, #1ba0ff 100%);
+    color: #ffffff;
+    box-shadow: 0 12px 24px rgba(11, 99, 206, 0.2);
+}
+
+.case-project-pane {
+    display: none;
+}
+
+.case-project-pane.is-active {
+    display: block;
+    animation: caseProjectFadeIn 0.25s ease;
+}
+
+.case-project-pane .project-single-content {
+    margin-bottom: 24px;
+}
+
+@keyframes caseProjectFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media (max-width: 991px) {
+    .case-project-switcher {
+        margin-top: 30px;
+    }
+}
+
+@media (max-width: 767px) {
+    .case-project-tab {
+        width: 100%;
+        text-align: left;
+    }
+}

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;
@@ -241,7 +243,7 @@
     background: linear-gradient(90deg, rgba(20, 129, 255, 0.08) 0%, transparent 100%);
 }
 
-.timeline-container:has(.auto-expanded) .timeline-item:not(.auto-expanded) {
+.timeline-container.has-auto-expanded .timeline-item:not(.auto-expanded) {
     opacity: 0.4;
 }