YANG JIANKUAN
db062c8ee3
- 落地手机端双形态适配框架：同名布局+资源限定符（layout/手机、 layout-sw600dp/平板）自动切换，DeviceUtil 设备形态判定，7个 手机版公共组件（PhoneSearchBar/StatusTab/DataLayout/FilterPanel/ BottomBar/StatBox/KvItem） - 完成「国际出港移库」「国际出港出库交接」两页手机端适配，新增 各自详情页（IntExpMoveDetailActivity/IntExpOutHandoverDetailActivity） - 手机端首页菜单接入"出港移库""出库交接"入口 - 修复手机端进入页面先横屏后转竖屏的闪屏问题：Manifest 全项目 192 处改为 screenOrientation="unspecified"，由 BaseActivity 按设备形态运行时锁定方向 - 修复该方案的中间版本在平板端引入的回归（先竖后横 + UI放大1.6倍） - AutoSize 补充手机竖屏 390×844 设计基准 - 修复 CHANGELOG.md 因脚本异常导致的内容重复损坏（膨胀至12万行）， 恢复正常结构并补充本次变更记录 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
306 lines
16 KiB
HTML
306 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>计重明细</title>
|
|
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
|
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background-color: #F3F4F6;
|
|
font-size: 13px;
|
|
}
|
|
.safe-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.btn-active:active {
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gray-200 min-h-screen flex items-center justify-center p-4">
|
|
<div class="relative w-[390px] h-[844px] bg-[#1a1a1a] rounded-[55px] shadow-2xl border-[6px] border-[#333] flex flex-col overflow-hidden">
|
|
<div class="flex-1 bg-white mt-0 mb-1 mx-1 rounded-[46px] overflow-hidden flex flex-col relative">
|
|
|
|
<!-- 状态栏 -->
|
|
<div class="bg-[#2563EB] text-white h-11 px-7 flex items-end pb-2 justify-between text-[14px] font-medium z-50">
|
|
<span>09:41</span>
|
|
<div class="flex items-center gap-1.5 pb-0.5">
|
|
<iconify-icon icon="mdi:signal-cellular-3"></iconify-icon>
|
|
<iconify-icon icon="mdi:wifi"></iconify-icon>
|
|
<iconify-icon icon="mdi:battery"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 列表页 -->
|
|
<div id="listPage" class="flex-1 flex flex-col overflow-hidden relative bg-gray-100">
|
|
<header class="relative bg-[#2563EB] text-white flex items-center h-12 px-3 sticky top-0 z-50">
|
|
<div class="flex items-center btn-active" onclick="window.location.href='records.html'">
|
|
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
|
<span class="text-sm font-medium text-white -ml-1">返回</span>
|
|
</div>
|
|
<h1 class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-white">计重明细</h1>
|
|
</header>
|
|
|
|
<div class="flex-1 overflow-y-auto p-4 no-scrollbar">
|
|
<!-- 运单卡片（与 781333617 样式统一） -->
|
|
<div class="bg-white rounded-2xl shadow-md shadow-black/5 overflow-hidden relative mb-3">
|
|
<!-- 顶部渐变装饰条 -->
|
|
<div class="h-1" style="background: linear-gradient(90deg, #2563EB, #60A5FA, #2563EB);"></div>
|
|
<!-- 内容区 -->
|
|
<div class="px-5 py-4">
|
|
<!-- 第一行：运单号 + 状态徽标 -->
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></div>
|
|
<span class="text-[20px] font-bold text-gray-900 tracking-wider">78133363396</span>
|
|
</div>
|
|
<span class="text-[11px] font-medium text-blue-600 bg-blue-50 px-2.5 py-1 rounded-full border border-blue-100">国际出港</span>
|
|
</div>
|
|
<!-- 分割线 -->
|
|
<div class="border-t border-gray-50 mb-3"></div>
|
|
<!-- 统一信息区域：浅灰底圆角容器 -->
|
|
<div class="bg-gray-50/70 rounded-xl px-4 py-3">
|
|
<div class="grid grid-cols-3 gap-2 text-center">
|
|
<div>
|
|
<p class="text-[10px] text-gray-400 mb-0.5">总件数</p>
|
|
<p class="text-[15px] font-bold text-gray-800">85</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] text-gray-400 mb-0.5">总重量(kg)</p>
|
|
<p class="text-[15px] font-bold text-gray-800">1560</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] text-gray-400 mb-0.5">托盘总重(kg)</p>
|
|
<p class="text-[15px] font-bold text-gray-800">54</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 左滑卡片1 -->
|
|
<div class="swipe-item bg-white rounded-xl shadow-sm mb-3 overflow-hidden relative" data-id="1">
|
|
<div class="swipe-content p-4 relative z-10 bg-white">
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-600">运抵件数</span>
|
|
<span class="font-medium piece">20</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-600">运抵重量(kg)</span>
|
|
<span class="font-medium weight">320</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-500">托盘自重(kg)</span>
|
|
<span class="text-gray-600">18</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-500">计重人</span>
|
|
<span class="text-gray-600 user">张三</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-500">计重时间</span>
|
|
<span class="text-gray-600 time">2026-07-05 10:02:15</span>
|
|
</div>
|
|
</div>
|
|
<div class="swipe-action absolute top-0 right-0 bottom-0 w-[60px] bg-[#2563EB] flex items-center justify-center z-0">
|
|
<button class="text-white text-sm" onclick="goEdit(1)">修改</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 卡片2 -->
|
|
<div class="swipe-item bg-white rounded-xl shadow-sm mb-3 overflow-hidden relative" data-id="2">
|
|
<div class="swipe-content p-4 relative z-10 bg-white">
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-600">运抵件数</span>
|
|
<span class="font-medium piece">35</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-600">运抵重量(kg)</span>
|
|
<span class="font-medium weight">590</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-500">托盘自重(kg)</span>
|
|
<span class="text-gray-600">18</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-500">计重人</span>
|
|
<span class="text-gray-600 user">张三</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-500">计重时间</span>
|
|
<span class="text-gray-600 time">2026-07-05 10:25:30</span>
|
|
</div>
|
|
</div>
|
|
<div class="swipe-action absolute top-0 right-0 bottom-0 w-[60px] bg-[#2563EB] flex items-center justify-center z-0">
|
|
<button class="text-white text-sm" onclick="goEdit(2)">修改</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 卡片3 -->
|
|
<div class="swipe-item bg-white rounded-xl shadow-sm mb-3 overflow-hidden relative" data-id="3">
|
|
<div class="swipe-content p-4 relative z-10 bg-white">
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-600">运抵件数</span>
|
|
<span class="font-medium piece">30</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-600">运抵重量(kg)</span>
|
|
<span class="font-medium weight">650</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-500">托盘自重(kg)</span>
|
|
<span class="text-gray-600">18</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-500">计重人</span>
|
|
<span class="text-gray-600 user">张三</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-gray-500">计重时间</span>
|
|
<span class="text-gray-600 time">2026-07-05 11:45:08</span>
|
|
</div>
|
|
</div>
|
|
<div class="swipe-action absolute top-0 right-0 bottom-0 w-[60px] bg-[#2563EB] flex items-center justify-center z-0">
|
|
<button class="text-white text-sm" onclick="goEdit(3)">修改</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 修改记录页面（完全在手机容器内） -->
|
|
<div id="editPage" class="absolute inset-0 bg-gray-100 z-[60] flex flex-col hidden">
|
|
<div class="bg-[#2563EB] text-white h-11 px-7 flex items-end pb-2 justify-between text-[14px] font-medium z-50 flex-none">
|
|
<span>09:41</span>
|
|
<div class="flex items-center gap-1.5 pb-0.5">
|
|
<iconify-icon icon="mdi:signal-cellular-3"></iconify-icon>
|
|
<iconify-icon icon="mdi:wifi"></iconify-icon>
|
|
<iconify-icon icon="mdi:battery"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
<header class="relative bg-[#2563EB] text-white flex items-center h-12 px-3 flex-none">
|
|
<div class="flex items-center btn-active" onclick="closeEditPage()">
|
|
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
|
<span class="text-sm font-medium text-white -ml-1">返回</span>
|
|
</div>
|
|
<h1 class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-white">修改记录</h1>
|
|
</header>
|
|
<div class="flex-1 overflow-y-auto p-4 no-scrollbar">
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden px-4">
|
|
<div class="flex items-center py-[14px] border-b border-gray-100">
|
|
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">运抵件数<span class="text-red-500 ml-0.5">*</span></span>
|
|
<input id="edit_piece" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]">
|
|
</div>
|
|
<div class="flex items-center py-[14px] border-b border-gray-100">
|
|
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">运抵重量(kg)<span class="text-red-500 ml-0.5">*</span></span>
|
|
<input id="edit_weight" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]">
|
|
</div>
|
|
<div class="flex items-center py-[14px] border-b border-gray-100">
|
|
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">托盘自重(kg)<span class="text-red-500 ml-0.5">*</span></span>
|
|
<input value="18" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]">
|
|
</div>
|
|
<div class="flex items-center py-[14px] border-b border-gray-100">
|
|
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">计重人</span>
|
|
<input id="edit_user" disabled class="flex-1 bg-transparent outline-none text-gray-500 text-[14px]">
|
|
</div>
|
|
<div class="flex items-center py-[14px]">
|
|
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">计重时间</span>
|
|
<input id="edit_time" disabled class="flex-1 bg-transparent outline-none text-gray-500 text-[14px]">
|
|
</div>
|
|
</div>
|
|
<button class="w-full mt-8 bg-[#2563EB] text-white py-3.5 rounded-[10px] font-bold text-[16px] shadow-lg shadow-blue-500/30 btn-active" onclick="saveEdit()">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentEditId = null
|
|
|
|
// 左滑效果（鼠标+触摸）
|
|
document.querySelectorAll('.swipe-item').forEach(item => {
|
|
const content = item.querySelector('.swipe-content')
|
|
let startX = 0
|
|
let isDragging = false
|
|
|
|
item.addEventListener('mousedown', e => {
|
|
isDragging = true
|
|
startX = e.clientX
|
|
e.preventDefault()
|
|
})
|
|
|
|
window.addEventListener('mousemove', e => {
|
|
if (!isDragging) return
|
|
const dx = startX - e.clientX
|
|
if (dx > 0) {
|
|
const off = Math.min(dx, 60)
|
|
content.style.transform = `translateX(-${off}px)`
|
|
}
|
|
})
|
|
|
|
window.addEventListener('mouseup', () => {
|
|
if (!isDragging) return
|
|
isDragging = false
|
|
const dx = startX - event.clientX
|
|
if (dx > 30) {
|
|
content.style.transform = 'translateX(-60px)'
|
|
} else {
|
|
content.style.transform = ''
|
|
}
|
|
})
|
|
|
|
item.addEventListener('touchstart', e => {
|
|
startX = e.touches[0].clientX
|
|
})
|
|
|
|
item.addEventListener('touchmove', e => {
|
|
const dx = startX - e.touches[0].clientX
|
|
if (dx > 0) {
|
|
const off = Math.min(dx, 60)
|
|
content.style.transform = `translateX(-${off}px)`
|
|
}
|
|
})
|
|
|
|
item.addEventListener('touchend', () => {
|
|
const dx = startX - event.changedTouches[0].clientX
|
|
content.style.transform = dx > 30 ? 'translateX(-60px)' : ''
|
|
})
|
|
})
|
|
|
|
function goEdit(id) {
|
|
currentEditId = id
|
|
const item = document.querySelector(`.swipe-item[data-id="${id}"]`)
|
|
document.getElementById('edit_piece').value = item.querySelector('.piece').innerText
|
|
document.getElementById('edit_weight').value = item.querySelector('.weight').innerText
|
|
document.getElementById('edit_user').value = item.querySelector('.user').innerText
|
|
document.getElementById('edit_time').value = item.querySelector('.time').innerText
|
|
document.getElementById('listPage').classList.add('hidden')
|
|
document.getElementById('editPage').classList.remove('hidden')
|
|
}
|
|
|
|
function closeEditPage() {
|
|
document.getElementById('editPage').classList.add('hidden')
|
|
document.getElementById('listPage').classList.remove('hidden')
|
|
}
|
|
|
|
function saveEdit() {
|
|
const p = document.getElementById('edit_piece').value
|
|
const w = document.getElementById('edit_weight').value
|
|
const item = document.querySelector(`.swipe-item[data-id="${currentEditId}"]`)
|
|
item.querySelector('.piece').innerText = p
|
|
item.querySelector('.weight').innerText = w
|
|
closeEditPage()
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |