SwtTt29
/
Review2
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

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

Boss3
Default User 1 month ago
parent
068330797e
commit
47c9244aaf
2 changed files with 223 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 164
      SupplierReview.html
  2. 61
      supply.html

164
SupplierReview.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <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> <title>供应商审核系统</title>
<style> <style>
body { body {
@ -857,6 +857,168 @@
background-color: #1890ff; 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 { .status-underreview {
background-color: #faad14; background-color: #faad14;

61
supply.html
View File

@ -2,7 +2,7 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <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> <title>货源管理</title>
<style> <style>
body { body {
@ -12,6 +12,8 @@
background-color: #f5f5f5; background-color: #f5f5f5;
color: #333; color: #333;
font-size: 14px; font-size: 14px;
touch-action: none;
overflow: hidden;
} }
.container { .container {
@ -19,6 +21,8 @@
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
min-height: 100vh; 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() { window.onload = function() {
// 登录检查 // 登录检查
@ -2418,6 +2474,9 @@
return; return;
} }
// 阻止iOS端触摸拖动
preventIOSDrag();
// 初始化WebSocket连接 // 初始化WebSocket连接
initWebSocket(); initWebSocket();

Write Preview
Loading…
Cancel
Save