Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
432276ee 1 parent d7fccbaa

关于海格的生产研发页面新增

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