ソースを参照

修改反馈问题

zjm
等你 4ヶ月前
コミット
29b692ca00
36個のファイルの変更363行の追加720行の削除
  1. バイナリ
      dev/static/font/BOLD.OTF
  2. バイナリ
      dev/static/font/REGULAR.OTF
  3. 2
    2
      dev/static/font/cavan.css
  4. バイナリ
      dev/static/images/index/product1.png
  5. バイナリ
      dev/static/images/index/product2.png
  6. バイナリ
      dev/static/images/index/product3.png
  7. バイナリ
      dev/static/images/index/product4.png
  8. バイナリ
      dev/static/images/index/product5.png
  9. バイナリ
      dev/static/images/index/product6.png
  10. バイナリ
      dev/static/images/index/product7.png
  11. バイナリ
      dev/static/images/index/product8.png
  12. バイナリ
      dev/static/images/index/product9.png
  13. バイナリ
      dev/static/images/index/productT1.png
  14. バイナリ
      dev/static/images/index/productT1h.png
  15. バイナリ
      dev/static/images/index/productT2.png
  16. バイナリ
      dev/static/images/index/productT2h.png
  17. バイナリ
      dev/static/images/index/productT3.png
  18. バイナリ
      dev/static/images/index/productT3h.png
  19. バイナリ
      dev/static/images/index/productT4.png
  20. バイナリ
      dev/static/images/index/productT4h.png
  21. バイナリ
      dev/static/images/index/productT5.png
  22. バイナリ
      dev/static/images/index/productT5h.png
  23. バイナリ
      dev/static/images/index/productT6.png
  24. バイナリ
      dev/static/images/index/productT6h.png
  25. バイナリ
      dev/static/images/index/productT7.png
  26. バイナリ
      dev/static/images/index/productT7h.png
  27. バイナリ
      dev/static/images/index/productT8.png
  28. バイナリ
      dev/static/images/index/productT8h.png
  29. バイナリ
      dev/static/images/index/productT9.png
  30. バイナリ
      dev/static/images/index/productT9h.png
  31. 84
    23
      src/pages/common/css/common.less
  32. 14
    6
      src/pages/common/js/Common.js
  33. 80
    39
      src/pages/common/tpl/header.tpl
  34. 39
    32
      src/pages/index/App.js
  35. 138
    612
      src/pages/index/index.html
  36. 6
    6
      src/pages/index/index.less

バイナリ
dev/static/font/BOLD.OTF ファイルの表示


バイナリ
dev/static/font/REGULAR.OTF ファイルの表示


+ 2
- 2
dev/static/font/cavan.css ファイルの表示

1
 @font-face {
1
 @font-face {
2
     font-family: 'MyFont1'; /* 自定义字体名称 */
2
     font-family: 'MyFont1'; /* 自定义字体名称 */
3
-    src: url('./FOTONTYPE-BOLD.TTF') format('truetype');
3
+    src: url('./BOLD.OTF') format('truetype');
4
 }
4
 }
5
 
5
 
6
 @font-face {
6
 @font-face {
7
     font-family: 'MyFont2';
7
     font-family: 'MyFont2';
8
-    src: url('./FOTONTYPE-LIGHT.TTF') format('truetype');
8
+    src: url('./REGULAR.OTF') format('truetype');
9
 }
9
 }

バイナリ
dev/static/images/index/product1.png ファイルの表示


バイナリ
dev/static/images/index/product2.png ファイルの表示


バイナリ
dev/static/images/index/product3.png ファイルの表示


バイナリ
dev/static/images/index/product4.png ファイルの表示


バイナリ
dev/static/images/index/product5.png ファイルの表示


バイナリ
dev/static/images/index/product6.png ファイルの表示


バイナリ
dev/static/images/index/product7.png ファイルの表示


バイナリ
dev/static/images/index/product8.png ファイルの表示


バイナリ
dev/static/images/index/product9.png ファイルの表示


バイナリ
dev/static/images/index/productT1.png ファイルの表示


バイナリ
dev/static/images/index/productT1h.png ファイルの表示


バイナリ
dev/static/images/index/productT2.png ファイルの表示


バイナリ
dev/static/images/index/productT2h.png ファイルの表示


バイナリ
dev/static/images/index/productT3.png ファイルの表示


バイナリ
dev/static/images/index/productT3h.png ファイルの表示


バイナリ
dev/static/images/index/productT4.png ファイルの表示


バイナリ
dev/static/images/index/productT4h.png ファイルの表示


バイナリ
dev/static/images/index/productT5.png ファイルの表示


バイナリ
dev/static/images/index/productT5h.png ファイルの表示


バイナリ
dev/static/images/index/productT6.png ファイルの表示


バイナリ
dev/static/images/index/productT6h.png ファイルの表示


バイナリ
dev/static/images/index/productT7.png ファイルの表示


バイナリ
dev/static/images/index/productT7h.png ファイルの表示


バイナリ
dev/static/images/index/productT8.png ファイルの表示


バイナリ
dev/static/images/index/productT8h.png ファイルの表示


バイナリ
dev/static/images/index/productT9.png ファイルの表示


バイナリ
dev/static/images/index/productT9h.png ファイルの表示


+ 84
- 23
src/pages/common/css/common.less ファイルの表示

185
         .headerPC{
185
         .headerPC{
186
             .logo{
186
             .logo{
187
                 background: url("../images/logoW.png") no-repeat;
187
                 background: url("../images/logoW.png") no-repeat;
188
-                background-size: 157px 26px;
188
+                background-size: 142px 32px;
189
             }
189
             }
190
             .language{
190
             .language{
191
                 a{
191
                 a{
231
     font-weight: 400;
231
     font-weight: 400;
232
     position: relative;
232
     position: relative;
233
     .logo{
233
     .logo{
234
-        width: 157px;
235
-        height: 26px;
234
+        width: 142px;
235
+        height: 32px;
236
         background: url("../images/logoB.png") no-repeat;
236
         background: url("../images/logoB.png") no-repeat;
237
-        background-size: 157px 26px;
237
+        background-size: 142px 32px;
238
         cursor: pointer;
238
         cursor: pointer;
239
         position: absolute;
239
         position: absolute;
240
         left: 100px;
240
         left: 100px;
268
     }
268
     }
269
     .menuSon{
269
     .menuSon{
270
         position: absolute;
270
         position: absolute;
271
-        top: 72px;
272
-        padding: 20px 30px 20px;
273
-        background: #F5F5F5;
274
-        box-shadow: 0px 9px 34px 9px rgba(0,0,0,0.1);
275
-        border-radius: 10px;
271
+        top: 70px;
272
+        padding: 15px 0px 15px;
273
+        background: #fff;
274
+        box-shadow: 0px 2px 6px 0px rgba(183,183,183,0.43);
275
+        border-radius: 8px;
276
         z-index: 10;
276
         z-index: 10;
277
         width: auto;
277
         width: auto;
278
-        min-width: 155px;
278
+        width: 172px;
279
         white-space: nowrap;
279
         white-space: nowrap;
280
         left: 50%;
280
         left: 50%;
281
         transform: translateX(-50%) translateY(0%);
281
         transform: translateX(-50%) translateY(0%);
283
         box-sizing: border-box;
283
         box-sizing: border-box;
284
         // opacity: 1;
284
         // opacity: 1;
285
         display: none;
285
         display: none;
286
+        text-align: center;
286
         .menuUp{
287
         .menuUp{
287
             width: 100%;
288
             width: 100%;
288
             height: 2px;
289
             height: 2px;
290
             position: absolute;
291
             position: absolute;
291
             left:0;
292
             left:0;
292
             top: -2px;
293
             top: -2px;
294
+            &::before{
295
+                content: '';
296
+                width: 0;
297
+                height: 0;
298
+                position: absolute;
299
+                display: block;
300
+                bottom: -2px;
301
+                left: 50%;
302
+                transform: translateX(-50%);
303
+                border-top:15px solid transparent;
304
+                border-left:15px solid transparent;
305
+                border-right:15px solid transparent;
306
+                border-bottom:15px solid #fff ;
307
+            }
293
         }
308
         }
294
         a{
309
         a{
295
             display: block;
310
             display: block;
296
-            padding: 10px 0;
311
+            padding: 15px 0;
297
             transition: all .3s ease;
312
             transition: all .3s ease;
298
             &:hover{
313
             &:hover{
299
                 color: #B81C25;
314
                 color: #B81C25;
356
     box-sizing: border-box;
371
     box-sizing: border-box;
357
     position: relative;
372
     position: relative;
358
     .logo{
373
     .logo{
359
-        width: 109px;
360
-        height: 18px;
374
+        width: 88px;
375
+        height: 21px;
361
         position: relative;
376
         position: relative;
362
         z-index: 6;
377
         z-index: 6;
363
         background: url("../images/logoB.png") no-repeat;
378
         background: url("../images/logoB.png") no-repeat;
430
             top: -60px;
445
             top: -60px;
431
             left: 0px;
446
             left: 0px;
432
             background-color: #ffffff;
447
             background-color: #ffffff;
433
-            border-bottom: 1px solid #0000001b;
448
+            background-image: url("../images/logoB.png");
449
+            background-size: 89px 22px;
450
+            background-repeat: no-repeat;
451
+            // border-bottom: 1px solid #0000001b;
452
+            background-position: 15px center;
434
         }
453
         }
435
         .navMenu{
454
         .navMenu{
436
             width: 100%;
455
             width: 100%;
437
-            height: calc( 100% - 60px);
456
+            height: 100%;
438
             box-sizing: border-box;
457
             box-sizing: border-box;
439
-            padding: 35px 50px 0px;
440
             overflow-y: auto;
458
             overflow-y: auto;
441
             &>div{
459
             &>div{
442
                 width: 100%;
460
                 width: 100%;
443
-                margin-bottom: 30px;
444
-                a{
445
-                    font-size: 16px;
446
-                    display: block;
447
-                    margin-bottom: 30px;
448
-                }
461
+                padding: 25px 15px;
462
+                box-sizing: border-box;
463
+                border-bottom: 1px solid #ACACAC80;
464
+                
449
                 .title{
465
                 .title{
450
                     font-size: 18px;
466
                     font-size: 18px;
467
+                    line-height: 18px;
468
+                    color: #231F20;
469
+                    padding-left: 13px;
470
+                    padding-right: 6px;
471
+                    font-weight: 100;
472
+                    font-family: 'MyFont2';
473
+                    span{
474
+                        float: right;
475
+                        font-size: 14px;
476
+                        transform: rotate(-90deg);
477
+                        transition: all .3s ease;
478
+                    }
479
+                }
480
+                .menuSon{
481
+                    width: 100%;
482
+                    overflow: hidden;
483
+                    height: 0px;
484
+                    clip-path: inset(0 0 100% 0);
485
+                    transition: all 0.3s ease;
486
+                    a{
487
+                        font-size: 16px;
488
+                        display: block;
489
+                        color: #666666;
490
+                        padding: 20px 14px;
491
+                        border-bottom: 1px solid #ACACAC80;
492
+                        &:first-child{
493
+                            margin-top: 10px;
494
+                        }
495
+                        &:last-child{
496
+                            border-bottom: none;
497
+                            padding-bottom: 0px;
498
+                        }
499
+                    }
500
+                }
501
+            }
502
+            .menuShow{
503
+                .title{
504
+                    .iconfont{
505
+                        transform: rotate(0deg);
506
+                    }
507
+                }
508
+                .menuSon{
509
+                    height: 100%;
510
+                    clip-path: inset(0 0 0% 0);
451
                 }
511
                 }
452
             }
512
             }
453
         }
513
         }
652
         }
712
         }
653
     }
713
     }
654
     .footerIcon{
714
     .footerIcon{
655
-        width: calc(100% - 200px);
715
+        width: 100%;
716
+        max-width: 1300px;
656
         margin: 0px auto;
717
         margin: 0px auto;
657
         display: flex;
718
         display: flex;
658
         flex-direction: row;
719
         flex-direction: row;

+ 14
- 6
src/pages/common/js/Common.js ファイルの表示

166
   initHeaderM() {
166
   initHeaderM() {
167
     let navFlagBtn = document.querySelector(".headerMobile .navFlagBtn");
167
     let navFlagBtn = document.querySelector(".headerMobile .navFlagBtn");
168
     let navFlag = document.querySelector(".headerMobile .navFlag");
168
     let navFlag = document.querySelector(".headerMobile .navFlag");
169
-    let navMenu = document.querySelector(".headerMobile .navMenu");
169
+    let navMenus = document.querySelectorAll(".headerMobile .navMenu>div");
170
     let logo = document.querySelector(".headerMobile .logo");
170
     let logo = document.querySelector(".headerMobile .logo");
171
     logo.addEventListener("click", (e) => {
171
     logo.addEventListener("click", (e) => {
172
       window.location.href ="/index.html"
172
       window.location.href ="/index.html"
173
     });
173
     });
174
-
175
-    navMenu.addEventListener("click", (e) => {
176
-      console.log("click");
177
-      navFlagBtn.click();
178
-    });
174
+    navMenus.forEach(function(item) {
175
+      item.addEventListener("click", (e) => {
176
+        if(item.classList.contains("menuShow")){
177
+          item.classList.remove("menuShow");
178
+        }else{
179
+          item.classList.add("menuShow");
180
+        }
181
+      });
182
+    })
183
+    
179
     
184
     
180
     //0-关闭状态、1-为打开状态
185
     //0-关闭状态、1-为打开状态
181
     navFlagBtn.addEventListener("click", (e) => {
186
     navFlagBtn.addEventListener("click", (e) => {
212
             }
217
             }
213
           });
218
           });
214
           navFlagBtn.classList.remove("btnOpen");
219
           navFlagBtn.classList.remove("btnOpen");
220
+          navMenus.forEach(function(item) {
221
+            item.classList.remove("menuShow");
222
+          })
215
       }
223
       }
216
     });
224
     });
217
   }
225
   }

+ 80
- 39
src/pages/common/tpl/header.tpl ファイルの表示

4
         <div class="menu">
4
         <div class="menu">
5
             <div class="menuOne">
5
             <div class="menuOne">
6
                 <a href="">走进中泽</a>
6
                 <a href="">走进中泽</a>
7
-                <!--<div class="menuSon">
7
+                <div class="menuSon">
8
                     <div class="menuUp"></div>
8
                     <div class="menuUp"></div>
9
                     <a href=""><span>集团简介</span></a>
9
                     <a href=""><span>集团简介</span></a>
10
                     <a href=""><span>发展历程</span></a>
10
                     <a href=""><span>发展历程</span></a>
11
                     <a href=""><span>企业架构</span></a>
11
                     <a href=""><span>企业架构</span></a>
12
                     <a href=""><span>企业文化</span></a>
12
                     <a href=""><span>企业文化</span></a>
13
                     <a href=""><span>资质荣誉</span></a>
13
                     <a href=""><span>资质荣誉</span></a>
14
-                </div>-->
14
+                </div>
15
             </div>
15
             </div>
16
             <div class="menuOne">
16
             <div class="menuOne">
17
                 <a href="">产业布局</a>
17
                 <a href="">产业布局</a>
18
-                <!--<div class="menuSon">
18
+                <div class="menuSon">
19
                     <div class="menuUp"></div>
19
                     <div class="menuUp"></div>
20
-                    <a href="./aboutUs.html#introduction">能源管理方案</a>
21
-                    <a href="./aboutUs.html#structure">智慧能源管理体系</a>
22
-                    <a href="./aboutUs.html#structure">租贸业务管理方案</a>
23
-                    <a href="./aboutUs.html#structure">二手车解决方案</a>
24
-                </div>-->
20
+                    <a href=""><span>铁合金</span></a>
21
+                    <a href=""><span>炭素</span></a>
22
+                    <a href=""><span>钼业</span></a>
23
+                    <a href=""><span>镍业</span></a>
24
+                    <a href=""><span>化工</span></a>
25
+                    <a href=""><span>装备制造</span></a>
26
+                    <a href=""><span>产业互联网</span></a>
27
+                    <a href=""><span>金融</span></a>
28
+                    <a href=""><span>其他</span></a>
29
+                </div>
25
             </div>
30
             </div>
26
             <div class="menuOne">
31
             <div class="menuOne">
27
                 <a href="./news.html">新闻中心</a>
32
                 <a href="./news.html">新闻中心</a>
28
-                <!--<div class="menuSon">
33
+                <div class="menuSon">
29
                     <div class="menuUp"></div>
34
                     <div class="menuUp"></div>
30
-                    <a href="./serve.html">购车流程</a>
31
-                    <a href="./serve.html#serve2">门店地图</a>
32
-                    <a href="./serve.html#serve3">门店预约体验</a>
33
-                    <a href="./serve.html#serve4">服务体系</a>
34
-                    <a href="./serve.html#serve5">用户留言</a>
35
-                </div>-->
35
+                    <a href=""><span>集团新闻</span></a>
36
+                    <a href=""><span>前沿资讯</span></a>
37
+                    <a href=""><span>政策引领</span></a>
38
+                    <a href=""><span>研发创新</span></a>
39
+                </div>
36
             </div>
40
             </div>
37
             <div class="menuOne">
41
             <div class="menuOne">
38
                 <a href="">党建工作</a>
42
                 <a href="">党建工作</a>
39
-                <!--<div class="menuSon">
43
+                <div class="menuSon">
40
                     <div class="menuUp"></div>
44
                     <div class="menuUp"></div>
41
-                    <a href="./news.html">公司新闻</a>
42
-                    <a href="./news.html">行业新闻</a>
43
-                </div>-->
45
+                    <a href=""><span>企业党建</span></a>
46
+                    <a href=""><span>学习文件</span></a>
47
+                </div>
44
             </div>
48
             </div>
45
             <div class="menuOne">
49
             <div class="menuOne">
46
                 <a href="">社会责任</a>
50
                 <a href="">社会责任</a>
47
-                <!--<div class="menuSon">
51
+                <div class="menuSon">
48
                     <div class="menuUp"></div>
52
                     <div class="menuUp"></div>
49
-                    <a href="./about.html#about1">品牌故事</a>
50
-                    <a href="./about.html#about2">可持续发展</a>
51
-                    <a href="./about.html#about3">经销商加盟</a>
52
-                    <a href="./about.html#about4">联系我们</a>
53
-                </div>-->
53
+                    <a href=""><span>社会公益</span></a>
54
+                    <a href=""><span>绿色转型</span></a>
55
+                </div>
54
             </div>
56
             </div>
55
             <div class="menuOne">
57
             <div class="menuOne">
56
                 <a href="">加入中泽</a>
58
                 <a href="">加入中泽</a>
57
-                <!--<div class="menuSon">
59
+                <div class="menuSon">
58
                     <div class="menuUp"></div>
60
                     <div class="menuUp"></div>
59
-                    <a href="./about.html#about1">品牌故事</a>
60
-                    <a href="./about.html#about2">可持续发展</a>
61
-                    <a href="./about.html#about3">经销商加盟</a>
62
-                    <a href="./about.html#about4">联系我们</a>
63
-                </div>-->
61
+                    <a href=""><span>招聘信息</span></a>
62
+                    <a href=""><span>招标信息</span></a>
63
+                    <a href=""><span>联系我们</span></a>
64
+                </div>
64
             </div>
65
             </div>
65
         </div>
66
         </div>
66
         <div class="language menuOne">
67
         <div class="language menuOne">
82
             <div class="navBg"></div>
83
             <div class="navBg"></div>
83
             <div class="navMenu">
84
             <div class="navMenu">
84
                 <div>
85
                 <div>
85
-                    <a class="title" href="">走进中泽</a>
86
+                    <a class="title" href="./index.html">首页</a>
87
+                </div>
88
+                <div>
89
+                    <div class="title" href="">走进中泽<span class="iconfont icon-xiala"></span></div>
90
+                    <div class="menuSon">
91
+                        <a href=""><span>集团简介</span></a>
92
+                        <a href=""><span>发展历程</span></a>
93
+                        <a href=""><span>企业架构</span></a>
94
+                        <a href=""><span>企业文化</span></a>
95
+                        <a href=""><span>资质荣誉</span></a>
96
+                    </div>
86
                 </div>
97
                 </div>
87
                 <div>
98
                 <div>
88
-                    <a class="title" href="">产业布局</a>
99
+                    <div class="title" href="">产业布局<span class="iconfont icon-xiala"></span></div>
100
+                    <div class="menuSon">
101
+                        <a href=""><span>铁合金</span></a>
102
+                        <a href=""><span>炭素</span></a>
103
+                        <a href=""><span>钼业</span></a>
104
+                        <a href=""><span>镍业</span></a>
105
+                        <a href=""><span>化工</span></a>
106
+                        <a href=""><span>装备制造</span></a>
107
+                        <a href=""><span>产业互联网</span></a>
108
+                        <a href=""><span>金融</span></a>
109
+                        <a href=""><span>其他</span></a>
110
+                    </div>
89
                 </div>
111
                 </div>
90
                 <div>
112
                 <div>
91
-                    <a class="title" href="./news.html">新闻中心</a>
113
+                    <div class="title" href="">新闻中心<span class="iconfont icon-xiala"></span></div>
114
+                    <div class="menuSon">
115
+                        <a href=""><span>集团新闻</span></a>
116
+                        <a href=""><span>前沿资讯</span></a>
117
+                        <a href=""><span>政策引领</span></a>
118
+                        <a href=""><span>研发创新</span></a>
119
+                    </div>
92
                 </div>
120
                 </div>
93
                 <div>
121
                 <div>
94
-                    <a class="title" href="">党建工作</a>
122
+                    <div class="title" href="">党建工作<span class="iconfont icon-xiala"></span></div>
123
+                    <div class="menuSon">
124
+                        <a href=""><span>企业党建</span></a>
125
+                        <a href=""><span>学习文件</span></a>
126
+                    </div>
95
                 </div>
127
                 </div>
96
                 <div>
128
                 <div>
97
-                    <a class="title" href="">社会责任</a>
129
+                    <div class="title" href="">社会责任<span class="iconfont icon-xiala"></span></div>
130
+                    <div class="menuSon">
131
+                        <a href=""><span>社会公益</span></a>
132
+                        <a href=""><span>绿色转型</span></a>
133
+                    </div>
98
                 </div>
134
                 </div>
99
                 <div>
135
                 <div>
100
-                    <a class="title" href="">加入中泽</a>
136
+                    <div class="title" href="">加入中泽<span class="iconfont icon-xiala"></span></div>
137
+                    <div class="menuSon">
138
+                        <a href=""><span>招聘信息</span></a>
139
+                        <a href=""><span>招标信息</span></a>
140
+                        <a href=""><span>联系我们</span></a>
141
+                    </div>
101
                 </div>
142
                 </div>
102
             </div>
143
             </div>
103
-            <div class="language">
144
+            <!--<div class="language">
104
                 <a href=""><span class="iconfont icon-search"></span></a>
145
                 <a href=""><span class="iconfont icon-search"></span></a>
105
                 <div></div>
146
                 <div></div>
106
                 <a href="">联系我们</a>
147
                 <a href="">联系我们</a>
107
-            </div>
148
+            </div>-->
108
         </div>
149
         </div>
109
     </div></div>
150
     </div></div>
110
 </header>
151
 </header>

+ 39
- 32
src/pages/index/App.js ファイルの表示

47
         let menuType = document.querySelector(".headCon");
47
         let menuType = document.querySelector(".headCon");
48
         menuType.classList.add("menuType");
48
         menuType.classList.add("menuType");
49
         let mySwiper = new Swiper('.bannerSwiper', {
49
         let mySwiper = new Swiper('.bannerSwiper', {
50
-            autoplay: false,//可选选项,自动滑动
50
+            autoplay: true,//可选选项,自动滑动
51
+            effect: "fade",
52
+            speed:800,
51
             // 如果需要分页器
53
             // 如果需要分页器
52
             pagination: {
54
             pagination: {
53
                 el: '.swiper-paginationB',
55
                 el: '.swiper-paginationB',
160
     }
162
     }
161
     product(){
163
     product(){
162
         let isMob=this.isMobile;
164
         let isMob=this.isMobile;
163
-      let mySwiper = new Swiper('.productSwiper', {
164
-            autoplay: false,//可选选项,自动滑动
165
-            slidesPerView: "auto",
166
-            spaceBetween: isMob?0:35,
167
-            navigation: {
168
-                nextEl: '.btn-nextP1',
169
-                prevEl: '.btn-prevP1',
170
-            },
171
-      });
172
-      let productCks = document.querySelectorAll(".productTit");
173
-      let productTypes = document.querySelectorAll(".productList");
174
-      productCks.forEach((item,index)=>{
165
+        let productCks = document.querySelectorAll(".productTit");
166
+        let mySwiper = new Swiper('.productSwiper', {
167
+                autoplay: false,//可选选项,自动滑动
168
+                slidesPerView: "auto",
169
+                loop: true,
170
+                loopedSlides: 4,
171
+                spaceBetween: isMob?0:35,
172
+                navigation: {
173
+                    nextEl: '.btn-nextP1',
174
+                    // prevEl: '.btn-prevP1',
175
+                },
176
+                on:{
177
+                    slideChange: function(){
178
+                        console.log(this.realIndex);
179
+                        let index0=this.realIndex;
180
+                        productCks.forEach((item,index)=>{
181
+                            if(index==index0){
182
+                                item.classList.add("productCk");
183
+                            }else{
184
+                                item.classList.remove("productCk");
185
+                            }
186
+                        });
187
+                    },
188
+                },
189
+        });
190
+        productCks.forEach((item,index)=>{
175
             item.addEventListener("click", (e) => {
191
             item.addEventListener("click", (e) => {
176
-                
177
                 item.parentNode.querySelectorAll(".productTit").forEach(item2=>{
192
                 item.parentNode.querySelectorAll(".productTit").forEach(item2=>{
178
                     item2.classList.remove("productCk");
193
                     item2.classList.remove("productCk");
179
                 });
194
                 });
180
                 item.classList.add("productCk");
195
                 item.classList.add("productCk");
181
-                mySwiper.removeAllSlides();
182
-                productTypes.forEach((item2,index2)=>{
183
-                    if(index==index2){
184
-                        item2.querySelectorAll(".swiper-slide").forEach(item3=>{
185
-                            let divS=item3.cloneNode(true);;
186
-                            mySwiper.appendSlide(divS)
187
-                        });
188
-                    }
189
-                })
196
+                mySwiper.slideToLoop(index);
197
+                
190
             });
198
             });
191
-
192
         });
199
         });
193
-        let firstProductCk = productCks[0]; // 获取第一个元素
200
+        // let firstProductCk = productCks[0]; // 获取第一个元素
194
 
201
 
195
-        // 创建一个新的鼠标点击事件
196
-        let clickEvent = new MouseEvent('click', {
197
-        bubbles: true, // 确保事件会冒泡
198
-        cancelable: true // 事件可取消
199
-        });
202
+        // // 创建一个新的鼠标点击事件
203
+        // let clickEvent = new MouseEvent('click', {
204
+        // bubbles: true, // 确保事件会冒泡
205
+        // cancelable: true // 事件可取消
206
+        // });
200
 
207
 
201
-        // 触发点击事件
202
-        firstProductCk.dispatchEvent(clickEvent);
208
+        // // 触发点击事件
209
+        // firstProductCk.dispatchEvent(clickEvent);
203
 
210
 
204
     }
211
     }
205
 
212
 

+ 138
- 612
src/pages/index/index.html ファイルの表示

40
             <div class="swiper-slide">
40
             <div class="swiper-slide">
41
               <img
41
               <img
42
                 class="lazy"
42
                 class="lazy"
43
-                data-src="./static/images/index/banner1.jpg"
43
+                data-src="./static/images/index/society.jpg"
44
                 data-srcM="./static/images/index/banner1m.jpg"
44
                 data-srcM="./static/images/index/banner1m.jpg"
45
                 alt=""
45
                 alt=""
46
               />
46
               />
47
               <div class="slideCon">
47
               <div class="slideCon">
48
-                <div class="title">投资并购与企业<br>运营双轮驱动</div>
48
+                <div class="title">投资并购与企业2<br>运营双轮驱动</div>
49
             </div>
49
             </div>
50
             </div>
50
             </div>
51
           </div>
51
           </div>
59
         
59
         
60
       </div>
60
       </div>
61
       <div class="news">
61
       <div class="news">
62
-        <div class="title">新闻中心</div>
62
+        <div class="wow fadeInUp title">新闻中心</div>
63
         <div class="newsCon">
63
         <div class="newsCon">
64
-          <div class="newsSp">
64
+          <div class="wow fadeInUp newsSp">
65
             <div class="swiper newsSwiper1 newsShowSwiper">
65
             <div class="swiper newsSwiper1 newsShowSwiper">
66
               <div class="swiper-wrapper">
66
               <div class="swiper-wrapper">
67
                 <div class="swiper-slide">
67
                 <div class="swiper-slide">
200
             </div>
200
             </div>
201
           </div>
201
           </div>
202
           <div>
202
           <div>
203
-            <div class="newsTitList">
203
+            <div class="wow fadeInUp newsTitList" data-wow-delay="0.2s">
204
               <div class="newsCk newsShow">集团新闻</div>
204
               <div class="newsCk newsShow">集团新闻</div>
205
               <div>/</div>
205
               <div>/</div>
206
               <div class="newsCk">前沿资讯</div>
206
               <div class="newsCk">前沿资讯</div>
209
               <div>/</div>
209
               <div>/</div>
210
               <div class="newsCk">研发创新</div>
210
               <div class="newsCk">研发创新</div>
211
             </div>
211
             </div>
212
-            <div class="newsConList">
212
+            <div class="wow fadeInUp newsConList" data-wow-delay="0.4s">
213
               <div class="newsType newsDivShow">
213
               <div class="newsType newsDivShow">
214
                 <div class="newsLi">
214
                 <div class="newsLi">
215
                   <div class="timer">
215
                   <div class="timer">
381
             </div>
381
             </div>
382
           </div>
382
           </div>
383
         </div>
383
         </div>
384
-        <a href="" class="btn newsHref">查看更多</a>
384
+        <a href="" class="wow fadeInUp btn newsHref">查看更多</a>
385
       </div>
385
       </div>
386
-      <div class="product">
387
-        <div class="title">产业布局</div>
386
+      <div class="wow fadeInUp product">
387
+        <div class="wow fadeInUp title" data-wow-delay="0.2s">产业布局</div>
388
         <div class="productCon">
388
         <div class="productCon">
389
           <div class="productTits">
389
           <div class="productTits">
390
             <div>
390
             <div>
391
-            <div class="productTit">
391
+            <div class="wow fadeInUp productTit" data-wow-delay="0.1s">
392
               <div>铁合金</div>
392
               <div>铁合金</div>
393
               <div>
393
               <div>
394
                 <img class="default" src="./static/images/index/productT1.png" alt=""/>
394
                 <img class="default" src="./static/images/index/productT1.png" alt=""/>
395
                 <img class="show" src="./static/images/index/productT1h.png" alt=""/>
395
                 <img class="show" src="./static/images/index/productT1h.png" alt=""/>
396
               </div>
396
               </div>
397
             </div>
397
             </div>
398
-            <div class="productTit">
398
+            <div class="wow fadeInUp productTit" data-wow-delay="0.2s">
399
               <div>炭素</div>
399
               <div>炭素</div>
400
               <div>
400
               <div>
401
-                <img class="default" src="./static/images/index/productT1.png" alt=""/>
402
-                <img class="show" src="./static/images/index/productT1h.png" alt=""/>
401
+                <img class="default" src="./static/images/index/productT2.png" alt=""/>
402
+                <img class="show" src="./static/images/index/productT2h.png" alt=""/>
403
               </div>
403
               </div>
404
             </div>
404
             </div>
405
-            <div class="productTit">
405
+            <div class="wow fadeInUp productTit" data-wow-delay="0.3s">
406
               <div>钼业</div>
406
               <div>钼业</div>
407
               <div>
407
               <div>
408
-                <img class="default" src="./static/images/index/productT1.png" alt=""/>
409
-                <img class="show" src="./static/images/index/productT1h.png" alt=""/>
408
+                <img class="default" src="./static/images/index/productT3.png" alt=""/>
409
+                <img class="show" src="./static/images/index/productT3h.png" alt=""/>
410
               </div>
410
               </div>
411
             </div>
411
             </div>
412
-            <div class="productTit">
412
+            <div class="wow fadeInUp productTit" data-wow-delay="0.4s">
413
               <div>镍业</div>
413
               <div>镍业</div>
414
               <div>
414
               <div>
415
-                <img class="default" src="./static/images/index/productT1.png" alt=""/>
416
-                <img class="show" src="./static/images/index/productT1h.png" alt=""/>
415
+                <img class="default" src="./static/images/index/productT4.png" alt=""/>
416
+                <img class="show" src="./static/images/index/productT4h.png" alt=""/>
417
               </div>
417
               </div>
418
             </div>
418
             </div>
419
-            <div class="productTit">
419
+            <div class="wow fadeInUp productTit" data-wow-delay="0.5s">
420
               <div>化工</div>
420
               <div>化工</div>
421
               <div>
421
               <div>
422
-                <img class="default" src="./static/images/index/productT1.png" alt=""/>
423
-                <img class="show" src="./static/images/index/productT1h.png" alt=""/>
422
+                <img class="default" src="./static/images/index/productT5.png" alt=""/>
423
+                <img class="show" src="./static/images/index/productT5h.png" alt=""/>
424
               </div>
424
               </div>
425
             </div>
425
             </div>
426
-            <div class="productTit">
426
+            <div class="wow fadeInUp productTit" data-wow-delay="0.6s">
427
               <div>装备制造</div>
427
               <div>装备制造</div>
428
               <div>
428
               <div>
429
-                <img class="default" src="./static/images/index/productT1.png" alt=""/>
430
-                <img class="show" src="./static/images/index/productT1h.png" alt=""/>
429
+                <img class="default" src="./static/images/index/productT6.png" alt=""/>
430
+                <img class="show" src="./static/images/index/productT6h.png" alt=""/>
431
               </div>
431
               </div>
432
             </div>
432
             </div>
433
-            <div class="productTit">
433
+            <div class="wow fadeInUp productTit" data-wow-delay="0.7s">
434
               <div>产业互联网</div>
434
               <div>产业互联网</div>
435
               <div>
435
               <div>
436
-                <img class="default" src="./static/images/index/productT1.png" alt=""/>
437
-                <img class="show" src="./static/images/index/productT1h.png" alt=""/>
436
+                <img class="default" src="./static/images/index/productT7.png" alt=""/>
437
+                <img class="show" src="./static/images/index/productT7h.png" alt=""/>
438
               </div>
438
               </div>
439
             </div>
439
             </div>
440
-            <div class="productTit">
440
+            <div class="wow fadeInUp productTit" data-wow-delay="0.8s">
441
               <div>金融</div>
441
               <div>金融</div>
442
               <div>
442
               <div>
443
-                <img class="default" src="./static/images/index/productT1.png" alt=""/>
444
-                <img class="show" src="./static/images/index/productT1h.png" alt=""/>
443
+                <img class="default" src="./static/images/index/productT8.png" alt=""/>
444
+                <img class="show" src="./static/images/index/productT8h.png" alt=""/>
445
               </div>
445
               </div>
446
             </div>
446
             </div>
447
-            <div class="productTit">
447
+            <div class="wow fadeInUp productTit" data-wow-delay="0.9s">
448
               <div>其他</div>
448
               <div>其他</div>
449
               <div>
449
               <div>
450
-                <img class="default" src="./static/images/index/productT1.png" alt=""/>
451
-                <img class="show" src="./static/images/index/productT1h.png" alt=""/>
450
+                <img class="default" src="./static/images/index/productT9.png" alt=""/>
451
+                <img class="show" src="./static/images/index/productT9h.png" alt=""/>
452
               </div>
452
               </div>
453
             </div></div>
453
             </div></div>
454
           </div>
454
           </div>
455
-          <div class="productConBox">
455
+          <div class="wow fadeInUp productConBox">
456
             <div class="swiper productSwiper">
456
             <div class="swiper productSwiper">
457
               <div class="swiper-wrapper">
457
               <div class="swiper-wrapper">
458
-                
459
-              </div>
460
-              <!-- 如果需要分页器 -->
461
-              <div class="btn-prev btn-prevP1"><span class="icon iconfont icon-jiantou"></span></div>
462
-              <div class="btn-next btn-nextP1"><span class="icon iconfont icon-jiantou"></span></div>
463
-            </div>
464
-            <!-- 下面是类型的轮播内容,按顺序添加 -->
465
-            <div class="productList">
466
-              <div class="swiper-slide">
467
-                <img
468
-                  class="lazy"
469
-                  data-src="./static/images/index/product1.jpg"
470
-                  data-srcM="./static/images/index/product1.jpg"
471
-                  alt=""
472
-                />
473
-                <div class="slideZ"></div>
474
-                <a href="">
475
-                    <div class="slideCon">
476
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
477
-                      <div class="more">了解更多</div>
478
-                  </div>
479
-                </a>
480
-              </div>
481
-<<<<<<< HEAD
482
-              <!-- 如果需要导航按钮 -->
483
-              <div class="btn-prev btn-prevP2"><span class="icon iconfont icon-jiantou"></span></div>
484
-              <div class="btn-next btn-nextP2"><span class="icon iconfont icon-jiantou"></span></div>
485
-            </div>
486
-            <a href="" class="btn btnBlack">查看更多</a>
487
-          </div>
488
-          <div class="masterDiv">
489
-            <div class="swiper masterSwiper3">
490
-              <div class="swiper-wrapper">
491
-                <div class="swiper-slide"> 
492
-                  <img class="lazy" data-src="./static/images/index/car1.png" data-srcM="./static/images/index/car1.png" alt="" />
458
+                <div class="swiper-slide">
459
+                  <img class="lazy" data-src="./static/images/index/product1.png" data-srcM="./static/images/index/product1.png" alt="" />
460
+                  <div class="slideZ"></div>
461
+                  <a href="">
462
+                      <div class="slideCon">
463
+                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
464
+                        <div class="more">了解更多</div>
465
+                    </div>
466
+                  </a>
493
                 </div>
467
                 </div>
494
-                <!-- 多个直接复制添加swiper-slide -->
495
                 <div class="swiper-slide">
468
                 <div class="swiper-slide">
496
-                  <img class="lazy"
497
-                    data-src="./static/images/index/car1.png" data-srcM="./static/images/index/car1.png" alt="" />
469
+                  <img class="lazy" data-src="./static/images/index/product2.png" data-srcM="./static/images/index/product2.png" alt="" />
470
+                  <div class="slideZ"></div>
471
+                  <a href="">
472
+                      <div class="slideCon">
473
+                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
474
+                        <div class="more">了解更多</div>
475
+                    </div>
476
+                  </a>
477
+                </div>
478
+                <div class="swiper-slide">
479
+                  <img class="lazy" data-src="./static/images/index/product3.png" data-srcM="./static/images/index/product3.png" alt="" />
480
+                  <div class="slideZ"></div>
481
+                  <a href="">
482
+                      <div class="slideCon">
483
+                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
484
+                        <div class="more">了解更多</div>
485
+                    </div>
486
+                  </a>
487
+                </div>
488
+                <div class="swiper-slide">
489
+                  <img class="lazy" data-src="./static/images/index/product4.png" data-srcM="./static/images/index/product4.png" alt="" />
490
+                  <div class="slideZ"></div>
491
+                  <a href="">
492
+                      <div class="slideCon">
493
+                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
494
+                        <div class="more">了解更多</div>
495
+                    </div>
496
+                  </a>
497
+                </div>
498
+                <div class="swiper-slide">
499
+                  <img class="lazy" data-src="./static/images/index/product5.png" data-srcM="./static/images/index/product5.png" alt="" />
500
+                  <div class="slideZ"></div>
501
+                  <a href="">
502
+                      <div class="slideCon">
503
+                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
504
+                        <div class="more">了解更多</div>
505
+                    </div>
506
+                  </a>
507
+                </div>
508
+                <div class="swiper-slide">
509
+                  <img class="lazy" data-src="./static/images/index/product6.png" data-srcM="./static/images/index/product6.png" alt="" />
510
+                  <div class="slideZ"></div>
511
+                  <a href="">
512
+                      <div class="slideCon">
513
+                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
514
+                        <div class="more">了解更多</div>
515
+                    </div>
516
+                  </a>
517
+                </div>
518
+                <div class="swiper-slide">
519
+                  <img class="lazy" data-src="./static/images/index/product7.png" data-srcM="./static/images/index/product7.png" alt="" />
520
+                  <div class="slideZ"></div>
521
+                  <a href="">
522
+                      <div class="slideCon">
523
+                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
524
+                        <div class="more">了解更多</div>
525
+                    </div>
526
+                  </a>
527
+                </div>
528
+                <div class="swiper-slide">
529
+                  <img class="lazy" data-src="./static/images/index/product8.png" data-srcM="./static/images/index/product8.png" alt="" />
530
+                  <div class="slideZ"></div>
531
+                  <a href="">
532
+                      <div class="slideCon">
533
+                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
534
+                        <div class="more">了解更多</div>
535
+                    </div>
536
+                  </a>
537
+                </div>
538
+                <div class="swiper-slide">
539
+                  <img class="lazy" data-src="./static/images/index/product9.png" data-srcM="./static/images/index/product9.png" alt="" />
540
+                  <div class="slideZ"></div>
541
+                  <a href="">
542
+                      <div class="slideCon">
543
+                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
544
+                        <div class="more">了解更多</div>
545
+                    </div>
546
+                  </a>
498
                 </div>
547
                 </div>
499
-=======
500
-              <div class="swiper-slide">
501
-                <img
502
-                  class="lazy"
503
-                  data-src="./static/images/index/product1.jpg"
504
-                  data-srcM="./static/images/index/product1.jpg"
505
-                  alt=""
506
-                />
507
-                <div class="slideZ"></div>
508
-                <a href="">
509
-                    <div class="slideCon">
510
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
511
-                      <div class="more">了解更多</div>
512
-                  </div>
513
-                </a>
514
->>>>>>> f443212389e95f663b807c016a02212b36406cfb
515
-              </div>
516
-              <div class="swiper-slide">
517
-                <img
518
-                  class="lazy"
519
-                  data-src="./static/images/index/product1.jpg"
520
-                  data-srcM="./static/images/index/product1.jpg"
521
-                  alt=""
522
-                />
523
-                <div class="slideZ"></div>
524
-                <a href="">
525
-                    <div class="slideCon">
526
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
527
-                      <div class="more">了解更多</div>
528
-                  </div>
529
-                </a>
530
-              </div>
531
-            </div>
532
-            <div class="productList">
533
-              <div class="swiper-slide">
534
-                <img
535
-                  class="lazy"
536
-                  data-src="./static/images/index/product1.jpg"
537
-                  data-srcM="./static/images/index/product1.jpg"
538
-                  alt=""
539
-                />
540
-                <div class="slideZ"></div>
541
-                <a href="">
542
-                    <div class="slideCon">
543
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
544
-                      <div class="more">了解更多</div>
545
-                  </div>
546
-                </a>
547
-              </div>
548
-              <div class="swiper-slide">
549
-                <img
550
-                  class="lazy"
551
-                  data-src="./static/images/index/product1.jpg"
552
-                  data-srcM="./static/images/index/product1.jpg"
553
-                  alt=""
554
-                />
555
-                <div class="slideZ"></div>
556
-                <a href="">
557
-                    <div class="slideCon">
558
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
559
-                      <div class="more">了解更多</div>
560
-                  </div>
561
-                </a>
562
-              </div>
563
-              <div class="swiper-slide">
564
-                <img
565
-                  class="lazy"
566
-                  data-src="./static/images/index/product1.jpg"
567
-                  data-srcM="./static/images/index/product1.jpg"
568
-                  alt=""
569
-                />
570
-                <div class="slideZ"></div>
571
-                <a href="">
572
-                    <div class="slideCon">
573
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
574
-                      <div class="more">了解更多</div>
575
-                  </div>
576
-                </a>
577
-              </div>
578
-              <div class="swiper-slide">
579
-                <img
580
-                  class="lazy"
581
-                  data-src="./static/images/index/product1.jpg"
582
-                  data-srcM="./static/images/index/product1.jpg"
583
-                  alt=""
584
-                />
585
-                <div class="slideZ"></div>
586
-                <a href="">
587
-                    <div class="slideCon">
588
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
589
-                      <div class="more">了解更多</div>
590
-                  </div>
591
-                </a>
592
-              </div>
593
-            </div>
594
-            <div class="productList">
595
-              <div class="swiper-slide">
596
-                <img
597
-                  class="lazy"
598
-                  data-src="./static/images/index/product1.jpg"
599
-                  data-srcM="./static/images/index/product1.jpg"
600
-                  alt=""
601
-                />
602
-                <div class="slideZ"></div>
603
-                <a href="">
604
-                    <div class="slideCon">
605
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
606
-                      <div class="more">了解更多</div>
607
-                  </div>
608
-                </a>
609
-              </div>
610
-              <div class="swiper-slide">
611
-                <img
612
-                  class="lazy"
613
-                  data-src="./static/images/index/product1.jpg"
614
-                  data-srcM="./static/images/index/product1.jpg"
615
-                  alt=""
616
-                />
617
-                <div class="slideZ"></div>
618
-                <a href="">
619
-                    <div class="slideCon">
620
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
621
-                      <div class="more">了解更多</div>
622
-                  </div>
623
-                </a>
624
-              </div>
625
-              <div class="swiper-slide">
626
-                <img
627
-                  class="lazy"
628
-                  data-src="./static/images/index/product1.jpg"
629
-                  data-srcM="./static/images/index/product1.jpg"
630
-                  alt=""
631
-                />
632
-                <div class="slideZ"></div>
633
-                <a href="">
634
-                    <div class="slideCon">
635
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
636
-                      <div class="more">了解更多</div>
637
-                  </div>
638
-                </a>
639
-              </div>
640
-              <div class="swiper-slide">
641
-                <img
642
-                  class="lazy"
643
-                  data-src="./static/images/index/product1.jpg"
644
-                  data-srcM="./static/images/index/product1.jpg"
645
-                  alt=""
646
-                />
647
-                <div class="slideZ"></div>
648
-                <a href="">
649
-                    <div class="slideCon">
650
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
651
-                      <div class="more">了解更多</div>
652
-                  </div>
653
-                </a>
654
-              </div>
655
-            </div>
656
-            <div class="productList">
657
-              <div class="swiper-slide">
658
-                <img
659
-                  class="lazy"
660
-                  data-src="./static/images/index/product1.jpg"
661
-                  data-srcM="./static/images/index/product1.jpg"
662
-                  alt=""
663
-                />
664
-                <div class="slideZ"></div>
665
-                <a href="">
666
-                    <div class="slideCon">
667
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
668
-                      <div class="more">了解更多</div>
669
-                  </div>
670
-                </a>
671
-              </div>
672
-              <div class="swiper-slide">
673
-                <img
674
-                  class="lazy"
675
-                  data-src="./static/images/index/product1.jpg"
676
-                  data-srcM="./static/images/index/product1.jpg"
677
-                  alt=""
678
-                />
679
-                <div class="slideZ"></div>
680
-                <a href="">
681
-                    <div class="slideCon">
682
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
683
-                      <div class="more">了解更多</div>
684
-                  </div>
685
-                </a>
686
-              </div>
687
-              <div class="swiper-slide">
688
-                <img
689
-                  class="lazy"
690
-                  data-src="./static/images/index/product1.jpg"
691
-                  data-srcM="./static/images/index/product1.jpg"
692
-                  alt=""
693
-                />
694
-                <div class="slideZ"></div>
695
-                <a href="">
696
-                    <div class="slideCon">
697
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
698
-                      <div class="more">了解更多</div>
699
-                  </div>
700
-                </a>
701
-              </div>
702
-              <div class="swiper-slide">
703
-                <img
704
-                  class="lazy"
705
-                  data-src="./static/images/index/product1.jpg"
706
-                  data-srcM="./static/images/index/product1.jpg"
707
-                  alt=""
708
-                />
709
-                <div class="slideZ"></div>
710
-                <a href="">
711
-                    <div class="slideCon">
712
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
713
-                      <div class="more">了解更多</div>
714
-                  </div>
715
-                </a>
716
-              </div>
717
-            </div>
718
-            <div class="productList">
719
-              <div class="swiper-slide">
720
-                <img
721
-                  class="lazy"
722
-                  data-src="./static/images/index/product1.jpg"
723
-                  data-srcM="./static/images/index/product1.jpg"
724
-                  alt=""
725
-                />
726
-                <div class="slideZ"></div>
727
-                <a href="">
728
-                    <div class="slideCon">
729
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
730
-                      <div class="more">了解更多</div>
731
-                  </div>
732
-                </a>
733
-              </div>
734
-              <div class="swiper-slide">
735
-                <img
736
-                  class="lazy"
737
-                  data-src="./static/images/index/product1.jpg"
738
-                  data-srcM="./static/images/index/product1.jpg"
739
-                  alt=""
740
-                />
741
-                <div class="slideZ"></div>
742
-                <a href="">
743
-                    <div class="slideCon">
744
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
745
-                      <div class="more">了解更多</div>
746
-                  </div>
747
-                </a>
748
-              </div>
749
-              <div class="swiper-slide">
750
-                <img
751
-                  class="lazy"
752
-                  data-src="./static/images/index/product1.jpg"
753
-                  data-srcM="./static/images/index/product1.jpg"
754
-                  alt=""
755
-                />
756
-                <div class="slideZ"></div>
757
-                <a href="">
758
-                    <div class="slideCon">
759
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
760
-                      <div class="more">了解更多</div>
761
-                  </div>
762
-                </a>
763
-              </div>
764
-              <div class="swiper-slide">
765
-                <img
766
-                  class="lazy"
767
-                  data-src="./static/images/index/product1.jpg"
768
-                  data-srcM="./static/images/index/product1.jpg"
769
-                  alt=""
770
-                />
771
-                <div class="slideZ"></div>
772
-                <a href="">
773
-                    <div class="slideCon">
774
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
775
-                      <div class="more">了解更多</div>
776
-                  </div>
777
-                </a>
778
-              </div>
779
-            </div>
780
-            <div class="productList">
781
-              <div class="swiper-slide">
782
-                <img
783
-                  class="lazy"
784
-                  data-src="./static/images/index/product1.jpg"
785
-                  data-srcM="./static/images/index/product1.jpg"
786
-                  alt=""
787
-                />
788
-                <div class="slideZ"></div>
789
-                <a href="">
790
-                    <div class="slideCon">
791
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
792
-                      <div class="more">了解更多</div>
793
-                  </div>
794
-                </a>
795
-              </div>
796
-              <div class="swiper-slide">
797
-                <img
798
-                  class="lazy"
799
-                  data-src="./static/images/index/product1.jpg"
800
-                  data-srcM="./static/images/index/product1.jpg"
801
-                  alt=""
802
-                />
803
-                <div class="slideZ"></div>
804
-                <a href="">
805
-                    <div class="slideCon">
806
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
807
-                      <div class="more">了解更多</div>
808
-                  </div>
809
-                </a>
810
-              </div>
811
-              <div class="swiper-slide">
812
-                <img
813
-                  class="lazy"
814
-                  data-src="./static/images/index/product1.jpg"
815
-                  data-srcM="./static/images/index/product1.jpg"
816
-                  alt=""
817
-                />
818
-                <div class="slideZ"></div>
819
-                <a href="">
820
-                    <div class="slideCon">
821
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
822
-                      <div class="more">了解更多</div>
823
-                  </div>
824
-                </a>
825
-              </div>
826
-              <div class="swiper-slide">
827
-                <img
828
-                  class="lazy"
829
-                  data-src="./static/images/index/product1.jpg"
830
-                  data-srcM="./static/images/index/product1.jpg"
831
-                  alt=""
832
-                />
833
-                <div class="slideZ"></div>
834
-                <a href="">
835
-                    <div class="slideCon">
836
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
837
-                      <div class="more">了解更多</div>
838
-                  </div>
839
-                </a>
840
-              </div>
841
-            </div>
842
-            <div class="productList">
843
-              <div class="swiper-slide">
844
-                <img
845
-                  class="lazy"
846
-                  data-src="./static/images/index/product1.jpg"
847
-                  data-srcM="./static/images/index/product1.jpg"
848
-                  alt=""
849
-                />
850
-                <div class="slideZ"></div>
851
-                <a href="">
852
-                    <div class="slideCon">
853
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
854
-                      <div class="more">了解更多</div>
855
-                  </div>
856
-                </a>
857
-              </div>
858
-              <div class="swiper-slide">
859
-                <img
860
-                  class="lazy"
861
-                  data-src="./static/images/index/product1.jpg"
862
-                  data-srcM="./static/images/index/product1.jpg"
863
-                  alt=""
864
-                />
865
-                <div class="slideZ"></div>
866
-                <a href="">
867
-                    <div class="slideCon">
868
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
869
-                      <div class="more">了解更多</div>
870
-                  </div>
871
-                </a>
872
-              </div>
873
-              <div class="swiper-slide">
874
-                <img
875
-                  class="lazy"
876
-                  data-src="./static/images/index/product1.jpg"
877
-                  data-srcM="./static/images/index/product1.jpg"
878
-                  alt=""
879
-                />
880
-                <div class="slideZ"></div>
881
-                <a href="">
882
-                    <div class="slideCon">
883
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
884
-                      <div class="more">了解更多</div>
885
-                  </div>
886
-                </a>
887
-              </div>
888
-              <div class="swiper-slide">
889
-                <img
890
-                  class="lazy"
891
-                  data-src="./static/images/index/product1.jpg"
892
-                  data-srcM="./static/images/index/product1.jpg"
893
-                  alt=""
894
-                />
895
-                <div class="slideZ"></div>
896
-                <a href="">
897
-                    <div class="slideCon">
898
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
899
-                      <div class="more">了解更多</div>
900
-                  </div>
901
-                </a>
902
-              </div>
903
-            </div>
904
-            <div class="productList">
905
-              <div class="swiper-slide">
906
-                <img
907
-                  class="lazy"
908
-                  data-src="./static/images/index/product1.jpg"
909
-                  data-srcM="./static/images/index/product1.jpg"
910
-                  alt=""
911
-                />
912
-                <div class="slideZ"></div>
913
-                <a href="">
914
-                    <div class="slideCon">
915
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
916
-                      <div class="more">了解更多</div>
917
-                  </div>
918
-                </a>
919
-              </div>
920
-              <div class="swiper-slide">
921
-                <img
922
-                  class="lazy"
923
-                  data-src="./static/images/index/product1.jpg"
924
-                  data-srcM="./static/images/index/product1.jpg"
925
-                  alt=""
926
-                />
927
-                <div class="slideZ"></div>
928
-                <a href="">
929
-                    <div class="slideCon">
930
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
931
-                      <div class="more">了解更多</div>
932
-                  </div>
933
-                </a>
934
-              </div>
935
-              <div class="swiper-slide">
936
-                <img
937
-                  class="lazy"
938
-                  data-src="./static/images/index/product1.jpg"
939
-                  data-srcM="./static/images/index/product1.jpg"
940
-                  alt=""
941
-                />
942
-                <div class="slideZ"></div>
943
-                <a href="">
944
-                    <div class="slideCon">
945
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
946
-                      <div class="more">了解更多</div>
947
-                  </div>
948
-                </a>
949
-              </div>
950
-              <div class="swiper-slide">
951
-                <img
952
-                  class="lazy"
953
-                  data-src="./static/images/index/product1.jpg"
954
-                  data-srcM="./static/images/index/product1.jpg"
955
-                  alt=""
956
-                />
957
-                <div class="slideZ"></div>
958
-                <a href="">
959
-                    <div class="slideCon">
960
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
961
-                      <div class="more">了解更多</div>
962
-                  </div>
963
-                </a>
964
-              </div>
965
-            </div>
966
-            <div class="productList">
967
-              <div class="swiper-slide">
968
-                <img
969
-                  class="lazy"
970
-                  data-src="./static/images/index/product1.jpg"
971
-                  data-srcM="./static/images/index/product1.jpg"
972
-                  alt=""
973
-                />
974
-                <div class="slideZ"></div>
975
-                <a href="">
976
-                    <div class="slideCon">
977
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
978
-                      <div class="more">了解更多</div>
979
-                  </div>
980
-                </a>
981
-              </div>
982
-              <div class="swiper-slide">
983
-                <img
984
-                  class="lazy"
985
-                  data-src="./static/images/index/product1.jpg"
986
-                  data-srcM="./static/images/index/product1.jpg"
987
-                  alt=""
988
-                />
989
-                <div class="slideZ"></div>
990
-                <a href="">
991
-                    <div class="slideCon">
992
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
993
-                      <div class="more">了解更多</div>
994
-                  </div>
995
-                </a>
996
-              </div>
997
-              <div class="swiper-slide">
998
-                <img
999
-                  class="lazy"
1000
-                  data-src="./static/images/index/product1.jpg"
1001
-                  data-srcM="./static/images/index/product1.jpg"
1002
-                  alt=""
1003
-                />
1004
-                <div class="slideZ"></div>
1005
-                <a href="">
1006
-                    <div class="slideCon">
1007
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
1008
-                      <div class="more">了解更多</div>
1009
-                  </div>
1010
-                </a>
1011
-              </div>
1012
-              <div class="swiper-slide">
1013
-                <img
1014
-                  class="lazy"
1015
-                  data-src="./static/images/index/product1.jpg"
1016
-                  data-srcM="./static/images/index/product1.jpg"
1017
-                  alt=""
1018
-                />
1019
-                <div class="slideZ"></div>
1020
-                <a href="">
1021
-                    <div class="slideCon">
1022
-                      <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
1023
-                      <div class="more">了解更多</div>
1024
-                  </div>
1025
-                </a>
1026
               </div>
548
               </div>
549
+              <!-- 如果需要分页器 -->
550
+              <!-- <div class="btn-prev btn-prevP1"><span class="icon iconfont icon-jiantou"></span></div> -->
551
+              <div class="btn-next btn-nextP1"><span class="icon iconfont icon-jiantou"></span></div>
1027
             </div>
552
             </div>
553
+            
1028
           </div>
554
           </div>
1029
         </div>
555
         </div>
1030
       </div>
556
       </div>
1031
       <div class="about">
557
       <div class="about">
1032
-        <div class="title">关于我们</div>
558
+        <div class="wow fadeInUp title">关于我们</div>
1033
         <div class="aboutCon">
559
         <div class="aboutCon">
1034
-          <div class="text">中泽控股集团股份有限公司(简称中泽集团)是以投资并购和企业运营为核心业务的大型民营集团,创建于1995年,总部位于北京。通过不断创新超
560
+          <div class="wow fadeInUp text">中泽控股集团股份有限公司(简称中泽集团)是以投资并购和企业运营为核心业务的大型民营集团,创建于1995年,总部位于北京。通过不断创新超
1035
             越,企业经营管理水平和可持续发展能力显著提升,并购重整的经验日益丰富,高质量建设发展的能力更加突出,逐步形成了铁合金、炭素、钼业、
561
             越,企业经营管理水平和可持续发展能力显著提升,并购重整的经验日益丰富,高质量建设发展的能力更加突出,逐步形成了铁合金、炭素、钼业、
1036
             镍业、化工、装备制造、产业互联网等核心产业,经营结构持续优化,资产规模不断扩大,社会影响力日渐增强。</div>
562
             镍业、化工、装备制造、产业互联网等核心产业,经营结构持续优化,资产规模不断扩大,社会影响力日渐增强。</div>
1037
-          <div class="aboutNum">
1038
-            <div class="num">
563
+          <div class="wow fadeInUp aboutNum">
564
+            <div class="wow fadeInUp num" data-wow-delay="0.2s">
1039
               <div class="numT">40+<span>家</span></div>
565
               <div class="numT">40+<span>家</span></div>
1040
               <div class="numP">旗下企业</div>
566
               <div class="numP">旗下企业</div>
1041
             </div>
567
             </div>
1042
             <div class="line"></div>
568
             <div class="line"></div>
1043
-            <div class="num">
569
+            <div class="wow fadeInUp num" data-wow-delay="0.4s">
1044
               <div class="numT">9<span>个</span></div>
570
               <div class="numT">9<span>个</span></div>
1045
               <div class="numP">业务领域</div>
571
               <div class="numP">业务领域</div>
1046
             </div>
572
             </div>
1047
             <div class="line"></div>
573
             <div class="line"></div>
1048
-            <div class="num">
574
+            <div class="wow fadeInUp num" data-wow-delay="0.6s">
1049
               <div class="numT">103<span>亿</span></div>
575
               <div class="numT">103<span>亿</span></div>
1050
               <div class="numP">总资产</div>
576
               <div class="numP">总资产</div>
1051
             </div>
577
             </div>
1052
           </div>
578
           </div>
1053
-          <a href="" class="btn">继续了解我们</a>
579
+          <a href="" class="wow fadeInUp btn">继续了解我们</a>
1054
         </div>
580
         </div>
1055
       </div>
581
       </div>
1056
-      <div class="society">
1057
-        <a href="" class="btn">了解更多</a>
582
+      <div class="wow fadeInUp society">
583
+        <a href="" class="wow fadeInUp btn">了解更多</a>
1058
         <img class="lazy" data-src="./static/images/index/society.jpg" data-srcM="./static/images/index/societym.jpg" alt="" />
584
         <img class="lazy" data-src="./static/images/index/society.jpg" data-srcM="./static/images/index/societym.jpg" alt="" />
1059
         <div class="societyCon">
585
         <div class="societyCon">
1060
-          <div class="title">社会责任</div>
1061
-          <div class="text">在全球化日益加深的今天,履行社会责任的意义愈加深远,成为衡量个人、企业乃至国家 综合实力和道德水平的重要标尺。</div>
1062
-          <a href="" class="btn">了解更多</a>
586
+          <div class="wow fadeInUp title">社会责任</div>
587
+          <div class="wow fadeInUp text">在全球化日益加深的今天,履行社会责任的意义愈加深远,成为衡量个人、企业乃至国家 综合实力和道德水平的重要标尺。</div>
588
+          <a href="" class="wow fadeInUp btn">了解更多</a>
1063
         </div>
589
         </div>
1064
         
590
         
1065
       </div>
591
       </div>

+ 6
- 6
src/pages/index/index.less ファイルの表示

240
               border: 1px solid #A7A5A5;
240
               border: 1px solid #A7A5A5;
241
               text-align: center;
241
               text-align: center;
242
               font-size: 12px;
242
               font-size: 12px;
243
-              padding: 7px 12px 0;
243
+              padding: 0px 12px 0;
244
               box-sizing: border-box;
244
               box-sizing: border-box;
245
               .timerData{
245
               .timerData{
246
                 font-size: 26px;
246
                 font-size: 26px;
247
                 color: #b81c25;
247
                 color: #b81c25;
248
                 border-bottom: 1px solid #b81c25;
248
                 border-bottom: 1px solid #b81c25;
249
-                padding-bottom: 5px;
250
-                margin-bottom: 5px;
249
+                padding-bottom: 0px;
250
+                margin-bottom: 2px;
251
               }
251
               }
252
             }
252
             }
253
             .newsLiCon{
253
             .newsLiCon{
258
                 overflow: hidden;
258
                 overflow: hidden;
259
                 white-space: nowrap;
259
                 white-space: nowrap;
260
                 width: 100%;
260
                 width: 100%;
261
-                height: 18px;
261
+                height: 24px;
262
                 text-overflow: ellipsis;
262
                 text-overflow: ellipsis;
263
               }
263
               }
264
               .liTitle{
264
               .liTitle{
265
                 color: #231F20;
265
                 color: #231F20;
266
                 font-weight: 500;
266
                 font-weight: 500;
267
-                margin-bottom: 20px;
267
+                margin-bottom: 14px;
268
               }
268
               }
269
               .licon{
269
               .licon{
270
                 font-weight: 400;
270
                 font-weight: 400;
291
   .productCon{
291
   .productCon{
292
     margin: 60px auto 0px;
292
     margin: 60px auto 0px;
293
     width: 100%;
293
     width: 100%;
294
-    max-width: 1300px;
294
+    max-width: 1296px;
295
     .productTits{
295
     .productTits{
296
       width: 100%;
296
       width: 100%;
297
       &>div{
297
       &>div{

読み込み中…
キャンセル
保存