fix:以图识图 样式优化

components/remote-search-select/index.scss

@@ -83,16 +83,62 @@
       color: #909399;
     }
   }
-}
-.img-preview-container{
-  margin:70rpx 40rpx;
-  .img-result-list {
-    max-height: 1200rpx;
-    ::v-deep .uni-scroll-view-content{
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 20rpx;
+  .img-preview-container {
+    margin: 70rpx 40rpx;
+    
+    .image-section {
+      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+      
+      .image-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #f0f0f0;
+        border-radius: 8rpx;
+        
+        .preview-image {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
       
+      .confirm-crop-btn-container {
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+        
+        &.show {
+          max-height: 100rpx;
+          opacity: 1;
+          margin-top: 20rpx;
+          margin-bottom: 10rpx;
+        }
+        
+        .confirm-crop-btn {
+          margin: 0;
+          width: fit-content;
+        }
+      }
+    }
+    
+    .img-result-list {
+      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+      max-height: 1200rpx;
+      
+      &.compressed {
+        max-height: 600rpx;
+      }
+      
+      ::v-deep .uni-scroll-view-content {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20rpx;
+      }
     }
   }
   

components/remote-search-select/index.vue

@@ -26,12 +26,12 @@
         <u-popup title="图片识别结果" :show="show" @open="openImgPopup" mode="bottom" :round="10" :closeOnClickOverlay="false">
             <view class="img-preview-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
                 <view class="image-section" :class="{ 'expanded': isImageExpanded }">
-                    <view class="image-container" v-if="currentImg" :style="isImageExpanded ? 'height: 500rpx; width: 670rpx;' : ''">
-                        <image v-show="!isImageExpanded" :src="currentImg" class="preview-image" :class="{ 'zoomed': isImageExpanded }" @load="handleImageLoad" id="previewImage"></image>
+                    <view class="image-container" v-if="currentImg" :style="imageContainerStyle">
+                        <image v-show="!isImageExpanded" :src="currentImg" class="preview-image" @load="handleImageLoad" id="previewImage"></image>
                         <bt-cropper v-if="isImageExpanded" ref="cropper" :imageSrc="currentImg" :ratio="0" :fileType="fileType" :key="currentImg" :containerSize="{width: 670, height: 500}" @loadFail="handleCropLoadFail"></bt-cropper>
-                        <view v-if="isImageExpanded" class="confirm-crop-btn">
-                            <u-button type="primary" size="mini" @click="confirmCrop">确认裁剪</u-button>
-                        </view>
+                    </view>
+                    <view class="confirm-crop-btn-container" :class="{ 'show': isImageExpanded }">
+                        <u-button class="confirm-crop-btn" type="primary" size="mini" @click="confirmCrop">确认裁剪</u-button>
                     </view>
 
                     <view class="img-result-container">
@@ -173,6 +173,14 @@ export default {
         }
     },
     computed: {
+        imageContainerStyle() {
+            return {
+                height: this.isImageExpanded ? '500rpx' : '300rpx', // 给一个基础高度以使过渡平滑
+                width: '670rpx',
+                transition: 'all 0.4s cubic-bezier(0.25, 1, 0.5, 1)',
+                overflow: 'hidden'
+            };
+        },
         currentImg:{
             get(){
                 return this.localCurrentImg || ''