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

 <!--
  * @Date: 2024-09-27 19:49:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-23 17:25:41
+ * @LastEditTime: 2024-10-24 12:47:42
  * @FilePath: /hager/src/components/hagerCarousel.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="hager-carousel">
     <div class="image-switcher">
-      <!-- 缩略图区域 -->
-      <div class="thumbnail-container">
-        <!-- 上箭头 -->
-        <div class="arrow-up" @click="prevImage"><i class="el-icon-arrow-up" style="font-size: 1.35rem;"></i></div>
-
-        <!-- 缩略图列表 -->
-        <div class="thumbnails">
-          <div
-            v-for="(image, index) in visibleThumbnails"
-            :key="index"
-            :class="['thumbnail', { active: selectedImage === (startIndex + index) }]"
-            @click="selectImage(startIndex + index)"
-          >
-            <img :src="image" alt="thumbnail">
+      <el-row :gutter="0">
+        <el-col :span="4">
+          <!-- 缩略图区域 -->
+          <div class="thumbnail-container">
+            <!-- 上箭头 -->
+            <div class="arrow-up" @click="prevImage"><i class="el-icon-arrow-up" style="font-size: 1.35rem;"></i></div>
+
+            <!-- 缩略图列表 -->
+            <div class="thumbnails">
+              <div
+                v-for="(image, index) in visibleThumbnails"
+                :key="index"
+                :class="['thumbnail', { active: selectedImage === (startIndex + index) }]"
+                @click="selectImage(startIndex + index)"
+              >
+                <img :src="image" alt="thumbnail">
+              </div>
+            </div>
+
+            <!-- 下箭头 -->
+            <div class="arrow-down" @click="nextImage"><i class="el-icon-arrow-down" style="font-size: 1.35rem;"></i></div>
           </div>
-        </div>
-
-        <!-- 下箭头 -->
-        <div class="arrow-down" @click="nextImage"><i class="el-icon-arrow-down" style="font-size: 1.35rem;"></i></div>
-      </div>
+        </el-col>
+        <el-col :span="20">
+          <!-- 右边大图区域 -->
+          <div class="main-image" :class="{ 'fade-out': isTransitioning, 'fade-in': !isTransitioning }" :style="{ backgroundImage: `url(${images[selectedImage]})`}">
+            <!-- <img :src="images[selectedImage]" alt="main image"> -->
+          </div>
+        </el-col>
+      </el-row>
 
-      <!-- 右边大图区域 -->
-      <div class="main-image" :class="{ 'fade-out': isTransitioning, 'fade-in': !isTransitioning }" :style="{ backgroundImage: `url(${images[selectedImage]})`}">
-        <!-- <img :src="images[selectedImage]" alt="main image"> -->
-      </div>
     </div>
   </div>
 </template>
@@ -114,8 +120,8 @@ export default {
 <style lang="less" scoped>
 .hager-carousel {
   .image-switcher {
-    display: flex;
-    align-items: center;
+    // display: flex;
+    // align-items: center;
   }
 
   .thumbnail-container {
@@ -163,13 +169,13 @@ export default {
   }
 
   .main-image {
-    width: 18rem;
-    height: 18rem;
+    width: 100%;
+    height: 12rem;
     position: relative;
     transition: opacity 0.5s ease-in-out; /* 大图切换时的淡入淡出效果 */
     opacity: 1;
     background-position: center;
-    background-size: 80%;
+    background-size: contain;
     background-repeat: no-repeat;
   }
 

 <!--
  * @Date: 2024-09-29 14:26:41
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 12:27:34
+ * @LastEditTime: 2024-10-24 12:31:24
  * @FilePath: /hager/src/views/product/detail.vue
  * @Description: 文件描述
 -->
@@ -87,7 +87,7 @@
                       <i v-else @click="checkItem(item)" class="el-icon-folder  download-unchecked"></i>&nbsp;
                     </el-col>
                     <el-col :span="is_xs ? 20 : 22">
-                      <div style="display: flex; justify-content: space-between; align-items: center;">
+                      <div class="info-list-title-content">
                         <div>
                           <i class="el-icon-document" style="font-size: 1.35rem;"></i>
                           {{ item.name }}
@@ -348,6 +348,11 @@ export default {
         // display: flex;
         // align-items: center;
       }
+      .info-list-title-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
       .info-list-control {
         display: flex;
         justify-content: flex-end;