修复货源列表图片显示问题，确保图片铺满容器

supply.html

@@ -822,7 +822,7 @@
             font-size: 18px;
         }
         
-        /* 图片查看器样式 - 与Reject.html保持一致 */
+        /* 图片查看器样式 - 适配手机端 */
         .image-viewer {
             position: fixed;
             top: 0;
@@ -835,6 +835,7 @@
             align-items: center;
             z-index: 2000;
             cursor: pointer;
+            overflow: hidden;
         }
         
         .image-viewer.active {
@@ -843,8 +844,10 @@
         
         .image-viewer-content {
             position: relative;
-            width: 500px; /* 固定宽度 */
+            width: 90%;
-            height: 350px; /* 固定高度 */
+            height: 90%;
+            max-width: 100vw;
+            max-height: 100vh;
             cursor: default;
             display: flex;
             justify-content: center;
@@ -853,8 +856,8 @@
         
         .image-viewer-close {
             position: absolute;
-            top: -30px;
+            top: 20px;
-            right: -30px;
+            right: 20px;
             width: 30px;
             height: 30px;
             background-color: rgba(255, 255, 255, 0.2);
@@ -867,6 +870,7 @@
             align-items: center;
             justify-content: center;
             transition: background-color 0.3s;
+            z-index: 20;
         }
         
         .image-viewer-close:hover {
@@ -898,25 +902,62 @@
         }
         
         .prev-btn {
-            left: -60px;
+            left: 10px;
         }
         
         .next-btn {
-            right: -60px;
+            right: 10px;
         }
         
         /* 图片计数器 */
         .image-viewer-counter {
             position: absolute;
-            bottom: -30px;
+            bottom: 20px;
             left: 50%;
             transform: translateX(-50%);
-            background-color: transparent;
+            background-color: rgba(0, 0, 0, 0.6);
             color: white;
             padding: 4px 12px;
             border-radius: 15px;
             font-size: 14px;
             font-weight: 500;
+            z-index: 10;
+        }
+        
+        /* 预览图片样式 */
+        .preview-image, .preview-video {
+            max-width: 100%;
+            max-height: 100%;
+            width: auto;
+            height: auto;
+            object-fit: contain;
+        }
+        
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .image-viewer-content {
+                width: 95%;
+                height: 95%;
+            }
+            
+            .image-viewer-nav {
+                width: 35px;
+                height: 35px;
+                font-size: 20px;
+            }
+            
+            .image-viewer-close {
+                top: 15px;
+                right: 15px;
+                width: 28px;
+                height: 28px;
+                font-size: 18px;
+            }
+            
+            .image-viewer-counter {
+                bottom: 15px;
+                font-size: 13px;
+            }
         }
         
         /* 选择弹窗 */
@@ -4556,7 +4597,7 @@
                     firstMediaUrl.match(/\.(mp4|mov|avi|wmv|flv|webm|mkv)$/i)) {
                     mediaType = 'video';
                     mediaPreviewHTML = `
-                        <div style="position: relative; width: 100px; height: 100px;">
+                        <div style="position: relative; width: 100%; height: 100%;">
                             <video 
                                 src="${firstMediaUrl}" 
                                 style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;"
@@ -4574,7 +4615,7 @@
                         <img 
                             src="${firstMediaUrl}" 
                             alt="${supply.productName}" 
-                            style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;"
+                            style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;"
                             onclick="previewImage('${firstMediaUrl}', ${JSON.stringify(imageUrls || []).replace(/\"/g, '&quot;')})"
                         >
                     `;
@@ -4582,7 +4623,7 @@
             } else {
                 // 无媒体文件时的占位符
                 mediaPreviewHTML = `
-                    <div style="width: 100px; height: 100px; background-color: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px;">
+                    <div style="width: 100%; height: 100%; background-color: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px;">
                         暂无媒体
                     </div>
                 `;
@@ -6282,6 +6323,13 @@
         let initialDistance = null;
         let initialScale = 1;
         
+        // 滑动切换图片相关变量
+        let swipeStartX = null;
+        let swipeStartY = null;
+        let swipeEndX = null;
+        let swipeEndY = null;
+        let swipeStartTime = null;
+        
         // 预览图片 - 支持多张图片切换
         let currentPreviewImages = [];
         let currentPreviewIndex = 0;
@@ -6519,10 +6567,14 @@
             e.preventDefault();
             
             if (e.touches.length === 1) {
-                // 单点触摸 - 拖动
+                // 单点触摸 - 拖动和滑动
                 const touch = e.touches[0];
                 panning = true;
                 start = { x: touch.clientX - pointX, y: touch.clientY - pointY };
+                // 记录滑动开始位置
+                swipeStartX = touch.clientX;
+                swipeStartY = touch.clientY;
+                swipeStartTime = Date.now();
             } else if (e.touches.length === 2) {
                 // 双指触摸 - 缩放
                 const touch1 = e.touches[0];
@@ -6545,6 +6597,10 @@
                 pointX = touch.clientX - start.x;
                 pointY = touch.clientY - start.y;
                 updateImageTransform();
+                
+                // 记录滑动结束位置
+                swipeEndX = touch.clientX;
+                swipeEndY = touch.clientY;
             } else if (e.touches.length === 2) {
                 // 双指触摸 - 缩放
                 const touch1 = e.touches[0];
@@ -6566,6 +6622,36 @@
         function handleTouchEnd() {
             panning = false;
             initialDistance = null;
+            
+            // 处理滑动切换图片
+            if (swipeStartX !== null && swipeStartY !== null) {
+                const endTime = Date.now();
+                const duration = endTime - swipeStartTime;
+                const swipeDistanceX = swipeEndX - swipeStartX;
+                const swipeDistanceY = swipeEndY - swipeStartY;
+                
+                // 判断是否为有效滑动（水平滑动，距离足够，时间不太长）
+                const isHorizontalSwipe = Math.abs(swipeDistanceX) > Math.abs(swipeDistanceY) * 2;
+                const isSignificantSwipe = Math.abs(swipeDistanceX) > 50;
+                const isQuickSwipe = duration < 500;
+                
+                if (isHorizontalSwipe && isSignificantSwipe && isQuickSwipe) {
+                    if (swipeDistanceX > 0) {
+                        // 向右滑动，切换到上一张图片
+                        prevPreviewImage();
+                    } else {
+                        // 向左滑动，切换到下一张图片
+                        nextPreviewImage();
+                    }
+                }
+                
+                // 重置滑动相关变量
+                swipeStartX = null;
+                swipeStartY = null;
+                swipeEndX = null;
+                swipeEndY = null;
+                swipeStartTime = null;
+            }
         }
         
         // 联系客服