honors.vue
10.4 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 18:05:59
* @FilePath: /hager/src/views/about/honors.vue
* @Description: 文件描述
-->
<template>
<div class="hager-about-honors-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>
<div :class="['top-img', is_xs ? 'xs' : '']"></div>
</hager-box>
<hager-box>
<div class="select-btn-box">
<div @click="onClickBtn(0)" :class="['btn', active_idx === 0 ? 'active' : 'normal']">行业荣誉</div>
<div @click="onClickBtn(1)":class="['btn', active_idx === 1 ? 'active' : 'normal']">美学设计</div>
<div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">卓越发展</div>
</div>
</hager-box>
<hager-box>
<p class="list-title">2022年</p>
<div class="list-wrapper">
<div class="card">
<div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
<div class="card-content">
<h3>金牌合作单位</h3>
<p>由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。</p>
</div>
</div>
<div class="card">
<div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
<div class="card-content">
<h3>中国建筑学会建筑电气分会</h3>
<p>海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位”荣誉称号，德国匠心再获业内肯定。</p>
</div>
</div>
<div class="card">
<div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h03@2x.png)' }"></div>
<div class="card-content">
<h3>十大智能家居品牌奖；智慧酒店解决方案优</h3>
<p>2023年CHCC中国医院建设奖颁奖典礼在成都中国西部国际博览城举行，中国医院建设奖是全国医疗健康领域最具影响力、最高奖项之一。凭借在医疗建筑领域的专业解决方案，海格电气通过专家评审团认可，荣获“第十一届中国医院建设十佳建筑设备供应商”奖项，并被授予2023年中国医院建设奖荣誉称号</p>
</div>
</div>
<div class="card">
<div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
<div class="card-content">
<h3>第十一届中国医院建设十佳建筑设备供应商</h3>
<p>海格电气以其卓越的技术在智能配电和智能家居领域脱颖而出，荣获“2022年十大智能家居品牌奖”和“2022智慧酒店解决方案优秀品牌奖”两个奖项，肯定了海格电气在智能配电及智能家居领域的专业性。</p>
</div>
</div>
<div class="card">
<div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h03@2x.png)' }"></div>
<div class="card-content">
<h3>第十一届中国医院建设十佳建筑设备供应商</h3>
<p>SolarProsumerAward光伏持有者奖项的评定来自于22,000+光伏系统持有者对产品的综合评估，最直接代表了专业消费者对产品和品牌的信任。E3/DC在壁挂式充电桩、家庭能源管理系统（HEMS）、能源存储、逆变器类别中凭借专业消费者高度的综合评价与认可获此殊荣。</p>
</div>
</div>
</div>
</hager-box>
<hager-box>
<p class="list-title">2022年</p>
<div class="list-wrapper">
<div class="card">
<div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
<div class="card-content">
<h3>金牌合作单位</h3>
<p>由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。</p>
</div>
</div>
<div class="card">
<div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
<div class="card-content">
<h3>中国建筑学会建筑电气分会</h3>
<p>海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位”荣誉称号，德国匠心再获业内肯定。</p>
</div>
</div>
<div class="card">
<div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h03@2x.png)' }"></div>
<div class="card-content">
<h3>十大智能家居品牌奖；智慧酒店解决方案优</h3>
<p>2023年CHCC中国医院建设奖颁奖典礼在成都中国西部国际博览城举行，中国医院建设奖是全国医疗健康领域最具影响力、最高奖项之一。凭借在医疗建筑领域的专业解决方案，海格电气通过专家评审团认可，荣获“第十一届中国医院建设十佳建筑设备供应商”奖项，并被授予2023年中国医院建设奖荣誉称号</p>
</div>
</div>
<div class="card">
<div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
<div class="card-content">
<h3>第十一届中国医院建设十佳建筑设备供应商</h3>
<p>海格电气以其卓越的技术在智能配电和智能家居领域脱颖而出，荣获“2022年十大智能家居品牌奖”和“2022智慧酒店解决方案优秀品牌奖”两个奖项，肯定了海格电气在智能配电及智能家居领域的专业性。</p>
</div>
</div>
<div class="card">
<div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h03@2x.png)' }"></div>
<div class="card-content">
<h3>第十一届中国医院建设十佳建筑设备供应商</h3>
<p>SolarProsumerAward光伏持有者奖项的评定来自于22,000+光伏系统持有者对产品的综合评估，最直接代表了专业消费者对产品和品牌的信任。E3/DC在壁挂式充电桩、家庭能源管理系统（HEMS）、能源存储、逆变器类别中凭借专业消费者高度的综合评价与认可获此殊荣。</p>
</div>
</div>
</div>
</hager-box>
<hager-box>
<div class="get-more">
<div class="btn">加载更多...</div>
</div>
</hager-box>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
export default {
components: { hagerBox },
mixins: [mixin.init],
data () {
return {
active_idx: 0,
}
},
mounted () {
},
methods: {
onClickBtn (idx) {
this.active_idx = idx;
}
}
}
</script>
<style lang="less" scoped>
.hager-about-honors-page {
.top-img {
height: 22rem;
background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g21@2x.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 2rem 0;
&.xs {
// background-size: contain;
height: 8rem;
}
}
.select-btn-box {
margin-bottom: 2rem;
.btn {
width: 8rem;
height: 2rem;
line-height: 2rem;
text-align: center;
display: inline-block;
padding: 0.5rem 0;
margin-right: 1rem;
&.active {
background-color: @primary-color;
color: #fff;
font-weight: bold;
}
&.normal {
background-color: #F3F3F3;
color: @text-color;
font-weight: none;
}
&:hover {
cursor: pointer;
}
}
}
.list-title {
font-size: 1.75rem;
font-weight: bold;
margin-bottom: 1rem;
color: @secondary-color;
}
.list-wrapper {
margin-bottom: 1rem;
.card-image {
width: 100%;
height: 17rem;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: #E3F1F7;
}
.card-content {
background-color: #F7F7F7;
padding: 2rem 1.5rem;
height: 12rem;
overflow: scroll;
h3 {
color: @secondary-color;
font-size: 1rem;
margin: 0;
margin-bottom: 0.5rem;
}
p {
font-size: 0.95rem;
line-height: 1.8;
}
}
}
.list-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* 保证剩余元素靠左对齐 */
}
.card {
flex: 0 0 32.33%; /* 设置宽度为 1/3 */
margin-bottom: 1rem;
margin-right: 1.5%; /* 每个项目之间的右侧留空 */
box-sizing: border-box; /* 保证 padding 和 margin 不影响宽度计算 */
}
/* 确保每行的第三个元素没有右边距 */
.card:nth-child(3n) {
margin-right: 0;
}
/* 伪元素填充最后一行的剩余空间，确保它靠左对齐 */
.list-wrapper::after {
content: "";
flex: auto;
}
/* 针对IE的处理 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.card {
width: 32.33%; /* 使用百分比宽度替代 flex-basis 以支持 IE */
margin-right: 1.5%;
}
.card:nth-child(3n) {
margin-right: 0;
}
}
.get-more {
display: flex;
justify-content: center;
.btn {
background-color: #F56400;
color: #fff;
padding: 1rem 2rem;
width: 5rem;
margin-bottom: 2rem;
&:hover {
cursor: pointer;
}
}
}
}
</style>