Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a6f851d9 1 parent 4d13ab1f

fix 图片样式调整

Inline Side-by-side
Showing 2 changed files with 38 additions and 78 deletions
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 18:05:59
* @LastEditTime: 2024-10-18 16:26:32
* @FilePath: /hager/src/views/about/honors.vue
* @Description: 文件描述
-->
......@@ -25,82 +25,16 @@
<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>
<hager-box v-for="(item, index) in years_list" :key="index">
<p class="list-title">{{ item.year }}年</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 class="card" v-for="(x, idx) in item.list" :key="idx">
<div class="card-image-box">
<div class="card-image" :style="{ backgroundImage: `url(${x.img})` }"></div>
</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>
<h3>{{ x.title }}</h3>
<p>{{ x.content }}</p>
</div>
</div>
</div>
......@@ -123,6 +57,29 @@ export default {
data () {
return {
active_idx: 0,
years_list: [{
year: '2022',
list: [{
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
title: '金牌合作单位',
content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
}, {
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
title: '中国建筑学会建筑电气分会',
content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
}]
}, {
year: '2023',
list: [{
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
title: '金牌合作单位',
content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
}, {
img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
title: '中国建筑学会建筑电气分会',
content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
}]
}]
}
},
mounted () {
......@@ -186,13 +143,16 @@ export default {
.list-wrapper {
margin-bottom: 1rem;
.card-image-box {
padding: 1rem;
background-color: #E3F1F7;
}
.card-image {
width: 100%;
height: 17rem;
background-size: contain;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #E3F1F7;
}
.card-content {
background-color: #F7F7F7;
......
<!--
* @Date: 2024-10-18 09:31:05
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 11:42:37
* @LastEditTime: 2024-10-18 17:35:11
* @FilePath: /hager/src/views/concat.vue
* @Description: 联系我们
-->
<template>
<div class="hager-concat-page">
<div class="top-img"></div>
<div class="top-img"></div>
<hager-box style="margin: 3rem 0;">
<el-row :gutter="0" style="margin-bottom: 1rem;">
<el-col :span="16">
......