diff --git a/supply.html b/supply.html index 77ff557..0ad5348 100644 --- a/supply.html +++ b/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; /* 固定宽度 */ - height: 350px; /* 固定高度 */ + width: 90%; + 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; - right: -30px; + top: 20px; + 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 = ` -