Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
96f69806 1 parent 0f8b067e

关于海格自适应调整

Inline Side-by-side
Showing 2 changed files with 83 additions and 7 deletions
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 13:21:40
* @LastEditTime: 2024-10-21 17:17:55
* @FilePath: /hager/src/views/about/china.vue
* @Description: 文件描述
-->
......@@ -15,11 +15,11 @@
</el-breadcrumb>
</div>
</hager-box>
<hager-box>
<hager-box v-if="!is_xs">
<el-row style="margin: 3rem 0;">
<el-col :span="8">
<div class="about-box-wrapper">
<div class="about-box">
<div style="top: 50%; transform: translateY(50%);">
<div class="title">
<p class="c">海格电气在中国</p>
<p class="e">Hager in China</p>
......@@ -40,6 +40,25 @@
<p>海格电气于1997 年进入中国市场，至今已在中国设立了3家工厂和32个销售办事处，通过覆盖全国的营销网络及高资质合作伙伴，为中国客户提供全球领先的解决方案和高效服务。</p>
</div>
</hager-box>
<div v-else>
<div class="about-img xs"></div>
<div class="about-box-wrapper xs">
<div class="about-box xs">
<div class="title">
<p class="c">海格电气在中国</p>
<p class="e">Hager in China</p>
</div>
<div class="introduce" v-clamp="3">
<p>唯有匠心，不负初心。<br/>专注为你，彼此成就！</p>
</div>
</div>
</div>
<div class="about-content xs">
<p>来自德国的海格电气，延承德系基因的匠心与专业，为全球住宅、酒店、医院、公共建筑、商业建筑、工业及能源领域，提供安全、稳定的电气设施与服务。坚持可持续发展，专注为你，构建更安全、更清洁、更愉悦的未来电气世界。</p>
<p>秉承“以客户为中心”的服务理念，海格电气是你可信赖的合作伙伴。深入洞悉中国市场需求，定制化的电气解决方案，灵动合作、完善支持，助力行业合作伙伴增效发展。</p>
<p>海格电气于1997 年进入中国市场，至今已在中国设立了3家工厂和32个销售办事处，通过覆盖全国的营销网络及高资质合作伙伴，为中国客户提供全球领先的解决方案和高效服务。</p>
</div>
</div>
</div>
</template>
......@@ -74,6 +93,10 @@ export default {
background-size: cover;
background-position: center;
background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g08@2x-1.png);
&.xs {
height: 15rem;
margin-top: 1rem;
}
}
.about-box {
background-color: #F7F7F7;
......@@ -81,6 +104,18 @@ export default {
padding: 2rem;
height: 30rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
&.xs {
height: auto;
padding: 2rem;
background-color: #FFF;
}
.about-box {
top: 50%;
transform: translateY(50%);
&.xs {
transform: none;
}
}
.title {
font-weight: bold;
.c {
......@@ -100,6 +135,10 @@ export default {
.about-content {
padding: 0 2rem 2rem;
&.xs {
background-color: #F7F7F7;
padding-top: 2rem;
}
p {
line-height: 2;
margin-bottom: 1.5rem;
......
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 11:48:43
* @LastEditTime: 2024-10-21 17:16:51
* @FilePath: /hager/src/views/about/global.vue
* @Description: 文件描述
-->
......@@ -15,11 +15,11 @@
</el-breadcrumb>
</div>
</hager-box>
<hager-box>
<hager-box v-if="!is_xs">
<el-row style="margin: 3rem 0;">
<el-col :span="8">
<div class="about-box-wrapper">
<div class="about-box">
<div style="top: 50%; transform: translateY(50%);">
<div class="title">
<p class="c">海格全球</p>
<p class="e">Hager Group</p>
......@@ -38,6 +38,23 @@
<p>海格集团于1955年由Hermann Hager、Oswald Hager 博士和他们的父亲Peter Hager 一起创立，集团总部位于德国Blieskastel，直到今天依然是一家独立运营的家族企业。在“真诚、勇气、正直”价值观的指导下，全球13000名员工紧密与客户联系在一起，在2023年创造了约32亿欧元的销售业绩，来自全球22个生产基地的产品和解决方案赢得了100多个国家客户的信任。</p>
</div>
</hager-box>
<div v-else>
<div class="about-img xs"></div>
<div class="about-box-wrapper xs">
<div class="about-box xs">
<div class="title">
<p class="c">海格全球</p>
<p class="e">Hager Group</p>
</div>
<div class="introduce" v-clamp="3">海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖住宅、商业建筑、公共建筑和工业。</div>
</div>
</div>
<div class="about-content xs">
<p>海格电气品牌代表了集团的核心业务，覆盖配电系统、电缆管理系统，KNX 智能控制系统和开关面板、楼宇自动化和安防系统。集团旗下还拥有Berker、Bocchiotti、Elcom 和 E3 / DC 等品牌。这使我们得以整合专能，持续为楼宇自动化领域开发创新产品、系统和服务。</p>
<p>海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术、能源效率、生活辅助系统、电动交通、可再生能源。配电系统是这些技术得以实现的中枢，也是伴随我们成长的基础产品。</p>
<p>海格集团于1955年由Hermann Hager、Oswald Hager 博士和他们的父亲Peter Hager 一起创立，集团总部位于德国Blieskastel，直到今天依然是一家独立运营的家族企业。在“真诚、勇气、正直”价值观的指导下，全球13000名员工紧密与客户联系在一起，在2023年创造了约32亿欧元的销售业绩，来自全球22个生产基地的产品和解决方案赢得了100多个国家客户的信任。</p>
</div>
</div>
</div>
</template>
......@@ -71,13 +88,29 @@ export default {
background-size: cover;
background-position: center;
background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g07@2x.png);
&.xs {
height: 15rem;
margin-top: 1rem;
}
.about-box {
}
.about-box-wrapper {
background-color: #F7F7F7;
position: relative; /* 父容器设置为相对定位 */
padding: 2rem;
height: 30rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
&.xs {
height: auto;
padding: 2rem;
background-color: #FFF;
}
.about-box {
top: 50%;
transform: translateY(50%);
&.xs {
transform: none;
}
}
.title {
font-weight: bold;
.c {
......@@ -97,6 +130,10 @@ export default {
.about-content {
padding: 0 2rem 2rem;
&.xs {
background-color: #F7F7F7;
padding-top: 2rem;
}
p {
line-height: 2;
margin-bottom: 1.5rem;
......