Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b2cd90f7 1 parent 067a6680

把解决方案修改内容修改成正式

Inline Side-by-side
Showing 2 changed files with 62 additions and 60 deletions
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: 2025-01-02 11:25:24 4 + * @LastEditTime: 2025-01-02 17:35:20
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 - <hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }"> 10 + <hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }"></hager-box>
11 - <div class="banner-text-wrapper top-center"> 11 + <hager-box>
12 - <div class="text"> 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 - <p class="title" style="margin-bottom: 0;">{{ case_info.category_name }}</p> 13 + <div class="intro-box" style="text-align: center;">
14 - <p class="sub">{{ case_info.category_name_en }}</p> 14 + <p v-html="category_description"></p>
15 - </div>
16 </div> 15 </div>
17 </hager-box> 16 </hager-box>
18 <hager-box v-if="case_list.length > 1"> 17 <hager-box v-if="case_list.length > 1">
...@@ -23,36 +22,20 @@ ...@@ -23,36 +22,20 @@
23 </div> 22 </div>
24 </hager-box> 23 </hager-box>
25 <hager-box v-if="!is_xs" class="box-n"> 24 <hager-box v-if="!is_xs" class="box-n">
26 - <el-row :gutter="0"> 25 + <hager-h1 title="典型配电系统图" sub="Typical Electrical Distribution System" style="margin: 2rem 0;"></hager-h1>
27 - <el-col :span="12" style="height: 25rem;"> 26 + <div style="display: flex; justify-content:space-between; align-items: center;">
28 - <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;"> 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>
29 - <el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img"> 28 + </div>
30 - <el-image @click="onClickImg(item.value)" style="width: 100%; height: 100%;" fit="cover" :src="item.value"></el-image>
31 - </el-carousel-item>
32 - </el-carousel>
33 - </el-col>
34 - <el-col :span="12" class="brief-introduction">
35 - <div class="intro-box">
36 - <p v-html="category_description"></p>
37 - </div>
38 - </el-col>
39 - </el-row>
40 </hager-box> 29 </hager-box>
41 <div v-else> 30 <div v-else>
31 + <hager-h1 title="典型配电系统图" sub="Typical Electrical Distribution System" style="margin: 2rem 1rem;"></hager-h1>
42 <div style="height: 25rem; margin-top: 2rem;"> 32 <div style="height: 25rem; margin-top: 2rem;">
43 <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;"> 33 <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
44 <el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img"> 34 <el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img">
45 - <el-image @click="onClickImg(item.value)" style="width: 100%; height: 100%;" fit="cover" :src="item.value"></el-image> 35 + <el-image @click="onClickImg(item.value)" style="width: 100%; height: 100%;" fit="contain" :src="item.value"></el-image>
46 </el-carousel-item> 36 </el-carousel-item>
47 </el-carousel> 37 </el-carousel>
48 </div> 38 </div>
49 - <div class="brief-introduction xs">
50 - <div class="intro-box xs">
51 - <hager-h1 :title="case_info.category_name" :sub="case_info.category_name_en"></hager-h1>
52 - <div style="margin: 2rem 0;" v-html="category_description"></div>
53 - <!-- <i class="el-icon-right"></i> -->
54 - </div>
55 - </div>
56 </div> 39 </div>
57 <hager-box class="box-2n"> 40 <hager-box class="box-2n">
58 <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1> 41 <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
...@@ -67,9 +50,6 @@ ...@@ -67,9 +50,6 @@
67 <i class="el-icon-right pc"></i> 50 <i class="el-icon-right pc"></i>
68 </div> 51 </div>
69 </div> 52 </div>
70 - <!-- <div style="display: flex; justify-content: center; margin-top: 2rem;">
71 - <hager-more></hager-more>
72 - </div> -->
73 </div> 53 </div>
74 <div v-else> 54 <div v-else>
75 <swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange"> 55 <swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange">
...@@ -229,10 +209,11 @@ export default { ...@@ -229,10 +209,11 @@ export default {
229 this.case_info = data; 209 this.case_info = data;
230 this.case_banner = data.file?.banner ? data.file?.banner[0].value : 'https://cdn.ipadbiz.cn/hager/banner/banner08.png'; 210 this.case_banner = data.file?.banner ? data.file?.banner[0].value : 'https://cdn.ipadbiz.cn/hager/banner/banner08.png';
231 this.case_list = data.list; 211 this.case_list = data.list;
212 + this.category_description = data.category_description;
232 this.current_index = this.$route.params.current_index ? +this.$route.params.current_index : 0; 213 this.current_index = this.$route.params.current_index ? +this.$route.params.current_index : 0;
233 this.current_id = this.case_list[this.current_index]['id']; 214 this.current_id = this.case_list[this.current_index]['id'];
234 this.success_data_list = this.case_list[this.current_index].list ?? []; 215 this.success_data_list = this.case_list[this.current_index].list ?? [];
235 - this.category_description = this.case_list[this.current_index].category_description ?? ''; 216 + // this.category_description = this.case_list[this.current_index].category_description ?? '';
236 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']; 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'];
237 this.product_list = this.case_list[this.current_index].product ?? []; 218 this.product_list = this.case_list[this.current_index].product ?? [];
238 } 219 }
...@@ -294,7 +275,7 @@ export default { ...@@ -294,7 +275,7 @@ export default {
294 this.current_index = idx; 275 this.current_index = idx;
295 this.current_id = this.case_list[idx]['id']; 276 this.current_id = this.case_list[idx]['id'];
296 this.success_data_list = this.case_list[idx].list ?? []; 277 this.success_data_list = this.case_list[idx].list ?? [];
297 - this.category_description = this.case_list[idx].category_description ?? ''; 278 + // this.category_description = this.case_list[idx].category_description ?? '';
298 this.case_img = this.case_list[idx].file?.img ? this.case_list[idx].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']; 279 this.case_img = this.case_list[idx].file?.img ? this.case_list[idx].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
299 this.product_list = this.case_list[idx].product ?? []; 280 this.product_list = this.case_list[idx].product ?? [];
300 this.activeSuccessIndex = 0 281 this.activeSuccessIndex = 0
...@@ -331,6 +312,18 @@ export default { ...@@ -331,6 +312,18 @@ export default {
331 } 312 }
332 } 313 }
333 .carousel-img { 314 .carousel-img {
315 + background-color: white;
316 + &:hover {
317 + cursor: zoom-in;
318 + }
319 + }
320 + .carousel-img-test{
321 + width: 49%;
322 + border-radius: 5px;
323 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
324 + background-size: contain;
325 + background-repeat: no-repeat;
326 + height: 25vw;
334 &:hover { 327 &:hover {
335 cursor: zoom-in; 328 cursor: zoom-in;
336 } 329 }
......
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: 2025-01-02 11:25:39 4 + * @LastEditTime: 2025-01-02 11:25:24
5 - * @FilePath: /hager/src/views/solution/detail_test.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 - <hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }"></hager-box> 10 + <hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }">
11 - <hager-box> 11 + <div class="banner-text-wrapper top-center">
12 - <hager-h1 :title="case_info.category_name" :sub="case_info.category_name_en" style="margin: 3vw 0 1rem; text-align: center;"></hager-h1> 12 + <div class="text">
13 - <div class="intro-box" style="text-align: center;"> 13 + <p class="title" style="margin-bottom: 0;">{{ case_info.category_name }}</p>
14 - <p v-html="category_description"></p> 14 + <p class="sub">{{ case_info.category_name_en }}</p>
15 + </div>
15 </div> 16 </div>
16 </hager-box> 17 </hager-box>
17 <hager-box v-if="case_list.length > 1"> 18 <hager-box v-if="case_list.length > 1">
...@@ -22,13 +23,22 @@ ...@@ -22,13 +23,22 @@
22 </div> 23 </div>
23 </hager-box> 24 </hager-box>
24 <hager-box v-if="!is_xs" class="box-n"> 25 <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 + <el-row :gutter="0">
26 - <div style="display: flex; justify-content:space-between; align-items: center;"> 27 + <el-col :span="12" style="height: 25rem;">
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 + <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
28 - </div> 29 + <el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img">
30 + <el-image @click="onClickImg(item.value)" style="width: 100%; height: 100%;" fit="cover" :src="item.value"></el-image>
31 + </el-carousel-item>
32 + </el-carousel>
33 + </el-col>
34 + <el-col :span="12" class="brief-introduction">
35 + <div class="intro-box">
36 + <p v-html="category_description"></p>
37 + </div>
38 + </el-col>
39 + </el-row>
29 </hager-box> 40 </hager-box>
30 <div v-else> 41 <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;"> 42 <div style="height: 25rem; margin-top: 2rem;">
33 <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;"> 43 <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"> 44 <el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img">
...@@ -36,6 +46,13 @@ ...@@ -36,6 +46,13 @@
36 </el-carousel-item> 46 </el-carousel-item>
37 </el-carousel> 47 </el-carousel>
38 </div> 48 </div>
49 + <div class="brief-introduction xs">
50 + <div class="intro-box xs">
51 + <hager-h1 :title="case_info.category_name" :sub="case_info.category_name_en"></hager-h1>
52 + <div style="margin: 2rem 0;" v-html="category_description"></div>
53 + <!-- <i class="el-icon-right"></i> -->
54 + </div>
55 + </div>
39 </div> 56 </div>
40 <hager-box class="box-2n"> 57 <hager-box class="box-2n">
41 <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1> 58 <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
...@@ -50,6 +67,9 @@ ...@@ -50,6 +67,9 @@
50 <i class="el-icon-right pc"></i> 67 <i class="el-icon-right pc"></i>
51 </div> 68 </div>
52 </div> 69 </div>
70 + <!-- <div style="display: flex; justify-content: center; margin-top: 2rem;">
71 + <hager-more></hager-more>
72 + </div> -->
53 </div> 73 </div>
54 <div v-else> 74 <div v-else>
55 <swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange"> 75 <swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange">
...@@ -209,11 +229,10 @@ export default { ...@@ -209,11 +229,10 @@ export default {
209 this.case_info = data; 229 this.case_info = data;
210 this.case_banner = data.file?.banner ? data.file?.banner[0].value : 'https://cdn.ipadbiz.cn/hager/banner/banner08.png'; 230 this.case_banner = data.file?.banner ? data.file?.banner[0].value : 'https://cdn.ipadbiz.cn/hager/banner/banner08.png';
211 this.case_list = data.list; 231 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; 232 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']; 233 this.current_id = this.case_list[this.current_index]['id'];
215 this.success_data_list = this.case_list[this.current_index].list ?? []; 234 this.success_data_list = this.case_list[this.current_index].list ?? [];
216 - // this.category_description = this.case_list[this.current_index].category_description ?? ''; 235 + 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']; 236 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 ?? []; 237 this.product_list = this.case_list[this.current_index].product ?? [];
219 } 238 }
...@@ -275,7 +294,7 @@ export default { ...@@ -275,7 +294,7 @@ export default {
275 this.current_index = idx; 294 this.current_index = idx;
276 this.current_id = this.case_list[idx]['id']; 295 this.current_id = this.case_list[idx]['id'];
277 this.success_data_list = this.case_list[idx].list ?? []; 296 this.success_data_list = this.case_list[idx].list ?? [];
278 - // this.category_description = this.case_list[idx].category_description ?? ''; 297 + 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']; 298 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 ?? []; 299 this.product_list = this.case_list[idx].product ?? [];
281 this.activeSuccessIndex = 0 300 this.activeSuccessIndex = 0
...@@ -290,7 +309,7 @@ export default { ...@@ -290,7 +309,7 @@ export default {
290 }) 309 })
291 // 记录点击的分类ID，用于返回定位到该分类 310 // 记录点击的分类ID，用于返回定位到该分类
292 this.$router.push({ 311 this.$router.push({
293 - path: `/solution/detail_test/${this.$route.params.id}/${this.current_index}/${Date.now()}`, 312 + path: `/solution/detail/${this.$route.params.id}/${this.current_index}/${Date.now()}`,
294 }); 313 });
295 } 314 }
296 } 315 }
...@@ -316,16 +335,6 @@ export default { ...@@ -316,16 +335,6 @@ export default {
316 cursor: zoom-in; 335 cursor: zoom-in;
317 } 336 }
318 } 337 }
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 { 338 .brief-introduction {
330 background-color: #FFF; 339 background-color: #FFF;
331 height: 25rem; 340 height: 25rem;
......