Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
91eefa08 1 parent 72710ebe

解决方案详情页内容调整

Inline Side-by-side
Showing 5 changed files with 205 additions and 38 deletions
1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:36:06 2 * @Date: 2024-09-26 13:36:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-16 13:58:23 4 + * @LastEditTime: 2024-10-16 17:07:50
5 * @FilePath: /hager/src/App.vue 5 * @FilePath: /hager/src/App.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -101,4 +101,22 @@ body { ...@@ -101,4 +101,22 @@ body {
101 display: flex; 101 display: flex;
102 justify-content: center; 102 justify-content: center;
103 } 103 }
104 +
105 +
106 +.el-carousel__item .item {
107 + opacity: 0.75;
108 + margin: 0;
109 +}
110 +
111 +.el-carousel__item:nth-child(2n) {
112 + background-color: #99a9bf;
113 +}
114 +
115 +.el-carousel__item:nth-child(2n+1) {
116 + background-color: #d3dce6;
117 +}
118 +
119 +.el-carousel__indicator.is-active button {
120 + background-color: #EE6D10;
121 +}
104 </style> 122 </style>
......
1 <!-- 1 <!--
2 * @Date: 2024-10-16 12:04:24 2 * @Date: 2024-10-16 12:04:24
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-16 14:50:46 4 + * @LastEditTime: 2024-10-16 17:15:57
5 * @FilePath: /hager/src/components/common/hagerService.vue 5 * @FilePath: /hager/src/components/common/hagerService.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-service-page"> 9 <div class="hager-service-page">
10 - <hager-box v-if="!is_xs" class="box-n" style="padding-top: 0;"> 10 + <hager-box v-if="!is_xs" class="" style="padding: 2rem 0;">
11 <hager-h1 title="我们的服务" sub="Service Advantage" style="margin-bottom: 2rem;"></hager-h1> 11 <hager-h1 title="我们的服务" sub="Service Advantage" style="margin-bottom: 2rem;"></hager-h1>
12 <div class="hager-service-list"> 12 <div class="hager-service-list">
13 <el-row :gutter="50"> 13 <el-row :gutter="50">
......
1 <!-- 1 <!--
2 * @Date: 2024-09-29 16:27:30 2 * @Date: 2024-09-29 16:27:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-10 15:17:58 4 + * @LastEditTime: 2024-10-16 17:24:19
5 * @FilePath: /hager/src/components/hagerHCarousel.vue 5 * @FilePath: /hager/src/components/hagerHCarousel.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
......
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-10-16 13:57:25 4 + * @LastEditTime: 2024-10-16 17:41:25
5 * @FilePath: /hager/src/views/index.vue 5 * @FilePath: /hager/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -362,9 +362,9 @@ export default { ...@@ -362,9 +362,9 @@ export default {
362 nextProductBtn () { 362 nextProductBtn () {
363 this.$refs.myProductSwiper.$swiper.slideNext(); 363 this.$refs.myProductSwiper.$swiper.slideNext();
364 }, 364 },
365 - onSolutionSlideChange (swiper) { 365 + onSolutionSlideChange () {
366 - this.activeSolutionIndex = swiper.activeIndex; 366 + this.activeSolutionIndex = this.$refs.mySolutionSwiper.$swiper.activeIndex;
367 - const isEnd = swiper.isEnd; 367 + const isEnd = this.$refs.mySolutionSwiper.$swiper.isEnd;
368 368
369 if (isEnd) { 369 if (isEnd) {
370 this.reach_solution_end = true; 370 this.reach_solution_end = true;
...@@ -372,9 +372,9 @@ export default { ...@@ -372,9 +372,9 @@ export default {
372 this.reach_solution_end = false; 372 this.reach_solution_end = false;
373 } 373 }
374 }, 374 },
375 - onProductSlideChange (swiper) { 375 + onProductSlideChange () {
376 - this.activeProductIndex = swiper.activeIndex; 376 + this.activeProductIndex = this.$refs.myProductSwiper.$swiper.activeIndex;
377 - const isEnd = swiper.isEnd; 377 + const isEnd = this.$refs.myProductSwiper.$swiper.isEnd;
378 378
379 if (isEnd) { 379 if (isEnd) {
380 this.reach_product_end = true; 380 this.reach_product_end = true;
...@@ -387,23 +387,6 @@ export default { ...@@ -387,23 +387,6 @@ export default {
387 </script> 387 </script>
388 388
389 <style lang="less"> 389 <style lang="less">
390 -.el-carousel__item .item {
391 - opacity: 0.75;
392 - margin: 0;
393 -}
394 -
395 -.el-carousel__item:nth-child(2n) {
396 - background-color: #99a9bf;
397 -}
398 -
399 -.el-carousel__item:nth-child(2n+1) {
400 - background-color: #d3dce6;
401 -}
402 -
403 -.el-carousel__indicator.is-active button {
404 - background-color: #EE6D10;
405 -}
406 -
407 .hager-container { 390 .hager-container {
408 .box-n { 391 .box-n {
409 background-color: #fff; 392 background-color: #fff;
......
1 <!-- 1 <!--
2 * @Date: 2024-09-29 15:49:27 2 * @Date: 2024-09-29 15:49:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-16 11:00:12 4 + * @LastEditTime: 2024-10-16 17:42:18
5 * @FilePath: /hager/src/views/solution/detail.vue 5 * @FilePath: /hager/src/views/solution/detail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-solution-detail"> 9 <div class="hager-solution-detail">
10 - <el-image :style="{width: '100%', height: top_img_height}" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image> 10 + <hager-box class="top-img" :style="{ height: top_img_height, backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner03@2x.png)' }">
11 + <div v-if="!is_xs" class="banner-text-wrapper top-center">
12 + <div class="text">
13 + <p class="title">学校解决方案</p>
14 + <p class="sub">Campus Solution</p>
15 + </div>
16 + <div class="text-sub">
17 + 海格用丰富的行业知识和应用经验，为多个行业提供先进的数字化解决方案。
18 + </div>
19 + </div>
20 + </hager-box>
11 <hager-box class="box-n"> 21 <hager-box class="box-n">
12 <el-row :gutter="0"> 22 <el-row :gutter="0">
13 <el-col :span="12" style="height: 25rem;"> 23 <el-col :span="12" style="height: 25rem;">
14 - <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"> 24 + <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
25 + <el-carousel-item v-for="(item, index) in banner_list" :key="index" class="carousel-img">
26 + <el-image @click="onClickImg(item.src)" style="width: 100%; height: 100%;" fit="fill" :src="item.src"></el-image>
27 + </el-carousel-item>
28 + </el-carousel>
15 </el-col> 29 </el-col>
16 <el-col class="brief-introduction" :span="12"> 30 <el-col class="brief-introduction" :span="12">
17 <div class="intro-box"> 31 <div class="intro-box">
...@@ -21,8 +35,6 @@ ...@@ -21,8 +35,6 @@
21 </div> 35 </div>
22 </el-col> 36 </el-col>
23 </el-row> 37 </el-row>
24 - <hager-h1 title="使用产品" sub="Our advantages" style="margin: 2rem 0;"></hager-h1>
25 - <hager-h-carousel></hager-h-carousel>
26 </hager-box> 38 </hager-box>
27 <hager-box class="box-2n"> 39 <hager-box class="box-2n">
28 <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1> 40 <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
...@@ -41,11 +53,28 @@ ...@@ -41,11 +53,28 @@
41 </div> 53 </div>
42 </hager-box> 54 </hager-box>
43 <hager-box class="box-n"> 55 <hager-box class="box-n">
44 - <hager-h1 title="我们的优势" sub="OUR ADVANTAGES" style="margin: 2rem 0;"></hager-h1> 56 + <hager-h1 title="使用产品" sub="Our advantages" style="margin: 2rem 0;"></hager-h1>
45 - <div> 57 + <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
46 - 海格突出的优势来自于我们以客户为中心的价值观和互惠互利，共同发展的经营原则，旺盛捷非常善于倾听和理解客户的需求和关注，我们提供有效的解决方案，整合各个行业的最佳资源，我们的产品和服务使我们与传统的EMS不同，我们更多地关注产品质量与产品数量的有机统一；我们不仅向客户分享我们最好的行业经验，还分享制造成本节约的成果，与传统EMS相比，无沦订单大小，我们在成本、质量、灵活性、技术和应方面都具有明显的优势： 58 + <swiper-slide v-for="(item, index) in product_list" :key="index">
59 + <div class="card-box" @click="goToProduct(item)">
60 + <div class="card-image-wrapper">
61 + <el-image :src="item.src" fit="fit"></el-image>
62 + </div>
63 + <p class="card-title">{{ item.title }}</p>
64 + </div>
65 + </swiper-slide>
66 + </swiper>
67 + <div class="hager-product-center-more">
68 + <hager-more></hager-more>
69 + <div class="xs-control">
70 + <div>
71 + <i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
72 + <i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
73 + </div>
74 + </div>
47 </div> 75 </div>
48 </hager-box> 76 </hager-box>
77 + <hager-service style="background-color: #f1f1f1;"></hager-service>
49 </div> 78 </div>
50 </template> 79 </template>
51 80
...@@ -55,12 +84,23 @@ import hagerBox from '@/components/common/hagerBox'; ...@@ -55,12 +84,23 @@ import hagerBox from '@/components/common/hagerBox';
55 import hagerH1 from '@/components/common/hagerH1.vue'; 84 import hagerH1 from '@/components/common/hagerH1.vue';
56 import hagerMore from '@/components/hagerMore.vue'; 85 import hagerMore from '@/components/hagerMore.vue';
57 import hagerHCarousel from '@/components/hagerHCarousel.vue'; 86 import hagerHCarousel from '@/components/hagerHCarousel.vue';
87 +import hagerService from '@/components/common/hagerService.vue';
58 88
59 export default { 89 export default {
60 - components: { hagerBox, hagerH1, hagerMore, hagerHCarousel }, 90 + components: { hagerBox, hagerH1, hagerMore, hagerHCarousel, hagerService },
61 mixins: [mixin.init], 91 mixins: [mixin.init],
62 data () { 92 data () {
63 return { 93 return {
94 + banner_list: [
95 + {
96 + src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
97 + url: ''
98 + },
99 + {
100 + src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
101 + url: ''
102 + }
103 + ],
64 success_data_list: [{ 104 success_data_list: [{
65 title: '厦门翔城中小学', 105 title: '厦门翔城中小学',
66 sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。', 106 sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
...@@ -85,20 +125,107 @@ export default { ...@@ -85,20 +125,107 @@ export default {
85 title: '厦门翔城中小学', 125 title: '厦门翔城中小学',
86 sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。', 126 sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
87 img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 127 img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
88 - }] 128 + }],
129 + product_list: [{
130 + src: 'https://cdn.ipadbiz.cn/hager/img/KNX%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6%E6%A8%A1%E5%9D%97@2x.png',
131 + title: 'hw01 空气断路器'
132 + }, {
133 + src: 'https://cdn.ipadbiz.cn/hager/img/ats%E8%87%AA%E5%8A%A8%E8%BD%AC%E6%8D%A2%E5%BC%80%E5%85%B3@2x.png',
134 + title: 'h3+ 智能塑壳断路器'
135 + }, {
136 + src: 'https://cdn.ipadbiz.cn/hager/img/h3+%20%E6%99%BA%E8%83%BD%E5%A1%91%E5%A3%B3%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
137 + title: 'ats自动转换开关'
138 + }, {
139 + src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
140 + title: 'KNX智能控制模块'
141 + }, {
142 + src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
143 + title: 'KNX智能控制模块'
144 + }],
145 + swiperOption: {
146 + slidesPerView: 2,
147 + spaceBetween: 50,
148 + preventClicks : true,
149 + slideToClickedSlide: false,
150 + touchRatio: 0,
151 + breakpoints: {
152 + 1024: {
153 + slidesPerView: 4,
154 + spaceBetween: 40
155 + },
156 + 768: {
157 + slidesPerView: 3,
158 + spaceBetween: 30
159 + },
160 + 640: {
161 + slidesPerView: 2,
162 + spaceBetween: 20
163 + },
164 + 320: {
165 + slidesPerView: 2,
166 + spaceBetween: 10
167 + },
168 + 160: {
169 + slidesPerView: 1,
170 + spaceBetween: 0
171 + }
172 + }
173 + },
174 + activeSolutionIndex: 0,
175 + activeProductIndex: 0,
176 + reach_product_end: false,
89 } 177 }
90 }, 178 },
91 mounted () { 179 mounted () {
92 180
93 }, 181 },
94 methods: { 182 methods: {
183 + onClickImg (item) {
184 + window.open(item, '_blank');
185 + },
186 + goToProduct (v) {
187 + this.$router.push({
188 + path: '/product/detail'
189 + });
190 + },
191 + prevProductBtn () {
192 + this.$refs.myProductSwiper.$swiper.slidePrev();
193 + },
194 + nextProductBtn () {
195 + this.$refs.myProductSwiper.$swiper.slideNext();
196 + },
197 + onProductSlideChange () {
198 + this.activeProductIndex = this.$refs.myProductSwiper.$swiper.activeIndex;
199 + const isEnd = this.$refs.myProductSwiper.$swiper.isEnd;
95 200
201 + if (isEnd) {
202 + this.reach_product_end = true;
203 + } else {
204 + this.reach_product_end = false;
205 + }
206 + },
96 } 207 }
97 } 208 }
98 </script> 209 </script>
99 210
100 <style lang="less" scoped> 211 <style lang="less" scoped>
101 .hager-solution-detail { 212 .hager-solution-detail {
213 + .top-img {
214 + width: 100%;
215 + background-repeat: no-repeat;
216 + background-size: cover;
217 + background-position: center;
218 + position: relative;
219 + .top-center {
220 + position: absolute;
221 + transform: translateY(100%); /* 垂直与水平居中 */
222 + }
223 + }
224 + .carousel-img {
225 + &:hover {
226 + cursor: zoom-in;
227 + }
228 + }
102 .brief-introduction { 229 .brief-introduction {
103 background-color: #FFF; 230 background-color: #FFF;
104 height: 25rem; 231 height: 25rem;
...@@ -178,5 +305,44 @@ export default { ...@@ -178,5 +305,44 @@ export default {
178 } 305 }
179 } 306 }
180 } 307 }
308 +
309 + .xs-control {
310 + display: flex;
311 + justify-content: flex-end;
312 + margin-top: 1rem;
313 + i {
314 + font-size: 1.35rem;
315 + color: #EE6D10;
316 + &:hover {
317 + cursor: pointer;
318 + }
319 + &.disabled {
320 + color: #ccc;
321 + }
322 + }
323 + }
324 +
325 + .card-box {
326 + .card-image-wrapper {
327 + background-color: #F3F3F3;
328 + border-radius: 5px;
329 + transition: transform 0.3s ease-in-out;
330 + &:hover {
331 + transform: scale(1.05);
332 + // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
333 + cursor: pointer;
334 + }
335 + }
336 + .card-title {
337 + color: @secondary-color;
338 + font-weight: bold;
339 + margin: 1rem 0;
340 + &:hover {
341 + cursor: pointer;
342 + text-decoration: underline;
343 + }
344 + }
345 + }
346 +
181 } 347 }
182 </style> 348 </style>
......