hookehuyr

fix 解决方案配电图片显示优化

1 <!-- 1 <!--
2 * @Date: 2024-09-29 10:07:11 2 * @Date: 2024-09-29 10:07:11
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-22 11:38:03 4 + * @LastEditTime: 2025-01-03 13:53:35
5 * @FilePath: /hager/src/components/common/hagerH1.vue 5 * @FilePath: /hager/src/components/common/hagerH1.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -20,11 +20,11 @@ export default { ...@@ -20,11 +20,11 @@ export default {
20 props: { 20 props: {
21 title: { 21 title: {
22 type: String, 22 type: String,
23 - default: '标题' 23 + default: ''
24 }, 24 },
25 sub: { 25 sub: {
26 type: String, 26 type: String,
27 - default: '副标题' 27 + default: ''
28 }, 28 },
29 width: { 29 width: {
30 type: Number, 30 type: Number,
......
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-03 10:05:48 4 + * @LastEditTime: 2025-01-03 13:45:03
5 * @FilePath: /hager/src/views/solution/detail.vue 5 * @FilePath: /hager/src/views/solution/detail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 <hager-box v-if="!is_xs" class="box-n"> 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> 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;"> 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> 27 + <div @click="onClickImg(item.value)" v-for="(item, index) in case_img" :key="index" class="carousel-img-test" :style="{backgroundImage: 'url(' + item.thumbnail + ')'}"></div>
28 </div> 28 </div>
29 </hager-box> 29 </hager-box>
30 <div v-else> 30 <div v-else>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
32 <div style="height: 25rem; margin-top: 2rem;"> 32 <div style="height: 25rem; margin-top: 2rem;">
33 <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;"> 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"> 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="contain" :src="item.value"></el-image> 35 + <el-image @click="onClickImg(item.value)" style="width: 100%; height: 100%;" fit="contain" :src="item.thumbnail"></el-image>
36 </el-carousel-item> 36 </el-carousel-item>
37 </el-carousel> 37 </el-carousel>
38 </div> 38 </div>
...@@ -215,6 +215,9 @@ export default { ...@@ -215,6 +215,9 @@ export default {
215 this.success_data_list = this.case_list[this.current_index].list ?? []; 215 this.success_data_list = this.case_list[this.current_index].list ?? [];
216 // this.category_description = this.case_list[this.current_index].category_description ?? ''; 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']; 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.case_img.forEach(item => {
219 + item.thumbnail = item.value + '?imageView2/1/w/1370/h/850/q/75';
220 + })
218 this.product_list = this.case_list[this.current_index].product ?? []; 221 this.product_list = this.case_list[this.current_index].product ?? [];
219 } 222 }
220 this.$nextTick(() => { 223 this.$nextTick(() => {
......