Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b2fc0acc 1 parent f038e693

客户新需求-解决方案详情页头部设计改动

Inline Side-by-side
Showing 2 changed files with 562 additions and 1 deletions
1 /* 1 /*
2 * @Date: 2024-08-26 10:42:15 2 * @Date: 2024-08-26 10:42:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-12-12 14:54:14 4 + * @LastEditTime: 2024-12-27 16:38:24
5 * @FilePath: /hager/src/route.js 5 * @FilePath: /hager/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -78,6 +78,24 @@ export default [{ ...@@ -78,6 +78,24 @@ export default [{
78 }, 78 },
79 children: [] 79 children: []
80 }, { 80 }, {
81 + path: '/solution/detail_test/:id/:timestamp',
82 + name: '解决方案详情1-test',
83 + component: () => import('@/views/solution/detail_test'),
84 + meta: {
85 + title: '解决方案 | Hager China',
86 + tag: 'solution'
87 + },
88 + children: []
89 +}, {
90 + path: '/solution/detail_test/:id/:current_index/:timestamp',
91 + name: '解决方案详情2-test',
92 + component: () => import('@/views/solution/detail_test'),
93 + meta: {
94 + title: '解决方案 | Hager China',
95 + tag: 'solution'
96 + },
97 + children: []
98 +}, {
81 path: '/solution/case/:id/:current_index?', 99 path: '/solution/case/:id/:current_index?',
82 name: '成功案例', 100 name: '成功案例',
83 component: () => import('@/views/solution/case'), 101 component: () => import('@/views/solution/case'),
......
1 +<!--
2 + * @Date: 2024-09-29 15:49:27
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-12-27 17:58:12
5 + * @FilePath: /hager/src/views/solution/detail_test.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="hager-solution-detail">
10 + <hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }"></hager-box>
11 + <hager-box>
12 + <hager-h1 :title="case_info.category_name" :sub="case_info.category_name_en" style="margin: 3vw 0 1rem; text-align: center;"></hager-h1>
13 + <div class="intro-box" style="text-align: center;">
14 + <p v-html="category_description"></p>
15 + </div>
16 + </hager-box>
17 + <hager-box v-if="case_list.length > 1">
18 + <div class="hager-solution-detail-nav">
19 + <div class="nav" v-for="(item, index) in case_list" :key="index">
20 + <div @click="changeCase(item, index)" :class="[current_id == item.id ? 'current-nav' : '', 'detail-nav']">{{ item.category_name }}</div>
21 + </div>
22 + </div>
23 + </hager-box>
24 + <hager-box v-if="!is_xs" class="box-n">
25 + <hager-h1 title="典型配电系统图" sub="Typical Electrical Distribution System" style="margin: 2rem 0;"></hager-h1>
26 + <div style="display: flex; justify-content:space-between; align-items: center;">
27 + <div @click="onClickImg(item.value)" v-for="(item, index) in case_img" :key="index" class="carousel-img-test" :style="{backgroundImage: 'url(' + item.value + ')'}"></div>
28 + </div>
29 + </hager-box>
30 + <div v-else>
31 + <hager-h1 title="典型配电系统图" sub="Typical Electrical Distribution System" style="margin: 2rem 1rem;"></hager-h1>
32 + <div style="height: 25rem; margin-top: 2rem;">
33 + <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
34 + <el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img">
35 + <el-image @click="onClickImg(item.value)" style="width: 100%; height: 100%;" fit="cover" :src="item.value"></el-image>
36 + </el-carousel-item>
37 + </el-carousel>
38 + </div>
39 + </div>
40 + <hager-box class="box-2n">
41 + <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
42 + <div v-if="!is_xs">
43 + <div class="hager-success-cases">
44 + <div @click="goToCase(item)" class="card" v-for="(item, index) in success_data_list" :key="index">
45 + <img :src="item.cover" alt="图片" class="card-image-pc">
46 + <div class="card-content-pc">
47 + <h3>{{ item.post_title }}</h3>
48 + <p v-html="item.post_description"></p>
49 + </div>
50 + <i class="el-icon-right pc"></i>
51 + </div>
52 + </div>
53 + </div>
54 + <div v-else>
55 + <swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange">
56 + <swiper-slide v-for="(item, index) in success_data_list" :key="index">
57 + <div @click="goToCase(item)" class="hager-success-cases xs">
58 + <div class="card">
59 + <img :src="item.cover" alt="图片" class="card-image">
60 + <div class="card-content">
61 + <!-- <h3 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.post_title }}</h3> -->
62 + <h3 class="clamp-title">{{ item.post_title }}</h3>
63 + <!-- <p class="clamp-text" v-html="item.post_description "></p> -->
64 + <i class="el-icon-right"></i>
65 + </div>
66 + </div>
67 + </div>
68 + </swiper-slide>
69 + </swiper>
70 + <div v-if="success_data_list.length > SuccessSlidesPerView || (is_xs && success_data_list.length > 2)" class="hager-product-center-more xs">
71 + <!-- <hager-more></hager-more> -->
72 + <div class="xs-control">
73 + <div>
74 + <i :class="['el-icon-arrow-left', activeSuccessIndex === 0 ? 'disabled' : '']" @click="prevSuccessBtn()"></i>
75 + <i :class="['el-icon-arrow-right', reach_success_end ? 'disabled' : '']" @click="nextSuccessBtn()"></i>
76 + </div>
77 + </div>
78 + </div>
79 + </div>
80 + </hager-box>
81 + <hager-box class="box-n">
82 + <hager-h1 title="使用产品" sub="Products" style="margin: 2rem 0;"></hager-h1>
83 + <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
84 + <swiper-slide v-for="(item, index) in product_list" :key="index">
85 + <div class="card-box" @click="goToProduct(item)">
86 + <div class="card-image-wrapper">
87 + <!-- <el-image :src="item.src" fit="fit"></el-image> -->
88 + <img :src="item.cover" style="">
89 + </div>
90 + <p class="card-title">{{ item.post_title }}</p>
91 + </div>
92 + </swiper-slide>
93 + </swiper>
94 + <div v-if="product_list.length > productSlidesPerView || (is_xs && product_list.length > 2)" class="hager-product-center-more">
95 + <!-- <hager-more></hager-more> -->
96 + <div class="xs-control">
97 + <div>
98 + <i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
99 + <i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
100 + </div>
101 + </div>
102 + </div>
103 + </hager-box>
104 + <hager-service style="background-color: #f1f1f1;"></hager-service>
105 + </div>
106 +</template>
107 +
108 +<script>
109 +import mixin from 'common/mixin';
110 +import hagerBox from '@/components/common/hagerBox';
111 +import hagerH1 from '@/components/common/hagerH1.vue';
112 +import hagerMore from '@/components/hagerMore.vue';
113 +import hagerHCarousel from '@/components/hagerHCarousel.vue';
114 +import hagerService from '@/components/common/hagerService.vue';
115 +import $ from 'jquery';
116 +import { getSolutionCaseAPI } from "@/api/hager.js";
117 +
118 +function clampText(element, lines) {
119 + var $element = $(element);
120 + var lineHeight = parseFloat($element.css('line-height')); // 获取行高
121 + var maxHeight = lineHeight * lines; // 计算三行的最大高度
122 +
123 + // 如果内容高度超过三行，进行截断
124 + if ($element.height() > maxHeight) {
125 + var originalText = $element.text(); // 获取原始文本
126 + var truncatedText = originalText;
127 +
128 + // 逐字截断文本，直到高度小于或等于三行
129 + while ($element.height() > maxHeight) {
130 + truncatedText = truncatedText.slice(0, -1); // 每次去掉最后一个字符
131 + $element.text(truncatedText + '...'); // 添加省略号
132 + }
133 + }
134 +}
135 +
136 +export default {
137 + metaInfo: {
138 + // title: '海格电气官方网站',
139 + meta: [
140 + { name: 'keyword', content: '' },
141 + { name: 'description', content: '' },
142 + ]
143 + },
144 + components: { hagerBox, hagerH1, hagerMore, hagerHCarousel, hagerService },
145 + mixins: [mixin.init],
146 + data () {
147 + return {
148 + case_info: {},
149 + case_banner: '',
150 + case_img: [],
151 + banner_list: [],
152 + success_data_list: [],
153 + product_list: [],
154 + swiperOption: {
155 + slidesPerView: 2,
156 + spaceBetween: 50,
157 + preventClicks : true,
158 + slideToClickedSlide: false,
159 + touchRatio: 0,
160 + breakpoints: {
161 + 1024: {
162 + slidesPerView: 4,
163 + spaceBetween: 40
164 + },
165 + 768: {
166 + slidesPerView: 3,
167 + spaceBetween: 30
168 + },
169 + 640: {
170 + slidesPerView: 2,
171 + spaceBetween: 20
172 + },
173 + 320: {
174 + slidesPerView: 2,
175 + spaceBetween: 10
176 + },
177 + 160: {
178 + slidesPerView: 1,
179 + spaceBetween: 0
180 + }
181 + }
182 + },
183 + activeSuccessIndex: 0,
184 + activeProductIndex: 0,
185 + reach_success_end: false,
186 + reach_product_end: false,
187 + SuccessSlidesPerView: 4,
188 + productSlidesPerView: 4,
189 + case_list: [],
190 + current_index: 0,
191 + current_id: '',
192 + category_description: '',
193 + }
194 + },
195 + mounted () {
196 + this.initialize();
197 + },
198 + watch: {
199 + '$route.params.id' (old, val) {
200 + if (old !== val) {
201 + this.initialize();
202 + }
203 + }
204 + },
205 + methods: {
206 + async initialize () {
207 + const { code, data } = await getSolutionCaseAPI({ cid: this.$route.params.id });
208 + if (code) {
209 + this.case_info = data;
210 + this.case_banner = data.file?.banner ? data.file?.banner[0] : 'https://cdn.ipadbiz.cn/hager/banner/banner08.png';
211 + this.case_list = data.list;
212 + this.category_description = data.category_description;
213 + this.current_index = this.$route.params.current_index ? +this.$route.params.current_index : 0;
214 + this.current_id = this.case_list[this.current_index]['id'];
215 + this.success_data_list = this.case_list[this.current_index].list ?? [];
216 + // this.category_description = this.case_list[this.current_index].category_description ?? '';
217 + this.case_img = this.case_list[this.current_index].file?.img ? this.case_list[this.current_index].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
218 + this.product_list = this.case_list[this.current_index].product ?? [];
219 + }
220 + this.$nextTick(() => {
221 + this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
222 + // breakpoint时 显示的条数
223 + this.productSlidesPerView = swiper.slidesPerView
224 + });
225 +
226 + clampText('.clamp-text', 3); // 限制显示三行文本
227 + });
228 + },
229 + onClickImg (item) {
230 + window.open(item, '_blank');
231 + },
232 + goToProduct (v) {
233 + this.$router.push({
234 + path: `/product/detail/${v.id}`,
235 + });
236 + },
237 + goToCase (v) {
238 + this.$router.push({
239 + path: `/solution/case/${v.id}/${this.current_index}`,
240 + });
241 + },
242 + prevProductBtn () {
243 + this.$refs.myProductSwiper.$swiper.slidePrev();
244 + },
245 + nextSuccessBtn () {
246 + this.$refs.mySuccessSwiper.$swiper.slideNext();
247 + },
248 + prevSuccessBtn () {
249 + this.$refs.mySuccessSwiper.$swiper.slidePrev();
250 + },
251 + nextProductBtn () {
252 + this.$refs.myProductSwiper.$swiper.slideNext();
253 + },
254 + onProductSlideChange () {
255 + this.activeProductIndex = this.$refs.myProductSwiper.$swiper.activeIndex;
256 + const isEnd = this.$refs.myProductSwiper.$swiper.isEnd;
257 +
258 + if (isEnd) {
259 + this.reach_product_end = true;
260 + } else {
261 + this.reach_product_end = false;
262 + }
263 + },
264 + onSuccessSlideChange () {
265 + this.activeSuccessIndex = this.$refs.mySuccessSwiper.$swiper.activeIndex;
266 + const isEnd = this.$refs.mySuccessSwiper.$swiper.isEnd;
267 +
268 + if (isEnd) {
269 + this.reach_success_end = true;
270 + } else {
271 + this.reach_success_end = false;
272 + }
273 + },
274 + changeCase (v, idx) {
275 + this.current_index = idx;
276 + this.current_id = this.case_list[idx]['id'];
277 + this.success_data_list = this.case_list[idx].list ?? [];
278 + // this.category_description = this.case_list[idx].category_description ?? '';
279 + this.case_img = this.case_list[idx].file?.img ? this.case_list[idx].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
280 + this.product_list = this.case_list[idx].product ?? [];
281 + this.activeSuccessIndex = 0
282 + this.activeProductIndex = 0
283 + this.reach_product_end = false
284 + this.reach_success_end = false
285 +
286 + this.$nextTick(() => {
287 + this.$refs.myProductSwiper.$swiper?.slideTo(0);
288 + clampText('.clamp-text', 3); // 限制显示三行文本
289 +
290 + })
291 + // 记录点击的分类ID，用于返回定位到该分类
292 + this.$router.push({
293 + path: `/solution/detail_test/${this.$route.params.id}/${this.current_index}/${Date.now()}`,
294 + });
295 + }
296 + }
297 +}
298 +</script>
299 +
300 +<style lang="less" scoped>
301 +.hager-solution-detail {
302 + .top-img {
303 + width: 100%;
304 + background-repeat: no-repeat;
305 + background-size: cover;
306 + background-position: center;
307 + position: relative;
308 + height: 25rem;
309 + .top-center {
310 + position: absolute;
311 + transform: translateY(100%); /* 垂直与水平居中 */
312 + }
313 + }
314 + .carousel-img {
315 + &:hover {
316 + cursor: zoom-in;
317 + }
318 + }
319 + .carousel-img-test{
320 + width: 49%;
321 + border-radius: 5px;
322 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
323 + background-size: cover;
324 + height: 25vw;
325 + &:hover {
326 + cursor: zoom-in;
327 + }
328 + }
329 + .brief-introduction {
330 + background-color: #FFF;
331 + height: 25rem;
332 + display: flex;
333 + align-items: center;
334 + &.xs {
335 + height: auto;
336 + }
337 + .intro-box {
338 + padding: 0 3rem;
339 + overflow: auto;
340 + // height: 25rem;
341 + box-sizing:border-box;
342 + display: flex;
343 + // align-items: center;
344 + margin-top: 2rem;
345 + &.xs {
346 + padding: 2rem;
347 + display: block;
348 + overflow: visible;
349 + }
350 + i {
351 + color: @primary-color;
352 + font-size: 1.5rem;
353 + }
354 + }
355 + }
356 + .hager-success-cases {
357 + margin-top: 2rem;
358 + display: flex;
359 + flex-wrap: wrap;
360 + // justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
361 + // gap: 1vw;
362 + &.xs {
363 + display: block;
364 + }
365 + .card {
366 + flex: 0 0 32.33%; /* 宽度为 1/3 */
367 + margin-bottom: 0.25vw; /* 在元素之间添加间距 */
368 + box-sizing: border-box; /* 防止 padding 或 margin 影响宽度 */
369 + border-radius: 10px;
370 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
371 + overflow: hidden;
372 + background-color: #fff;
373 + transition: transform 0.3s ease-in-out;
374 + position: relative;
375 + margin-right: 0.75rem;
376 + margin-bottom: 0.75rem;
377 + &:nth-child(3n) {
378 + margin-right: 0;
379 + }
380 + &:hover {
381 + transform: scale(1.05);
382 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
383 + cursor: pointer;
384 + }
385 + .card-image-pc {
386 + width: 100%;
387 + height: 15rem;
388 + object-fit: cover;
389 + }
390 + .card-image {
391 + width: 100%;
392 + height: 12rem;
393 + object-fit: cover;
394 + }
395 +
396 + .card-content-pc {
397 + padding: 1rem 1.5rem;
398 + margin-bottom: 2rem;
399 + h3 {
400 + color: @secondary-color;
401 + font-size: 1.25rem;
402 + margin: 0;
403 + margin-bottom: 0.5rem;
404 + }
405 + p {
406 + font-size: 0.95rem;
407 + line-height: 1.8;
408 + }
409 + }
410 + .card-content {
411 + padding: 1rem 1.5rem;
412 + .clamp-title {
413 + color: @secondary-color;
414 + font-size: 1.25rem;
415 + margin: 0;
416 + margin-bottom: 0.5rem;
417 + min-height: calc(2 * 1.5em); /* 假设行高为 1.5em */
418 + line-height: 1.5em;
419 + display: -webkit-box;
420 + -webkit-box-orient: vertical;
421 + -webkit-line-clamp: 2; /* 显示两行 */
422 + overflow: hidden;
423 + }
424 + p {
425 + font-size: 0.95rem;
426 + line-height: 1.8;
427 + }
428 + i {
429 + margin-top: 0.5rem;
430 + color: @primary-color;
431 + font-size: 1.5rem;
432 + }
433 + }
434 + i.pc {
435 + position: absolute;
436 + bottom: 0;
437 + display: inline-flex;
438 + margin-top: 0.5rem;
439 + margin-left: 1.5rem;
440 + margin-bottom: 1rem;
441 + color: @primary-color;
442 + font-size: 1.5rem;
443 + }
444 +
445 + .card p {
446 + font-size: 14px;
447 + color: #333;
448 + line-height: 1.6;
449 + margin-bottom: 15px;
450 + }
451 + }
452 + }
453 +
454 + .xs-control {
455 + display: flex;
456 + justify-content: flex-end;
457 + margin-top: 1rem;
458 + i {
459 + font-size: 1.35rem;
460 + color: #EE6D10;
461 + &:hover {
462 + cursor: pointer;
463 + }
464 + &.disabled {
465 + color: #ccc;
466 + }
467 + }
468 + }
469 +
470 + .card-box {
471 + .card-image-wrapper {
472 + background-color: #FFF;
473 + border-radius: 5px;
474 + transition: transform 0.3s ease-in-out;
475 + border: 1px solid rgba(0, 0, 0, 0.1);
476 + overflow: hidden;
477 + &:hover {
478 + // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
479 + cursor: pointer;
480 + }
481 + img {
482 + width: 14rem;
483 + margin-left: calc((100% - 14rem) / 2);
484 + height: auto;
485 + }
486 + }
487 + .card-title {
488 + color: @text-color;
489 + font-weight: bold;
490 + margin: 1rem 0;
491 + &:hover {
492 + cursor: pointer;
493 + text-decoration: underline;
494 + }
495 + }
496 + }
497 +
498 + .hager-solution-detail-nav {
499 + background-color: #F3F3F3;
500 + display: flex;
501 + align-items: center;
502 + justify-content:space-around;
503 + margin-top: 2rem;
504 + .nav {
505 + flex: 1;
506 + // text-align: center;
507 + padding: 1.5rem 10vw;
508 + position: relative;
509 + &:not(:last-child) {
510 + &::after {
511 + content: '|';
512 + position: absolute;
513 + right: 0rem;
514 + top: 50%;
515 + transform: translateY(-50%);
516 + color: #adadad;
517 + font-size: 1rem;
518 + }
519 + }
520 + &:first-child {
521 + text-align: right;
522 + }
523 + &:last-child {
524 + text-align: left;
525 + }
526 + }
527 + .detail-nav {
528 + display: inline;
529 + color: @text-color;
530 + font-size: 1.2rem;
531 + padding: 1.4rem;
532 + &:hover {
533 + cursor: pointer;
534 + }
535 + }
536 + .current-nav {
537 + color: @secondary-color;
538 + border-bottom: 3px solid #ED6C00;
539 + font-weight: bold;
540 + }
541 + }
542 +}
543 +</style>