product.vue
16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-31 12:01:22
* @FilePath: /hager/src/views/about/product.vue
* @Description: 文件描述
-->
<template>
<div class="hager-about-product-page">
<hager-box>
<div style="margin-top: 1.5rem;">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/about' }">关于海格</el-breadcrumb-item>
<el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</hager-box>
<hager-box v-if="!is_xs">
<el-row style="margin: 3rem 0 1rem;">
<el-col :span="8">
<div class="about-box">
<div style="top: 35%; transform: translateY(35%);">
<div class="title">
<p class="c">生产研发</p>
<p class="e">Production and R&D</p>
</div>
<div class="introduce" v-clamp="6">
<p>为配合海格集团在全球的业务扩展计划，目前中国有2个生产基地，分别位于惠州和东莞，主要为亚太乃至全球市场提供优质的配电及相关产品。海格集团在全球拥有22家生产基地，主要分布于欧洲。</p>
</div>
</div>
</div>
</el-col>
<el-col :span="16">
<div class="about-img"></div>
</el-col>
</el-row>
</hager-box>
<div v-else style="margin-top: 1rem;">
<div class="about-img xs"></div>
<div class="about-box xs">
<div>
<!-- <div class="title">
<p class="c">生产研发</p>
<p class="e">Production and R&D</p>
</div> -->
<div class="introduce" v-clamp="6">
<p>为配合海格集团在全球的业务扩展计划，目前中国有2个生产基地，分别位于惠州和东莞，主要为亚太乃至全球市场提供优质的配电及相关产品。海格集团在全球拥有22家生产基地，主要分布于欧洲。</p>
</div>
</div>
</div>
</div>
<hager-box v-if="!is_xs" class="box-n">
<el-row>
<el-col :span="12">
<div class="about-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g15@2x-1.png)' }"></div>
</el-col>
<el-col :span="12">
<div class="about-box">
<div class="title" style="margin-top: 3rem;">
<p class="c">追求卓越的匠心品质</p>
<p class="e">Originality Quality</p>
</div>
<div class="introduce" style="line-height: 2;">
<p style="margin-bottom: 1rem;" v-clamp="3">从模具到外壳，到主要塑料、金属和电子部件，95%的产品元器件均由海格电气自主生产；先进的生产工艺及100%高于国际的自动化全检，在缩短产品交货周期的同时，确保每一个产品均符合海格品质。</p>
<p v-clamp="2">符合CNAS17025国家标准的惠州工厂实验室总面积达600平方米，测试能力满足IEC、GB、BS、AS标准的所有标准要求。</p>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="about-box">
<div class="title" style="margin-top: 2.5rem;">
<p class="c">专注为你的匠心服务</p>
<p class="e">Creative Service</p>
</div>
<div class="introduce" style="line-height: 2;">
<p style="margin-bottom: 1rem;" v-clamp="4">位于惠州工厂的亚太定制化中心，传承德国百年匠心的开关面板定制服务，为酒店、住宅等行业提供涵盖颜色定制、UV打印、质感选择、激光雕刻等开关面板定制化服务及工序检测，让客户在激烈竞争中实现差异化与个性化。</p>
<p v-clamp="5">产品预设与东莞工厂配电箱增值服务全面满足客户需求，柔性生产线和灵活生产解决方案帮助客户应对紧急交付需求。海格中国工厂RFID射频标签技术及质量追踪系统可随时了解订单生产状态，确保交货速度。广泛应用在塑壳、漏保等制造环节中的二维码技术自动调取产品工艺参数，为客户实现快速换型生产。 </p>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="about-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g16@2x.png)' }"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="about-img" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g17@2x-1.png)' }"></div>
</el-col>
<el-col :span="12">
<div class="about-box">
<div class="title" style="margin-top: 3rem;">
<p class="c">绿色制造的匠心承诺</p>
<p class="e">Ingenuity Commitment</p>
</div>
<div class="introduce" style="line-height: 2;">
<p v-clamp="4">秉持着可持续发展观的友好生产制造理念，海格电气全球工厂严格执行ISO14001生产标准及RoHS，杜绝在生产过程中使用环境有害材料，并在容易被忽视的包装、运输环节中充分践行对环保的承诺。</p>
</div>
</div>
</el-col>
</el-row>
</hager-box>
<div v-else class="box-2n" style="padding: 1rem;">
<div class="about-img xs" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g15@2x-1.png)' }"></div>
<div class="about-box xs" style="background-color: #FFF; margin-bottom: 1rem;">
<div class="title" style="">
<p class="c xs">追求卓越的匠心品质</p>
<p class="e xs">Originality Quality</p>
</div>
<div class="introduce" style="line-height: 2;">
<p style="margin-bottom: 1rem;">从模具到外壳，到主要塑料、金属和电子部件，95%的产品元器件均由海格电气自主生产；先进的生产工艺及100%高于国际的自动化全检，在缩短产品交货周期的同时，确保每一个产品均符合海格品质。</p>
<p>符合CNAS17025国家标准的惠州工厂实验室总面积达600平方米，测试能力满足IEC、GB、BS、AS标准的所有标准要求。</p>
</div>
</div>
<div class="about-img xs" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g16@2x.png)' }"></div>
<div class="about-box xs" style="background-color: #FFF; height: auto; margin-bottom: 1rem;">
<div class="title">
<p class="c xs">专注为你的匠心服务</p>
<p class="e xs">Creative Service</p>
</div>
<div class="introduce" style="line-height: 2;">
<p style="margin-bottom: 1rem;">位于惠州工厂的亚太定制化中心，传承德国百年匠心的开关面板定制服务，为酒店、住宅等行业提供涵盖颜色定制、UV打印、质感选择、激光雕刻等开关面板定制化服务及工序检测，让客户在激烈竞争中实现差异化与个性化。</p>
<p>产品预设与东莞工厂配电箱增值服务全面满足客户需求，柔性生产线和灵活生产解决方案帮助客户应对紧急交付需求。海格中国工厂RFID射频标签技术及质量追踪系统可随时了解订单生产状态，确保交货速度。广泛应用在塑壳、漏保等制造环节中的二维码技术自动调取产品工艺参数，为客户实现快速换型生产。 </p>
</div>
</div>
<div class="about-img xs" :style="{ 'background-image': 'url(https://cdn.ipadbiz.cn/hager/img/about/g17@2x-1.png)' }"></div>
<div class="about-box xs" style="background-color: #FFF;">
<div class="title">
<p class="c xs">绿色制造的匠心承诺</p>
<p class="e xs">Ingenuity Commitment</p>
</div>
<div class="introduce" style="line-height: 2;">
<p>秉持着可持续发展观的友好生产制造理念，海格电气全球工厂严格执行ISO14001生产标准及RoHS，杜绝在生产过程中使用环境有害材料，并在容易被忽视的包装、运输环节中充分践行对环保的承诺。</p>
</div>
</div>
</div>
<hager-box v-if="!is_xs" style="margin-top: 2rem;">
<div class="product-sum">
<el-row :gutter="10">
<el-col :span="6" class="box">
<div>
<img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E4%B8%93%E5%88%A9@2x.png" alt="">
</div>
<div class="num">3,000</div>
<div class="text">研发员工有效专利</div>
</el-col>
<el-col :span="6" class="box">
<div>
<img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E5%91%98%E5%B7%A5@2x.png" alt="">
</div>
<div class="num">800</div>
<div class="text">研发员工</div>
</el-col>
<el-col :span="6" class="box">
<div>
<img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E6%97%B6%E9%97%B4@2x-1.png" alt="">
</div>
<div class="num">3,0000</div>
<div class="text">培训时长<br/>（面对面以及网络培训）</div>
</el-col>
<el-col :span="6" class="box">
<div>
<img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E7%A0%94%E5%8F%91@2x.png" alt="">
</div>
<div class="num">>6%</div>
<div class="text">销售额投入研发</div>
</el-col>
</el-row>
</div>
</hager-box>
<div v-else class="product-sum xs">
<el-row :gutter="0">
<el-col :span="12" class="box">
<div>
<img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E4%B8%93%E5%88%A9@2x.png" alt="">
</div>
<div class="num">3,000</div>
<div class="text">研发员工有效专利</div>
</el-col>
<el-col :span="12" class="box">
<div>
<img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E5%91%98%E5%B7%A5@2x.png" alt="">
</div>
<div class="num">800</div>
<div class="text">研发员工</div>
</el-col>
</el-row>
<el-row :gutter="0">
<el-col :span="12" class="box">
<div>
<img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E6%97%B6%E9%97%B4@2x-1.png" alt="">
</div>
<div class="num">3,0000</div>
<div class="text">培训时长<br/>（面对面以及网络培训）</div>
</el-col>
<el-col :span="12" class="box">
<div>
<img src="https://cdn.ipadbiz.cn/hager/img/about/icon/%E7%A0%94%E5%8F%91@2x.png" alt="">
</div>
<div class="num">>6%</div>
<div class="text">销售额投入研发</div>
</el-col>
</el-row>
</div>
<hager-box v-if="!is_xs" style="margin: 2rem 0;">
<el-row style="margin: 2rem 0;background-color: #F7F7F7;">
<el-col :span="12">
<div class="about-box big">
<div style="top: 35%; transform: translateY(35%);">
<div class="title">
<p class="c">我们就在身边</p>
<p class="e">We Are Right Here</p>
</div>
<div class="introduce big">
<p>由厂家技术人员做现场服务</p>
<p>产品交付速度迅速</p>
<p><span>32</span>个城市办事处在你身边</p>
<p><span>7X24</span>小时实时在线为你服务</p>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="about-img big"></div>
</el-col>
</el-row>
</hager-box>
<div v-else style="padding: 1rem;">
<div class="about-box xs">
<div>
<div class="title">
<p class="c xs">我们就在身边</p>
<p class="e xs">We Are Right Here</p>
</div>
<div class="introduce big">
<p>由厂家技术人员做现场服务</p>
<p>产品交付速度迅速</p>
<p><span>32</span>个城市办事处在你身边</p>
<p><span>7X24</span>小时实时在线为你服务</p>
</div>
</div>
</div>
<div class="about-img big"></div>
</div>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
export default {
components: { hagerBox },
mixins: [mixin.init],
data () {
return {
intro_list: [{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g01@2x.png',
c_title: '追求卓越的匠心品质',
e_title: 'Hager Group',
content: '海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖住宅、商业建筑、公共建筑和工业。',
link: '/about/global',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g02@2x.png',
c_title: '海格电气在中国',
e_title: 'Hager in China',
content: '海格电气于1997 年进入中国市场，至今已在中国设立了3家工厂和32个销售办事处，通过覆盖全国的营销网络及高资质合作伙伴，为中国客户提供全球领先的解决方案和高效服务。',
link: '/about/china',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g03@2x.png',
c_title: '创新设计',
e_title: 'Innovative Design',
content: '海格电气一直致力于创新，我们与客户共同着手面向未来的主题。海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。',
link: '/about/design',
},]
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.hager-about-product-page {
.about-img {
width: 100%;
height: 35rem;
background-repeat: no-repeat;
background-size: cover;
background-position: center right;
background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g14@2x.png);
&.big {
height: 35rem;
background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g18@2x.png);
background-size: cover;
}
&.xs {
background-position: center;
height: 18rem;
}
}
.about-box {
background-color: #F7F7F7;
position: relative; /* 父容器设置为相对定位 */
padding: 2rem;
height: 35rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
&.xs {
height: auto;
}
&.xs {
height: auto;
padding-top: 1rem;
padding-bottom: 1rem;
}
&.big {
height: 35rem;
padding-left: 6rem;
}
.title {
font-weight: bold;
.c {
font-size: 2rem;
color: @secondary-color;
&.xs {
font-size: 1.5rem;
}
}
.e {
font-size: 1.5rem;
color: @primary-color;
&.xs {
font-size: 1.1rem;
}
}
}
.introduce {
line-height: 1.75;
margin-top: 1rem;
&.big {
font-size: 1.35rem;
font-weight: bold;
span {
color: @primary-color;
}
}
}
}
.product-sum {
background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g19@2x.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 12rem;
color: #FFF;
&.xs {
background-color: @secondary-color;
background-image: none;
height: auto;
padding-bottom: 2rem;
}
.box {
text-align: center;
padding-top: 2.5rem;
img {
height: 2.8rem;
}
.num {
font-size: 2rem;
font-weight: bold;
margin: 0.25rem 0;
}
.text {
font-size: 0.9rem;
}
}
}
}
</style>