diff --git a/platform/src/main/webapp/template/web/home/product.html b/platform/src/main/webapp/template/web/home/product.html
index 04f5770..f98bb9a 100644
--- a/platform/src/main/webapp/template/web/home/product.html
+++ b/platform/src/main/webapp/template/web/home/product.html
@@ -118,6 +118,11 @@ var bodyContent = {
                     <img src="${ctx}template/web/static/image/service_icon4_active.png" class="image-active">
                     <span>船舶修造</span>
                 </div>
+                <div id="tab5" class="tab" onclick="changeTab(5)">
+                    <img src="${ctx}template/web/static/image/service_icon5.png" class="image">
+                    <img src="${ctx}template/web/static/image/service_icon5_active.png" class="image-active">
+                    <span>码头作业区</span>
+                </div>
             </div>
             <div class="service-content">
                 <div id="content1" class="content content-active">
@@ -189,6 +194,21 @@ var bodyContent = {
                         </div>
                     </div>
                 </div>
+
+                <div id="content5" class="content">
+                    <div class="left">
+                        <img src="${ctx}template/web/static/image/service_card5.png" class="title-right">
+                    </div>
+                    <div class="right">
+                        <div class="title">
+                            码头作业区
+                        </div>
+                        <div class="desc">
+                            南阳港务集团所合作的码头作业区有：宁波北仑港、重庆维扬码头作业区、江苏镇江码头作业区、湖北沙洋新港码头作业区、
+                            唐河新港码头作业区。同时整合内河航运企业，为工业、农业、商业提供低成本运输服务，拉动内循环，带动双循环提速中国经济。
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -364,7 +384,7 @@ var bodyContent = {
 <script>
     function changeTab(index) {
         console.log('changeTab', index)
-        for(var i = 1; i <= 4; i++) {
+        for(var i = 1; i <= 5; i++) {
             if (i === index) {
                 $('#tab'+ i).addClass('tab-active');
                 $('#content'+ i).addClass('content-active');
diff --git a/platform/src/main/webapp/template/web/static/css/product.css b/platform/src/main/webapp/template/web/static/css/product.css
index 59d2b93..7873211 100644
--- a/platform/src/main/webapp/template/web/static/css/product.css
+++ b/platform/src/main/webapp/template/web/static/css/product.css
@@ -9,8 +9,8 @@
 }
 
 .service-tab .tab {
-    width: 284px;
-    height: 168px;
+    width: 224px;
+    height: 156px;
     border: 1px solid #E0E0E0;
     display: flex;
     flex-direction: column;
@@ -164,7 +164,6 @@
     left: 14px;
     top: 0;
     width: calc(100% - 28px);
-    height: 100%;
     height: 0;
     overflow: hidden;
     display: flex;
@@ -174,7 +173,6 @@
 }
 
 .advantage-item .info div {
-    transform:  skewX(-5deg);
     position: absolute;
     left: 50%;
     top: 50%;
diff --git a/platform/src/main/webapp/template/web/static/image/service_card5.png b/platform/src/main/webapp/template/web/static/image/service_card5.png
new file mode 100644
index 0000000..eab0741
Binary files /dev/null and b/platform/src/main/webapp/template/web/static/image/service_card5.png differ
diff --git a/platform/src/main/webapp/template/web/static/image/service_icon5.png b/platform/src/main/webapp/template/web/static/image/service_icon5.png
new file mode 100644
index 0000000..4e5ce8b
Binary files /dev/null and b/platform/src/main/webapp/template/web/static/image/service_icon5.png differ
diff --git a/platform/src/main/webapp/template/web/static/image/service_icon5_active.png b/platform/src/main/webapp/template/web/static/image/service_icon5_active.png
new file mode 100644
index 0000000..1363bd0
Binary files /dev/null and b/platform/src/main/webapp/template/web/static/image/service_icon5_active.png differ
--
libgit2 0.21.2