修改产品中心选项

assets/css/style.css

@@ -104,6 +104,8 @@ body {
   font-size: 1rem;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
+  margin: 0;
+  padding: 0;
 }
 
 @media (max-width: 767px) {
@@ -959,6 +961,129 @@ img {
   margin-bottom: 1.3em;
 }
 
+/*--------------------------------------
+	service tab navigation
+----------------------------------------*/
+.service-tab-nav {
+  margin-bottom: 40px;
+  background: #fff;
+}
+
+.service-tab-nav .service-list-widget ul {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  border-bottom: 2px solid #f2f7fd;
+}
+
+.service-tab-nav .service-list-widget ul li {
+  flex: 1;
+  min-width: 200px;
+  text-align: center;
+}
+
+.service-tab-nav .service-list-widget a {
+  font-size: 16px;
+  font-size: 1rem;
+  background: transparent;
+  font-weight: 500;
+  display: block;
+  color: #0a172b;
+  padding: 20px 25px;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  border-bottom: 3px solid transparent;
+  margin-bottom: -2px;
+}
+
+.service-tab-nav .service-list-widget a:hover {
+  color: #1481ff;
+  background-color: #f8fbff;
+}
+
+.service-tab-nav .service-list-widget .current a {
+  color: #1481ff;
+  background-color: transparent;
+  border-bottom-color: #1481ff;
+  font-weight: 600;
+}
+
+/* 响应式样式 */
+@media (max-width: 767px) {
+  .service-tab-nav .service-list-widget ul {
+    border: 2px solid #f2f7fd;
+  }
+
+  .service-tab-nav .service-list-widget ul li {
+    flex: 1 1 100%;
+    border-bottom: 1px solid #ebf3fd;
+  }
+
+  .service-tab-nav .service-list-widget ul li:last-child {
+    border-bottom: none;
+  }
+
+  .service-tab-nav .service-list-widget a {
+    font-size: 14px;
+    font-size: 0.875rem;
+    padding: 15px 24px;
+    border-bottom: none;
+  }
+
+  .service-tab-nav .service-list-widget a:hover,
+  .service-tab-nav .service-list-widget .current a {
+    background-color: #1481ff;
+    color: #fff;
+  }
+}
+
+/*--------------------------------------
+	service single section custom padding
+----------------------------------------*/
+.service-single-section {
+  padding-top: 0;
+  padding-bottom: 50px;
+}
+
+/*--------------------------------------
+	service tab nav fullwidth
+----------------------------------------*/
+.service-tab-nav-fullwidth {
+  width: 100%;
+  background: #fff;
+  border-bottom: 2px solid #f2f7fd;
+  position: relative;
+}
+
+.service-tab-nav-fullwidth .service-tab-nav {
+  margin-bottom: 0;
+  background: transparent;
+  max-width: 1140px;
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+.service-tab-nav-fullwidth .service-tab-nav .service-list-widget ul {
+  border-bottom: none;
+}
+
+/* page title with no bottom padding for seamless connection */
+.page-title.page-title2 {
+  padding-bottom: 0;
+}
+
+/* Ensure no spacing between sections */
+.page-title2 + .service-tab-nav-fullwidth {
+  margin-top: 0;
+}
+
+/* Remove default margins from page-wrapper */
+.page-wrapper > * {
+  margin-top: 0;
+}
+
 /*--------------------------------------
 	service single sidebar
 ----------------------------------------*/

product_Logistics.html

@@ -70,6 +70,19 @@
         <!-- start service-single-section -->
         <section class=" blog-pg-section service-single-section section-padding">
             <div class="container">
+                <div class="row">
+                    <div class="col col-md-12">
+                        <div class="service-tab-nav">
+                            <div class="widget service-list-widget">
+                                <ul>
+                                    <li class="current"><a href="product_Logistics.html">全程物流链系列产品</a></li>
+                                    <li><a href="product_eCommerce.html">港航电商平台系列产品</a></li>
+                                    <li><a href="product_port.html">云码头系列产品</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <div class="row">
                     <div  class="col col-md-9 col-md-push-3">
                         <div class="product-cards">
@@ -98,14 +111,6 @@
                     </div>
                     <div class="col col-md-3 col-md-pull-9">
                         <div class="service-sidebar">
-                            <div class="widget service-list-widget">
-                                <ul>
-                                    <li class="current"><a href="product_Logistics.html">全程物流链系列产品</a></li>
-                                    <li><a href="product_eCommerce.html">港航电商平台系列产品</a></li>
-                                    <li><a href="product_port.html">云码头系列产品</a></li>
-
-                                </ul>
-                            </div>
                             <!--<div class="widget download-widget">-->
                                 <!--<ul>-->
                                     <!--<li><a href="#"><i class="ti-zip"></i>更多公司介绍</a></li>-->

product_eCommerce.html

@@ -71,6 +71,19 @@
         <!-- start service-single-section -->
         <section class=" blog-pg-section service-single-section section-padding">
             <div class="container">
+                <div class="row">
+                    <div class="col col-md-12">
+                        <div class="service-tab-nav">
+                            <div class="widget service-list-widget">
+                                <ul>
+                                    <li ><a href="product_Logistics.html">全程物流链系列产品</a></li>
+                                    <li class="current"><a href="product_eCommerce.html">港航电商平台系列产品</a></li>
+                                    <li><a href="product_port.html">云码头系列产品</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <div class="row">
                     <div class="col col-md-9 col-md-push-3">
                         <div class="product-cards">
@@ -102,18 +115,9 @@
                                 </div>
                             </a>
                         </div>
-                    
                     </div>
                     <div class="col col-md-3 col-md-pull-9">
                         <div class="service-sidebar">
-                            <div class="widget service-list-widget">
-                                <ul>
-                                    <li ><a href="product_Logistics.html">全程物流链系列产品</a></li>
-                                    <li class="current"><a href="product_eCommerce.html">港航电商平台系列产品</a></li>
-                                    <li><a href="product_port.html">云码头系列产品</a></li>
-
-                                </ul>
-                            </div>
                             <!--<div class="widget download-widget">-->
                                 <!--<ul>-->
                                     <!--<li><a href="contact.html"><i class="ti-zip"></i>更多公司介绍</a></li>-->

product_port.html

@@ -67,9 +67,22 @@
         </section>        
         <!-- end page-title -->
 
+        <!-- start service-tab-nav -->
+        <div class="service-tab-nav-fullwidth">
+            <div class="service-tab-nav">
+                <div class="widget service-list-widget">
+                    <ul>
+                        <li ><a href="product_Logistics.html">全程物流链系列产品</a></li>
+                        <li ><a href="product_eCommerce.html">港航 电商平台系列产品</a></li>
+                        <li class="current"><a href="product_port.html">云码头系列产品</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <!-- end service-tab-nav -->
 
         <!-- start service-single-section -->
-        <section class=" blog-pg-section service-single-section section-padding">
+        <section class="blog-pg-section service-single-section">
             <div class="container">
                 <div class="row">
                     <div  class="col col-md-9 col-md-push-3">
@@ -99,14 +112,6 @@
                     </div>
                     <div class="col col-md-3 col-md-pull-9">
                         <div class="service-sidebar">
-                            <div class="widget service-list-widget">
-                                <ul>
-                                    <li ><a href="product_Logistics.html">全程物流链系列产品</a></li>
-                                    <li ><a href="product_eCommerce.html">港航 电商平台系列产品</a></li>
-                                    <li class="current"><a href="product_port.html">云码头系列产品</a></li>
-
-                                </ul>
-                            </div>
                             <!--<div class="widget download-widget">-->
                                 <!--<ul>-->
                                     <!--<li><a href="#"><i class="ti-zip"></i>更多公司介绍</a></li>-->