Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6a250d65 1 parent 2d456fd4

新增关于海格-荣誉页面

Inline Side-by-side
Showing 1 changed file with 227 additions and 7 deletions
1 <!-- 1 <!--
2 * @Date: 2024-10-17 11:13:44 2 * @Date: 2024-10-17 11:13:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-17 11:27:27 4 + * @LastEditTime: 2024-10-17 18:05:59
5 - * @FilePath: /hager/src/views/about/global.vue 5 + * @FilePath: /hager/src/views/about/honors.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="hager-about-global-page"> 9 + <div class="hager-about-honors-page">
10 <hager-box> 10 <hager-box>
11 - <div v-if="!is_xs" style="margin-top: 1.5rem;"> 11 + <div style="margin-top: 1.5rem;">
12 <el-breadcrumb separator="/"> 12 <el-breadcrumb separator="/">
13 <el-breadcrumb-item>关于海格</el-breadcrumb-item> 13 <el-breadcrumb-item>关于海格</el-breadcrumb-item>
14 <el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item> 14 <el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item>
15 </el-breadcrumb> 15 </el-breadcrumb>
16 </div> 16 </div>
17 </hager-box> 17 </hager-box>
18 + <hager-box>
19 + <div :class="['top-img', is_xs ? 'xs' : '']"></div>
20 + </hager-box>
21 + <hager-box>
22 + <div class="select-btn-box">
23 + <div @click="onClickBtn(0)" :class="['btn', active_idx === 0 ? 'active' : 'normal']">行业荣誉</div>
24 + <div @click="onClickBtn(1)":class="['btn', active_idx === 1 ? 'active' : 'normal']">美学设计</div>
25 + <div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">卓越发展</div>
26 + </div>
27 + </hager-box>
28 + <hager-box>
29 + <p class="list-title">2022年</p>
30 + <div class="list-wrapper">
31 + <div class="card">
32 + <div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
33 + <div class="card-content">
34 + <h3>金牌合作单位</h3>
35 + <p>由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。</p>
36 + </div>
37 + </div>
38 + <div class="card">
39 + <div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
40 + <div class="card-content">
41 + <h3>中国建筑学会建筑电气分会</h3>
42 + <p>海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位”荣誉称号，德国匠心再获业内肯定。</p>
43 + </div>
44 + </div>
45 + <div class="card">
46 + <div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h03@2x.png)' }"></div>
47 + <div class="card-content">
48 + <h3>十大智能家居品牌奖；智慧酒店解决方案优</h3>
49 + <p>2023年CHCC中国医院建设奖颁奖典礼在成都中国西部国际博览城举行，中国医院建设奖是全国医疗健康领域最具影响力、最高奖项之一。凭借在医疗建筑领域的专业解决方案，海格电气通过专家评审团认可，荣获“第十一届中国医院建设十佳建筑设备供应商”奖项，并被授予2023年中国医院建设奖荣誉称号</p>
50 + </div>
51 + </div>
52 + <div class="card">
53 + <div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
54 + <div class="card-content">
55 + <h3>第十一届中国医院建设十佳建筑设备供应商</h3>
56 + <p>海格电气以其卓越的技术在智能配电和智能家居领域脱颖而出，荣获“2022年十大智能家居品牌奖”和“2022智慧酒店解决方案优秀品牌奖”两个奖项，肯定了海格电气在智能配电及智能家居领域的专业性。</p>
57 + </div>
58 + </div>
59 + <div class="card">
60 + <div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h03@2x.png)' }"></div>
61 + <div class="card-content">
62 + <h3>第十一届中国医院建设十佳建筑设备供应商</h3>
63 + <p>SolarProsumerAward光伏持有者奖项的评定来自于22,000+光伏系统持有者对产品的综合评估，最直接代表了专业消费者对产品和品牌的信任。E3/DC在壁挂式充电桩、家庭能源管理系统（HEMS）、能源存储、逆变器类别中凭借专业消费者高度的综合评价与认可获此殊荣。</p>
64 + </div>
65 + </div>
66 + </div>
67 + </hager-box>
68 + <hager-box>
69 + <p class="list-title">2022年</p>
70 + <div class="list-wrapper">
71 + <div class="card">
72 + <div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
73 + <div class="card-content">
74 + <h3>金牌合作单位</h3>
75 + <p>由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。</p>
76 + </div>
77 + </div>
78 + <div class="card">
79 + <div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
80 + <div class="card-content">
81 + <h3>中国建筑学会建筑电气分会</h3>
82 + <p>海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位”荣誉称号，德国匠心再获业内肯定。</p>
83 + </div>
84 + </div>
85 + <div class="card">
86 + <div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h03@2x.png)' }"></div>
87 + <div class="card-content">
88 + <h3>十大智能家居品牌奖；智慧酒店解决方案优</h3>
89 + <p>2023年CHCC中国医院建设奖颁奖典礼在成都中国西部国际博览城举行，中国医院建设奖是全国医疗健康领域最具影响力、最高奖项之一。凭借在医疗建筑领域的专业解决方案，海格电气通过专家评审团认可，荣获“第十一届中国医院建设十佳建筑设备供应商”奖项，并被授予2023年中国医院建设奖荣誉称号</p>
90 + </div>
91 + </div>
92 + <div class="card">
93 + <div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div>
94 + <div class="card-content">
95 + <h3>第十一届中国医院建设十佳建筑设备供应商</h3>
96 + <p>海格电气以其卓越的技术在智能配电和智能家居领域脱颖而出，荣获“2022年十大智能家居品牌奖”和“2022智慧酒店解决方案优秀品牌奖”两个奖项，肯定了海格电气在智能配电及智能家居领域的专业性。</p>
97 + </div>
98 + </div>
99 + <div class="card">
100 + <div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h03@2x.png)' }"></div>
101 + <div class="card-content">
102 + <h3>第十一届中国医院建设十佳建筑设备供应商</h3>
103 + <p>SolarProsumerAward光伏持有者奖项的评定来自于22,000+光伏系统持有者对产品的综合评估，最直接代表了专业消费者对产品和品牌的信任。E3/DC在壁挂式充电桩、家庭能源管理系统（HEMS）、能源存储、逆变器类别中凭借专业消费者高度的综合评价与认可获此殊荣。</p>
104 + </div>
105 + </div>
106 + </div>
107 + </hager-box>
108 + <hager-box>
109 + <div class="get-more">
110 + <div class="btn">加载更多...</div>
111 + </div>
112 + </hager-box>
18 </div> 113 </div>
19 </template> 114 </template>
20 115
...@@ -27,20 +122,145 @@ export default { ...@@ -27,20 +122,145 @@ export default {
27 mixins: [mixin.init], 122 mixins: [mixin.init],
28 data () { 123 data () {
29 return { 124 return {
30 - 125 + active_idx: 0,
31 } 126 }
32 }, 127 },
33 mounted () { 128 mounted () {
34 129
35 }, 130 },
36 methods: { 131 methods: {
37 - 132 + onClickBtn (idx) {
133 + this.active_idx = idx;
134 + }
38 } 135 }
39 } 136 }
40 </script> 137 </script>
41 138
42 <style lang="less" scoped> 139 <style lang="less" scoped>
43 - .hager-about-global-page { 140 + .hager-about-honors-page {
141 + .top-img {
142 + height: 22rem;
143 + background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g21@2x.png);
144 + background-size: cover;
145 + background-position: center;
146 + background-repeat: no-repeat;
147 + margin: 2rem 0;
148 + &.xs {
149 + // background-size: contain;
150 + height: 8rem;
151 + }
152 + }
44 153
154 + .select-btn-box {
155 + margin-bottom: 2rem;
156 + .btn {
157 + width: 8rem;
158 + height: 2rem;
159 + line-height: 2rem;
160 + text-align: center;
161 + display: inline-block;
162 + padding: 0.5rem 0;
163 + margin-right: 1rem;
164 + &.active {
165 + background-color: @primary-color;
166 + color: #fff;
167 + font-weight: bold;
168 + }
169 + &.normal {
170 + background-color: #F3F3F3;
171 + color: @text-color;
172 + font-weight: none;
173 + }
174 + &:hover {
175 + cursor: pointer;
176 + }
177 + }
178 + }
179 +
180 + .list-title {
181 + font-size: 1.75rem;
182 + font-weight: bold;
183 + margin-bottom: 1rem;
184 + color: @secondary-color;
185 + }
186 +
187 + .list-wrapper {
188 + margin-bottom: 1rem;
189 + .card-image {
190 + width: 100%;
191 + height: 17rem;
192 + background-size: contain;
193 + background-position: center;
194 + background-repeat: no-repeat;
195 + background-color: #E3F1F7;
196 + }
197 + .card-content {
198 + background-color: #F7F7F7;
199 + padding: 2rem 1.5rem;
200 + height: 12rem;
201 + overflow: scroll;
202 + h3 {
203 + color: @secondary-color;
204 + font-size: 1rem;
205 + margin: 0;
206 + margin-bottom: 0.5rem;
207 + }
208 + p {
209 + font-size: 0.95rem;
210 + line-height: 1.8;
211 + }
212 + }
213 + }
214 +
215 + .list-wrapper {
216 + display: flex;
217 + flex-wrap: wrap;
218 + justify-content: flex-start; /* 保证剩余元素靠左对齐 */
219 + }
220 +
221 + .card {
222 + flex: 0 0 32.33%; /* 设置宽度为 1/3 */
223 + margin-bottom: 1rem;
224 + margin-right: 1.5%; /* 每个项目之间的右侧留空 */
225 + box-sizing: border-box; /* 保证 padding 和 margin 不影响宽度计算 */
226 + }
227 +
228 + /* 确保每行的第三个元素没有右边距 */
229 + .card:nth-child(3n) {
230 + margin-right: 0;
231 + }
232 +
233 + /* 伪元素填充最后一行的剩余空间，确保它靠左对齐 */
234 + .list-wrapper::after {
235 + content: "";
236 + flex: auto;
237 + }
238 +
239 + /* 针对IE的处理 */
240 + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
241 + .card {
242 + width: 32.33%; /* 使用百分比宽度替代 flex-basis 以支持 IE */
243 + margin-right: 1.5%;
244 + }
245 +
246 + .card:nth-child(3n) {
247 + margin-right: 0;
248 + }
249 + }
250 +
251 + .get-more {
252 + display: flex;
253 + justify-content: center;
254 + .btn {
255 + background-color: #F56400;
256 + color: #fff;
257 + padding: 1rem 2rem;
258 + width: 5rem;
259 + margin-bottom: 2rem;
260 + &:hover {
261 + cursor: pointer;
262 + }
263 + }
264 + }
45 } 265 }
46 </style> 266 </style>
......