浏览代码

添加产业页面及详情页面

zjm
等你 4 个月前
父节点
当前提交
b77526a108
共有 88 个文件被更改,包括 2442 次插入118 次删除
  1. 二进制
      dev/static/images/product/chanye/01.png
  2. 二进制
      dev/static/images/product/chanye/banner.png
  3. 二进制
      dev/static/images/product/huagong/01.png
  4. 二进制
      dev/static/images/product/huagong/02.png
  5. 二进制
      dev/static/images/product/huagong/banner.png
  6. 二进制
      dev/static/images/product/muye/01.png
  7. 二进制
      dev/static/images/product/muye/02.png
  8. 二进制
      dev/static/images/product/muye/03.png
  9. 二进制
      dev/static/images/product/muye/04.png
  10. 二进制
      dev/static/images/product/muye/banner.png
  11. 二进制
      dev/static/images/product/nieye/01.png
  12. 二进制
      dev/static/images/product/nieye/02.png
  13. 二进制
      dev/static/images/product/nieye/03.png
  14. 二进制
      dev/static/images/product/nieye/05.png
  15. 二进制
      dev/static/images/product/nieye/06.png
  16. 二进制
      dev/static/images/product/nieye/07.png
  17. 二进制
      dev/static/images/product/nieye/08.png
  18. 二进制
      dev/static/images/product/nieye/banner.png
  19. 二进制
      dev/static/images/product/product1.png
  20. 二进制
      dev/static/images/product/product2.png
  21. 二进制
      dev/static/images/product/product3.png
  22. 二进制
      dev/static/images/product/product4.png
  23. 二进制
      dev/static/images/product/product5.png
  24. 二进制
      dev/static/images/product/product6.png
  25. 二进制
      dev/static/images/product/product7.png
  26. 二进制
      dev/static/images/product/product8.png
  27. 二进制
      dev/static/images/product/product9.png
  28. 二进制
      dev/static/images/product/tansu/01.png
  29. 二进制
      dev/static/images/product/tansu/02.png
  30. 二进制
      dev/static/images/product/tansu/03.png
  31. 二进制
      dev/static/images/product/tansu/04.png
  32. 二进制
      dev/static/images/product/tansu/banner.png
  33. 二进制
      dev/static/images/product/tiehejin/01.png
  34. 二进制
      dev/static/images/product/tiehejin/02.png
  35. 二进制
      dev/static/images/product/tiehejin/03.png
  36. 二进制
      dev/static/images/product/tiehejin/04.png
  37. 二进制
      dev/static/images/product/tiehejin/05.png
  38. 二进制
      dev/static/images/product/tiehejin/06.png
  39. 二进制
      dev/static/images/product/tiehejin/banner.png
  40. 二进制
      dev/static/images/product/zhuangbei/01.png
  41. 二进制
      dev/static/images/product/zhuangbei/02.png
  42. 二进制
      dev/static/images/product/zhuangbei/banner.png
  43. 2
    0
      src/pages/common/css/common.less
  44. 10
    10
      src/pages/common/tpl/footer.tpl
  45. 20
    20
      src/pages/common/tpl/header.tpl
  46. 92
    88
      src/pages/index/index.html
  47. 39
    0
      src/pages/product/App.js
  48. 二进制
      src/pages/product/images/newsz.png
  49. 二进制
      src/pages/product/images/productz.png
  50. 138
    0
      src/pages/product/index.html
  51. 15
    0
      src/pages/product/index.js
  52. 97
    0
      src/pages/product/index.less
  53. 39
    0
      src/pages/productDec1/App.js
  54. 66
    0
      src/pages/productDec1/index.html
  55. 15
    0
      src/pages/productDec1/index.js
  56. 115
    0
      src/pages/productDec1/index.less
  57. 39
    0
      src/pages/productDec2/App.js
  58. 56
    0
      src/pages/productDec2/index.html
  59. 15
    0
      src/pages/productDec2/index.js
  60. 115
    0
      src/pages/productDec2/index.less
  61. 39
    0
      src/pages/productDec3/App.js
  62. 59
    0
      src/pages/productDec3/index.html
  63. 15
    0
      src/pages/productDec3/index.js
  64. 115
    0
      src/pages/productDec3/index.less
  65. 39
    0
      src/pages/productDec4/App.js
  66. 86
    0
      src/pages/productDec4/index.html
  67. 15
    0
      src/pages/productDec4/index.js
  68. 115
    0
      src/pages/productDec4/index.less
  69. 39
    0
      src/pages/productDec5/App.js
  70. 44
    0
      src/pages/productDec5/index.html
  71. 15
    0
      src/pages/productDec5/index.js
  72. 115
    0
      src/pages/productDec5/index.less
  73. 39
    0
      src/pages/productDec6/App.js
  74. 44
    0
      src/pages/productDec6/index.html
  75. 15
    0
      src/pages/productDec6/index.js
  76. 115
    0
      src/pages/productDec6/index.less
  77. 39
    0
      src/pages/productDec7/App.js
  78. 37
    0
      src/pages/productDec7/index.html
  79. 15
    0
      src/pages/productDec7/index.js
  80. 115
    0
      src/pages/productDec7/index.less
  81. 39
    0
      src/pages/productDec8/App.js
  82. 58
    0
      src/pages/productDec8/index.html
  83. 15
    0
      src/pages/productDec8/index.js
  84. 115
    0
      src/pages/productDec8/index.less
  85. 39
    0
      src/pages/productDec9/App.js
  86. 58
    0
      src/pages/productDec9/index.html
  87. 15
    0
      src/pages/productDec9/index.js
  88. 115
    0
      src/pages/productDec9/index.less

二进制
dev/static/images/product/chanye/01.png 查看文件


二进制
dev/static/images/product/chanye/banner.png 查看文件


二进制
dev/static/images/product/huagong/01.png 查看文件


二进制
dev/static/images/product/huagong/02.png 查看文件


二进制
dev/static/images/product/huagong/banner.png 查看文件


二进制
dev/static/images/product/muye/01.png 查看文件


二进制
dev/static/images/product/muye/02.png 查看文件


二进制
dev/static/images/product/muye/03.png 查看文件


二进制
dev/static/images/product/muye/04.png 查看文件


二进制
dev/static/images/product/muye/banner.png 查看文件


二进制
dev/static/images/product/nieye/01.png 查看文件


二进制
dev/static/images/product/nieye/02.png 查看文件


二进制
dev/static/images/product/nieye/03.png 查看文件


二进制
dev/static/images/product/nieye/05.png 查看文件


二进制
dev/static/images/product/nieye/06.png 查看文件


二进制
dev/static/images/product/nieye/07.png 查看文件


二进制
dev/static/images/product/nieye/08.png 查看文件


二进制
dev/static/images/product/nieye/banner.png 查看文件


二进制
dev/static/images/product/product1.png 查看文件


二进制
dev/static/images/product/product2.png 查看文件


二进制
dev/static/images/product/product3.png 查看文件


二进制
dev/static/images/product/product4.png 查看文件


二进制
dev/static/images/product/product5.png 查看文件


二进制
dev/static/images/product/product6.png 查看文件


二进制
dev/static/images/product/product7.png 查看文件


二进制
dev/static/images/product/product8.png 查看文件


二进制
dev/static/images/product/product9.png 查看文件


二进制
dev/static/images/product/tansu/01.png 查看文件


二进制
dev/static/images/product/tansu/02.png 查看文件


二进制
dev/static/images/product/tansu/03.png 查看文件


二进制
dev/static/images/product/tansu/04.png 查看文件


二进制
dev/static/images/product/tansu/banner.png 查看文件


二进制
dev/static/images/product/tiehejin/01.png 查看文件


二进制
dev/static/images/product/tiehejin/02.png 查看文件


二进制
dev/static/images/product/tiehejin/03.png 查看文件


二进制
dev/static/images/product/tiehejin/04.png 查看文件


二进制
dev/static/images/product/tiehejin/05.png 查看文件


二进制
dev/static/images/product/tiehejin/06.png 查看文件


二进制
dev/static/images/product/tiehejin/banner.png 查看文件


二进制
dev/static/images/product/zhuangbei/01.png 查看文件


二进制
dev/static/images/product/zhuangbei/02.png 查看文件


二进制
dev/static/images/product/zhuangbei/banner.png 查看文件


+ 2
- 0
src/pages/common/css/common.less 查看文件

@@ -817,6 +817,8 @@ footer{
817 817
         width: 175px;
818 818
         height: 35px;
819 819
         line-height: 35px;
820
+        border-radius: 4px;
821
+        min-width: 175px;
820 822
     }
821 823
     .btn2 {
822 824
         transform: scale(1);

+ 10
- 10
src/pages/common/tpl/footer.tpl 查看文件

@@ -20,15 +20,15 @@
20 20
             <div class="footerClick">
21 21
                 <a class="h7" href=""><span>产业布局</span></a>
22 22
                 <span class="icon iconfont icon-arrow-right"></span>
23
-                <div class="footerShow show2"><a class="h7R" href=""><span>铁合金</span></a>
24
-                <a class="h7R" href=""><span>炭素</span></a>
25
-                <a class="h7R" href=""><span>钼业</span></a>
26
-                <a class="h7R" href=""><span>镍业</span></a>
27
-                <a class="h7R" href=""><span>化工</span></a>
28
-                <a class="h7R" href=""><span>装备制造</span></a>
29
-                <a class="h7R" href=""><span>产业互联网</span></a>
30
-                <a class="h7R" href=""><span>金融</span></a>
31
-                <a class="h7R" href=""><span>其他</span></a></div>
23
+                <div class="footerShow show2"><a class="h7R" href="./productDec1.html"><span>铁合金</span></a>
24
+                <a class="h7R" href="./productDec2.html"><span>炭素</span></a>
25
+                <a class="h7R" href="./productDec3.html"><span>钼业</span></a>
26
+                <a class="h7R" href="./productDec4.html"><span>镍业</span></a>
27
+                <a class="h7R" href="./productDec5.html"><span>化工</span></a>
28
+                <a class="h7R" href="./productDec6.html"><span>装备制造</span></a>
29
+                <a class="h7R" href="./productDec7.html"><span>产业互联网</span></a>
30
+                <a class="h7R" href="./product.html"><span>金融</span></a>
31
+                <a class="h7R" href="./product.html"><span>其他</span></a></div>
32 32
             </div>
33 33
             
34 34
             <div class="footerClick">
@@ -62,7 +62,7 @@
62 62
         <div class="footerCenterM">
63 63
             <a class="h7" href="">走进中泽</a>
64 64
             <div></div>
65
-            <a class="h7" href="">产业布局</a>
65
+            <a class="h7" href="./product.html">产业布局</a>
66 66
             <div></div>
67 67
             <a class="h7" href="">新闻中心</a>
68 68
             <div></div>

+ 20
- 20
src/pages/common/tpl/header.tpl 查看文件

@@ -14,18 +14,18 @@
14 14
                 </div>
15 15
             </div>
16 16
             <div class="menuOne">
17
-                <a href="">产业布局</a>
17
+                <a href="./product.html">产业布局</a>
18 18
                 <div class="menuSon">
19 19
                     <div class="menuUp"></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>
20
+                    <a href="./productDec1.html"><span>铁合金</span></a>
21
+                    <a href="./productDec2.html"><span>炭素</span></a>
22
+                    <a href="./productDec3.html"><span>钼业</span></a>
23
+                    <a href="./productDec4.html"><span>镍业</span></a>
24
+                    <a href="./productDec5.html"><span>化工</span></a>
25
+                    <a href="./productDec6.html"><span>装备制造</span></a>
26
+                    <a href="./productDec7.html"><span>产业互联网</span></a>
27
+                    <a href="./product.html"><span>金融</span></a>
28
+                    <a href="./product.html"><span>其他</span></a>
29 29
                 </div>
30 30
             </div>
31 31
             <div class="menuOne">
@@ -96,17 +96,17 @@
96 96
                     </div>
97 97
                 </div>
98 98
                 <div>
99
-                    <div class="title" href="">产业布局<span class="iconfont icon-xiala"></span></div>
99
+                    <div class="title">产业布局<span class="iconfont icon-xiala"></span></div>
100 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>
101
+                        <a href="./productDec1.html"><span>铁合金</span></a>
102
+                        <a href="./productDec2.html"><span>炭素</span></a>
103
+                        <a href="./productDec3.html"><span>钼业</span></a>
104
+                        <a href="./productDec4.html"><span>镍业</span></a>
105
+                        <a href="./productDec5.html"><span>化工</span></a>
106
+                        <a href="./productDec6.html"><span>装备制造</span></a>
107
+                        <a href="./productDec7.html"><span>产业互联网</span></a>
108
+                        <a href="./product.html"><span>金融</span></a>
109
+                        <a href="./product.html"><span>其他</span></a>
110 110
                     </div>
111 111
                 </div>
112 112
                 <div>

+ 92
- 88
src/pages/index/index.html 查看文件

@@ -65,7 +65,7 @@
65 65
             <div class="swiper newsSwiper1 newsShowSwiper">
66 66
               <div class="swiper-wrapper">
67 67
                 <div class="swiper-slide">
68
-                  <img
68
+                  <a href=""><img
69 69
                     class="lazy"
70 70
                     data-src="./static/images/index/news1.jpg"
71 71
                     data-srcM="./static/images/index/news1.jpg"
@@ -75,11 +75,11 @@
75 75
                   <div class="slideCon">
76 76
                       <div class="time">2024-08-20</div>
77 77
                       <div class="text">投资并购与企业运营双轮驱动</div>
78
-                  </div>
78
+                  </div></a>
79 79
                 </div>
80 80
                 <!-- 多个直接复制添加swiper-slide -->
81 81
                 <div class="swiper-slide">
82
-                  <img
82
+                  <a href=""><img
83 83
                     class="lazy"
84 84
                     data-src="./static/images/index/news1.jpg"
85 85
                     data-srcM="./static/images/index/news1.jpg"
@@ -89,7 +89,7 @@
89 89
                   <div class="slideCon">
90 90
                       <div class="time">2024-08-20</div>
91 91
                       <div class="text">投资并购与企业运营双轮驱动</div>
92
-                  </div>
92
+                  </div></a>
93 93
                 </div>
94 94
               </div>
95 95
               <!-- 如果需要分页器 -->
@@ -99,31 +99,35 @@
99 99
             <div class="swiper newsSwiper2">
100 100
               <div class="swiper-wrapper">
101 101
                 <div class="swiper-slide">
102
-                  <img
103
-                    class="lazy"
104
-                    data-src="./static/images/index/news1.jpg"
105
-                    data-srcM="./static/images/index/news1.jpg"
106
-                    alt=""
107
-                  />
108
-                  <div class="slideZ"></div>
109
-                  <div class="slideCon">
110
-                      <div class="time">2024-08-20</div>
111
-                      <div class="text">投资并购与企业运营双轮驱动</div>
112
-                  </div>
102
+                  <a href="">
103
+                    <img
104
+                      class="lazy"
105
+                      data-src="./static/images/index/news1.jpg"
106
+                      data-srcM="./static/images/index/news1.jpg"
107
+                      alt=""
108
+                    />
109
+                    <div class="slideZ"></div>
110
+                    <div class="slideCon">
111
+                        <div class="time">2024-08-20</div>
112
+                        <div class="text">投资并购与企业运营双轮驱动</div>
113
+                    </div>
114
+                  </a>
113 115
                 </div>
114 116
                 <!-- 多个直接复制添加swiper-slide -->
115 117
                 <div class="swiper-slide">
116
-                  <img
117
-                    class="lazy"
118
-                    data-src="./static/images/index/news1.jpg"
119
-                    data-srcM="./static/images/index/news1.jpg"
120
-                    alt=""
121
-                  />
122
-                  <div class="slideZ"></div>
123
-                  <div class="slideCon">
124
-                      <div class="time">2024-08-20</div>
125
-                      <div class="text">投资并购与企业运营双轮驱动</div>
126
-                  </div>
118
+                  <a href="">
119
+                      <img
120
+                      class="lazy"
121
+                      data-src="./static/images/index/news1.jpg"
122
+                      data-srcM="./static/images/index/news1.jpg"
123
+                      alt=""
124
+                    />
125
+                    <div class="slideZ"></div>
126
+                    <div class="slideCon">
127
+                        <div class="time">2024-08-20</div>
128
+                        <div class="text">投资并购与企业运营双轮驱动</div>
129
+                    </div>
130
+                  </a>
127 131
                 </div>
128 132
               </div>
129 133
               <!-- 如果需要分页器 -->
@@ -133,7 +137,7 @@
133 137
             <div class="swiper newsSwiper3">
134 138
               <div class="swiper-wrapper">
135 139
                 <div class="swiper-slide">
136
-                  <img
140
+                  <a href=""><img
137 141
                     class="lazy"
138 142
                     data-src="./static/images/index/news1.jpg"
139 143
                     data-srcM="./static/images/index/news1.jpg"
@@ -143,11 +147,11 @@
143 147
                   <div class="slideCon">
144 148
                       <div class="time">2024-08-20</div>
145 149
                       <div class="text">投资并购与企业运营双轮驱动</div>
146
-                  </div>
150
+                  </div></a>
147 151
                 </div>
148 152
                 <!-- 多个直接复制添加swiper-slide -->
149 153
                 <div class="swiper-slide">
150
-                  <img
154
+                  <a href=""><img
151 155
                     class="lazy"
152 156
                     data-src="./static/images/index/news1.jpg"
153 157
                     data-srcM="./static/images/index/news1.jpg"
@@ -157,7 +161,7 @@
157 161
                   <div class="slideCon">
158 162
                       <div class="time">2024-08-20</div>
159 163
                       <div class="text">投资并购与企业运营双轮驱动</div>
160
-                  </div>
164
+                  </div></a>
161 165
                 </div>
162 166
               </div>
163 167
               <!-- 如果需要分页器 -->
@@ -167,7 +171,7 @@
167 171
             <div class="swiper newsSwiper4">
168 172
               <div class="swiper-wrapper">
169 173
                 <div class="swiper-slide">
170
-                  <img
174
+                  <a href=""><img
171 175
                     class="lazy"
172 176
                     data-src="./static/images/index/news1.jpg"
173 177
                     data-srcM="./static/images/index/news1.jpg"
@@ -177,11 +181,11 @@
177 181
                   <div class="slideCon">
178 182
                       <div class="time">2024-08-20</div>
179 183
                       <div class="text">投资并购与企业运营双轮驱动</div>
180
-                  </div>
184
+                  </div></a>
181 185
                 </div>
182 186
                 <!-- 多个直接复制添加swiper-slide -->
183 187
                 <div class="swiper-slide">
184
-                  <img
188
+                  <a href=""><img
185 189
                     class="lazy"
186 190
                     data-src="./static/images/index/news1.jpg"
187 191
                     data-srcM="./static/images/index/news1.jpg"
@@ -191,7 +195,7 @@
191 195
                   <div class="slideCon">
192 196
                       <div class="time">2024-08-20</div>
193 197
                       <div class="text">投资并购与企业运营双轮驱动</div>
194
-                  </div>
198
+                  </div></a>
195 199
                 </div>
196 200
               </div>
197 201
               <!-- 如果需要分页器 -->
@@ -211,17 +215,17 @@
211 215
             </div>
212 216
             <div class="wow fadeInUp newsConList" data-wow-delay="0.4s">
213 217
               <div class="newsType newsDivShow">
214
-                <div class="newsLi">
218
+                <a class="newsLi" href="">
215 219
                   <div class="timer">
216 220
                     <div class="timerData">10</div>
217 221
                     <div>24-06</div>
218 222
                   </div>
219
-                  <div class="newsLiCon">
220
-                    <div class="liTitle">中泽集团召开2024年中工作会议</div>
221
-                    <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
222
-                  </div>
223
-                </div>
224
-                <div class="newsLi">
223
+                    <div class="newsLiCon">
224
+                      <div class="liTitle">中泽集团召开2024年中工作会议</div>
225
+                      <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
226
+                    </div>
227
+                </a>
228
+                <a class="newsLi" href="">
225 229
                   <div class="timer">
226 230
                     <div class="timerData">10</div>
227 231
                     <div>24-06</div>
@@ -230,8 +234,8 @@
230 234
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
231 235
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
232 236
                   </div>
233
-                </div>
234
-                <div class="newsLi">
237
+                </a>
238
+                <a class="newsLi" href="">
235 239
                   <div class="timer">
236 240
                     <div class="timerData">10</div>
237 241
                     <div>24-06</div>
@@ -240,8 +244,8 @@
240 244
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
241 245
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
242 246
                   </div>
243
-                </div>
244
-                <div class="newsLi">
247
+                </a>
248
+                <a class="newsLi" href="">
245 249
                   <div class="timer">
246 250
                     <div class="timerData">10</div>
247 251
                     <div>24-06</div>
@@ -250,10 +254,10 @@
250 254
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
251 255
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
252 256
                   </div>
253
-                </div>
257
+                </a>
254 258
               </div>
255 259
               <div class="newsType">
256
-                <div class="newsLi">
260
+                <a class="newsLi" href="">
257 261
                   <div class="timer">
258 262
                     <div class="timerData">10</div>
259 263
                     <div>24-06</div>
@@ -262,8 +266,8 @@
262 266
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
263 267
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
264 268
                   </div>
265
-                </div>
266
-                <div class="newsLi">
269
+                </a>
270
+                <a class="newsLi" href="">
267 271
                   <div class="timer">
268 272
                     <div class="timerData">10</div>
269 273
                     <div>24-06</div>
@@ -272,8 +276,8 @@
272 276
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
273 277
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
274 278
                   </div>
275
-                </div>
276
-                <div class="newsLi">
279
+                </a>
280
+                <a class="newsLi" href="">
277 281
                   <div class="timer">
278 282
                     <div class="timerData">10</div>
279 283
                     <div>24-06</div>
@@ -282,8 +286,8 @@
282 286
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
283 287
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
284 288
                   </div>
285
-                </div>
286
-                <div class="newsLi">
289
+                </a>
290
+                <a class="newsLi" href="">
287 291
                   <div class="timer">
288 292
                     <div class="timerData">10</div>
289 293
                     <div>24-06</div>
@@ -292,10 +296,10 @@
292 296
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
293 297
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
294 298
                   </div>
295
-                </div>
299
+                </a>
296 300
               </div>
297 301
               <div class="newsType">
298
-                <div class="newsLi">
302
+                <a class="newsLi" href="">
299 303
                   <div class="timer">
300 304
                     <div class="timerData">10</div>
301 305
                     <div>24-06</div>
@@ -304,8 +308,8 @@
304 308
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
305 309
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
306 310
                   </div>
307
-                </div>
308
-                <div class="newsLi">
311
+                </a>
312
+                <a class="newsLi" href="">
309 313
                   <div class="timer">
310 314
                     <div class="timerData">10</div>
311 315
                     <div>24-06</div>
@@ -314,8 +318,8 @@
314 318
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
315 319
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
316 320
                   </div>
317
-                </div>
318
-                <div class="newsLi">
321
+                </a>
322
+                <a class="newsLi" href="">
319 323
                   <div class="timer">
320 324
                     <div class="timerData">10</div>
321 325
                     <div>24-06</div>
@@ -324,8 +328,8 @@
324 328
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
325 329
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
326 330
                   </div>
327
-                </div>
328
-                <div class="newsLi">
331
+                </a>
332
+                <a class="newsLi" href="">
329 333
                   <div class="timer">
330 334
                     <div class="timerData">10</div>
331 335
                     <div>24-06</div>
@@ -334,10 +338,10 @@
334 338
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
335 339
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
336 340
                   </div>
337
-                </div>
341
+                </a>
338 342
               </div>
339 343
               <div class="newsType">
340
-                <div class="newsLi">
344
+                <a class="newsLi" href="">
341 345
                   <div class="timer">
342 346
                     <div class="timerData">10</div>
343 347
                     <div>24-06</div>
@@ -346,8 +350,8 @@
346 350
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
347 351
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
348 352
                   </div>
349
-                </div>
350
-                <div class="newsLi">
353
+                </a>
354
+                <a class="newsLi" href="">
351 355
                   <div class="timer">
352 356
                     <div class="timerData">10</div>
353 357
                     <div>24-06</div>
@@ -356,8 +360,8 @@
356 360
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
357 361
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
358 362
                   </div>
359
-                </div>
360
-                <div class="newsLi">
363
+                </a>
364
+                <a class="newsLi" href="">
361 365
                   <div class="timer">
362 366
                     <div class="timerData">10</div>
363 367
                     <div>24-06</div>
@@ -366,8 +370,8 @@
366 370
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
367 371
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
368 372
                   </div>
369
-                </div>
370
-                <div class="newsLi">
373
+                </a>
374
+                <a class="newsLi" href="">
371 375
                   <div class="timer">
372 376
                     <div class="timerData">10</div>
373 377
                     <div>24-06</div>
@@ -376,7 +380,7 @@
376 380
                     <div class="liTitle">中泽集团召开2024年中工作会议</div>
377 381
                     <div class="licon">7月6日至7日,中泽集团在北京召开了2024年中工作会议。集集集集集集集集</div>
378 382
                   </div>
379
-                </div>
383
+                </a>
380 384
               </div>
381 385
             </div>
382 386
           </div>
@@ -458,9 +462,9 @@
458 462
                 <div class="swiper-slide">
459 463
                   <img class="lazy" data-src="./static/images/index/product1.png" data-srcM="./static/images/index/product1.png" alt="" />
460 464
                   <div class="slideZ"></div>
461
-                  <a href="">
465
+                  <a href="./productDec1.html">
462 466
                       <div class="slideCon">
463
-                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
467
+                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆吉铁和辽阳铁合金,重点分布在内蒙、新疆地区。中泽集团发挥吉林铁合金技术、管理和品牌等综合优势,践行绿色发展理念,在资源配置合理地区以综合年产能120万吨为基础规划远期目标年产1000万吨的铁合金项目。项目采用约60%清洁能源,综合运用新质生产力推动高耗能行业转型升级,致力于打造产能规模最大、工艺技术最领先、综合成本最低、资源利用效率最高的铁合金产业集群。</div>
464 468
                         <div class="more">了解更多</div>
465 469
                     </div>
466 470
                   </a>
@@ -468,9 +472,9 @@
468 472
                 <div class="swiper-slide">
469 473
                   <img class="lazy" data-src="./static/images/index/product2.png" data-srcM="./static/images/index/product2.png" alt="" />
470 474
                   <div class="slideZ"></div>
471
-                  <a href="">
475
+                  <a href="./productDec2.html">
472 476
                       <div class="slideCon">
473
-                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
477
+                        <div class="text">炭素板块是中泽集团重点建设板块之一,主要企业包括吉林炭素和吉蒙炭素,主要产品包括石墨电极、石墨阳极、炭块、糊类、特种炭制品、炭纤维制品等,广泛应用于冶金、化工、机械、电子、医疗、科研及新材料等领域,产品销往40多个国家和地区。内蒙古乌兰察布地区吉蒙炭素年产8万吨石墨电极,与吉林炭素配套形成国内领先的综合类炭素制品生产基地。</div>
474 478
                         <div class="more">了解更多</div>
475 479
                     </div>
476 480
                   </a>
@@ -478,9 +482,9 @@
478 482
                 <div class="swiper-slide">
479 483
                   <img class="lazy" data-src="./static/images/index/product3.png" data-srcM="./static/images/index/product3.png" alt="" />
480 484
                   <div class="slideZ"></div>
481
-                  <a href="">
485
+                  <a href="./productDec3.html">
482 486
                       <div class="slideCon">
483
-                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
487
+                        <div class="text">钼业板块是中泽集团聚合旗下大黑山钼业、天池钼业、中泽钼业、中泽新型建材四家企业,以“钼采选+钼化工+钼制品+钼尾矿综合利用”为主线打造的“四位一体”大型钼产业集群。力争通过钼板块的资源集约式发展,释放钼产业综合利用效益,打造国际上规模最大、技术领先的大型钼业集团。钼资源总金属储量134万吨,钼精矿年供应能力4万吨,占国内可流通钼精矿市场份额首位。</div>
484 488
                         <div class="more">了解更多</div>
485 489
                     </div>
486 490
                   </a>
@@ -488,9 +492,9 @@
488 492
                 <div class="swiper-slide">
489 493
                   <img class="lazy" data-src="./static/images/index/product4.png" data-srcM="./static/images/index/product4.png" alt="" />
490 494
                   <div class="slideZ"></div>
491
-                  <a href="">
495
+                  <a href="./productDec4.html">
492 496
                       <div class="slideCon">
493
-                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
497
+                        <div class="text">镍业板块包括吉恩镍业及其子公司、四平昊融银业。中泽集团依托吉恩镍业产业基础、品牌和技术优势,拓展原料渠道,把握镍产业发展机遇,开辟国际合作路径,致力于实现镍产业规模化、可持续发展。</div>
494 498
                         <div class="more">了解更多</div>
495 499
                     </div>
496 500
                   </a>
@@ -498,9 +502,9 @@
498 502
                 <div class="swiper-slide">
499 503
                   <img class="lazy" data-src="./static/images/index/product5.png" data-srcM="./static/images/index/product5.png" alt="" />
500 504
                   <div class="slideZ"></div>
501
-                  <a href="">
505
+                  <a href="./productDec5.html">
502 506
                       <div class="slideCon">
503
-                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
507
+                        <div class="text">化工板块是中泽集团新的业务板块,主要企业包括金煤化工、新瑞石化,主要产品为乙二醇、草酸、MTBE、乙苯、液化气、正丁烷。中泽集团规划以现有旗下化工企业为基础,逐步打造一个技术先进、产业链完备、市场领先的化工产业集群。</div>
504 508
                         <div class="more">了解更多</div>
505 509
                     </div>
506 510
                   </a>
@@ -508,9 +512,9 @@
508 512
                 <div class="swiper-slide">
509 513
                   <img class="lazy" data-src="./static/images/index/product6.png" data-srcM="./static/images/index/product6.png" alt="" />
510 514
                   <div class="slideZ"></div>
511
-                  <a href="">
515
+                  <a href="./productDec6.html">
512 516
                       <div class="slideCon">
513
-                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
517
+                        <div class="text">装备制造领域由朝阳重型、辽宁省机械研究院及其下属子公司组成,是中泽集团机械研发设计、制造基地。</div>
514 518
                         <div class="more">了解更多</div>
515 519
                     </div>
516 520
                   </a>
@@ -518,9 +522,9 @@
518 522
                 <div class="swiper-slide">
519 523
                   <img class="lazy" data-src="./static/images/index/product7.png" data-srcM="./static/images/index/product7.png" alt="" />
520 524
                   <div class="slideZ"></div>
521
-                  <a href="">
525
+                  <a href="./productDec7.html">
522 526
                       <div class="slideCon">
523
-                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
527
+                        <div class="text">产业互联网板块由万联易达及其子公司构成,致力于以人工智能为支撑,推动产业生态智能化升级。以更垂直化、多模态化、行业融合化的方式推出针对性的各类人工智能纵向大模型,为社会全产业提供商品贸易、整车物流、金融等数智化解决方案,促进全产业链协同发展。</div>
524 528
                         <div class="more">了解更多</div>
525 529
                     </div>
526 530
                   </a>
@@ -528,9 +532,9 @@
528 532
                 <div class="swiper-slide">
529 533
                   <img class="lazy" data-src="./static/images/index/product8.png" data-srcM="./static/images/index/product8.png" alt="" />
530 534
                   <div class="slideZ"></div>
531
-                  <a href="">
535
+                  <a href="./product.html">
532 536
                       <div class="slideCon">
533
-                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
537
+                        <div class="text">金融板块主要企业包括商贸集团、中睿元同、金山岭、深圳君奇,是实现集团投资并购与实体产业双轮驱动发展模式的重要支撑。</div>
534 538
                         <div class="more">了解更多</div>
535 539
                     </div>
536 540
                   </a>
@@ -538,9 +542,9 @@
538 542
                 <div class="swiper-slide">
539 543
                   <img class="lazy" data-src="./static/images/index/product9.png" data-srcM="./static/images/index/product9.png" alt="" />
540 544
                   <div class="slideZ"></div>
541
-                  <a href="">
545
+                  <a href="./product.html">
542 546
                       <div class="slideCon">
543
-                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆...</div>
547
+                        <div class="text">有色金属是国民经济发展的基础材料,中泽集团有色金属板块包括镍、钼、金、银等产业。</div>
544 548
                         <div class="more">了解更多</div>
545 549
                     </div>
546 550
                   </a>

+ 39
- 0
src/pages/product/App.js 查看文件

@@ -0,0 +1,39 @@
1
+import Swiper from 'swiper/bundle'
2
+import gsap from 'gsap'
3
+import LocomotiveScroll from 'locomotive-scroll';
4
+import Common from '../common/js/Common'
5
+import {
6
+    isMobile
7
+} from '../common/js/utils'
8
+
9
+export default class App {
10
+    constructor() {
11
+        let common = new Common(document.querySelector('.main'),1)   //导航菜单高亮,0是首页,后面的按顺序添加
12
+        this.isMobile = isMobile()
13
+        
14
+        this.scroll = new LocomotiveScroll();
15
+        // 图片及视频资源懒加载。防止阻塞js执行
16
+        let lazyDoms = document.querySelectorAll(".lazy");
17
+        let isMob=this.isMobile;
18
+        lazyDoms.forEach((item) => {
19
+            if (item.nodeName == "PICTURE") {
20
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
21
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
22
+            }
23
+            if (item.nodeName == "IMG") {
24
+                if(isMob){item.setAttribute("src", item.dataset.srcm);}
25
+                else{
26
+                    item.setAttribute("src", item.dataset.src);
27
+                }
28
+                
29
+            }
30
+            if (item.nodeName == "VIDEO") {
31
+                console.log(item, 'item---2')
32
+                item.setAttribute("src", item.dataset.src);
33
+                // item.load();
34
+            }
35
+        });
36
+    }
37
+
38
+
39
+}

二进制
src/pages/product/images/newsz.png 查看文件


二进制
src/pages/product/images/productz.png 查看文件


+ 138
- 0
src/pages/product/index.html 查看文件

@@ -0,0 +1,138 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+    <title>产业布局</title>
7
+    <meta name="description" content=""/>
8
+    <meta name="Keywords" content=""/>
9
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
10
+    <%= require('../common/tpl/headerLink.tpl') %>
11
+  </head>
12
+
13
+  <body>
14
+    <%= require('../common/tpl/header.tpl') %>
15
+    
16
+    <div class="main">
17
+      <div class="li">
18
+        <div class="liLeft">
19
+          <div class="liCon">
20
+            <div class="wow fadeInUp num">01</div>
21
+            <div class="wow fadeInUp title">铁合金</div>
22
+            <div class="wow fadeInUp text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆吉铁和辽阳铁合金,重点分布在内蒙、新疆地区。中泽集团发挥吉林铁合金技术、管理和品牌等综合优势,践行绿色发展理念,在资源配置合理地区以综合年产能120万吨为基础规划远期目标年产1000万吨的铁合金项目。项目采用约60%清洁能源,综合运用新质生产力推动高耗能行业转型升级,致力于打造产能规模最大、工艺技术最领先、综合成本最低、资源利用效率最高的铁合金产业集群。</div>
23
+            <a href="./productDec1.html" class="wow fadeInUp btn"><span>查看更多</span></a>
24
+          </div>
25
+        </div>
26
+        <div class="wow fadeInUp">
27
+          <img class="lazy" data-src="./static/images/product/product1.png" data-srcM="./static/images/product/product1.png" alt="" />
28
+        </div>
29
+      </div>
30
+      <div class="li">
31
+        <div class="liLeft">
32
+          <div class="liCon">
33
+            <div class="wow fadeInUp num">02</div>
34
+            <div class="wow fadeInUp title">炭素</div>
35
+            <div class="wow fadeInUp text">炭素板块是中泽集团重点建设板块之一,主要企业包括吉林炭素和吉蒙炭素,主要产品包括石墨电极、石墨阳极、炭块、糊类、特种炭制品、炭纤维制品等,广泛应用于冶金、化工、机械、电子、医疗、科研及新材料等领域,产品销往40多个国家和地区。内蒙古乌兰察布地区吉蒙炭素年产8万吨石墨电极,与吉林炭素配套形成国内领先的综合类炭素制品生产基地。</div>
36
+            <a href="./productDec2.html" class="wow fadeInUp btn"><span>查看更多</span></a>
37
+          </div>
38
+        </div>
39
+        <div class="wow fadeInUp">
40
+          <img class="lazy" data-src="./static/images/product/product2.png" data-srcM="./static/images/product/product2.png" alt="" />
41
+        </div>
42
+      </div>
43
+      <div class="li">
44
+        <div class="liLeft">
45
+          <div class="liCon">
46
+            <div class="wow fadeInUp num">03</div>
47
+            <div class="wow fadeInUp title">钼业</div>
48
+            <div class="wow fadeInUp text">钼业板块是中泽集团聚合旗下大黑山钼业、天池钼业、中泽钼业、中泽新型建材四家企业,以“钼采选+钼化工+钼制品+钼尾矿综合利用”为主线打造的“四位一体”大型钼产业集群。力争通过钼板块的资源集约式发展,释放钼产业综合利用效益,打造国际上规模最大、技术领先的大型钼业集团。钼资源总金属储量134万吨,钼精矿年供应能力4万吨,占国内可流通钼精矿市场份额首位。</div>
49
+            <a href="./productDec3.html" class="wow fadeInUp btn"><span>查看更多</span></a>
50
+          </div>
51
+        </div>
52
+        <div class="wow fadeInUp">
53
+          <img class="lazy" data-src="./static/images/product/product3.png" data-srcM="./static/images/product/product3.png" alt="" />
54
+        </div>
55
+      </div>
56
+      <div class="li">
57
+        <div class="liLeft">
58
+          <div class="liCon">
59
+            <div class="wow fadeInUp num">04</div>
60
+            <div class="wow fadeInUp title">镍业</div>
61
+            <div class="wow fadeInUp text">镍业板块包括吉恩镍业及其子公司、四平昊融银业。中泽集团依托吉恩镍业产业基础、品牌和技术优势,拓展原料渠道,把握镍产业发展机遇,开辟国际合作路径,致力于实现镍产业规模化、可持续发展。</div>
62
+            <a href="./productDec4.html" class="wow fadeInUp btn"><span>查看更多</span></a>
63
+          </div>
64
+        </div>
65
+        <div class="wow fadeInUp">
66
+          <img class="lazy" data-src="./static/images/product/product4.png" data-srcM="./static/images/product/product4.png" alt="" />
67
+        </div>
68
+      </div>
69
+      <div class="li">
70
+        <div class="liLeft">
71
+          <div class="liCon">
72
+            <div class="wow fadeInUp num">05</div>
73
+            <div class="wow fadeInUp title">化工</div>
74
+            <div class="wow fadeInUp text">化工板块是中泽集团新的业务板块,主要企业包括金煤化工、新瑞石化,主要产品为乙二醇、草酸、MTBE、乙苯、液化气、正丁烷。中泽集团规划以现有旗下化工企业为基础,逐步打造一个技术先进、产业链完备、市场领先的化工产业集群。</div>
75
+            <a href="./productDec5.html" class="wow fadeInUp btn"><span>查看更多</span></a>
76
+          </div>
77
+        </div>
78
+        <div class="wow fadeInUp">
79
+          <img class="lazy" data-src="./static/images/product/product5.png" data-srcM="./static/images/product/product5.png" alt="" />
80
+        </div>
81
+      </div>
82
+      <div class="li">
83
+        <div class="liLeft">
84
+          <div class="liCon">
85
+            <div class="wow fadeInUp num">06</div>
86
+            <div class="wow fadeInUp title">装备制造</div>
87
+            <div class="wow fadeInUp text">装备制造领域由朝阳重型、辽宁省机械研究院及其下属子公司组成,是中泽集团机械研发设计、制造基地。</div>
88
+            <a href="./productDec6.html" class="wow fadeInUp btn"><span>查看更多</span></a>
89
+          </div>
90
+        </div>
91
+        <div class="wow fadeInUp">
92
+          <img class="lazy" data-src="./static/images/product/product6.png" data-srcM="./static/images/product/product6.png" alt="" />
93
+        </div>
94
+      </div>
95
+      <div class="li">
96
+        <div class="liLeft">
97
+          <div class="liCon">
98
+            <div class="wow fadeInUp num">07</div>
99
+            <div class="wow fadeInUp title">产业互联网</div>
100
+            <div class="wow fadeInUp text">产业互联网板块由万联易达及其子公司构成,致力于以人工智能为支撑,推动产业生态智能化升级。以更垂直化、多模态化、行业融合化的方式推出针对性的各类人工智能纵向大模型,为社会全产业提供商品贸易、整车物流、金融等数智化解决方案,促进全产业链协同发展。</div>
101
+            <a href="./productDec7.html" class="wow fadeInUp btn"><span>查看更多</span></a>
102
+          </div>
103
+        </div>
104
+        <div class="wow fadeInUp">
105
+          <img class="lazy" data-src="./static/images/product/product7.png" data-srcM="./static/images/product/product7.png" alt="" />
106
+        </div>
107
+      </div>
108
+      <div class="li">
109
+        <div class="liLeft">
110
+          <div class="liCon">
111
+            <div class="wow fadeInUp num">08</div>
112
+            <div class="wow fadeInUp title">金融</div>
113
+            <div class="wow fadeInUp text">金融板块主要企业包括商贸集团、中睿元同、金山岭、深圳君奇,是实现集团投资并购与实体产业双轮驱动发展模式的重要支撑。</div>
114
+            <!-- <a href="" class="wow fadeInUp btn"><span>查看更多</span></a> -->
115
+          </div>
116
+        </div>
117
+        <div class="wow fadeInUp">
118
+          <img class="lazy" data-src="./static/images/product/product8.png" data-srcM="./static/images/product/product8.png" alt="" />
119
+        </div>
120
+      </div>
121
+      <div class="li">
122
+        <div class="liLeft">
123
+          <div class="liCon">
124
+            <div class="wow fadeInUp num">09</div>
125
+            <div class="wow fadeInUp title">其他</div>
126
+            <div class="wow fadeInUp text">有色金属是国民经济发展的基础材料,中泽集团有色金属板块包括镍、钼、金、银等产业。</div>
127
+            <!-- <a href="" class="wow fadeInUp btn"><span>查看更多</span></a> -->
128
+          </div>
129
+        </div>
130
+        <div class="wow fadeInUp">
131
+          <img class="lazy" data-src="./static/images/product/product9.png" data-srcM="./static/images/product/product9.png" alt="" />
132
+        </div>
133
+      </div>
134
+    </div>
135
+    <%= require('../common/tpl/footer.tpl') %>
136
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
137
+  </body>
138
+</html>

+ 15
- 0
src/pages/product/index.js 查看文件

@@ -0,0 +1,15 @@
1
+import "./../common/css/common.less";
2
+import "./index.less";
3
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
4
+import App from './App.js';
5
+
6
+// swiper的css目前环境解析不出来,放static下,不走webpack 
7
+//import 'swiper/swiper-bundle.css';
8
+
9
+vhCheck();
10
+//禁止浏览器刷新后回到上一个页面滚动位置
11
+if ('scrollRestoration' in history) {
12
+    history.scrollRestoration = 'manual';
13
+}
14
+
15
+new App();

+ 97
- 0
src/pages/product/index.less 查看文件

@@ -0,0 +1,97 @@
1
+
2
+//pc端样式
3
+.main {
4
+    width: 100%;
5
+    max-width: 1920px;
6
+    margin: 0 auto;
7
+    padding-top: 71px;
8
+    padding-bottom: 80px;
9
+}
10
+.li{
11
+  width: 100%;
12
+  display: flex;
13
+  padding: 160px 0px 60px;
14
+  &>div{
15
+    width: 50%;
16
+    .liCon{
17
+      width: 650px;
18
+      text-align: left;
19
+      box-sizing: border-box;
20
+      padding-right: 90px;
21
+      .num{
22
+        font-family: 'MyFont1';
23
+        font-weight: bold;
24
+        font-size: 30px;
25
+        color: #231F20;
26
+        margin-bottom: 30px;
27
+      }
28
+      .text{
29
+        color: #9fa3a5;
30
+        margin-top: 28px;
31
+        margin-bottom: 76px;
32
+      }
33
+    }
34
+    img{
35
+      width: 100%;
36
+      height: 100%;
37
+      display: block;
38
+      object-fit: cover;
39
+    }
40
+  }
41
+  .liLeft{
42
+    display: flex;
43
+    flex-direction: row-reverse;
44
+  }
45
+}
46
+
47
+@media screen and (min-width: 801px) and (max-width: 1400px) {
48
+  
49
+}
50
+@media screen and (min-width:800px){
51
+  
52
+}
53
+.mTxt{
54
+  display: none;
55
+}
56
+//移动端样式
57
+@media screen and (max-width:800px) {
58
+  .pcTxt{
59
+    display: none;
60
+  }
61
+  .mTxt{
62
+    display: block;
63
+  }
64
+  .main{
65
+    padding-top: 61px;
66
+    padding-bottom: 30px;
67
+  }
68
+  .li{
69
+    padding: 80px 15px 30px;
70
+    flex-wrap: wrap;
71
+    box-sizing: border-box;
72
+    &>div{
73
+      width: 100%;
74
+      .liCon{
75
+        width: 100%;
76
+        padding-right: 0px;
77
+        .num {
78
+          font-size: 20px;
79
+          margin-bottom: 15px;
80
+        }
81
+        .title {
82
+          font-size: 24px;
83
+          line-height: 36px;
84
+        }
85
+        .text {
86
+          font-size: 14px;
87
+          line-height: 22px;
88
+          margin-top: 18px;
89
+          margin-bottom: 40px;
90
+        }
91
+      }
92
+    }
93
+    .liLeft{
94
+      margin-bottom: 40px;
95
+    }
96
+  }
97
+}

+ 39
- 0
src/pages/productDec1/App.js 查看文件

@@ -0,0 +1,39 @@
1
+import Swiper from 'swiper/bundle'
2
+import gsap from 'gsap'
3
+import LocomotiveScroll from 'locomotive-scroll';
4
+import Common from '../common/js/Common'
5
+import {
6
+    isMobile
7
+} from '../common/js/utils'
8
+
9
+export default class App {
10
+    constructor() {
11
+        let common = new Common(document.querySelector('.main'),1)   //导航菜单高亮,0是首页,后面的按顺序添加
12
+        this.isMobile = isMobile()
13
+        
14
+        this.scroll = new LocomotiveScroll();
15
+        // 图片及视频资源懒加载。防止阻塞js执行
16
+        let lazyDoms = document.querySelectorAll(".lazy");
17
+        let isMob=this.isMobile;
18
+        lazyDoms.forEach((item) => {
19
+            if (item.nodeName == "PICTURE") {
20
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
21
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
22
+            }
23
+            if (item.nodeName == "IMG") {
24
+                if(isMob){item.setAttribute("src", item.dataset.srcm);}
25
+                else{
26
+                    item.setAttribute("src", item.dataset.src);
27
+                }
28
+                
29
+            }
30
+            if (item.nodeName == "VIDEO") {
31
+                console.log(item, 'item---2')
32
+                item.setAttribute("src", item.dataset.src);
33
+                // item.load();
34
+            }
35
+        });
36
+    }
37
+
38
+
39
+}

+ 66
- 0
src/pages/productDec1/index.html 查看文件

@@ -0,0 +1,66 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+    <title>铁合金-产业布局</title>
7
+    <meta name="description" content=""/>
8
+    <meta name="Keywords" content=""/>
9
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
10
+    <%= require('../common/tpl/headerLink.tpl') %>
11
+  </head>
12
+
13
+  <body>
14
+    <%= require('../common/tpl/header.tpl') %>
15
+    
16
+    <div class="main">
17
+      <div class="desCon">
18
+        <div class="wow fadeInUp desTop">
19
+          <div class="title">铁合金</div>
20
+          <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆吉铁和辽阳铁合金,重点分布在内蒙、新疆地区。中泽集团发挥吉林铁合金技术、管理和品牌等综合优势,践行绿色发展理念,在资源配置合理地区以综合年产能120万吨为基础规划远期目标年产1000万吨的铁合金项目。项目采用约60%清洁能源,综合运用新质生产力推动高耗能行业转型升级,致力于打造产能规模最大、工艺技术最领先、综合成本最低、资源利用效率最高的铁合金产业集群。</div>
21
+        </div>
22
+        <div class="wow fadeInUp desTopImg">
23
+          <img class="lazy" data-src="./static/images/product/tiehejin/banner.png" data-srcM="./static/images/product/tiehejin/banner.png" alt="" />
24
+        </div>
25
+        <div class="desLi">
26
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tiehejin/01.png" data-srcM="./static/images/product/tiehejin/01.png" alt="" />
27
+          <div class="wow fadeInUp title">吉林铁合金股份有限公司</div>
28
+          <div class="wow fadeInUp text">
29
+            吉林铁合金股份有限公司(以下简称吉林铁合金)始建于1953年,是国家“一五”期间156项重点工程之一,是我国第一家大型铁合金生产企业, 拥有行业唯一的国家企业技术中心,被誉为“铁合金行业的长子”。多年来,吉林铁合金的建设发展受到国家和各级政府的支持与关注,朱德、邓小平、董必武、 温家宝等几代国家领导人莅临吉林铁合金视察工作。2014年,中泽集团以股权并购方式对吉林铁合金实施战略重组。
30
+          </div>
31
+        </div>
32
+        <div class="desLi">
33
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tiehejin/02.png" data-srcM="./static/images/product/tiehejin/02.png" alt="" />
34
+          <div class="wow fadeInUp title">吉铁铁合金有限责任公司</div>
35
+          <div class="wow fadeInUp text">
36
+            吉铁铁合金有限责任公司(以下简称吉铁铁合金)成立于2016年,是中泽集团并购吉林铁合金后,依托其品牌、技术、人员优势,在资源配置合理的内蒙古自治区乌兰察布丰镇市,投资建设的具备锰、铬系列铁合金产品生产、加工与销售能力的铁合金生产基地。现有电炉22台,员工2400人,年产铁合金100万吨,可实现销售收入约90亿元,是国内铁合金行业单体规模最大的龙头企业。<br>吉铁铁合金是现任中国金属学会铁合金分会理事长单位、铁合金分会主任委员单位及分析测试分会委员单位;是全国生铁及铁合金标准化技术委员会(SAC/TC318)主任委员单位、化学分析分技术委员会(SAC/TC318/SC1)委员单位、锰矿石及铬矿石分技术委员会(SAC/TC318/SC2)委员单位;是全国标样委冶金标准样品分技术委员会(SAC/TC118/SC2)副主任委员单位。共制修订136项国家标准和行业标准;共研制铁合金及原辅料国家和行业标准物质/标准样品121个品种及牌号,制修订标准及研制标准样品的数量均居国内铁合金行业首位;现有发明专利9项、实用新型专利29项;拥有“哈达牌”国家驰名商标。<br>吉铁还是国家高新技术企业、国家级绿色工厂,连续多年被评为内蒙古自治区民营百强企业、制造业50强企业、科技创新30强企业。吉铁600万吨源网荷储一体化建设项目正在规划建设中。
37
+          </div>
38
+        </div>
39
+        <div class="desLi">
40
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tiehejin/03.png" data-srcM="./static/images/product/tiehejin/03.png" alt="" />
41
+          <div class="wow fadeInUp title">吉铁(天津)国际贸易有限公司</div>
42
+          <div class="wow fadeInUp text">吉铁(天津)国际贸易有限公司:吉铁(天津)国际贸易成立于2017年,业务范围以进口锰矿和铬矿为主,主要保障吉铁铁合金和辽阳铁合金的生产原材料供应。并以经营进口矿石业务为依托,拓展上下游相关资源,生产保供和贸易开发稳步推进为发展战略,多年来深耕细作,赢得了良好的业内口碑。</div>
43
+        </div>
44
+        <div class="desLi">
45
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tiehejin/04.png" data-srcM="./static/images/product/tiehejin/04.png" alt="" />
46
+          <div class="wow fadeInUp title">新疆吉铁铁合金有限责任公司</div>
47
+          <div class="wow fadeInUp text">
48
+            新疆吉铁铁合金有限责任公司(以下简称新疆吉铁)成立于2021年,是中泽集团顺应国家“碳达峰、碳中和”战略,依托新疆区域资源和吉铁品牌技术的优势,在新星经济技术开发区二道湖工业园区,投资建设的清洁能源与高耗能产业有机融合企业。<br>新疆吉铁建设的镁基新材料循环经济一体化项目计划10年内建成。目前正在推进第一阶段项目规划,即利用5年时间,拟在哈密市和十三师新星市相继各自建设完成年产36万吨镁基新材料循环经济一体化项目。两地项目总占地约446万平方米(6700亩),总投资约145亿元(未含新能源投资),年用电量54亿度,年产值约312亿元。<br>公司秉承“科技创新、绿色环保、集约经营”的发展理念,依托资源禀赋和区位优势,借鉴吸收国内外先进技术,提升项目生产装备及生产工艺,创建以循环产业为主体的可持续发展的现代化工业企业。配套建设的风光电项目将提供50%的清洁能源,项目建成后将成为我国首个绿电占50%的高耗能示范企业。
49
+          </div>
50
+        </div>
51
+        <div class="desLi">
52
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tiehejin/05.png" data-srcM="./static/images/product/tiehejin/05.png" alt="" />
53
+          <div class="wow fadeInUp title">内蒙古瑞志现代煤化工有限公司</div>
54
+          <div class="wow fadeInUp text">内蒙古瑞志现代煤化工有限公司(以下简称瑞志煤化工)成立于2017年,位于内蒙古自治区乌兰察布丰镇市。通过综合利用铁合金封闭电炉产生的煤气副产品,进行深加工甲醇制品,实现能源二次利用,形成生产资源整合及环保节能减排,打造循环经济产业链。<br>瑞志煤化工项目产品前沿高端,工艺先进精细,产业链延伸、深加工及综合利用合理,市场前景良好,符合国家环保、能源发展战略和产业政策,是对铁合金项目的有力互补和支持,是国家积极鼓励的产品附加值较高的绿色环保生态项目。公司年产甲醇17.5万吨,总投资约为5.89亿元,占地面积约为16.5万平方米,年产值近4亿元,并为当地提供了200多个就业岗位。</div>
55
+        </div>
56
+        <div class="desLi">
57
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tiehejin/06.png" data-srcM="./static/images/product/tiehejin/06.png" alt="" />
58
+          <div class="wow fadeInUp title">辽阳铁合金责任有限公司</div>
59
+          <div class="wow fadeInUp text">辽阳铁合金责任有限公司(以下简称辽阳铁合金)前身为中钢吉铁辽阳有限公司,是在原国家十八家重点铁合金生产企业之一----辽阳铁合金厂基础上沿革而来。辽阳铁合金主要产品有高碳铬铁、中碳铬铁、低钛高碳铬铁,年生产能力 12 万吨。低钛高碳铬铁冶炼生产工艺技术领先,在国内外市场极具竞争力,是国内铁合金行业唯一一家拥有独立知识产权,能够生产低钛高碳铬铁的企业。</div>
60
+        </div>
61
+      </div>
62
+    </div>
63
+    <%= require('../common/tpl/footer.tpl') %>
64
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
65
+  </body>
66
+</html>

+ 15
- 0
src/pages/productDec1/index.js 查看文件

@@ -0,0 +1,15 @@
1
+import "./../common/css/common.less";
2
+import "./index.less";
3
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
4
+import App from './App.js';
5
+
6
+// swiper的css目前环境解析不出来,放static下,不走webpack 
7
+//import 'swiper/swiper-bundle.css';
8
+
9
+vhCheck();
10
+//禁止浏览器刷新后回到上一个页面滚动位置
11
+if ('scrollRestoration' in history) {
12
+    history.scrollRestoration = 'manual';
13
+}
14
+
15
+new App();

+ 115
- 0
src/pages/productDec1/index.less 查看文件

@@ -0,0 +1,115 @@
1
+
2
+//pc端样式
3
+.main {
4
+    width: 100%;
5
+    max-width: 1920px;
6
+    margin: 0 auto;
7
+    padding-top: 71px;
8
+}
9
+.desCon{
10
+  width: 100%;
11
+  text-align: center;
12
+  padding-top: 120px;
13
+  .desTop{
14
+    width: 100%;
15
+    max-width: 1300px;
16
+    margin: 0px auto;
17
+    display: flex;
18
+    text-align: left;
19
+    padding-bottom: 26px;
20
+    &>div{
21
+      width: 50%;
22
+    }
23
+  }
24
+  .desTopImg{
25
+    width: 100%;
26
+    max-width: 1500px;
27
+    margin: 0px auto;
28
+    padding-bottom: 140px;
29
+    img{
30
+      width: 100%;
31
+      display: block;
32
+    }
33
+  }
34
+  .desLi{
35
+    width: 100%;
36
+    max-width: 1300px;
37
+    margin: 0px auto;
38
+    padding-bottom: 150px;
39
+    img{
40
+      width: 100%;
41
+      display: block;
42
+      margin-bottom: 50px;
43
+    }
44
+    .title{
45
+      font-size: 36px;
46
+      margin-bottom: 16px;
47
+    }
48
+    .text{
49
+      text-align: left;
50
+    }
51
+    &:last-child{
52
+      padding-bottom: 130px;
53
+    }
54
+  }
55
+}
56
+
57
+
58
+@media screen and (min-width: 801px) and (max-width: 1400px) {
59
+  
60
+}
61
+@media screen and (min-width:800px){
62
+  
63
+}
64
+.mTxt{
65
+  display: none;
66
+}
67
+//移动端样式
68
+@media screen and (max-width:800px) {
69
+  .pcTxt{
70
+    display: none;
71
+  }
72
+  .mTxt{
73
+    display: block;
74
+  }
75
+  .main{
76
+    padding-top: 61px;
77
+  }
78
+  .desCon{
79
+    padding-top: 80px;
80
+    box-sizing: border-box;
81
+    padding-left: 15px;
82
+    padding-right: 15px;
83
+    .text{
84
+      font-size: 14px;
85
+      line-height: 22px;
86
+    }
87
+    .desTop{
88
+      padding-bottom: 30px;
89
+      flex-wrap: wrap;
90
+      .title{
91
+        text-align: center;
92
+        margin-bottom: 20px;
93
+      }
94
+      &>div{
95
+        width: 100%;
96
+      }
97
+    }
98
+    .desTopImg{
99
+      padding-bottom: 70px;
100
+    }
101
+    .desLi{
102
+      padding-bottom: 70px;
103
+      img{
104
+        margin-bottom: 28px;
105
+      }
106
+      .title{
107
+        font-size: 15px;
108
+        line-height: 20px;
109
+      }
110
+      &:last-child {
111
+        padding-bottom: 70px;
112
+    }
113
+    }
114
+  }
115
+}

+ 39
- 0
src/pages/productDec2/App.js 查看文件

@@ -0,0 +1,39 @@
1
+import Swiper from 'swiper/bundle'
2
+import gsap from 'gsap'
3
+import LocomotiveScroll from 'locomotive-scroll';
4
+import Common from '../common/js/Common'
5
+import {
6
+    isMobile
7
+} from '../common/js/utils'
8
+
9
+export default class App {
10
+    constructor() {
11
+        let common = new Common(document.querySelector('.main'),1)   //导航菜单高亮,0是首页,后面的按顺序添加
12
+        this.isMobile = isMobile()
13
+        
14
+        this.scroll = new LocomotiveScroll();
15
+        // 图片及视频资源懒加载。防止阻塞js执行
16
+        let lazyDoms = document.querySelectorAll(".lazy");
17
+        let isMob=this.isMobile;
18
+        lazyDoms.forEach((item) => {
19
+            if (item.nodeName == "PICTURE") {
20
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
21
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
22
+            }
23
+            if (item.nodeName == "IMG") {
24
+                if(isMob){item.setAttribute("src", item.dataset.srcm);}
25
+                else{
26
+                    item.setAttribute("src", item.dataset.src);
27
+                }
28
+                
29
+            }
30
+            if (item.nodeName == "VIDEO") {
31
+                console.log(item, 'item---2')
32
+                item.setAttribute("src", item.dataset.src);
33
+                // item.load();
34
+            }
35
+        });
36
+    }
37
+
38
+
39
+}

+ 56
- 0
src/pages/productDec2/index.html 查看文件

@@ -0,0 +1,56 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+    <title>炭素-产业布局</title>
7
+    <meta name="description" content=""/>
8
+    <meta name="Keywords" content=""/>
9
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
10
+    <%= require('../common/tpl/headerLink.tpl') %>
11
+  </head>
12
+
13
+  <body>
14
+    <%= require('../common/tpl/header.tpl') %>
15
+    
16
+    <div class="main">
17
+      <div class="desCon">
18
+        <div class="wow fadeInUp desTop">
19
+          <div class="title">炭素</div>
20
+          <div class="text">炭素板块是中泽集团重点建设板块之一,主要企业包括吉林炭素和吉蒙炭素,主要产品包括石墨电极、石墨阳极、炭块、糊类、特种炭制品、炭纤维制品等,广泛应用于冶金、化工、机械、电子、医疗、科研及新材料等领域,产品销往40多个国家和地区。内蒙古乌兰察布地区吉蒙炭素年产8万吨石墨电极,与吉林炭素配套形成国内领先的综合类炭素制品生产基地。</div>
21
+        </div>
22
+        <div class="wow fadeInUp desTopImg">
23
+          <img class="lazy" data-src="./static/images/product/tansu/banner.png" data-srcM="./static/images/product/tansu/banner.png" alt="" />
24
+        </div>
25
+        <div class="desLi">
26
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/01.png" data-srcM="./static/images/product/tansu/01.png" alt="" />
27
+          <div class="wow fadeInUp title">吉林炭素有限公司</div>
28
+          <div class="wow fadeInUp text">
29
+            吉林炭素有限公司(以下简称吉林炭素)始建于1952年,是国家“一五”期间156项重点工程之一,是中国第一家炭素生产企业,享有“中国炭素工业摇篮”的美誉,拥有“吉炭”牌中国驰名商标。产品主要包括石墨电极、石墨阳极、炭块、糊类、特种炭制品、炭纤维制品等,广泛应用于冶金、化工、机械、电子、医疗及新材料等领域,产品销往40多个国家、国内外300多家企业。吉炭拥有国家级企业技术中心、中国炭素行业新产品研发中心、新技术应用中心、产品检测中心和出口产品商检中心,通过了国家高新技术企业认定。下属企业吉林市神舟炭纤维有限责任公司、吉林市高科特种炭素材料有限责任公司是专精特新企业。2015年,中泽集团并购重组吉炭,推行了体制机制转换和产品转型升级,企业的研发实力、生产能力、经济效益和品牌影响力持续提升,实现了大幅度盈利。<br>多年来,吉林炭素的建设发展受到国家和各级政府的支持与关注,邓小平、朱德、董必武、温家宝、胡锦涛等几代国家领导人先后莅临吉林炭素视察工作。
30
+          </div>
31
+        </div>
32
+        <div class="desLi">
33
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/02.png" data-srcM="./static/images/product/tansu/02.png" alt="" />
34
+          <div class="wow fadeInUp title">吉林市神舟炭纤维有限责任公司</div>
35
+          <div class="wow fadeInUp text">
36
+            吉林市神舟炭纤维有限责任公司(以下简称神舟炭纤维)成立于1988年,是国内较早专业从事碳纤维及其制品研发、生产与销售服务于一体的企业,拥有40多年碳纤维生产和研发经验,主要产品有聚丙烯睛基碳纤维、平纹碳布、斜纹碳布,主要应用于国防军工和民用领域。公司获得“中国航天优秀供应商”“中国航天突出贡献供应商”等荣誉称号。公司主持制定了两项国家军用标准、多项冶金行业标准及吉林省地方标准;承担完成了多项国家重点科技攻关项目,基中“TX-3型碳纤维及织物”荣获国家科技进步奖;先后获得专利23项。2006年起,通过了Iso9001质量管理体系认证、国军标质量管理体系认证,获得国家“安全生产标准化三级企业”证书,是国家高新技术企业和吉林省专精特新中小企业。
37
+          </div>
38
+        </div>
39
+        <div class="desLi">
40
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/03.png" data-srcM="./static/images/product/tansu/03.png" alt="" />
41
+          <div class="wow fadeInUp title">吉林市高科特种炭素材料有限责任公司</div>
42
+          <div class="wow fadeInUp text">
43
+            吉林市高科特种炭素材料有限责任公司(以下简称高科特炭)成立于2004年,是专业从事特种炭素材料及其制品研发、生产与销售服务于一体的高新技术企业,主要研发、生产、销售特制石墨、高强高纯高密石墨、非标准异型石墨等三大类产品,应用于国家重点军用领域。特制石墨产品曾获中国航天集团表彰;高纯石墨电极主要用于光伏产业,市场占有率达60%;非标准异型石墨产品主要包括各种规格石墨电极、阳极、非标准加工件。高科特炭研发技术领先,装备水平一流,科研生产团队经验丰富,掌握了一整套自主知识产权的特种炭素制品生产和研发技术,参与制定多项国家军用标准,拥有16项专利技术和3项软件著作权。2006年通过质量管理体系认证并保持至今,被认定为国家高新技术企业、吉林市专精特新中小企业,拥有吉林市“企业技术中心”和“吉高”牌注册商标。
44
+          </div>
45
+        </div>
46
+        <div class="desLi">
47
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/04.png" data-srcM="./static/images/product/tansu/04.png" alt="" />
48
+          <div class="wow fadeInUp title">吉蒙炭素有限责任公司</div>
49
+          <div class="wow fadeInUp text">吉蒙炭素有限责任公司(以下简称吉蒙炭素)成立于2017年,位于内蒙古乌兰察布丰镇市,是集高品质炭素及石墨制品的研发、生产、销售、技术服务、检测服务、进出口贸易等为一体的综合性企业,被认定为国家高新技术企业、内蒙古专精特新中小企业。吉蒙炭素按照建成“国际先进,国内领先”炭素企业的目标,规划建设年产直径600mm及以上大规格超高功率石墨电极,一期全工序8万吨已经建成投运,将根据市场情况实现10万吨产能。</div>
50
+        </div>
51
+      </div>
52
+    </div>
53
+    <%= require('../common/tpl/footer.tpl') %>
54
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
55
+  </body>
56
+</html>

+ 15
- 0
src/pages/productDec2/index.js 查看文件

@@ -0,0 +1,15 @@
1
+import "./../common/css/common.less";
2
+import "./index.less";
3
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
4
+import App from './App.js';
5
+
6
+// swiper的css目前环境解析不出来,放static下,不走webpack 
7
+//import 'swiper/swiper-bundle.css';
8
+
9
+vhCheck();
10
+//禁止浏览器刷新后回到上一个页面滚动位置
11
+if ('scrollRestoration' in history) {
12
+    history.scrollRestoration = 'manual';
13
+}
14
+
15
+new App();

+ 115
- 0
src/pages/productDec2/index.less 查看文件

@@ -0,0 +1,115 @@
1
+
2
+//pc端样式
3
+.main {
4
+    width: 100%;
5
+    max-width: 1920px;
6
+    margin: 0 auto;
7
+    padding-top: 71px;
8
+}
9
+.desCon{
10
+  width: 100%;
11
+  text-align: center;
12
+  padding-top: 120px;
13
+  .desTop{
14
+    width: 100%;
15
+    max-width: 1300px;
16
+    margin: 0px auto;
17
+    display: flex;
18
+    text-align: left;
19
+    padding-bottom: 26px;
20
+    &>div{
21
+      width: 50%;
22
+    }
23
+  }
24
+  .desTopImg{
25
+    width: 100%;
26
+    max-width: 1500px;
27
+    margin: 0px auto;
28
+    padding-bottom: 140px;
29
+    img{
30
+      width: 100%;
31
+      display: block;
32
+    }
33
+  }
34
+  .desLi{
35
+    width: 100%;
36
+    max-width: 1300px;
37
+    margin: 0px auto;
38
+    padding-bottom: 150px;
39
+    img{
40
+      width: 100%;
41
+      display: block;
42
+      margin-bottom: 50px;
43
+    }
44
+    .title{
45
+      font-size: 36px;
46
+      margin-bottom: 16px;
47
+    }
48
+    .text{
49
+      text-align: left;
50
+    }
51
+    &:last-child{
52
+      padding-bottom: 130px;
53
+    }
54
+  }
55
+}
56
+
57
+
58
+@media screen and (min-width: 801px) and (max-width: 1400px) {
59
+  
60
+}
61
+@media screen and (min-width:800px){
62
+  
63
+}
64
+.mTxt{
65
+  display: none;
66
+}
67
+//移动端样式
68
+@media screen and (max-width:800px) {
69
+  .pcTxt{
70
+    display: none;
71
+  }
72
+  .mTxt{
73
+    display: block;
74
+  }
75
+  .main{
76
+    padding-top: 61px;
77
+  }
78
+  .desCon{
79
+    padding-top: 80px;
80
+    box-sizing: border-box;
81
+    padding-left: 15px;
82
+    padding-right: 15px;
83
+    .text{
84
+      font-size: 14px;
85
+      line-height: 22px;
86
+    }
87
+    .desTop{
88
+      padding-bottom: 30px;
89
+      flex-wrap: wrap;
90
+      .title{
91
+        text-align: center;
92
+        margin-bottom: 20px;
93
+      }
94
+      &>div{
95
+        width: 100%;
96
+      }
97
+    }
98
+    .desTopImg{
99
+      padding-bottom: 70px;
100
+    }
101
+    .desLi{
102
+      padding-bottom: 70px;
103
+      img{
104
+        margin-bottom: 28px;
105
+      }
106
+      .title{
107
+        font-size: 15px;
108
+        line-height: 20px;
109
+      }
110
+      &:last-child {
111
+        padding-bottom: 70px;
112
+    }
113
+    }
114
+  }
115
+}

+ 39
- 0
src/pages/productDec3/App.js 查看文件

@@ -0,0 +1,39 @@
1
+import Swiper from 'swiper/bundle'
2
+import gsap from 'gsap'
3
+import LocomotiveScroll from 'locomotive-scroll';
4
+import Common from '../common/js/Common'
5
+import {
6
+    isMobile
7
+} from '../common/js/utils'
8
+
9
+export default class App {
10
+    constructor() {
11
+        let common = new Common(document.querySelector('.main'),1)   //导航菜单高亮,0是首页,后面的按顺序添加
12
+        this.isMobile = isMobile()
13
+        
14
+        this.scroll = new LocomotiveScroll();
15
+        // 图片及视频资源懒加载。防止阻塞js执行
16
+        let lazyDoms = document.querySelectorAll(".lazy");
17
+        let isMob=this.isMobile;
18
+        lazyDoms.forEach((item) => {
19
+            if (item.nodeName == "PICTURE") {
20
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
21
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
22
+            }
23
+            if (item.nodeName == "IMG") {
24
+                if(isMob){item.setAttribute("src", item.dataset.srcm);}
25
+                else{
26
+                    item.setAttribute("src", item.dataset.src);
27
+                }
28
+                
29
+            }
30
+            if (item.nodeName == "VIDEO") {
31
+                console.log(item, 'item---2')
32
+                item.setAttribute("src", item.dataset.src);
33
+                // item.load();
34
+            }
35
+        });
36
+    }
37
+
38
+
39
+}

+ 59
- 0
src/pages/productDec3/index.html 查看文件

@@ -0,0 +1,59 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+    <title>钼业-产业布局</title>
7
+    <meta name="description" content=""/>
8
+    <meta name="Keywords" content=""/>
9
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
10
+    <%= require('../common/tpl/headerLink.tpl') %>
11
+  </head>
12
+
13
+  <body>
14
+    <%= require('../common/tpl/header.tpl') %>
15
+    
16
+    <div class="main">
17
+      <div class="desCon">
18
+        <div class="wow fadeInUp desTop">
19
+          <div class="title">钼业</div>
20
+          <div class="text">钼业板块是中泽集团聚合旗下大黑山钼业、天池钼业、中泽钼业、中泽新型建材四家企业,以“钼采选+钼化工+钼制品+钼尾矿综合利用”为主线打造的“四位一体”大型钼产业集群。力争通过钼板块的资源集约式发展,释放钼产业综合利用效益,打造国际上规模最大、技术领先的大型钼业集团。钼资源总金属储量134万吨,钼精矿年供应能力4万吨,占国内可流通钼精矿市场份额首位。</div>
21
+        </div>
22
+        <div class="wow fadeInUp desTopImg">
23
+          <img class="lazy" data-src="./static/images/product/muye/banner.png" data-srcM="./static/images/product/muye/banner.png" alt="" />
24
+        </div>
25
+        <div class="desLi">
26
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/muye/01.png" data-srcM="./static/images/product/muye/01.png" alt="" />
27
+          <div class="wow fadeInUp title">吉林大黑山钼业股份有限公司</div>
28
+          <div class="wow fadeInUp text">
29
+            吉林大黑山钼业股份有限公司(以下简称大黑山钼业)始建于1985年,1987年建成投产,位于吉林省吉林市永吉县,是集钼金属采矿、选矿、碎石骨料加工为一体的综合性矿山企业。主要产品为钼精矿,目前生产规模1.6万吨/日,年产钼精矿8000吨(47%品位),居国内前十。<br>大黑山钼业拥有亚洲第二大单体钼矿山,钼矿资源总储量16.5亿吨,钼金属含量109万吨,平均钼矿石品位0.066%,占地面积500万平方米。公司是中国钼行业八大原材料供应商之一,被钼行业协会授予“中国优质钼精矿供应商”、“中国钼产业最具影响力企业”称号。入选国家级绿色矿山名录, 是国家高新技术企业、吉林省专精特新中小企业、吉林市专精特新中小企业。拥有自主知识产权22项,吉林市企业技术中心一个。
30
+          </div>
31
+        </div>
32
+        <div class="desLi">
33
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/muye/02.png" data-srcM="./static/images/product/muye/02.png" alt="" />
34
+          <div class="wow fadeInUp title">吉林天池钼业有限公司</div>
35
+          <div class="wow fadeInUp text">
36
+            吉林天池钼业有限公司(以下简称天池钼业)成立于2008年,位于吉林省吉林市舒兰市,是集钼矿露天开采、钼精矿采选、钼及碎石骨料加工销售为一体的公司。2022年11月加入中泽集团。公司拥有的季德钼矿占地面积730公顷,钼矿资源量3.44亿吨,钼金属储量34.85万吨,采选规模为2.5万吨/日,平均品位0.113%,主要产品钼精矿达到国家一级一类标准,具有储量大、含杂低、易焙烧提纯、加工下游产品回收率高等特点,是绿色、经济、环保、节能型新型现代化矿山,在国内同行业中具有领先优势。<br>天池钼业在智能化改造和数字化转型方面成绩突出。已获得舒兰市高质量发展先进集体、吉林省数字化示范车间、吉林省技术改造产业集群及转型升级先进集体等荣誉。
37
+          </div>
38
+        </div>
39
+        <div class="desLi">
40
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/muye/03.png" data-srcM="./static/images/product/muye/03.png" alt="" />
41
+          <div class="wow fadeInUp title">吉林中泽钼业有限公司</div>
42
+          <div class="wow fadeInUp text">
43
+            吉林中泽钼业有限公司(以下简称中泽钼业)成立于2019年,是中泽集团旗下的钼深加工企业。钼深加工项目占地50万平方米,投资60亿元,分三期建设:一期占地20万平方米,投资20亿元,建设规模为氧化钼、钼铁、钼酸铵、高纯氧化钼总计年产2万吨;二期投资19.7亿元,氧化钼、钼铁、钼酸铵、高纯氧化钼总计年产2.64万吨;三期占地30万平米,投资20.3亿元,建设钼金属全产业链精细加工项目,年产钼粉压型烧结及精整锻造木板材和磨光钼圆片等钼金属制品总计1.91万吨。一期项目已建成投产,具备年产钼焙砂20000吨、钼铁10000吨、钼酸铵6000吨、高纯三氧化钼5000吨,年产副产品硫酸25000吨、硝酸钠15000吨的生产能力。二、三期项目正在有序推进中。<br>公司是国家高新技术企业。至2024年,已经拥有国家级专利13项,国家级软件著作权5项。与国内129家重点客户建立稳定的长期合作关系。
44
+          </div>
45
+        </div>
46
+        <div class="desLi">
47
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/muye/04.png" data-srcM="./static/images/product/muye/04.png" alt="" />
48
+          <div class="wow fadeInUp title">吉林中泽新型建材有限公司</div>
49
+          <div class="wow fadeInUp text">
50
+            吉林中泽新型建材有限公司成立于2020年。公司秉承国家绿色发展理念,综合利用大黑山钼业尾矿资源生产符合绿色环保产业政策以及国家低碳发展战略的新型建材产品。公司已建设1条蒸压加气混凝土砂生产线和1条高性能无机石生产线 1 条,主营蒸压加气混凝土砌块、板材、高性能无机石等系列绿色建材产品;主要应用于房地产开发、城市广场以及水利工程、机场、高速公路的建设和装配式建筑;产品销售网络设计覆盖东北地区并辐射全国。<br>公司产品获得ISO9000质量管理体系、ISO14000环境管理体系、ISO45001职业安全健康管理体系认证,获评吉林省绿色工厂。            
51
+          </div>
52
+        </div>
53
+        
54
+      </div>
55
+    </div>
56
+    <%= require('../common/tpl/footer.tpl') %>
57
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
58
+  </body>
59
+</html>

+ 15
- 0
src/pages/productDec3/index.js 查看文件

@@ -0,0 +1,15 @@
1
+import "./../common/css/common.less";
2
+import "./index.less";
3
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
4
+import App from './App.js';
5
+
6
+// swiper的css目前环境解析不出来,放static下,不走webpack 
7
+//import 'swiper/swiper-bundle.css';
8
+
9
+vhCheck();
10
+//禁止浏览器刷新后回到上一个页面滚动位置
11
+if ('scrollRestoration' in history) {
12
+    history.scrollRestoration = 'manual';
13
+}
14
+
15
+new App();

+ 115
- 0
src/pages/productDec3/index.less 查看文件

@@ -0,0 +1,115 @@
1
+
2
+//pc端样式
3
+.main {
4
+    width: 100%;
5
+    max-width: 1920px;
6
+    margin: 0 auto;
7
+    padding-top: 71px;
8
+}
9
+.desCon{
10
+  width: 100%;
11
+  text-align: center;
12
+  padding-top: 120px;
13
+  .desTop{
14
+    width: 100%;
15
+    max-width: 1300px;
16
+    margin: 0px auto;
17
+    display: flex;
18
+    text-align: left;
19
+    padding-bottom: 26px;
20
+    &>div{
21
+      width: 50%;
22
+    }
23
+  }
24
+  .desTopImg{
25
+    width: 100%;
26
+    max-width: 1500px;
27
+    margin: 0px auto;
28
+    padding-bottom: 140px;
29
+    img{
30
+      width: 100%;
31
+      display: block;
32
+    }
33
+  }
34
+  .desLi{
35
+    width: 100%;
36
+    max-width: 1300px;
37
+    margin: 0px auto;
38
+    padding-bottom: 150px;
39
+    img{
40
+      width: 100%;
41
+      display: block;
42
+      margin-bottom: 50px;
43
+    }
44
+    .title{
45
+      font-size: 36px;
46
+      margin-bottom: 16px;
47
+    }
48
+    .text{
49
+      text-align: left;
50
+    }
51
+    &:last-child{
52
+      padding-bottom: 130px;
53
+    }
54
+  }
55
+}
56
+
57
+
58
+@media screen and (min-width: 801px) and (max-width: 1400px) {
59
+  
60
+}
61
+@media screen and (min-width:800px){
62
+  
63
+}
64
+.mTxt{
65
+  display: none;
66
+}
67
+//移动端样式
68
+@media screen and (max-width:800px) {
69
+  .pcTxt{
70
+    display: none;
71
+  }
72
+  .mTxt{
73
+    display: block;
74
+  }
75
+  .main{
76
+    padding-top: 61px;
77
+  }
78
+  .desCon{
79
+    padding-top: 80px;
80
+    box-sizing: border-box;
81
+    padding-left: 15px;
82
+    padding-right: 15px;
83
+    .text{
84
+      font-size: 14px;
85
+      line-height: 22px;
86
+    }
87
+    .desTop{
88
+      padding-bottom: 30px;
89
+      flex-wrap: wrap;
90
+      .title{
91
+        text-align: center;
92
+        margin-bottom: 20px;
93
+      }
94
+      &>div{
95
+        width: 100%;
96
+      }
97
+    }
98
+    .desTopImg{
99
+      padding-bottom: 70px;
100
+    }
101
+    .desLi{
102
+      padding-bottom: 70px;
103
+      img{
104
+        margin-bottom: 28px;
105
+      }
106
+      .title{
107
+        font-size: 15px;
108
+        line-height: 20px;
109
+      }
110
+      &:last-child {
111
+        padding-bottom: 70px;
112
+    }
113
+    }
114
+  }
115
+}

+ 39
- 0
src/pages/productDec4/App.js 查看文件

@@ -0,0 +1,39 @@
1
+import Swiper from 'swiper/bundle'
2
+import gsap from 'gsap'
3
+import LocomotiveScroll from 'locomotive-scroll';
4
+import Common from '../common/js/Common'
5
+import {
6
+    isMobile
7
+} from '../common/js/utils'
8
+
9
+export default class App {
10
+    constructor() {
11
+        let common = new Common(document.querySelector('.main'),1)   //导航菜单高亮,0是首页,后面的按顺序添加
12
+        this.isMobile = isMobile()
13
+        
14
+        this.scroll = new LocomotiveScroll();
15
+        // 图片及视频资源懒加载。防止阻塞js执行
16
+        let lazyDoms = document.querySelectorAll(".lazy");
17
+        let isMob=this.isMobile;
18
+        lazyDoms.forEach((item) => {
19
+            if (item.nodeName == "PICTURE") {
20
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
21
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
22
+            }
23
+            if (item.nodeName == "IMG") {
24
+                if(isMob){item.setAttribute("src", item.dataset.srcm);}
25
+                else{
26
+                    item.setAttribute("src", item.dataset.src);
27
+                }
28
+                
29
+            }
30
+            if (item.nodeName == "VIDEO") {
31
+                console.log(item, 'item---2')
32
+                item.setAttribute("src", item.dataset.src);
33
+                // item.load();
34
+            }
35
+        });
36
+    }
37
+
38
+
39
+}

+ 86
- 0
src/pages/productDec4/index.html 查看文件

@@ -0,0 +1,86 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+    <title>镍业-产业布局</title>
7
+    <meta name="description" content=""/>
8
+    <meta name="Keywords" content=""/>
9
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
10
+    <%= require('../common/tpl/headerLink.tpl') %>
11
+  </head>
12
+
13
+  <body>
14
+    <%= require('../common/tpl/header.tpl') %>
15
+    
16
+    <div class="main">
17
+      <div class="desCon">
18
+        <div class="wow fadeInUp desTop">
19
+          <div class="title">镍业</div>
20
+          <div class="text">镍业板块包括吉恩镍业及其子公司、四平昊融银业。中泽集团依托吉恩镍业产业基础、品牌和技术优势,拓展原料渠道,把握镍产业发展机遇,开辟国际合作路径,致力于实现镍产业规模化、可持续发展。</div>
21
+        </div>
22
+        <div class="wow fadeInUp desTopImg">
23
+          <img class="lazy" data-src="./static/images/product/nieye/banner.png" data-srcM="./static/images/product/nieye/banner.png" alt="" />
24
+        </div>
25
+        <div class="desLi">
26
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/nieye/01.png" data-srcM="./static/images/product/nieye/01.png" alt="" />
27
+          <div class="wow fadeInUp title">吉林吉恩镍业股份有限公司</div>
28
+          <div class="wow fadeInUp text">
29
+            吉林吉恩镍业股份有限公司(以下简称吉恩镍业)成立于1960年,是国家“二五”期间重点建设企业,总部位于吉林省磐石市,是集采矿、选矿、冶炼、精炼、化工于一体的大型镍、铜、钴有色金属生产加工企业。产品应用于电镀、化学镀、电池材料、冶金等行业, “吉恩”品牌被认定为中国驰名商标。下辖重庆吉恩、通化吉恩、新乡吉恩、博研新材料、卓创新材料、亚融科技等10余家子公司。企业被评定为国家高新技术企业、国家创新型企业,并拥有国家级企业技术中心。产品营销网络覆盖全国并远销日本、韩国等国家。
30
+          </div>
31
+        </div>
32
+        <div class="desLi">
33
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/nieye/02.png" data-srcM="./static/images/product/nieye/02.png" alt="" />
34
+          <div class="wow fadeInUp title">通化吉恩镍业有限公司</div>
35
+          <div class="wow fadeInUp text">
36
+            通化吉恩镍业有限公司(以下简称通化吉恩)始建于1983年,主要产品有铜精矿粉、镍精矿粉。年产镍金属量1000吨,铜金属量350吨。通化吉恩被认定为国家高新技术企业、通化市专精特新中小企业,入选吉林省绿色矿山名录。
37
+          </div>
38
+        </div>
39
+        <div class="desLi">
40
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/nieye/03.png" data-srcM="./static/images/product/nieye/03.png" alt="" />
41
+          <div class="wow fadeInUp title">新乡吉恩新能源材料有限公司</div>
42
+          <div class="wow fadeInUp text">
43
+            新乡吉恩新能源材料有限公司(以下简称新乡吉恩)主导产品为“吉恩”牌硫酸镍、硫酸钴,主要用于生产储能电池材料、镍钴锂、镍钴锰三元电池材料,电镀、化学镀,是全国最早的硫酸镍生产单位之一。目前,年产硫酸镍15000吨,硫酸钴1200吨,生产规模位列河南省第一,是行业内为数不多拥有双工艺生产硫酸镍企业。未来将以电池市场为主,表面处理市场为辅,深入拓展市场,向好稳步发展。
44
+          </div>
45
+        </div>
46
+        <div class="desLi">
47
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/nieye/04.png" data-srcM="./static/images/product/nieye/04.png" alt="" />
48
+          <div class="wow fadeInUp title">重庆吉恩冶炼有限公司</div>
49
+          <div class="wow fadeInUp text">
50
+            重庆吉恩冶炼有限公司(以下简称重庆吉恩)始建于1939年,位于重庆市綦江县,主要从事有色金属的生产经营,产品有电解镍、硫酸镍、电钴和硫酸钴等,是新中国第一块电解镍板产出地。年产电解镍1700吨,电解钴100吨,粗铜粉400吨。是国家认定的高新技术企业和重庆市专精特新中小企业。
51
+          </div>
52
+        </div>
53
+        <div class="desLi">
54
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/nieye/05.png" data-srcM="./static/images/product/nieye/05.png" alt="" />
55
+          <div class="wow fadeInUp title">吉林卓创新材料有限公司</div>
56
+          <div class="wow fadeInUp text">
57
+            吉林卓创新材料有限公司(以下简称卓创新材料)成立于2002年,公司总占地面积24万平方米,年产10000吨羰基铁粉、2000吨羰基镍粉。公司通过了ISO9001:2015质量体系认证、ISO14001:2015环境体系认证和国军标GJB9001C-2017体系认证。高品级镍粉和铁粉被吉林省评为“2000年度吉林省级新产品”。是国家高新技术企业和吉林市专精特新中小企业。
58
+          </div>
59
+        </div>
60
+        <div class="desLi">
61
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/nieye/06.png" data-srcM="./static/images/product/nieye/06.png" alt="" />
62
+          <div class="wow fadeInUp title">吉林博研新材料有限公司</div>
63
+          <div class="wow fadeInUp text">
64
+            吉林博研新材料有限公司(以下简称博研新材料)成立于2016年,是一家以处理含钒钢渣为主的企业。主要产品包括钒系列、钼系列、镍系列等,应用于催化、特种合金等多种工业领域,以及各种潜在的新兴市场。是吉林市专精特新中小企业。
65
+          </div>
66
+        </div>
67
+        <div class="desLi">
68
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/nieye/07.png" data-srcM="./static/images/product/nieye/07.png" alt="" />
69
+          <div class="wow fadeInUp title">吉林亚融科技股份有限公司</div>
70
+          <div class="wow fadeInUp text">
71
+            吉林亚融科技股份有限公司(以下简称亚融科技)成立于1997年,是国内专业生产镍氢电池和锂离子电池正极材料的生产企业。主要产品有镍氢电池正极材料球形氢氧化镍、包覆钴球形氢氧化镍、锂离子电池正极三元前驱体系列材料等。是吉林省科技企业和吉林市战略性新兴产业企业,拥有吉林市企业技术中心。
72
+          </div>
73
+        </div>
74
+        <div class="desLi">
75
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/nieye/08.png" data-srcM="./static/images/product/nieye/08.png" alt="" />
76
+          <div class="wow fadeInUp title">四平昊融银业有限公司</div>
77
+          <div class="wow fadeInUp text">
78
+            四平昊融银业有限公司(以下简称四平银业)成立于1993年,总部位于吉林省四平市,是我国“八五”期间国家投资建设的重点银矿之一,被国家列为白银重点勘察矿区。主要产品为银精矿(含金精矿),年产能达5000吨(含金155千克,银15吨),产品质量符合国际标准,产品销售市场渠道畅通。是国家认定高新技术企业、吉林省、专精特新中小企业。
79
+          </div>
80
+        </div>
81
+      </div>
82
+    </div>
83
+    <%= require('../common/tpl/footer.tpl') %>
84
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
85
+  </body>
86
+</html>

+ 15
- 0
src/pages/productDec4/index.js 查看文件

@@ -0,0 +1,15 @@
1
+import "./../common/css/common.less";
2
+import "./index.less";
3
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
4
+import App from './App.js';
5
+
6
+// swiper的css目前环境解析不出来,放static下,不走webpack 
7
+//import 'swiper/swiper-bundle.css';
8
+
9
+vhCheck();
10
+//禁止浏览器刷新后回到上一个页面滚动位置
11
+if ('scrollRestoration' in history) {
12
+    history.scrollRestoration = 'manual';
13
+}
14
+
15
+new App();

+ 115
- 0
src/pages/productDec4/index.less 查看文件

@@ -0,0 +1,115 @@
1
+
2
+//pc端样式
3
+.main {
4
+    width: 100%;
5
+    max-width: 1920px;
6
+    margin: 0 auto;
7
+    padding-top: 71px;
8
+}
9
+.desCon{
10
+  width: 100%;
11
+  text-align: center;
12
+  padding-top: 120px;
13
+  .desTop{
14
+    width: 100%;
15
+    max-width: 1300px;
16
+    margin: 0px auto;
17
+    display: flex;
18
+    text-align: left;
19
+    padding-bottom: 26px;
20
+    &>div{
21
+      width: 50%;
22
+    }
23
+  }
24
+  .desTopImg{
25
+    width: 100%;
26
+    max-width: 1500px;
27
+    margin: 0px auto;
28
+    padding-bottom: 140px;
29
+    img{
30
+      width: 100%;
31
+      display: block;
32
+    }
33
+  }
34
+  .desLi{
35
+    width: 100%;
36
+    max-width: 1300px;
37
+    margin: 0px auto;
38
+    padding-bottom: 150px;
39
+    img{
40
+      width: 100%;
41
+      display: block;
42
+      margin-bottom: 50px;
43
+    }
44
+    .title{
45
+      font-size: 36px;
46
+      margin-bottom: 16px;
47
+    }
48
+    .text{
49
+      text-align: left;
50
+    }
51
+    &:last-child{
52
+      padding-bottom: 130px;
53
+    }
54
+  }
55
+}
56
+
57
+
58
+@media screen and (min-width: 801px) and (max-width: 1400px) {
59
+  
60
+}
61
+@media screen and (min-width:800px){
62
+  
63
+}
64
+.mTxt{
65
+  display: none;
66
+}
67
+//移动端样式
68
+@media screen and (max-width:800px) {
69
+  .pcTxt{
70
+    display: none;
71
+  }
72
+  .mTxt{
73
+    display: block;
74
+  }
75
+  .main{
76
+    padding-top: 61px;
77
+  }
78
+  .desCon{
79
+    padding-top: 80px;
80
+    box-sizing: border-box;
81
+    padding-left: 15px;
82
+    padding-right: 15px;
83
+    .text{
84
+      font-size: 14px;
85
+      line-height: 22px;
86
+    }
87
+    .desTop{
88
+      padding-bottom: 30px;
89
+      flex-wrap: wrap;
90
+      .title{
91
+        text-align: center;
92
+        margin-bottom: 20px;
93
+      }
94
+      &>div{
95
+        width: 100%;
96
+      }
97
+    }
98
+    .desTopImg{
99
+      padding-bottom: 70px;
100
+    }
101
+    .desLi{
102
+      padding-bottom: 70px;
103
+      img{
104
+        margin-bottom: 28px;
105
+      }
106
+      .title{
107
+        font-size: 15px;
108
+        line-height: 20px;
109
+      }
110
+      &:last-child {
111
+        padding-bottom: 70px;
112
+    }
113
+    }
114
+  }
115
+}

+ 39
- 0
src/pages/productDec5/App.js 查看文件

@@ -0,0 +1,39 @@
1
+import Swiper from 'swiper/bundle'
2
+import gsap from 'gsap'
3
+import LocomotiveScroll from 'locomotive-scroll';
4
+import Common from '../common/js/Common'
5
+import {
6
+    isMobile
7
+} from '../common/js/utils'
8
+
9
+export default class App {
10
+    constructor() {
11
+        let common = new Common(document.querySelector('.main'),1)   //导航菜单高亮,0是首页,后面的按顺序添加
12
+        this.isMobile = isMobile()
13
+        
14
+        this.scroll = new LocomotiveScroll();
15
+        // 图片及视频资源懒加载。防止阻塞js执行
16
+        let lazyDoms = document.querySelectorAll(".lazy");
17
+        let isMob=this.isMobile;
18
+        lazyDoms.forEach((item) => {
19
+            if (item.nodeName == "PICTURE") {
20
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
21
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
22
+            }
23
+            if (item.nodeName == "IMG") {
24
+                if(isMob){item.setAttribute("src", item.dataset.srcm);}
25
+                else{
26
+                    item.setAttribute("src", item.dataset.src);
27
+                }
28
+                
29
+            }
30
+            if (item.nodeName == "VIDEO") {
31
+                console.log(item, 'item---2')
32
+                item.setAttribute("src", item.dataset.src);
33
+                // item.load();
34
+            }
35
+        });
36
+    }
37
+
38
+
39
+}

+ 44
- 0
src/pages/productDec5/index.html 查看文件

@@ -0,0 +1,44 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+    <title>化工-产业布局</title>
7
+    <meta name="description" content=""/>
8
+    <meta name="Keywords" content=""/>
9
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
10
+    <%= require('../common/tpl/headerLink.tpl') %>
11
+  </head>
12
+
13
+  <body>
14
+    <%= require('../common/tpl/header.tpl') %>
15
+    
16
+    <div class="main">
17
+      <div class="desCon">
18
+        <div class="wow fadeInUp desTop">
19
+          <div class="title">化工</div>
20
+          <div class="text">化工板块是中泽集团新的业务板块,主要企业包括金煤化工、新瑞石化,主要产品为乙二醇、草酸、MTBE、乙苯、液化气、正丁烷。中泽集团规划以现有旗下化工企业为基础,逐步打造一个技术先进、产业链完备、市场领先的化工产业集群。</div>
21
+        </div>
22
+        <div class="wow fadeInUp desTopImg">
23
+          <img class="lazy" data-src="./static/images/product/huagong/banner.png" data-srcM="./static/images/product/huagong/banner.png" alt="" />
24
+        </div>
25
+        <div class="desLi">
26
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/huagong/01.png" data-srcM="./static/images/product/huagong/01.png" alt="" />
27
+          <div class="wow fadeInUp title">黑龙江新瑞石油化工有限公司</div>
28
+          <div class="wow fadeInUp text">
29
+            黑龙江新瑞石油化工有限公司(以下简称“新瑞石化”)成立于2023年,是中泽集团并购黑龙江安瑞佳石油化工有限公司后改建而来,位于安达市石油化工产业园区。主要产品为甲基叔丁基醚(MTBE)、乙苯、液化气、正丁烷等。<br>2024年初公司开始对原装置进行安全、环保设施提质改造升级,整体投入资金3.5亿元。预计2024年10月实现三区50万吨/年液化气分离、20万吨/年异丁烷脱氢等五套装置及配套公用工程具备生产条件,三区五套装置恢复生产,公司实现年产值20亿元。2025年上半年实现一区、二区、三区装置全部检修完毕,具备生产条件,并恢复危险化学品运输及经贸业务,可实现年产值60亿元,利税2亿元,安置就业1600人。
30
+          </div>
31
+        </div>
32
+        <div class="desLi">
33
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/huagong/02.png" data-srcM="./static/images/product/huagong/02.png" alt="" />
34
+          <div class="wow fadeInUp title">通辽金煤化工有限公司</div>
35
+          <div class="wow fadeInUp text">
36
+            通辽金煤化工有限公司(以下简称金煤化工)成立于2007年,地点位于通辽市。是由上市公司丹化科技控股的一家煤化工企业,是国内煤化工行业龙头企业之一。首创以褐煤为原料生产乙二醇,主要产品包括煤制乙二醇、草酸、催化剂、完全生物降解塑料等。2024年4月,北京中泽取得该公司实际控制权。
37
+          </div>
38
+        </div>
39
+      </div>
40
+    </div>
41
+    <%= require('../common/tpl/footer.tpl') %>
42
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
43
+  </body>
44
+</html>

+ 15
- 0
src/pages/productDec5/index.js 查看文件

@@ -0,0 +1,15 @@
1
+import "./../common/css/common.less";
2
+import "./index.less";
3
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
4
+import App from './App.js';
5
+
6
+// swiper的css目前环境解析不出来,放static下,不走webpack 
7
+//import 'swiper/swiper-bundle.css';
8
+
9
+vhCheck();
10
+//禁止浏览器刷新后回到上一个页面滚动位置
11
+if ('scrollRestoration' in history) {
12
+    history.scrollRestoration = 'manual';
13
+}
14
+
15
+new App();

+ 115
- 0
src/pages/productDec5/index.less 查看文件

@@ -0,0 +1,115 @@
1
+
2
+//pc端样式
3
+.main {
4
+    width: 100%;
5
+    max-width: 1920px;
6
+    margin: 0 auto;
7
+    padding-top: 71px;
8
+}
9
+.desCon{
10
+  width: 100%;
11
+  text-align: center;
12
+  padding-top: 120px;
13
+  .desTop{
14
+    width: 100%;
15
+    max-width: 1300px;
16
+    margin: 0px auto;
17
+    display: flex;
18
+    text-align: left;
19
+    padding-bottom: 26px;
20
+    &>div{
21
+      width: 50%;
22
+    }
23
+  }
24
+  .desTopImg{
25
+    width: 100%;
26
+    max-width: 1500px;
27
+    margin: 0px auto;
28
+    padding-bottom: 140px;
29
+    img{
30
+      width: 100%;
31
+      display: block;
32
+    }
33
+  }
34
+  .desLi{
35
+    width: 100%;
36
+    max-width: 1300px;
37
+    margin: 0px auto;
38
+    padding-bottom: 150px;
39
+    img{
40
+      width: 100%;
41
+      display: block;
42
+      margin-bottom: 50px;
43
+    }
44
+    .title{
45
+      font-size: 36px;
46
+      margin-bottom: 16px;
47
+    }
48
+    .text{
49
+      text-align: left;
50
+    }
51
+    &:last-child{
52
+      padding-bottom: 130px;
53
+    }
54
+  }
55
+}
56
+
57
+
58
+@media screen and (min-width: 801px) and (max-width: 1400px) {
59
+  
60
+}
61
+@media screen and (min-width:800px){
62
+  
63
+}
64
+.mTxt{
65
+  display: none;
66
+}
67
+//移动端样式
68
+@media screen and (max-width:800px) {
69
+  .pcTxt{
70
+    display: none;
71
+  }
72
+  .mTxt{
73
+    display: block;
74
+  }
75
+  .main{
76
+    padding-top: 61px;
77
+  }
78
+  .desCon{
79
+    padding-top: 80px;
80
+    box-sizing: border-box;
81
+    padding-left: 15px;
82
+    padding-right: 15px;
83
+    .text{
84
+      font-size: 14px;
85
+      line-height: 22px;
86
+    }
87
+    .desTop{
88
+      padding-bottom: 30px;
89
+      flex-wrap: wrap;
90
+      .title{
91
+        text-align: center;
92
+        margin-bottom: 20px;
93
+      }
94
+      &>div{
95
+        width: 100%;
96
+      }
97
+    }
98
+    .desTopImg{
99
+      padding-bottom: 70px;
100
+    }
101
+    .desLi{
102
+      padding-bottom: 70px;
103
+      img{
104
+        margin-bottom: 28px;
105
+      }
106
+      .title{
107
+        font-size: 15px;
108
+        line-height: 20px;
109
+      }
110
+      &:last-child {
111
+        padding-bottom: 70px;
112
+    }
113
+    }
114
+  }
115
+}

+ 39
- 0
src/pages/productDec6/App.js 查看文件

@@ -0,0 +1,39 @@
1
+import Swiper from 'swiper/bundle'
2
+import gsap from 'gsap'
3
+import LocomotiveScroll from 'locomotive-scroll';
4
+import Common from '../common/js/Common'
5
+import {
6
+    isMobile
7
+} from '../common/js/utils'
8
+
9
+export default class App {
10
+    constructor() {
11
+        let common = new Common(document.querySelector('.main'),1)   //导航菜单高亮,0是首页,后面的按顺序添加
12
+        this.isMobile = isMobile()
13
+        
14
+        this.scroll = new LocomotiveScroll();
15
+        // 图片及视频资源懒加载。防止阻塞js执行
16
+        let lazyDoms = document.querySelectorAll(".lazy");
17
+        let isMob=this.isMobile;
18
+        lazyDoms.forEach((item) => {
19
+            if (item.nodeName == "PICTURE") {
20
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
21
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
22
+            }
23
+            if (item.nodeName == "IMG") {
24
+                if(isMob){item.setAttribute("src", item.dataset.srcm);}
25
+                else{
26
+                    item.setAttribute("src", item.dataset.src);
27
+                }
28
+                
29
+            }
30
+            if (item.nodeName == "VIDEO") {
31
+                console.log(item, 'item---2')
32
+                item.setAttribute("src", item.dataset.src);
33
+                // item.load();
34
+            }
35
+        });
36
+    }
37
+
38
+
39
+}

+ 44
- 0
src/pages/productDec6/index.html 查看文件

@@ -0,0 +1,44 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+    <title>装备制造-产业布局</title>
7
+    <meta name="description" content=""/>
8
+    <meta name="Keywords" content=""/>
9
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
10
+    <%= require('../common/tpl/headerLink.tpl') %>
11
+  </head>
12
+
13
+  <body>
14
+    <%= require('../common/tpl/header.tpl') %>
15
+    
16
+    <div class="main">
17
+      <div class="desCon">
18
+        <div class="wow fadeInUp desTop">
19
+          <div class="title">装备制造</div>
20
+          <div class="text">装备制造领域由朝阳重型、辽宁省机械研究院及其下属子公司组成,是中泽集团机械研发设计、制造基地。</div>
21
+        </div>
22
+        <div class="wow fadeInUp desTopImg">
23
+          <img class="lazy" data-src="./static/images/product/zhuangbei/banner.png" data-srcM="./static/images/product/zhuangbei/banner.png" alt="" />
24
+        </div>
25
+        <div class="desLi">
26
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/zhuangbei/01.png" data-srcM="./static/images/product/zhuangbei/01.png" alt="" />
27
+          <div class="wow fadeInUp title">朝阳重型机器有限公司</div>
28
+          <div class="wow fadeInUp text">
29
+            朝阳重型机器有限公司成立于1959年,2006年被中泽集团并购,是集研发设计、设备制造、安装服务、进出口商务、物流及技术咨询于一体的综合性装备制造企业,主导产品为大型建材机械设备及冶金、矿山、环保等行业大型装备,拥有辽宁省企业技术中心,被认定为国家高新技术企业,综合实力位居全国建材冶金行业的先进行列。2018年起,朝重进入新能源产业,成功制造出10MW陆上风电塔筒。
30
+          </div>
31
+        </div>
32
+        <div class="desLi">
33
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/zhuangbei/02.png" data-srcM="./static/images/product/zhuangbei/02.png" alt="" />
34
+          <div class="wow fadeInUp title">辽宁省机械研究院</div>
35
+          <div class="wow fadeInUp text">
36
+            辽宁省机械研究院成立1978年,是原辽宁省省属科研单位,2011年被中泽集团并购。辽机院在中泽集团的并购投资战略中具有重要的战略地位,是科技创新和科技成果转化的平台,为集团产业发展提供强大的技术支撑,通过创新科技成果转化,对国际先进技术引进具有重要作用,现与德国、日本、瑞典、意大利、俄罗斯、美国等国际著名公司进行技术合作。下属企业沈阳智勤机器人有限公司、沈阳中泽智能装备有限公司是国家高新技术企业。
37
+          </div>
38
+        </div>
39
+      </div>
40
+    </div>
41
+    <%= require('../common/tpl/footer.tpl') %>
42
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
43
+  </body>
44
+</html>

+ 15
- 0
src/pages/productDec6/index.js 查看文件

@@ -0,0 +1,15 @@
1
+import "./../common/css/common.less";
2
+import "./index.less";
3
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
4
+import App from './App.js';
5
+
6
+// swiper的css目前环境解析不出来,放static下,不走webpack 
7
+//import 'swiper/swiper-bundle.css';
8
+
9
+vhCheck();
10
+//禁止浏览器刷新后回到上一个页面滚动位置
11
+if ('scrollRestoration' in history) {
12
+    history.scrollRestoration = 'manual';
13
+}
14
+
15
+new App();

+ 115
- 0
src/pages/productDec6/index.less 查看文件

@@ -0,0 +1,115 @@
1
+
2
+//pc端样式
3
+.main {
4
+    width: 100%;
5
+    max-width: 1920px;
6
+    margin: 0 auto;
7
+    padding-top: 71px;
8
+}
9
+.desCon{
10
+  width: 100%;
11
+  text-align: center;
12
+  padding-top: 120px;
13
+  .desTop{
14
+    width: 100%;
15
+    max-width: 1300px;
16
+    margin: 0px auto;
17
+    display: flex;
18
+    text-align: left;
19
+    padding-bottom: 26px;
20
+    &>div{
21
+      width: 50%;
22
+    }
23
+  }
24
+  .desTopImg{
25
+    width: 100%;
26
+    max-width: 1500px;
27
+    margin: 0px auto;
28
+    padding-bottom: 140px;
29
+    img{
30
+      width: 100%;
31
+      display: block;
32
+    }
33
+  }
34
+  .desLi{
35
+    width: 100%;
36
+    max-width: 1300px;
37
+    margin: 0px auto;
38
+    padding-bottom: 150px;
39
+    img{
40
+      width: 100%;
41
+      display: block;
42
+      margin-bottom: 50px;
43
+    }
44
+    .title{
45
+      font-size: 36px;
46
+      margin-bottom: 16px;
47
+    }
48
+    .text{
49
+      text-align: left;
50
+    }
51
+    &:last-child{
52
+      padding-bottom: 130px;
53
+    }
54
+  }
55
+}
56
+
57
+
58
+@media screen and (min-width: 801px) and (max-width: 1400px) {
59
+  
60
+}
61
+@media screen and (min-width:800px){
62
+  
63
+}
64
+.mTxt{
65
+  display: none;
66
+}
67
+//移动端样式
68
+@media screen and (max-width:800px) {
69
+  .pcTxt{
70
+    display: none;
71
+  }
72
+  .mTxt{
73
+    display: block;
74
+  }
75
+  .main{
76
+    padding-top: 61px;
77
+  }
78
+  .desCon{
79
+    padding-top: 80px;
80
+    box-sizing: border-box;
81
+    padding-left: 15px;
82
+    padding-right: 15px;
83
+    .text{
84
+      font-size: 14px;
85
+      line-height: 22px;
86
+    }
87
+    .desTop{
88
+      padding-bottom: 30px;
89
+      flex-wrap: wrap;
90
+      .title{
91
+        text-align: center;
92
+        margin-bottom: 20px;
93
+      }
94
+      &>div{
95
+        width: 100%;
96
+      }
97
+    }
98
+    .desTopImg{
99
+      padding-bottom: 70px;
100
+    }
101
+    .desLi{
102
+      padding-bottom: 70px;
103
+      img{
104
+        margin-bottom: 28px;
105
+      }
106
+      .title{
107
+        font-size: 15px;
108
+        line-height: 20px;
109
+      }
110
+      &:last-child {
111
+        padding-bottom: 70px;
112
+    }
113
+    }
114
+  }
115
+}

+ 39
- 0
src/pages/productDec7/App.js 查看文件

@@ -0,0 +1,39 @@
1
+import Swiper from 'swiper/bundle'
2
+import gsap from 'gsap'
3
+import LocomotiveScroll from 'locomotive-scroll';
4
+import Common from '../common/js/Common'
5
+import {
6
+    isMobile
7
+} from '../common/js/utils'
8
+
9
+export default class App {
10
+    constructor() {
11
+        let common = new Common(document.querySelector('.main'),1)   //导航菜单高亮,0是首页,后面的按顺序添加
12
+        this.isMobile = isMobile()
13
+        
14
+        this.scroll = new LocomotiveScroll();
15
+        // 图片及视频资源懒加载。防止阻塞js执行
16
+        let lazyDoms = document.querySelectorAll(".lazy");
17
+        let isMob=this.isMobile;
18
+        lazyDoms.forEach((item) => {
19
+            if (item.nodeName == "PICTURE") {
20
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
21
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
22
+            }
23
+            if (item.nodeName == "IMG") {
24
+                if(isMob){item.setAttribute("src", item.dataset.srcm);}
25
+                else{
26
+                    item.setAttribute("src", item.dataset.src);
27
+                }
28
+                
29
+            }
30
+            if (item.nodeName == "VIDEO") {
31
+                console.log(item, 'item---2')
32
+                item.setAttribute("src", item.dataset.src);
33
+                // item.load();
34
+            }
35
+        });
36
+    }
37
+
38
+
39
+}

+ 37
- 0
src/pages/productDec7/index.html 查看文件

@@ -0,0 +1,37 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+    <title>产业互联网-产业布局</title>
7
+    <meta name="description" content=""/>
8
+    <meta name="Keywords" content=""/>
9
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
10
+    <%= require('../common/tpl/headerLink.tpl') %>
11
+  </head>
12
+
13
+  <body>
14
+    <%= require('../common/tpl/header.tpl') %>
15
+    
16
+    <div class="main">
17
+      <div class="desCon">
18
+        <div class="wow fadeInUp desTop">
19
+          <div class="title">产业互联网</div>
20
+          <div class="text">产业互联网板块由万联易达及其子公司构成,致力于以人工智能为支撑,推动产业生态智能化升级。以更垂直化、多模态化、行业融合化的方式推出针对性的各类人工智能纵向大模型,为社会全产业提供商品贸易、整车物流、金融等数智化解决方案,促进全产业链协同发展。</div>
21
+        </div>
22
+        <div class="wow fadeInUp desTopImg">
23
+          <img class="lazy" data-src="./static/images/product/chanye/banner.png" data-srcM="./static/images/product/chanye/banner.png" alt="" />
24
+        </div>
25
+        <div class="desLi">
26
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/chanye/01.png" data-srcM="./static/images/product/chanye/01.png" alt="" />
27
+          <div class="wow fadeInUp title">万联易达物流科技有限公司</div>
28
+          <div class="wow fadeInUp text">
29
+            万联易达物流科技有限公司成立于2018年,总部位于北京,是一家以大宗商品交易和整车物流服务为纽带,以人工智能为支撑的产业互联网公司。<br>随着人工智能技术突飞猛进的发展,技术应用领域愈发广泛,与产业融合的趋势进一步加速。万联易达紧抓机遇,以更垂直化、多模态化、行业融合化的方式推出针对性的各类人工智能纵向大模型,为社会全产业提供商品贸易、整车物流、金融等数智化解决方案,让产业生态更智能。致力于成为全球最大的智能化生态运营商。
30
+          </div>
31
+        </div>
32
+      </div>
33
+    </div>
34
+    <%= require('../common/tpl/footer.tpl') %>
35
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
36
+  </body>
37
+</html>

+ 15
- 0
src/pages/productDec7/index.js 查看文件

@@ -0,0 +1,15 @@
1
+import "./../common/css/common.less";
2
+import "./index.less";
3
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
4
+import App from './App.js';
5
+
6
+// swiper的css目前环境解析不出来,放static下,不走webpack 
7
+//import 'swiper/swiper-bundle.css';
8
+
9
+vhCheck();
10
+//禁止浏览器刷新后回到上一个页面滚动位置
11
+if ('scrollRestoration' in history) {
12
+    history.scrollRestoration = 'manual';
13
+}
14
+
15
+new App();

+ 115
- 0
src/pages/productDec7/index.less 查看文件

@@ -0,0 +1,115 @@
1
+
2
+//pc端样式
3
+.main {
4
+    width: 100%;
5
+    max-width: 1920px;
6
+    margin: 0 auto;
7
+    padding-top: 71px;
8
+}
9
+.desCon{
10
+  width: 100%;
11
+  text-align: center;
12
+  padding-top: 120px;
13
+  .desTop{
14
+    width: 100%;
15
+    max-width: 1300px;
16
+    margin: 0px auto;
17
+    display: flex;
18
+    text-align: left;
19
+    padding-bottom: 26px;
20
+    &>div{
21
+      width: 50%;
22
+    }
23
+  }
24
+  .desTopImg{
25
+    width: 100%;
26
+    max-width: 1500px;
27
+    margin: 0px auto;
28
+    padding-bottom: 140px;
29
+    img{
30
+      width: 100%;
31
+      display: block;
32
+    }
33
+  }
34
+  .desLi{
35
+    width: 100%;
36
+    max-width: 1300px;
37
+    margin: 0px auto;
38
+    padding-bottom: 150px;
39
+    img{
40
+      width: 100%;
41
+      display: block;
42
+      margin-bottom: 50px;
43
+    }
44
+    .title{
45
+      font-size: 36px;
46
+      margin-bottom: 16px;
47
+    }
48
+    .text{
49
+      text-align: left;
50
+    }
51
+    &:last-child{
52
+      padding-bottom: 130px;
53
+    }
54
+  }
55
+}
56
+
57
+
58
+@media screen and (min-width: 801px) and (max-width: 1400px) {
59
+  
60
+}
61
+@media screen and (min-width:800px){
62
+  
63
+}
64
+.mTxt{
65
+  display: none;
66
+}
67
+//移动端样式
68
+@media screen and (max-width:800px) {
69
+  .pcTxt{
70
+    display: none;
71
+  }
72
+  .mTxt{
73
+    display: block;
74
+  }
75
+  .main{
76
+    padding-top: 61px;
77
+  }
78
+  .desCon{
79
+    padding-top: 80px;
80
+    box-sizing: border-box;
81
+    padding-left: 15px;
82
+    padding-right: 15px;
83
+    .text{
84
+      font-size: 14px;
85
+      line-height: 22px;
86
+    }
87
+    .desTop{
88
+      padding-bottom: 30px;
89
+      flex-wrap: wrap;
90
+      .title{
91
+        text-align: center;
92
+        margin-bottom: 20px;
93
+      }
94
+      &>div{
95
+        width: 100%;
96
+      }
97
+    }
98
+    .desTopImg{
99
+      padding-bottom: 70px;
100
+    }
101
+    .desLi{
102
+      padding-bottom: 70px;
103
+      img{
104
+        margin-bottom: 28px;
105
+      }
106
+      .title{
107
+        font-size: 15px;
108
+        line-height: 20px;
109
+      }
110
+      &:last-child {
111
+        padding-bottom: 70px;
112
+    }
113
+    }
114
+  }
115
+}

+ 39
- 0
src/pages/productDec8/App.js 查看文件

@@ -0,0 +1,39 @@
1
+import Swiper from 'swiper/bundle'
2
+import gsap from 'gsap'
3
+import LocomotiveScroll from 'locomotive-scroll';
4
+import Common from '../common/js/Common'
5
+import {
6
+    isMobile
7
+} from '../common/js/utils'
8
+
9
+export default class App {
10
+    constructor() {
11
+        let common = new Common(document.querySelector('.main'),1)   //导航菜单高亮,0是首页,后面的按顺序添加
12
+        this.isMobile = isMobile()
13
+        
14
+        this.scroll = new LocomotiveScroll();
15
+        // 图片及视频资源懒加载。防止阻塞js执行
16
+        let lazyDoms = document.querySelectorAll(".lazy");
17
+        let isMob=this.isMobile;
18
+        lazyDoms.forEach((item) => {
19
+            if (item.nodeName == "PICTURE") {
20
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
21
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
22
+            }
23
+            if (item.nodeName == "IMG") {
24
+                if(isMob){item.setAttribute("src", item.dataset.srcm);}
25
+                else{
26
+                    item.setAttribute("src", item.dataset.src);
27
+                }
28
+                
29
+            }
30
+            if (item.nodeName == "VIDEO") {
31
+                console.log(item, 'item---2')
32
+                item.setAttribute("src", item.dataset.src);
33
+                // item.load();
34
+            }
35
+        });
36
+    }
37
+
38
+
39
+}

+ 58
- 0
src/pages/productDec8/index.html 查看文件

@@ -0,0 +1,58 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+    <title>金融-产业布局</title>
7
+    <meta name="description" content=""/>
8
+    <meta name="Keywords" content=""/>
9
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
10
+    <%= require('../common/tpl/headerLink.tpl') %>
11
+  </head>
12
+
13
+  <body>
14
+    <%= require('../common/tpl/header.tpl') %>
15
+    
16
+    <div class="main">
17
+      <div class="desCon">
18
+        <div class="wow fadeInUp desTop">
19
+          <div class="title">金融</div>
20
+          <div class="text">金融板块主要企业包括商贸集团、中睿元同、金山岭、深圳君奇,是实现集团投资并购与实体产业双轮驱动发展模式的重要支撑。</div>
21
+        </div>
22
+        <div class="wow fadeInUp desTopImg">
23
+          <img class="lazy" data-src="./static/images/product/tansu/banner.png" data-srcM="./static/images/product/tansu/banner.png" alt="" />
24
+        </div>
25
+        <div class="desLi">
26
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/01.png" data-srcM="./static/images/product/tansu/01.png" alt="" />
27
+          <div class="wow fadeInUp title">标题</div>
28
+          <div class="wow fadeInUp text">
29
+            
30
+          </div>
31
+        </div>
32
+        <div class="desLi">
33
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/02.png" data-srcM="./static/images/product/tansu/02.png" alt="" />
34
+          <div class="wow fadeInUp title">标题</div>
35
+          <div class="wow fadeInUp text">
36
+            
37
+          </div>
38
+        </div>
39
+        <div class="desLi">
40
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/03.png" data-srcM="./static/images/product/tansu/03.png" alt="" />
41
+          <div class="wow fadeInUp title">标题</div>
42
+          <div class="wow fadeInUp text">
43
+            
44
+          </div>
45
+        </div>
46
+        <div class="desLi">
47
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/04.png" data-srcM="./static/images/product/tansu/04.png" alt="" />
48
+          <div class="wow fadeInUp title">标题</div>
49
+          <div class="wow fadeInUp text">
50
+
51
+          </div>
52
+        </div>
53
+      </div>
54
+    </div>
55
+    <%= require('../common/tpl/footer.tpl') %>
56
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
57
+  </body>
58
+</html>

+ 15
- 0
src/pages/productDec8/index.js 查看文件

@@ -0,0 +1,15 @@
1
+import "./../common/css/common.less";
2
+import "./index.less";
3
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
4
+import App from './App.js';
5
+
6
+// swiper的css目前环境解析不出来,放static下,不走webpack 
7
+//import 'swiper/swiper-bundle.css';
8
+
9
+vhCheck();
10
+//禁止浏览器刷新后回到上一个页面滚动位置
11
+if ('scrollRestoration' in history) {
12
+    history.scrollRestoration = 'manual';
13
+}
14
+
15
+new App();

+ 115
- 0
src/pages/productDec8/index.less 查看文件

@@ -0,0 +1,115 @@
1
+
2
+//pc端样式
3
+.main {
4
+    width: 100%;
5
+    max-width: 1920px;
6
+    margin: 0 auto;
7
+    padding-top: 71px;
8
+}
9
+.desCon{
10
+  width: 100%;
11
+  text-align: center;
12
+  padding-top: 120px;
13
+  .desTop{
14
+    width: 100%;
15
+    max-width: 1300px;
16
+    margin: 0px auto;
17
+    display: flex;
18
+    text-align: left;
19
+    padding-bottom: 26px;
20
+    &>div{
21
+      width: 50%;
22
+    }
23
+  }
24
+  .desTopImg{
25
+    width: 100%;
26
+    max-width: 1500px;
27
+    margin: 0px auto;
28
+    padding-bottom: 140px;
29
+    img{
30
+      width: 100%;
31
+      display: block;
32
+    }
33
+  }
34
+  .desLi{
35
+    width: 100%;
36
+    max-width: 1300px;
37
+    margin: 0px auto;
38
+    padding-bottom: 150px;
39
+    img{
40
+      width: 100%;
41
+      display: block;
42
+      margin-bottom: 50px;
43
+    }
44
+    .title{
45
+      font-size: 36px;
46
+      margin-bottom: 16px;
47
+    }
48
+    .text{
49
+      text-align: left;
50
+    }
51
+    &:last-child{
52
+      padding-bottom: 130px;
53
+    }
54
+  }
55
+}
56
+
57
+
58
+@media screen and (min-width: 801px) and (max-width: 1400px) {
59
+  
60
+}
61
+@media screen and (min-width:800px){
62
+  
63
+}
64
+.mTxt{
65
+  display: none;
66
+}
67
+//移动端样式
68
+@media screen and (max-width:800px) {
69
+  .pcTxt{
70
+    display: none;
71
+  }
72
+  .mTxt{
73
+    display: block;
74
+  }
75
+  .main{
76
+    padding-top: 61px;
77
+  }
78
+  .desCon{
79
+    padding-top: 80px;
80
+    box-sizing: border-box;
81
+    padding-left: 15px;
82
+    padding-right: 15px;
83
+    .text{
84
+      font-size: 14px;
85
+      line-height: 22px;
86
+    }
87
+    .desTop{
88
+      padding-bottom: 30px;
89
+      flex-wrap: wrap;
90
+      .title{
91
+        text-align: center;
92
+        margin-bottom: 20px;
93
+      }
94
+      &>div{
95
+        width: 100%;
96
+      }
97
+    }
98
+    .desTopImg{
99
+      padding-bottom: 70px;
100
+    }
101
+    .desLi{
102
+      padding-bottom: 70px;
103
+      img{
104
+        margin-bottom: 28px;
105
+      }
106
+      .title{
107
+        font-size: 15px;
108
+        line-height: 20px;
109
+      }
110
+      &:last-child {
111
+        padding-bottom: 70px;
112
+    }
113
+    }
114
+  }
115
+}

+ 39
- 0
src/pages/productDec9/App.js 查看文件

@@ -0,0 +1,39 @@
1
+import Swiper from 'swiper/bundle'
2
+import gsap from 'gsap'
3
+import LocomotiveScroll from 'locomotive-scroll';
4
+import Common from '../common/js/Common'
5
+import {
6
+    isMobile
7
+} from '../common/js/utils'
8
+
9
+export default class App {
10
+    constructor() {
11
+        let common = new Common(document.querySelector('.main'),1)   //导航菜单高亮,0是首页,后面的按顺序添加
12
+        this.isMobile = isMobile()
13
+        
14
+        this.scroll = new LocomotiveScroll();
15
+        // 图片及视频资源懒加载。防止阻塞js执行
16
+        let lazyDoms = document.querySelectorAll(".lazy");
17
+        let isMob=this.isMobile;
18
+        lazyDoms.forEach((item) => {
19
+            if (item.nodeName == "PICTURE") {
20
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
21
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
22
+            }
23
+            if (item.nodeName == "IMG") {
24
+                if(isMob){item.setAttribute("src", item.dataset.srcm);}
25
+                else{
26
+                    item.setAttribute("src", item.dataset.src);
27
+                }
28
+                
29
+            }
30
+            if (item.nodeName == "VIDEO") {
31
+                console.log(item, 'item---2')
32
+                item.setAttribute("src", item.dataset.src);
33
+                // item.load();
34
+            }
35
+        });
36
+    }
37
+
38
+
39
+}

+ 58
- 0
src/pages/productDec9/index.html 查看文件

@@ -0,0 +1,58 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+    <title>炭素-产业布局</title>
7
+    <meta name="description" content=""/>
8
+    <meta name="Keywords" content=""/>
9
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
10
+    <%= require('../common/tpl/headerLink.tpl') %>
11
+  </head>
12
+
13
+  <body>
14
+    <%= require('../common/tpl/header.tpl') %>
15
+    
16
+    <div class="main">
17
+      <div class="desCon">
18
+        <div class="wow fadeInUp desTop">
19
+          <div class="title">炭素</div>
20
+          <div class="text"></div>
21
+        </div>
22
+        <div class="wow fadeInUp desTopImg">
23
+          <img class="lazy" data-src="./static/images/product/tansu/banner.png" data-srcM="./static/images/product/tansu/banner.png" alt="" />
24
+        </div>
25
+        <div class="desLi">
26
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/01.png" data-srcM="./static/images/product/tansu/01.png" alt="" />
27
+          <div class="wow fadeInUp title">标题</div>
28
+          <div class="wow fadeInUp text">
29
+            
30
+          </div>
31
+        </div>
32
+        <div class="desLi">
33
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/02.png" data-srcM="./static/images/product/tansu/02.png" alt="" />
34
+          <div class="wow fadeInUp title">标题</div>
35
+          <div class="wow fadeInUp text">
36
+            
37
+          </div>
38
+        </div>
39
+        <div class="desLi">
40
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/03.png" data-srcM="./static/images/product/tansu/03.png" alt="" />
41
+          <div class="wow fadeInUp title">标题</div>
42
+          <div class="wow fadeInUp text">
43
+            
44
+          </div>
45
+        </div>
46
+        <div class="desLi">
47
+          <img class="wow fadeInUp lazy" data-src="./static/images/product/tansu/04.png" data-srcM="./static/images/product/tansu/04.png" alt="" />
48
+          <div class="wow fadeInUp title">标题</div>
49
+          <div class="wow fadeInUp text">
50
+
51
+          </div>
52
+        </div>
53
+      </div>
54
+    </div>
55
+    <%= require('../common/tpl/footer.tpl') %>
56
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
57
+  </body>
58
+</html>

+ 15
- 0
src/pages/productDec9/index.js 查看文件

@@ -0,0 +1,15 @@
1
+import "./../common/css/common.less";
2
+import "./index.less";
3
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
4
+import App from './App.js';
5
+
6
+// swiper的css目前环境解析不出来,放static下,不走webpack 
7
+//import 'swiper/swiper-bundle.css';
8
+
9
+vhCheck();
10
+//禁止浏览器刷新后回到上一个页面滚动位置
11
+if ('scrollRestoration' in history) {
12
+    history.scrollRestoration = 'manual';
13
+}
14
+
15
+new App();

+ 115
- 0
src/pages/productDec9/index.less 查看文件

@@ -0,0 +1,115 @@
1
+
2
+//pc端样式
3
+.main {
4
+    width: 100%;
5
+    max-width: 1920px;
6
+    margin: 0 auto;
7
+    padding-top: 71px;
8
+}
9
+.desCon{
10
+  width: 100%;
11
+  text-align: center;
12
+  padding-top: 120px;
13
+  .desTop{
14
+    width: 100%;
15
+    max-width: 1300px;
16
+    margin: 0px auto;
17
+    display: flex;
18
+    text-align: left;
19
+    padding-bottom: 26px;
20
+    &>div{
21
+      width: 50%;
22
+    }
23
+  }
24
+  .desTopImg{
25
+    width: 100%;
26
+    max-width: 1500px;
27
+    margin: 0px auto;
28
+    padding-bottom: 140px;
29
+    img{
30
+      width: 100%;
31
+      display: block;
32
+    }
33
+  }
34
+  .desLi{
35
+    width: 100%;
36
+    max-width: 1300px;
37
+    margin: 0px auto;
38
+    padding-bottom: 150px;
39
+    img{
40
+      width: 100%;
41
+      display: block;
42
+      margin-bottom: 50px;
43
+    }
44
+    .title{
45
+      font-size: 36px;
46
+      margin-bottom: 16px;
47
+    }
48
+    .text{
49
+      text-align: left;
50
+    }
51
+    &:last-child{
52
+      padding-bottom: 130px;
53
+    }
54
+  }
55
+}
56
+
57
+
58
+@media screen and (min-width: 801px) and (max-width: 1400px) {
59
+  
60
+}
61
+@media screen and (min-width:800px){
62
+  
63
+}
64
+.mTxt{
65
+  display: none;
66
+}
67
+//移动端样式
68
+@media screen and (max-width:800px) {
69
+  .pcTxt{
70
+    display: none;
71
+  }
72
+  .mTxt{
73
+    display: block;
74
+  }
75
+  .main{
76
+    padding-top: 61px;
77
+  }
78
+  .desCon{
79
+    padding-top: 80px;
80
+    box-sizing: border-box;
81
+    padding-left: 15px;
82
+    padding-right: 15px;
83
+    .text{
84
+      font-size: 14px;
85
+      line-height: 22px;
86
+    }
87
+    .desTop{
88
+      padding-bottom: 30px;
89
+      flex-wrap: wrap;
90
+      .title{
91
+        text-align: center;
92
+        margin-bottom: 20px;
93
+      }
94
+      &>div{
95
+        width: 100%;
96
+      }
97
+    }
98
+    .desTopImg{
99
+      padding-bottom: 70px;
100
+    }
101
+    .desLi{
102
+      padding-bottom: 70px;
103
+      img{
104
+        margin-bottom: 28px;
105
+      }
106
+      .title{
107
+        font-size: 15px;
108
+        line-height: 20px;
109
+      }
110
+      &:last-child {
111
+        padding-bottom: 70px;
112
+    }
113
+    }
114
+  }
115
+}

正在加载...
取消
保存