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 });
}