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
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 18:05:59 4 + * @LastEditTime: 2024-10-18 16:26:32
5 * @FilePath: /hager/src/views/about/honors.vue 5 * @FilePath: /hager/src/views/about/honors.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -25,82 +25,16 @@ ...@@ -25,82 +25,16 @@
25 <div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">卓越发展</div> 25 <div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">卓越发展</div>
26 </div> 26 </div>
27 </hager-box> 27 </hager-box>
28 - <hager-box> 28 + <hager-box v-for="(item, index) in years_list" :key="index">
29 - <p class="list-title">2022年</p> 29 + <p class="list-title">{{ item.year }}年</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"> 30 <div class="list-wrapper">
71 - <div class="card"> 31 + <div class="card" v-for="(x, idx) in item.list" :key="idx">
72 - <div class="card-image" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/about/h01@2x.png)' }"></div> 32 + <div class="card-image-box">
73 - <div class="card-content"> 33 + <div class="card-image" :style="{ backgroundImage: `url(${x.img})` }"></div>
74 - <h3>金牌合作单位</h3>
75 - <p>由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。</p>
76 </div> 34 </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"> 35 <div class="card-content">
81 - <h3>中国建筑学会建筑电气分会</h3> 36 + <h3>{{ x.title }}</h3>
82 - <p>海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位”荣誉称号，德国匠心再获业内肯定。</p> 37 + <p>{{ x.content }}</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> 38 </div>
105 </div> 39 </div>
106 </div> 40 </div>
...@@ -123,6 +57,29 @@ export default { ...@@ -123,6 +57,29 @@ export default {
123 data () { 57 data () {
124 return { 58 return {
125 active_idx: 0, 59 active_idx: 0,
60 + years_list: [{
61 + year: '2022',
62 + list: [{
63 + img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
64 + title: '金牌合作单位',
65 + content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
66 + }, {
67 + img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
68 + title: '中国建筑学会建筑电气分会',
69 + content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
70 + }]
71 + }, {
72 + year: '2023',
73 + list: [{
74 + img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
75 + title: '金牌合作单位',
76 + content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
77 + }, {
78 + img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
79 + title: '中国建筑学会建筑电气分会',
80 + content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
81 + }]
82 + }]
126 } 83 }
127 }, 84 },
128 mounted () { 85 mounted () {
...@@ -186,13 +143,16 @@ export default { ...@@ -186,13 +143,16 @@ export default {
186 143
187 .list-wrapper { 144 .list-wrapper {
188 margin-bottom: 1rem; 145 margin-bottom: 1rem;
146 + .card-image-box {
147 + padding: 1rem;
148 + background-color: #E3F1F7;
149 + }
189 .card-image { 150 .card-image {
190 width: 100%; 151 width: 100%;
191 height: 17rem; 152 height: 17rem;
192 - background-size: contain; 153 + background-size: cover;
193 background-position: center; 154 background-position: center;
194 background-repeat: no-repeat; 155 background-repeat: no-repeat;
195 - background-color: #E3F1F7;
196 } 156 }
197 .card-content { 157 .card-content {
198 background-color: #F7F7F7; 158 background-color: #F7F7F7;
......
1 <!-- 1 <!--
2 * @Date: 2024-10-18 09:31:05 2 * @Date: 2024-10-18 09:31:05
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-18 11:42:37 4 + * @LastEditTime: 2024-10-18 17:35:11
5 * @FilePath: /hager/src/views/concat.vue 5 * @FilePath: /hager/src/views/concat.vue
6 * @Description: 联系我们 6 * @Description: 联系我们
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-concat-page"> 9 <div class="hager-concat-page">
10 - <div class="top-img"></div> 10 + <div class="top-img"></div>
11 <hager-box style="margin: 3rem 0;"> 11 <hager-box style="margin: 3rem 0;">
12 <el-row :gutter="0" style="margin-bottom: 1rem;"> 12 <el-row :gutter="0" style="margin-bottom: 1rem;">
13 <el-col :span="16"> 13 <el-col :span="16">
......