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
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 11:27:27
* @FilePath: /hager/src/views/about/global.vue
* @LastEditTime: 2024-10-17 16:13:30
* @FilePath: /hager/src/views/about/product.vue
* @Description: 文件描述
-->
<template>
<div class="hager-about-global-page">
<div class="hager-about-product-page">
<hager-box>
<div v-if="!is_xs" style="margin-top: 1.5rem;">
<el-breadcrumb separator="/">
......@@ -15,6 +15,135 @@
</el-breadcrumb>
</div>
</hager-box>
<hager-box>
<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>
<hager-box 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.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.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>
<hager-box 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>
<hager-box 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>
</template>
......@@ -27,7 +156,25 @@ export default {
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 () {
......@@ -40,7 +187,77 @@ export default {
</script>
<style lang="less" scoped>
.hager-about-global-page {
.hager-about-product-page {
.about-img {
width: 100%;
height: 30rem;
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;
}
}
.about-box {
background-color: #F7F7F7;
position: relative; /* 父容器设置为相对定位 */
padding: 2rem;
height: 30rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
&.big {
height: 35rem;
padding-left: 6rem;
}
.title {
font-weight: bold;
.c {
font-size: 2rem;
color: @secondary-color;
}
.e {
font-size: 1.5rem;
color: @primary-color;
}
}
.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;
// margin-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>
......