|
|
|
@ -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,53 +2501,25 @@ |
|
|
|
|
|
|
|
// 阻止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; |
|
|
|
} |
|
|
|
// 更新上次触摸位置 |
|
|
|
window.lastTouchX = touch.clientX; |
|
|
|
window.lastTouchY = touch.clientY; |
|
|
|
|
|
|
|
// 如果不是可滚动元素，则阻止默认行为 |
|
|
|
if (!isScrollable) { |
|
|
|
// 检测是否为水平滑动 |
|
|
|
if (Math.abs(deltaX) > Math.abs(deltaY)) { |
|
|
|
// 阻止水平滑动 |
|
|
|
e.preventDefault(); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function handleTouchEnd() { |
|
|
|
document.removeEventListener('touchmove', handleTouchMove, { passive: false }); |
|
|
|
document.removeEventListener('touchend', handleTouchEnd); |
|
|
|
} |
|
|
|
|
|
|
|
document.addEventListener('touchmove', handleTouchMove, { passive: false }); |
|
|
|
document.addEventListener('touchend', handleTouchEnd); |
|
|
|
} |
|
|
|
}, { passive: false }); |
|
|
|
} |
|
|
|
|
|
|
|
|
Default User
1 month ago