Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
95b4220e 1 parent 0b86ce3d

fix 产品详情缩略图和显示调整

Inline Side-by-side
Showing 2 changed files with 42 additions and 31 deletions
1 <!-- 1 <!--
2 * @Date: 2024-09-27 19:49:03 2 * @Date: 2024-09-27 19:49:03
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-23 17:25:41 4 + * @LastEditTime: 2024-10-24 12:47:42
5 * @FilePath: /hager/src/components/hagerCarousel.vue 5 * @FilePath: /hager/src/components/hagerCarousel.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-carousel"> 9 <div class="hager-carousel">
10 <div class="image-switcher"> 10 <div class="image-switcher">
11 - <!-- 缩略图区域 --> 11 + <el-row :gutter="0">
12 - <div class="thumbnail-container"> 12 + <el-col :span="4">
13 - <!-- 上箭头 --> 13 + <!-- 缩略图区域 -->
14 - <div class="arrow-up" @click="prevImage"><i class="el-icon-arrow-up" style="font-size: 1.35rem;"></i></div> 14 + <div class="thumbnail-container">
15 - 15 + <!-- 上箭头 -->
16 - <!-- 缩略图列表 --> 16 + <div class="arrow-up" @click="prevImage"><i class="el-icon-arrow-up" style="font-size: 1.35rem;"></i></div>
17 - <div class="thumbnails"> 17 +
18 - <div 18 + <!-- 缩略图列表 -->
19 - v-for="(image, index) in visibleThumbnails" 19 + <div class="thumbnails">
20 - :key="index" 20 + <div
21 - :class="['thumbnail', { active: selectedImage === (startIndex + index) }]" 21 + v-for="(image, index) in visibleThumbnails"
22 - @click="selectImage(startIndex + index)" 22 + :key="index"
23 - > 23 + :class="['thumbnail', { active: selectedImage === (startIndex + index) }]"
24 - <img :src="image" alt="thumbnail"> 24 + @click="selectImage(startIndex + index)"
25 + >
26 + <img :src="image" alt="thumbnail">
27 + </div>
28 + </div>
29 +
30 + <!-- 下箭头 -->
31 + <div class="arrow-down" @click="nextImage"><i class="el-icon-arrow-down" style="font-size: 1.35rem;"></i></div>
25 </div> 32 </div>
26 - </div> 33 + </el-col>
27 - 34 + <el-col :span="20">
28 - <!-- 下箭头 --> 35 + <!-- 右边大图区域 -->
29 - <div class="arrow-down" @click="nextImage"><i class="el-icon-arrow-down" style="font-size: 1.35rem;"></i></div> 36 + <div class="main-image" :class="{ 'fade-out': isTransitioning, 'fade-in': !isTransitioning }" :style="{ backgroundImage: `url(${images[selectedImage]})`}">
30 - </div> 37 + <!-- <img :src="images[selectedImage]" alt="main image"> -->
38 + </div>
39 + </el-col>
40 + </el-row>
31 41
32 - <!-- 右边大图区域 -->
33 - <div class="main-image" :class="{ 'fade-out': isTransitioning, 'fade-in': !isTransitioning }" :style="{ backgroundImage: `url(${images[selectedImage]})`}">
34 - <!-- <img :src="images[selectedImage]" alt="main image"> -->
35 - </div>
36 </div> 42 </div>
37 </div> 43 </div>
38 </template> 44 </template>
...@@ -114,8 +120,8 @@ export default { ...@@ -114,8 +120,8 @@ export default {
114 <style lang="less" scoped> 120 <style lang="less" scoped>
115 .hager-carousel { 121 .hager-carousel {
116 .image-switcher { 122 .image-switcher {
117 - display: flex; 123 + // display: flex;
118 - align-items: center; 124 + // align-items: center;
119 } 125 }
120 126
121 .thumbnail-container { 127 .thumbnail-container {
...@@ -163,13 +169,13 @@ export default { ...@@ -163,13 +169,13 @@ export default {
163 } 169 }
164 170
165 .main-image { 171 .main-image {
166 - width: 18rem; 172 + width: 100%;
167 - height: 18rem; 173 + height: 12rem;
168 position: relative; 174 position: relative;
169 transition: opacity 0.5s ease-in-out; /* 大图切换时的淡入淡出效果 */ 175 transition: opacity 0.5s ease-in-out; /* 大图切换时的淡入淡出效果 */
170 opacity: 1; 176 opacity: 1;
171 background-position: center; 177 background-position: center;
172 - background-size: 80%; 178 + background-size: contain;
173 background-repeat: no-repeat; 179 background-repeat: no-repeat;
174 } 180 }
175 181
......
1 <!-- 1 <!--
2 * @Date: 2024-09-29 14:26:41 2 * @Date: 2024-09-29 14:26:41
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-24 12:27:34 4 + * @LastEditTime: 2024-10-24 12:31:24
5 * @FilePath: /hager/src/views/product/detail.vue 5 * @FilePath: /hager/src/views/product/detail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
87 <i v-else @click="checkItem(item)" class="el-icon-folder download-unchecked"></i>&nbsp; 87 <i v-else @click="checkItem(item)" class="el-icon-folder download-unchecked"></i>&nbsp;
88 </el-col> 88 </el-col>
89 <el-col :span="is_xs ? 20 : 22"> 89 <el-col :span="is_xs ? 20 : 22">
90 - <div style="display: flex; justify-content: space-between; align-items: center;"> 90 + <div class="info-list-title-content">
91 <div> 91 <div>
92 <i class="el-icon-document" style="font-size: 1.35rem;"></i> 92 <i class="el-icon-document" style="font-size: 1.35rem;"></i>
93 {{ item.name }} 93 {{ item.name }}
...@@ -348,6 +348,11 @@ export default { ...@@ -348,6 +348,11 @@ export default {
348 // display: flex; 348 // display: flex;
349 // align-items: center; 349 // align-items: center;
350 } 350 }
351 + .info-list-title-content {
352 + display: flex;
353 + justify-content: space-between;
354 + align-items: center;
355 + }
351 .info-list-control { 356 .info-list-control {
352 display: flex; 357 display: flex;
353 justify-content: flex-end; 358 justify-content: flex-end;
......