china.vue
5.1 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
150
151
152
153
154
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-22 11:35:17
* @FilePath: /hager/src/views/about/china.vue
* @Description: 文件描述
-->
<template>
<div class="hager-about-china-page">
<hager-box>
<div style="margin-top: 1.5rem;">
<el-breadcrumb separator="/">
<el-breadcrumb-item>关于海格</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 in China</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>
<div class="about-content">
<p>来自德国的海格电气，延承德系基因的匠心与专业，为全球住宅、酒店、医院、公共建筑、商业建筑、工业及能源领域，提供安全、稳定的电气设施与服务。坚持可持续发展，专注为你，构建更安全、更清洁、更愉悦的未来电气世界。</p>
<p>秉承“以客户为中心”的服务理念，海格电气是你可信赖的合作伙伴。深入洞悉中国市场需求，定制化的电气解决方案，灵动合作、完善支持，助力行业合作伙伴增效发展。</p>
<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 xs">海格电气在中国</p>
<p class="e xs">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>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
export default {
components: { hagerBox, hagerH1 },
mixins: [mixin.init],
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.hager-about-china-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/g08@2x-1.png);
&.xs {
height: 15rem;
margin-top: 1rem;
}
}
.about-box {
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>