修复iOS端页面显示问题，优化按钮布局为横向排列

1 month ago · 47c9244aaf
2 changed files with 223 additions and 2 deletions
--- a/SupplierReview.html
+++ b/SupplierReview.html
@ -3,7 +3,7 @@

 <head>
    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>供应商审核系统</title>
    <style>
        body {
@ -857,6 +857,168 @@
            background-color: #1890ff;
        }

+        /* 操作按钮容器样式 */
+        .action-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 20px;
+            align-items: center;
+        }
+
+        /* 审核时间样式 */
+        .audit-time {
+            padding: 8px 16px;
+            background-color: #1890ff;
+            color: white;
+            border-radius: 4px;
+            font-size: 14px;
+            font-weight: 500;
+            text-align: center;
+            min-width: 200px;
+            margin-top: 0;
+        }
+
+        /* 手机端响应式样式 */
+        @media (max-width: 768px) {
+            /* 调整容器padding */
+            .container {
+                padding: 10px;
+                border-radius: 0;
+            }
+
+            /* 调整标题大小 */
+            h1 {
+                font-size: 20px;
+                margin-bottom: 15px;
+            }
+
+            /* 调整状态导航栏 */
+            .status-nav {
+                overflow-x: auto;
+                white-space: nowrap;
+            }
+
+            .status-btn {
+                flex: 0 0 auto;
+                padding: 10px 15px;
+                font-size: 13px;
+            }
+
+            /* 调整类型导航栏 */
+            .type-nav {
+                margin: 10px 0;
+            }
+
+            .type-btn {
+                padding: 10px 12px;
+                font-size: 14px;
+            }
+
+            /* 调整搜索栏 */
+            .search-bar {
+                flex-direction: column;
+                gap: 8px;
+            }
+
+            .search-bar input {
+                min-width: auto;
+            }
+
+            .search-bar button {
+                width: 100%;
+            }
+
+            /* 调整供应商信息卡片 */
+            .supply-item {
+                padding: 15px;
+                margin-bottom: 15px;
+            }
+
+            /* 调整供应商基本信息 */
+            .supply-info {
+                grid-template-columns: 1fr;
+                gap: 10px;
+            }
+
+            /* 调整证明材料 */
+            .proof-materials {
+                grid-template-columns: 1fr;
+                gap: 10px;
+            }
+
+            /* 调整按钮布局 - 横向排列 */
+            .action-buttons {
+                flex-direction: row;
+                justify-content: space-between;
+                margin-top: 15px;
+                gap: 8px;
+            }
+
+            .action-buttons .btn {
+                flex: 1;
+                padding: 10px 12px;
+                font-size: 13px;
+                text-align: center;
+                white-space: nowrap;
+            }
+
+            /* 调整审核时间样式 */
+            .audit-time {
+                min-width: auto;
+                width: 100%;
+                padding: 10px;
+                font-size: 13px;
+                margin-top: 10px;
+                order: 3;
+            }
+
+            /* 调整状态标签 */
+            .supply-status {
+                padding: 3px 10px;
+                font-size: 11px;
+            }
+
+            /* 调整字体大小 */
+            .supply-title {
+                font-size: 16px;
+            }
+
+            .info-label {
+                font-size: 11px;
+            }
+
+            .info-value {
+                font-size: 13px;
+            }
+
+            /* 调整分页按钮 */
+            .pagination button {
+                padding: 4px 10px;
+                font-size: 13px;
+            }
+        }
+
+        /* 小屏幕手机的额外调整 */
+        @media (max-width: 480px) {
+            /* 调整按钮字体大小 */
+            .action-buttons .btn {
+                font-size: 12px;
+                padding: 8px 10px;
+            }
+
+            /* 调整标题大小 */
+            h1 {
+                font-size: 18px;
+            }
+
+            /* 调整类型按钮字体大小 */
+            .type-btn {
+                font-size: 12px;
+                padding: 8px 10px;
+            }
+        }
+
        /* 供应商状态样式 */
        .status-underreview {
            background-color: #faad14;
--- a/supply.html
+++ b/supply.html
@ -2,7 +2,7 @@
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>货源管理</title>
    <style>
        body {
@ -12,6 +12,8 @@
            background-color: #f5f5f5;
            color: #333;
            font-size: 14px;
+            touch-action: none;
+            overflow: hidden;
        }
        
        .container {
@ -19,6 +21,8 @@
            margin: 0 auto;
            background-color: #fff;
            min-height: 100vh;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
        }
        
        /* 标题栏 */
@ -2410,6 +2414,58 @@
            }
        }
        
+        // 阻止iOS端触摸拖动
+        function preventIOSDrag() {
+            document.addEventListener('touchstart', function(e) {
+                // 仅在垂直方向上阻止默认行为
+                if (e.touches.length === 1) {
+                    const touch = e.touches[0];
+                    const startX = touch.clientX;
+                    const startY = 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();
+                            }
+                        }
+                    }
+                    
+                    function handleTouchEnd() {
+                        document.removeEventListener('touchmove', handleTouchMove, { passive: false });
+                        document.removeEventListener('touchend', handleTouchEnd);
+                    }
+                    
+                    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+                    document.addEventListener('touchend', handleTouchEnd);
+                }
+            }, { passive: false });
+        }
+
        // 初始化
        window.onload = function() {
            // 登录检查
@ -2418,6 +2474,9 @@
                return;
            }
            
+            // 阻止iOS端触摸拖动
+            preventIOSDrag();
+            
            // 初始化WebSocket连接
            initWebSocket();