Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5c86a130 1 parent 2e99c860

✨ feat: 首页内容结构完善

Inline Side-by-side
Showing 2 changed files with 216 additions and 11 deletions
1 <!-- 1 <!--
2 * @Date: 2024-09-29 10:31:01 2 * @Date: 2024-09-29 10:31:01
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-29 10:40:48 4 + * @LastEditTime: 2024-09-29 10:52:45
5 * @FilePath: /hager/src/components/hagerMore.vue 5 * @FilePath: /hager/src/components/hagerMore.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -37,5 +37,6 @@ export default { ...@@ -37,5 +37,6 @@ export default {
37 border: 1px solid #EE6D10; 37 border: 1px solid #EE6D10;
38 border-radius: 4px; 38 border-radius: 4px;
39 display: inline-block; 39 display: inline-block;
40 + cursor: pointer;
40 } 41 }
41 </style> 42 </style>
......
1 <!-- 1 <!--
2 * @Date: 2024-08-27 10:06:30 2 * @Date: 2024-08-27 10:06:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-27 19:51:44 4 + * @LastEditTime: 2024-09-29 14:01:03
5 * @FilePath: /hager/src/views/index.vue 5 * @FilePath: /hager/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div> 9 + <div class="hager-container">
10 - <hager-box style="background-color: #fff;"> 10 + <el-carousel height="40rem" :interval="8000">
11 - <hager-carousel></hager-carousel> 11 + <el-carousel-item v-for="item in 4" :key="item">
12 + <el-image style="width: 100%; height: 100%;" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
13 + </el-carousel-item>
14 + </el-carousel>
15 + <hager-box class="box-n">
16 + <!-- <hager-carousel></hager-carousel> -->
17 + <hager-h1 title="海格全球" sub="Hager Global"></hager-h1>
18 + <div class="hager-global">
19 + <p>海格集团是全球领先的电气及智能化鲜决方案和服务提供商，应用领域涵盖住宅，商业建筑，公共建筑和工业。</p>
20 + <p>海格申气品牌代表了集闭的核心业务，蜀盖配电系统。申缆管理系统。KNX 智能榕制系统和开关面板，楼宇自动化和安防系统。集团旗下还拥有Berker. Bocchiott
21 + Elcom 7 E3 / DC</p>
22 + <p>海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术，能源效率、生活辅助系统，电动交通、
23 + 可再生能源。配电系统是这盛技术得以实现的中枢。也是伴随我们成长的其础产品</p>
24 + <div style="display: flex; justify-content: space-between; padding: 2rem; align-items: center; text-align: center;">
25 + <div>
26 + <p>32亿</p>
27 + <p>32亿</p>
28 + <p>Sales ot 3.2 billion eurosin 2023</p>
29 + </div>
30 + <div>
31 + <p>32亿</p>
32 + <p>32亿</p>
33 + <p>100+ countries adopt HAGER solution</p>
34 + </div>
35 + <div>
36 + <p>32亿</p>
37 + <p>32亿</p>
38 + <p>13,000 employees</p>
39 + </div>
40 + <div>
41 + <p>32亿</p>
42 + <p>32亿</p>
43 + <p>13,000 employees</p>
44 + </div>
45 + </div>
46 + <div style="display: flex; justify-content: center;">
47 + <hager-more></hager-more>
48 + </div>
49 + </div>
50 + </hager-box>
51 + <hager-box class="box-2n">
52 + <hager-h1 title="解决方案" sub="Solution"></hager-h1>
53 + <div class="hager-solution">
54 + <div class="solution-item"><p>住宅解决方案</p></div>
55 + <div class="solution-item"><p>商建解决方案</p></div>
56 + <div class="solution-item"><p>工建解决方案</p></div>
57 + <div class="solution-item"><p>供电局解决方案</p></div>
58 + <div class="solution-item"><p>发电解决方案</p></div>
59 + <div class="solution-item"><p>石油石化解决方案</p></div>
60 + <div class="solution-item"><p>冶金解决方案</p></div>
61 + <div class="solution-item"><p>电子解决方案</p></div>
62 + <div class="solution-item"><p>通信解决方案</p></div>
63 + <div class="solution-item"><p>算力解决方案</p></div>
64 + <div class="solution-item"><p>交通解决方案</p></div>
65 + <div class="solution-item other">Other解决方案</div>
66 + </div>
12 </hager-box> 67 </hager-box>
13 - <hager-box style="background-color: #f1f1f1;"> 68 + <hager-box class="box-n">
14 - <div v-for="(item, index) in 10" :key="index"> 69 + <hager-h1 title="产品中心" sub="Product Center"></hager-h1>
15 - <div style="height: 5rem;">{{ index + 1 }}</div> 70 + <div class="hager-product-center">
71 + <div class="product-item">
72 + <el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
73 + <p style="margin-top: 1rem;">atS三型特决井天</p>
74 + </div>
75 + <div class="product-item">
76 + <el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
77 + <p style="margin-top: 1rem;">atS三型特决井天</p>
78 + </div>
79 + <div class="product-item">
80 + <el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
81 + <p style="margin-top: 1rem;">atS三型特决井天</p>
82 + </div>
83 + <div class="product-item">
84 + <el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
85 + <p style="margin-top: 1rem;">atS三型特决井天</p>
86 + </div>
87 + </div>
88 + <div style="display: flex; justify-content: center; margin-top: 2rem;">
89 + <hager-more></hager-more>
90 + </div>
91 + </hager-box>
92 + <hager-box class="box-2n">
93 + <hager-h1 title="最新资讯" sub="News"></hager-h1>
94 + <div class="news-container">
95 + <el-row :gutter="0">
96 + <el-col :span="12" style="height: 25rem;">
97 + <img style="width: 100%; height: 100%; border-radius: 5px;object-fit: cover;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="News Image 1">
98 + </el-col>
99 + <el-col :span="12" style="background-color: #FFF; height: 25rem;">
100 + <div style="padding: 3rem;">
101 + <div style="font-weight: bold; font-size: 1.25rem;">获奖+1！海格电气荣获2023酒店文旅优秀国际标⋯</div>
102 + <p>o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast</p>
103 + <p style="margin: 2rem 0;">11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整</p>
104 + <i class="el-icon-right"></i>
105 + </div>
106 + </el-col>
107 + </el-row>
108 + <el-row :gutter="0">
109 + <el-col :span="12" style="background-color: #FFF; height: 25rem;">
110 + <div style="padding: 3rem;">
111 + <div style="font-weight: bold; font-size: 1.25rem;">获奖+1！海格电气荣获2023酒店文旅优秀国际标⋯</div>
112 + <p>o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast</p>
113 + <p style="margin: 2rem 0;">11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整</p>
114 + <i class="el-icon-right"></i>
115 + </div>
116 + </el-col>
117 + <el-col :span="12" style="height: 25rem;">
118 + <img style="width: 100%; height: 100%; border-radius: 5px;object-fit: cover;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="News Image 1">
119 + </el-col>
120 + </el-row>
121 + </div>
122 + </hager-box>
123 + <hager-box class="box-n">
124 + <hager-h1 title="招聘信息" sub="Recruit"></hager-h1>
125 + <p style="margin: 2rem 0;">心国近心，支注万你。海恰人囫指员光工，然于則行！我们哦这音齐稱央那八我们附行列，共同书与成功的扁草。用你的才罕，刨道九限可能！</p>
126 + <div style="display: flex; justify-content: center; margin-top: 2rem;">
127 + <hager-more></hager-more>
16 </div> 128 </div>
17 </hager-box> 129 </hager-box>
18 </div> 130 </div>
...@@ -21,17 +133,25 @@ ...@@ -21,17 +133,25 @@
21 <script> 133 <script>
22 import mixin from '@/common/mixin'; 134 import mixin from '@/common/mixin';
23 import hagerBox from '@/components/common/hagerBox'; 135 import hagerBox from '@/components/common/hagerBox';
24 -import hagerCarousel from '@/components/hagerCarousel'; 136 +// import hagerCarousel from '@/components/hagerCarousel';
137 +import hagerH1 from '@/components/common/hagerH1.vue';
138 +import hagerMore from '@/components/hagerMore.vue';
25 139
26 export default { 140 export default {
27 mixins: [mixin.init], 141 mixins: [mixin.init],
28 - components: { hagerBox }, 142 + components: { hagerBox, hagerH1, hagerMore },
29 data () { 143 data () {
30 return { 144 return {
31 } 145 }
32 }, 146 },
33 async mounted () { 147 async mounted () {
148 + // const container = document.querySelector('.container');
149 + // const boxes = container.querySelectorAll('.box');
34 150
151 + // // 如果超过11个项目，设置最后一个为特殊样式
152 + // if (boxes.length > 11) {
153 + // boxes[boxes.length - 1].classList.add('other');
154 + // }
35 }, 155 },
36 methods: { 156 methods: {
37 157
...@@ -39,5 +159,89 @@ export default { ...@@ -39,5 +159,89 @@ export default {
39 } 159 }
40 </script> 160 </script>
41 161
42 -<style lang="less" scoped> 162 +<style lang="less">
163 +.el-carousel__item .item {
164 + opacity: 0.75;
165 + margin: 0;
166 +}
167 +
168 +.el-carousel__item:nth-child(2n) {
169 + background-color: #99a9bf;
170 +}
171 +
172 +.el-carousel__item:nth-child(2n+1) {
173 + background-color: #d3dce6;
174 +}
175 +
176 +.el-carousel__indicator.is-active button {
177 + background-color: #EE6D10;
178 +}
179 +
180 +.hager-container {
181 + .box-n {
182 + background-color: #fff;
183 + padding: 2rem 0;
184 + }
185 + .box-2n {
186 + background-color: #f1f1f1;
187 + padding: 2rem 0;
188 + }
189 + .hager-solution {
190 + margin-top: 2rem;
191 + display: grid;
192 + grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
193 + gap: 1.5rem; /* 每个项目之间的间距 */
194 + .solution-item {
195 + position: relative;
196 + height: 12rem;
197 + padding: 1.5rem;
198 + text-align: center;
199 + color: #FFF;
200 + border-radius: 8px;
201 + background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
202 + background-size: cover;
203 + background-position: center;
204 + transition: transform 0.3s ease-in-out;
205 + &:hover {
206 + transform: scale(1.05);
207 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
208 + cursor: pointer;
209 + }
210 + &.other {
211 + background-color: #e0f7ff; /* 特殊的样式 */
212 + color: #007bff;
213 + font-weight: bold;
214 + line-height: 8rem;
215 + background-image: none;
216 + }
217 + p {
218 + position: absolute;
219 + bottom: 0;
220 + left: 0;
221 + right: 0;
222 + height: 2rem;
223 + background-color: rgba(0, 0, 0, 0.2);
224 + line-height: 2rem;
225 + }
226 + }
227 + }
228 + .hager-product-center {
229 + margin-top: 2rem;
230 + display: grid;
231 + grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
232 + gap: 1.5rem; /* 每个项目之间的间距 */
233 + .product-item {
234 + height: auto;
235 + padding: 1.5rem;
236 + text-align: center;
237 + color: #333;
238 + border-radius: 8px;
239 + background-color: #f3f3f3;
240 + }
241 + }
242 + .news-container {
243 +
244 + }
245 +
246 +}
43 </style> 247 </style>
......