Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
57ee4156 1 parent bcef3c32

✨ feat: 新增关于海格-创新设计页面

Inline Side-by-side
Showing 1 changed file with 150 additions and 3 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 14:50:29
* @FilePath: /hager/src/views/about/design.vue
* @Description: 文件描述
-->
<template>
......@@ -15,6 +15,61 @@
</el-breadcrumb>
</div>
</hager-box>
<hager-box>
<el-row style="margin: 3rem 0;">
<el-col :span="8">
<div class="about-box">
<div style="top: 50%; transform: translateY(50%);">
<div class="title">
<p class="c">创新设计</p>
<p class="e">Innovative Design</p>
</div>
<div class="introduce" v-clamp="3">
<p>海格电气一直致力于创新，<br/>我们与客户共同着手面向未来的主题。</p>
</div>
</div>
</div>
</el-col>
<el-col :span="15">
<div class="about-img"></div>
</el-col>
</el-row>
</hager-box>
<hager-box class="box-2n">
<hager-h1 title="从产品到解决方案" sub="From Products to Solutions" style="margin: 2rem 0;"></hager-h1>
<el-row :gutter="20" style="margin-bottom: 2rem;">
<el-col :span="8" v-for="(item, index) in list" :key="index" class="products-solutions">
<div class="img-box" :style="{ backgroundImage: 'url('+item.cover+')' }"></div>
<div class="text-box" style="background-color: #FFF;">
<div class="title">{{ item.title }}</div>
<div class="sub">{{ item.sub }}</div>
<div class="content" v-clamp="2">{{ item.content }}</div>
</div>
</el-col>
</el-row>
</hager-box>
<hager-box class="box-n">
<el-row :gutter="30" style="margin-top: 2rem;margin-bottom: 2rem;">
<el-col :span="12">
<div class="left-box">
<div class="title">
<hager-h1 title="从用户体验到设计" sub="From User Experience to Design"></hager-h1>
<div style="margin-top: 2rem; line-height: 1.75;" v-clamp="4">
<p>海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。为了提供更加国际化的产品组合，我们调研了不同国家的习俗、个人的不同愿望和客户关注点。客户的声音促成了符合人体工学的设计方案，确保来自海格电气的产品兼具优雅品味的外观设计与方便易用、以人为本的功能性。</p>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="right-box">
<p class="title">“倾听客户的声音，打造一流设计”</p>
<div>
<img style="width: 100%; height: 10rem;" src="https://cdn.ipadbiz.cn/hager/img/about/g13@2x.png" alt="">
</div>
</div>
</el-col>
</el-row>
</hager-box>
</div>
</template>
......@@ -27,7 +82,22 @@ export default {
mixins: [mixin.init],
data () {
return {
list: [{
cover: 'https://cdn.ipadbiz.cn/hager/img/about/g10@2x-1.png',
title: '电动交通',
sub: 'Electric Transportation',
content: '供电网络为开启电动交通的未来保驾护航，公关和私人场所均提供智能充电站。'
}, {
cover: 'https://cdn.ipadbiz.cn/hager/img/about/g11@2x-1.png',
title: '楼宇自动化',
sub: 'Building Automation',
content: '楼宇自动化将会同时带来高效节能及优质舒适的生活。'
}, {
cover: 'https://cdn.ipadbiz.cn/hager/img/about/g12@2x-1.png',
title: '能源效率',
sub: 'Energy Efficiency',
content: '节能产品有助于优化和降低能源消耗。'
}]
}
},
mounted () {
......@@ -41,6 +111,83 @@ export default {
<style lang="less" scoped>
.hager-about-global-page {
.about-img {
width: 100%;
height: 30rem;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g09@2x.png);
}
.about-box {
background-color: #F7F7F7;
position: relative; /* 父容器设置为相对定位 */
padding: 2rem;
height: 30rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
.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;
}
}
.products-solutions {
border: 1px solid #eee;
.img-box {
width: 100%;
height: 15rem; /* 根据需要设置高度 */
background-size: 100% 100%; /* 强制背景图填满整个容器 */
background-position: center;
background-repeat: no-repeat; /* 防止图片重复 */
}
.text-box {
padding: 1rem;
height: 8rem;
.title {
color: @secondary-color;
font-weight: bold;
font-size: 1.25rem;
}
.sub {
color: @primary-color;
font-weight: bold;
margin: 0.5rem 0;
}
.content {
line-height: 1.7;
}
}
}
.left-box {
background-color: #E3F1F7;
height: 25rem;
padding: 2rem;
.title {
top: 30%;
transform: translateY(30%);
}
}
.right-box {
top: 30%; transform: translateY(30%); padding: 2rem;
.title {
text-align: center;
font-size: 1.55rem;
font-weight: bold;
margin-bottom: 2rem;
color: @secondary-color;
}
}
}
</style>
......