|
|
|
@ -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 = ` |
|
|
|
<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, '"')})" |
|
|
|
> |
|
|
|
`; |
|
|
|
@ -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; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 联系客服 |
|
|
|
|
Default User
2 months ago