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

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

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