From 9112640afc3e3021651c9c9bafe9abe86e850477 Mon Sep 17 00:00:00 2001 From: Default User Date: Tue, 27 Jan 2026 14:20:07 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96supply.html=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8CiOS=E7=AB=AF=E6=BB=91=E5=8A=A8?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- supply.html | 217 +++++++++++++++++++++++++++++++++------------------- 1 file changed, 137 insertions(+), 80 deletions(-) diff --git a/supply.html b/supply.html index 119ca75..207f2b8 100644 --- a/supply.html +++ b/supply.html @@ -12,8 +12,8 @@ background-color: #f5f5f5; color: #333; font-size: 14px; - touch-action: none; - overflow: hidden; + overflow-x: hidden; + touch-action: pan-y; } .container { @@ -21,56 +21,171 @@ margin: 0 auto; background-color: #fff; min-height: 100vh; + overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } - /* 标题栏 */ + /* 顶部标题栏样式优化 */ .title-bar { background-color: #1677ff; color: white; - padding: 15px 20px; + padding: 15px 15px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; + flex-wrap: wrap; + gap: 10px; } .title-bar h1 { margin: 0; font-size: 18px; font-weight: 500; + flex: 1; + text-align: center; } .title-bar-actions { display: flex; - gap: 10px; + gap: 8px; + align-items: center; } .title-bar-actions button { background-color: rgba(255, 255, 255, 0.2); color: white; border: none; - padding: 8px 16px; + padding: 8px 12px; border-radius: 4px; - font-size: 14px; + font-size: 13px; cursor: pointer; transition: background-color 0.3s; + white-space: nowrap; } .title-bar-actions button:hover { background-color: rgba(255, 255, 255, 0.3); } - /* 搜索框 */ + /* 登录用户信息样式 */ + #currentUserInfo { + margin-top: 10px; + font-size: 12px; + color: #666; + text-align: right; + padding: 0 15px; + } + + /* 搜索框样式优化 */ .search-container { - padding: 15px 20px; + padding: 15px; background-color: white; border-bottom: 1px solid #f0f0f0; } + /* 创建货源按钮样式优化 */ + .create-supply-btn { + margin: 20px 15px; + text-align: center; + } + + .create-supply-btn button { + background-color: #07c160; + color: white; + border: none; + padding: 14px 40px; + border-radius: 25px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s; + width: 100%; + max-width: 300px; + } + + /* 货源列表样式优化 */ + .supply-section { + margin: 15px; + background-color: white; + border-radius: 12px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); + overflow: hidden; + } + + /* 响应式样式 */ + @media (max-width: 768px) { + /* 调整标题栏 */ + .title-bar { + padding: 12px 10px; + } + + .title-bar h1 { + font-size: 16px; + } + + .title-bar-actions button { + padding: 6px 10px; + font-size: 12px; + } + + /* 调整搜索框 */ + .search-container { + padding: 10px; + } + + /* 调整创建货源按钮 */ + .create-supply-btn { + margin: 15px 10px; + } + + .create-supply-btn button { + padding: 12px 30px; + font-size: 15px; + } + + /* 调整货源列表 */ + .supply-section { + margin: 10px; + } + + .section-header { + padding: 12px 15px; + } + + .supply-item { + padding: 15px; + flex-direction: column; + gap: 15px; + } + + .supply-images { + width: 100%; + height: 150px; + } + } + + /* 小屏幕手机的额外调整 */ + @media (max-width: 480px) { + .title-bar { + flex-direction: column; + align-items: stretch; + gap: 8px; + } + + .title-bar h1 { + order: -1; + text-align: center; + } + + .title-bar-actions { + justify-content: space-around; + } + } + + /* 搜索框 */ .search-box { position: relative; background-color: #f5f5f5; @@ -100,36 +215,6 @@ cursor: pointer; } - /* 创建货源按钮 */ - .create-supply-btn { - margin: 20px; - text-align: center; - } - - .create-supply-btn button { - background-color: #07c160; - color: white; - border: none; - padding: 12px 40px; - border-radius: 20px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s; - } - - .create-supply-btn button:hover { - background-color: #06b158; - } - - /* 货源列表 */ - .supply-section { - margin: 20px; - background-color: white; - border-radius: 12px; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); - overflow: hidden; - } - .section-header { padding: 16px 20px; display: flex; @@ -2416,52 +2501,24 @@ // 阻止iOS端触摸拖动 function preventIOSDrag() { - document.addEventListener('touchstart', function(e) { - // 仅在垂直方向上阻止默认行为 + // 只阻止水平滑动，允许垂直滚动 + document.addEventListener('touchmove', function(e) { + // 只处理单点触摸 if (e.touches.length === 1) { + // 计算滑动方向 const touch = e.touches[0]; - const startX = touch.clientX; - const startY = touch.clientY; + const deltaX = touch.clientX - (window.lastTouchX || touch.clientX); + const deltaY = touch.clientY - (window.lastTouchY || touch.clientY); - function handleTouchMove(e) { - const touch = e.touches[0]; - const deltaX = touch.clientX - startX; - const deltaY = touch.clientY - startY; - - // 检测是否为垂直拖动 - if (Math.abs(deltaY) > Math.abs(deltaX)) { - // 检查目标元素是否为可滚动元素 - const target = e.target; - let isScrollable = false; - let currentElement = target; - - while (currentElement) { - const style = window.getComputedStyle(currentElement); - if (style.overflowY === 'auto' || style.overflowY === 'scroll' || - style.overflow === 'auto' || style.overflow === 'scroll') { - const rect = currentElement.getBoundingClientRect(); - if (currentElement.scrollHeight > rect.height) { - isScrollable = true; - break; - } - } - currentElement = currentElement.parentElement; - } - - // 如果不是可滚动元素，则阻止默认行为 - if (!isScrollable) { - e.preventDefault(); - } - } - } + // 更新上次触摸位置 + window.lastTouchX = touch.clientX; + window.lastTouchY = touch.clientY; - function handleTouchEnd() { - document.removeEventListener('touchmove', handleTouchMove, { passive: false }); - document.removeEventListener('touchend', handleTouchEnd); + // 检测是否为水平滑动 + if (Math.abs(deltaX) > Math.abs(deltaY)) { + // 阻止水平滑动 + e.preventDefault(); } - - document.addEventListener('touchmove', handleTouchMove, { passive: false }); - document.addEventListener('touchend', handleTouchEnd); } }, { passive: false }); }