global.vue
5.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-01-03 13:57:15
* @FilePath: /hager/src/views/about/global.vue
* @Description: 文件描述
-->
<template>
<div class="hager-about-global-page">
<hager-box>
<div style="margin-top: 1.5rem;">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/about' }">关于海格</el-breadcrumb-item>
<el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</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 class="title">
<p class="c">海格全球</p>
<p class="e">Hager Group</p>
</div>
<div class="introduce" v-clamp="3">海格集团是全球领先的电气及智能化解决方案与服务提供商。</div>
</div>
</div>
</el-col>
<el-col :span="16">
<div class="about-img"></div>
</el-col>
</el-row>
<div class="about-content">
<p>海格集团1955年建立，总部位于德国布利斯卡斯特尔(Blieskastel)，是全球领先的电气及智能化解决方案与服务提供商，行业涵盖建筑、电力、能源、工业、基础设施等。</p>
<p>海格电气品牌代表了集团的核心业务，覆盖配电系统，电缆管理系统，KNX智能控制系统和开关面板，楼宇自动化和安防系统。集团旗下还拥有Hager、Berker、Bocchiotti、Elcom和E3/DC等品牌。这使得我们得以整合专能，持续为众多客户开发创新产品、系统和服务。</p>
<p>在“真诚、勇气、正直”价值观的指导下，全球约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 xs">海格全球</p>
<p class="e xs">Hager Group</p>
</div>
<div class="introduce" v-clamp="3">海格集团是全球领先的电气及智能化解决方案与服务提供商。</div>
</div>
</div>
<div class="about-content xs">
<p>海格集团1955年建立，总部位于德国布利斯卡斯特尔(Blieskastel)，是全球领先的电气及智能化解决方案与服务提供商，行业涵盖建筑、电力、能源、工业、基础设施等。</p>
<p>海格电气品牌代表了集团的核心业务，覆盖配电系统，电缆管理系统，KNX智能控制系统和开关面板，楼宇自动化和安防系统。集团旗下还拥有Hager、Berker、Bocchiotti、Elcom和E3/DC等品牌。这使得我们得以整合专能，持续为众多客户开发创新产品、系统和服务。</p>
<p>在“真诚、勇气、正直”价值观的指导下，全球约13000名员工紧密与客户联系在一起，在2023年创造了约32亿欧元的销售业绩，来自全球22个生产基地的产品和解决方案赢得了100多个国家客户的信任。</p>
</div>
</div>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
export default {
components: { hagerBox },
mixins: [mixin.init],
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<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/g071@2x.png);
&.xs {
height: 15rem;
margin-top: 1rem;
}
}
.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 {
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 {
line-height: 1.75;
margin-top: 1rem;
}
}
.about-content {
padding: 0 2rem 2rem;
&.xs {
background-color: #F7F7F7;
padding-top: 2rem;
}
p {
line-height: 2;
margin-bottom: 1.5rem;
}
}
}
</style>