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
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 11:27:27
* @FilePath: /hager/src/views/about/global.vue
* @LastEditTime: 2024-10-17 18:05:59
* @FilePath: /hager/src/views/about/honors.vue
* @Description: 文件描述
-->
<template>
<div class="hager-about-global-page">
<div class="hager-about-honors-page">
<hager-box>
<div v-if="!is_xs" style="margin-top: 1.5rem;">
<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>
......@@ -27,20 +122,145 @@ export default {
mixins: [mixin.init],
data () {
return {
active_idx: 0,
}
},
mounted () {
},
methods: {
onClickBtn (idx) {
this.active_idx = idx;
}
}
}
</script>
<style lang="less" scoped>
.hager-about-global-page {
.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>
......