feat: 产品与服务添加码头作业区模块

李小慧
1 parent 9d9289d6
Showing 5 changed files with 23 additions and 5 deletions Show diff stats
platform/src/main/webapp/template/web/home/product.html
platform/src/main/webapp/template/web/static/css/product.css
platform/src/main/webapp/template/web/static/image/service_card5.png
platform/src/main/webapp/template/web/static/image/service_icon5.png
platform/src/main/webapp/template/web/static/image/service_icon5_active.png
@@ -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');
@@ -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%;
...	...	@@ -118,6 +118,11 @@ var bodyContent = {
118	118	<img src="${ctx}template/web/static/image/service_icon4_active.png" class="image-active">
119	119	<span>船舶修造</span>
120	120	</div>
	121	+ <div id="tab5" class="tab" onclick="changeTab(5)">
	122	+ <img src="${ctx}template/web/static/image/service_icon5.png" class="image">
	123	+ <img src="${ctx}template/web/static/image/service_icon5_active.png" class="image-active">
	124	+ <span>码头作业区</span>
	125	+ </div>
121	126	</div>
122	127	<div class="service-content">
123	128	<div id="content1" class="content content-active">
...	...	@@ -189,6 +194,21 @@ var bodyContent = {
189	194	</div>
190	195	</div>
191	196	</div>
	197	+
	198	+ <div id="content5" class="content">
	199	+ <div class="left">
	200	+ <img src="${ctx}template/web/static/image/service_card5.png" class="title-right">
	201	+ </div>
	202	+ <div class="right">
	203	+ <div class="title">
	204	+ 码头作业区
	205	+ </div>
	206	+ <div class="desc">
	207	+ 南阳港务集团所合作的码头作业区有：宁波北仑港、重庆维扬码头作业区、江苏镇江码头作业区、湖北沙洋新港码头作业区、
	208	+ 唐河新港码头作业区。同时整合内河航运企业，为工业、农业、商业提供低成本运输服务，拉动内循环，带动双循环提速中国经济。
	209	+ </div>
	210	+ </div>
	211	+ </div>
192	212	</div>
193	213	</div>
194	214	</div>
...	...	@@ -364,7 +384,7 @@ var bodyContent = {
364	384	<script>
365	385	function changeTab(index) {
366	386	console.log('changeTab', index)
367		- for(var i = 1; i <= 4; i++) {
	387	+ for(var i = 1; i <= 5; i++) {
368	388	if (i === index) {
369	389	$('#tab'+ i).addClass('tab-active');
370	390	$('#content'+ i).addClass('content-active');
...	...
...	...	@@ -9,8 +9,8 @@
9	9	}
10	10
11	11	.service-tab .tab {
12		- width: 284px;
13		- height: 168px;
	12	+ width: 224px;
	13	+ height: 156px;
14	14	border: 1px solid #E0E0E0;
15	15	display: flex;
16	16	flex-direction: column;
...	...	@@ -164,7 +164,6 @@
164	164	left: 14px;
165	165	top: 0;
166	166	width: calc(100% - 28px);
167		- height: 100%;
168	167	height: 0;
169	168	overflow: hidden;
170	169	display: flex;
...	...	@@ -174,7 +173,6 @@
174	173	}
175	174
176	175	.advantage-item .info div {
177		- transform: skewX(-5deg);
178	176	position: absolute;
179	177	left: 50%;
180	178	top: 50%;
...	...