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>
282 lines
13 KiB
HTML
282 lines
13 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;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.hide-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.hide-scrollbar {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
.filter-modal {
|
||
transition: transform 0.3s ease-out;
|
||
transform: translateY(100%);
|
||
}
|
||
.filter-modal.show {
|
||
transform: translateY(0);
|
||
}
|
||
.filter-overlay {
|
||
transition: opacity 0.3s ease;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
.filter-overlay.show {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
.btn-active:active {
|
||
opacity: 0.7;
|
||
transform: scale(0.98);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-200 min-h-screen flex justify-center items-center p-4">
|
||
<!-- 手机容器 -->
|
||
<div class="w-[375px] h-[812px] bg-[#F3F4F6] overflow-hidden rounded-[40px] border-[8px] border-gray-800 shadow-2xl relative flex flex-col">
|
||
<!-- iOS 状态栏 -->
|
||
<div class="flex-none bg-[#2563EB] text-white h-11 px-6 flex justify-between items-center z-50">
|
||
<span class="text-sm font-semibold">09:10</span>
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-lg" icon="mdi:signal"></iconify-icon>
|
||
<iconify-icon class="text-lg" icon="mdi:wifi"></iconify-icon>
|
||
<iconify-icon class="text-lg rotate-90" icon="mdi:battery"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<!-- 导航栏 -->
|
||
<div class="flex-none bg-[#2563EB] h-12 flex items-center px-4 relative">
|
||
<button class="flex items-center text-white text-base btn-active" onclick="window.location.href='main.html'">
|
||
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
|
||
<span>返回</span>
|
||
</button>
|
||
<h1 class="absolute left-1/2 -translate-x-1/2 text-white font-medium text-lg">计重记录</h1>
|
||
<!-- 导航栏地磅按钮已移除 -->
|
||
</div>
|
||
<!-- 内容滚动区域 -->
|
||
<div class="flex-1 overflow-y-auto hide-scrollbar pb-10">
|
||
<!-- 搜索栏 -->
|
||
<div class="h-[3px] bg-blue-500 mx-0"></div>
|
||
<section class="px-4 pt-4 pb-3">
|
||
<div class="flex items-center gap-2">
|
||
<div class="flex items-center bg-white border border-gray-200 shadow-sm rounded-[12px] h-10 px-3 gap-2 flex-1">
|
||
<iconify-icon class="text-gray-400 text-lg flex-none" icon="mdi:magnify"></iconify-icon>
|
||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none rounded-lg px-2" placeholder="搜索运单号" type="text"/>
|
||
<button class="flex-none text-gray-500 btn-active">
|
||
<iconify-icon class="text-lg" icon="mdi:qrcode-scan"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<button class="bg-white p-2.5 rounded-full shadow-sm border border-gray-200 text-[#2563EB] flex items-center justify-center flex-none btn-active" onclick="toggleFilterDrawer(true)">
|
||
<iconify-icon class="text-xl" icon="mdi:filter-variant"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
<!-- 统计标签 -->
|
||
<div class="px-4 mb-4">
|
||
<div class="flex gap-2">
|
||
<!-- 总票数 -->
|
||
<div class="flex-1 bg-white p-3 rounded-lg border-l-4 border-blue-500 shadow-sm flex flex-col items-center">
|
||
<span class="text-[11px] text-gray-500 mb-1">总票数</span>
|
||
<span class="text-xl font-bold text-blue-600">3</span>
|
||
</div>
|
||
<!-- 总件数 -->
|
||
<div class="flex-1 bg-white p-3 rounded-lg border-l-4 border-orange-500 shadow-sm flex flex-col items-center">
|
||
<span class="text-[11px] text-gray-500 mb-1">总件数</span>
|
||
<span class="text-xl font-bold text-orange-600">1</span>
|
||
</div>
|
||
<!-- 总重量 -->
|
||
<div class="flex-1 bg-white p-3 rounded-lg border-l-4 border-green-500 shadow-sm flex flex-col items-center">
|
||
<span class="text-[11px] text-gray-500 mb-1">总重量</span>
|
||
<span class="text-xl font-bold text-green-600">2</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 记录列表 -->
|
||
<div class="px-4 flex flex-col gap-4">
|
||
<!-- 卡片1 -->
|
||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden">
|
||
<div class="flex justify-between items-start mb-3">
|
||
<span class="text-[15px] font-bold text-gray-800">78133363396</span>
|
||
<!-- 绿色地磅图标，跳转称重明细 -->
|
||
<button class="btn-active" onclick="window.location.href='weight-detail.html'">
|
||
<iconify-icon class="text-2xl text-gray-500" icon="mdi:weight"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div class="flex items-center gap-2 text-gray-500 text-[13px] mb-3">
|
||
<iconify-icon inline icon="mdi:truck-outline" width="14" height="14"></iconify-icon>
|
||
<span>代理 ： 马道</span>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-2 bg-gray-50 p-3 rounded-md mb-3">
|
||
<div class="flex flex-col items-center">
|
||
<span class="text-[11px] text-gray-400">运抵件数</span>
|
||
<div class="flex items-center gap-1">
|
||
<span class="text-[14px] font-semibold text-gray-700">85件</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col items-center border-x border-gray-200 px-2">
|
||
<span class="text-[11px] text-gray-400">运抵重量</span>
|
||
<div class="flex items-center gap-1">
|
||
<span class="text-[14px] font-semibold text-gray-700">1560kg</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col items-center">
|
||
<span class="text-[11px] text-gray-400">运抵体积</span>
|
||
<div class="flex items-center gap-1">
|
||
<span class="text-[14px] font-semibold text-gray-700">12.5m³</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-2 text-gray-500 text-[13px] mb-3">
|
||
<iconify-icon inline icon="mdi:account-outline" width="16" height="16"></iconify-icon>
|
||
<span>计重人：张三 · 计重时间：2026-07-05 11:45</span>
|
||
</div>
|
||
<div class="mt-4 flex justify-end border-t border-gray-100 pt-3">
|
||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="window.location.href='detail.html'">
|
||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 卡片2 -->
|
||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden">
|
||
<div class="flex justify-between items-start mb-3">
|
||
<span class="text-[15px] font-bold text-gray-800">78133363398</span>
|
||
<!-- 绿色地磅图标 -->
|
||
<button class="btn-active" onclick="window.location.href='weight-detail.html'">
|
||
<iconify-icon class="text-2xl text-gray-500" icon="mdi:weight"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div class="flex items-center gap-2 text-gray-500 text-[13px] mb-3">
|
||
<iconify-icon inline icon="mdi:truck-outline" width="14" height="14"></iconify-icon>
|
||
<span>代理 ： 徽远</span>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-2 bg-gray-50 p-3 rounded-md mb-3">
|
||
<div class="flex flex-col items-center">
|
||
<span class="text-[11px] text-gray-400">运抵件数</span>
|
||
<div class="flex items-center gap-1">
|
||
<span class="text-[14px] font-semibold text-gray-700">60件</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col items-center border-x border-gray-200 px-2">
|
||
<span class="text-[11px] text-gray-400">运抵重量</span>
|
||
<div class="flex items-center gap-1">
|
||
<span class="text-[14px] font-semibold text-gray-700">920kg</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col items-center">
|
||
<span class="text-[11px] text-gray-400">运抵体积</span>
|
||
<div class="flex items-center gap-1">
|
||
<span class="text-[14px] font-semibold text-gray-700">8.1m³</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-2 text-gray-500 text-[13px] mb-3">
|
||
<iconify-icon inline icon="mdi:account-outline" width="16" height="16"></iconify-icon>
|
||
<span>计重人：张三 · 计重时间：2026-07-05 11:45</span>
|
||
</div>
|
||
<div class="mt-4 flex justify-end border-t border-gray-100 pt-3">
|
||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="window.location.href='detail.html'">
|
||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Toast 提示容器 -->
|
||
<div class="absolute left-1/2 -translate-x-1/2 bottom-20 bg-black/80 text-white text-[13px] px-4 py-2 rounded-full opacity-0 transition-opacity pointer-events-none z-[100]" id="toast"></div>
|
||
|
||
<!-- 筛选遮罩层 -->
|
||
<div class="filter-overlay absolute inset-0 bg-black/40 z-40" id="filterOverlay" onclick="toggleFilterDrawer(false)"></div>
|
||
|
||
<!-- 筛选弹窗 -->
|
||
<div class="filter-modal absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl z-50 p-6 shadow-2xl" id="filter-panel">
|
||
<div class="relative flex items-center justify-center mb-6">
|
||
<h2 class="text-center text-[18px] font-bold text-gray-900">筛选条件</h2>
|
||
<button class="absolute right-0 top-0 text-gray-400 btn-active" onclick="toggleFilterDrawer(false)">
|
||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label class="block text-[14px] text-gray-700 mb-1.5">入库日期起</label>
|
||
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
|
||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择入库日期" readonly="" type="text"/>
|
||
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:calendar" width="18"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-[14px] text-gray-700 mb-1.5">入库日期止</label>
|
||
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
|
||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择入库日期" readonly="" type="text"/>
|
||
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:calendar" width="18"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<label class="block text-[14px] text-gray-700 mb-1.5">代理人</label>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg p-3 flex items-center justify-between text-gray-400">
|
||
<span class="text-[14px]">全部</span>
|
||
<iconify-icon icon="mdi:chevron-down"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<label class="block text-[14px] text-gray-700 mb-1.5">特码</label>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg p-3 flex items-center justify-between text-gray-400">
|
||
<span class="text-[14px]">全部</span>
|
||
<iconify-icon icon="mdi:chevron-down"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<label class="block text-[14px] text-gray-700 mb-1.5">目的站</label>
|
||
<input type="text" class="w-full bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-[14px] outline-none" placeholder="请输入目的站">
|
||
</div>
|
||
<div class="space-y-2">
|
||
<label class="block text-[14px] text-gray-700 mb-1.5">计重人</label>
|
||
<div class="bg-gray-50 border border-gray-200 rounded-lg p-3 flex items-center justify-between text-gray-400">
|
||
<span class="text-[14px]">全部</span>
|
||
<iconify-icon icon="mdi:chevron-down"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-4 pt-2">
|
||
<button class="flex-1 bg-white border border-gray-300 text-gray-600 py-3.5 rounded-xl font-bold btn-active" onclick="showToast('已重置筛选');toggleFilterDrawer(false)">
|
||
重置
|
||
</button>
|
||
<button class="flex-1 bg-[#2563EB] text-white py-3.5 rounded-xl font-bold shadow-lg btn-active" onclick="toggleFilterDrawer(false);showToast('已应用筛选')">
|
||
确认
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="h-8"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function showToast(message) {
|
||
const toast = document.getElementById('toast');
|
||
toast.textContent = message;
|
||
toast.classList.add('opacity-100');
|
||
setTimeout(() => {
|
||
toast.classList.remove('opacity-100');
|
||
}, 1500);
|
||
}
|
||
function toggleFilterDrawer(show) {
|
||
const overlay = document.getElementById('filterOverlay');
|
||
const modal = document.getElementById('filter-panel');
|
||
if (show) {
|
||
overlay.classList.add('show');
|
||
modal.classList.add('show');
|
||
} else {
|
||
overlay.classList.remove('show');
|
||
modal.classList.remove('show');
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |