Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fb8d760c 1 parent 4f0557d7

关于研发自适应样式调整

Inline Side-by-side
Showing 1 changed file with 128 additions and 6 deletions
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 16:13:30
* @LastEditTime: 2024-10-22 11:26:47
* @FilePath: /hager/src/views/about/product.vue
* @Description: 文件描述
-->
......@@ -15,7 +15,7 @@
</el-breadcrumb>
</div>
</hager-box>
<hager-box>
<hager-box v-if="!is_xs">
<el-row style="margin: 3rem 0 1rem;">
<el-col :span="8">
<div class="about-box">
......@@ -35,7 +35,21 @@
</el-col>
</el-row>
</hager-box>
<hager-box class="box-n">
<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.png)' }"></div>
......@@ -87,7 +101,41 @@
</el-col>
</el-row>
</hager-box>
<hager-box style="margin-top: 2rem;">
<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.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.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">
......@@ -121,7 +169,41 @@
</el-row>
</div>
</hager-box>
<hager-box style="margin: 2rem 0;">
<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">
......@@ -144,6 +226,23 @@
</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>
......@@ -200,6 +299,10 @@ export default {
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;
......@@ -207,6 +310,14 @@ export default {
padding: 2rem;
height: 30rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
&.xs {
height: auto;
}
&.xs {
height: auto;
padding-top: 1rem;
padding-bottom: 1rem;
}
&.big {
height: 35rem;
padding-left: 6rem;
......@@ -216,10 +327,16 @@ export default {
.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 {
......@@ -242,7 +359,12 @@ export default {
background-position: center;
height: 12rem;
color: #FFF;
// margin-bottom: 2rem;
&.xs {
background-color: @secondary-color;
background-image: none;
height: auto;
padding-bottom: 2rem;
}
.box {
text-align: center;
padding-top: 2.5rem;
......