feat: 完成国际出港移库/出库交接页面5.5寸手机端适配
- 落地手机端双形态适配框架：同名布局+资源限定符（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>
This commit is contained in:
195
documents/5.5寸手持端设计文件/00_全部入口总览.html
Normal file
195
documents/5.5寸手持端设计文件/00_全部入口总览.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>5.5 寸手持端设计稿 · 全部入口总览</title>
|
||||
<style>
|
||||
:root {
|
||||
--cols: 4;
|
||||
--scale: 1;
|
||||
--pw: 430px;
|
||||
--ph: 890px;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0 32px 48px;
|
||||
background: #EEF1F6;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Arial, sans-serif;
|
||||
color: #1F2937;
|
||||
}
|
||||
header {
|
||||
padding: 32px 0 20px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
h1 small {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #6B7280;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #E3E8F0;
|
||||
border-radius: 10px;
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.05);
|
||||
}
|
||||
.toolbar label { color: #6B7280; margin-right: 6px; }
|
||||
.toolbar select {
|
||||
font-size: 13px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #D8DEE9;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: #1F2937;
|
||||
}
|
||||
.toolbar button {
|
||||
font-size: 13px;
|
||||
padding: 5px 12px;
|
||||
border: 1px solid #2563EB;
|
||||
background: #2563EB;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toolbar button:active { opacity: .8; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cols), max-content);
|
||||
gap: 28px 24px;
|
||||
justify-content: start;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #E3E8F0;
|
||||
border-radius: 14px;
|
||||
padding: 12px 12px 14px;
|
||||
box-shadow: 0 2px 10px rgba(17,24,39,.06);
|
||||
width: calc(var(--pw) * var(--scale) + 24px);
|
||||
}
|
||||
.cap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 2px 10px;
|
||||
}
|
||||
.no {
|
||||
flex: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
background: #2563EB;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.name { font-size: 15px; font-weight: 600; }
|
||||
.tag {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
color: #2563EB;
|
||||
background: #EAF1FE;
|
||||
border-radius: 5px;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
.frame {
|
||||
width: calc(var(--pw) * var(--scale));
|
||||
height: calc(var(--ph) * var(--scale));
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background: #E5E7EB;
|
||||
}
|
||||
.frame iframe {
|
||||
width: var(--pw);
|
||||
height: var(--ph);
|
||||
border: 0;
|
||||
display: block;
|
||||
transform: scale(var(--scale));
|
||||
transform-origin: top left;
|
||||
}
|
||||
body.clean .toolbar { display: none; }
|
||||
body.clean header { padding-bottom: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>5.5 寸手持端设计稿 · 全部入口总览
|
||||
<small>共 11 个业务入口 · 单机画布 390 × 844</small>
|
||||
</h1>
|
||||
<div class="toolbar">
|
||||
<span><label>列数</label>
|
||||
<select id="cols" onchange="setVar('--cols', this.value)">
|
||||
<option>2</option><option>3</option><option selected>4</option><option>5</option><option>6</option>
|
||||
</select>
|
||||
</span>
|
||||
<span><label>缩放</label>
|
||||
<select id="scale" onchange="setVar('--scale', this.value)">
|
||||
<option value="1">100%</option>
|
||||
<option value="0.85">85%</option>
|
||||
<option value="0.75">75%</option>
|
||||
<option value="0.6">60%</option>
|
||||
<option value="0.5">50%</option>
|
||||
</select>
|
||||
</span>
|
||||
<button onclick="document.body.classList.toggle('clean')">隐藏工具栏</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid" id="grid"></div>
|
||||
|
||||
<script>
|
||||
const PAGES = [
|
||||
['01', 'ULD 管理', '综合管理', '01_ULD管理/ULD管理.html'],
|
||||
['02', '出库交接', '国际出港', '02_出库交接/出库交接.html'],
|
||||
['03', '出港计重', '国际出港', '03_出港计重/main.html'],
|
||||
['04', '出港运抵', '国际出港', '04_出港运抵/main.html'],
|
||||
['05', '出港移库', '国际出港', '05_出港移库/出港移库.html'],
|
||||
['06', '出港查询', '国际出港', '06_出港查询/出港查询.html'],
|
||||
['07', '出港仓库', '国际出港', '07_出港仓库/出港仓库.html'],
|
||||
['08', '进港仓库', '国际进港', '08_进港仓库/进港仓库.html'],
|
||||
['09', '提取出库', '国际进港', '09_提取出库/提取出库.html'],
|
||||
['10', '进港查询', '国际进港', '10_进港查询/进港查询.html'],
|
||||
['11', '进港移库', '国际进港', '11_进港移库/进港移库.html'],
|
||||
];
|
||||
|
||||
document.getElementById('grid').innerHTML = PAGES.map(([no, name, menu, src]) => `
|
||||
<div class="card">
|
||||
<div class="cap">
|
||||
<span class="no">${no}</span>
|
||||
<span class="name">${name}</span>
|
||||
<span class="tag">${menu}</span>
|
||||
</div>
|
||||
<div class="frame">
|
||||
<iframe src="${src}" loading="eager" scrolling="no"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
function setVar(k, v) {
|
||||
document.documentElement.style.setProperty(k, v);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
650
documents/5.5寸手持端设计文件/01_ULD管理/ULD管理.html
Normal file
650
documents/5.5寸手持端设计文件/01_ULD管理/ULD管理.html
Normal file
@@ -0,0 +1,650 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>ULD管理</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);
|
||||
}
|
||||
.custom-checkbox-round {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 9999px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid #D1D5DB;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.custom-checkbox-round:checked {
|
||||
background-color: #0D6EFD;
|
||||
border-color: #0D6EFD;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
|
||||
background-size: 14px 14px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.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 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="alert('返回首页')">
|
||||
<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">ULD管理</h1>
|
||||
</header>
|
||||
<section class="px-4 pt-4 pb-3 flex-none">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center bg-white border border-gray-200 rounded-[12px] h-10 px-3 gap-2 flex-1 shadow-sm">
|
||||
<iconify-icon class="text-gray-500 text-[14px] text-lg flex-none" icon="mdi:magnify"></iconify-icon>
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-700 placeholder-gray-400 outline-none border-none rounded-lg px-2" placeholder="搜索ULD编号" type="text"/>
|
||||
<button class="flex-none text-blue-500">
|
||||
<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" onclick="toggleFilterDrawer(true)">
|
||||
<iconify-icon class="text-lg" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<main class="flex-1 overflow-y-auto px-4 pt-3 pb-[80px] no-scrollbar">
|
||||
<!-- 卡片1 -->
|
||||
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363396', '占用', 'CA', '150', '12.5', '6800', 'CA1111', 'PEK', 'B区-05货位', '--')">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363396</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-[#FFF3E0] text-[#E67722] text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">占用</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2 text-gray-500 text-[13px]">
|
||||
<div class="grid grid-cols-2 gap-x-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
|
||||
<span>所属航司：CA</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span>来源：空运</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
|
||||
<span>入库时间：2026-07-20 15:59:20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片2 -->
|
||||
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363397', '可用', 'CA', '120', '10.0', '5500', 'CA2222', 'CAN', 'C区-12货位', '--')">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363397</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">可用</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2 text-gray-500 text-[13px]">
|
||||
<div class="grid grid-cols-2 gap-x-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
|
||||
<span>所属航司：CA</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span>来源：空运</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
|
||||
<span>入库时间：2026-07-20 15:59:20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片3 -->
|
||||
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363398', '维修', 'CA', '0', '0.0', '0', 'CA3333', 'PVG', '维修区', '维修中')">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363398</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-red-50 text-red-600 text-[11px] px-2 py-0.5 rounded font-medium">维修</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2 text-gray-500 text-[13px]">
|
||||
<div class="grid grid-cols-2 gap-x-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
|
||||
<span>所属航司：CA</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span>来源：陆运</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
|
||||
<span>入库时间：2026-07-20 15:59:20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片4 -->
|
||||
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363399', '占用', 'CA', '280', '20.0', '8500', 'CA4444', 'CTU', 'A区-08货位', '--')">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363399</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-[#FFF3E0] text-[#E67722] text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">占用</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2 text-gray-500 text-[13px]">
|
||||
<div class="grid grid-cols-2 gap-x-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
|
||||
<span>所属航司：CA</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span>来源：空运</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
|
||||
<span>入库时间：2026-07-20 15:59:20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="absolute bottom-0 w-full bg-white border-t border-gray-200 z-40 flex flex-col pt-3 pb-3" id="bottom-toolbar" style="display: flex;">
|
||||
<div class="absolute right-4 -top-[73px] z-50">
|
||||
<button class="bg-[#2563EB] text-white w-11 h-11 rounded-full flex items-center justify-center shadow-lg shadow-blue-500/40" onclick="showAddDialog()">
|
||||
<iconify-icon icon="mdi:plus" width="24"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-4 flex items-center w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="custom-checkbox-round flex-none" id="select-all-cb" onclick="toggleSelectAll(this.checked)" type="checkbox"/>
|
||||
<label class="text-[13px] text-[#1F2937] font-medium cursor-pointer" for="select-all-cb">全选</label>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[12px] text-[#9CA3AF]">已选 <span id="selected-count">0 / 4</span> 项</span>
|
||||
<button class="bg-[#FDEDED] text-[#DC2626] text-[15px] font-bold px-5 py-2 rounded-[10px] flex items-center gap-1.5 btn-active" onclick="handleBatchDelete()">
|
||||
<iconify-icon class="text-base" icon="mdi:delete-outline"></iconify-icon>
|
||||
<span>删除</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 新增弹窗 -->
|
||||
<div class="absolute inset-0 bg-gray-100 z-[60] flex flex-col hidden" id="addUldOverlay">
|
||||
<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="hideAddDialog()">
|
||||
<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">ULD新增</h1>
|
||||
</header>
|
||||
<div class="flex-1 overflow-y-auto p-4 no-scrollbar">
|
||||
<div class="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,0,0,0.05)] 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">ULD编号<span class="text-red-500 ml-0.5">*</span></span>
|
||||
<input id="add-uldNo" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入ULD编号" type="text"/>
|
||||
</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>
|
||||
<div class="flex-1 flex items-center justify-between cursor-pointer status-display" onclick="showSelectPanel('status', '请选择状态', ['可用', '占用', '维修'])">
|
||||
<span id="add-status-text" class="text-[14px] text-gray-500">请选择状态</span>
|
||||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</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>
|
||||
<div class="flex-1 flex items-center justify-between cursor-pointer airline-display" onclick="showSelectPanel('airline', '请选择所属航司', ['CA', 'MU', 'CZ', '3U'])">
|
||||
<span id="add-airline-text" class="text-[14px] text-gray-500">请选择所属航司</span>
|
||||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</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>
|
||||
<div class="flex-1 flex items-center justify-between cursor-pointer source-display" onclick="showSelectPanel('source', '请选择来源', ['空运', '陆运'])">
|
||||
<span id="add-source-text" class="text-[14px] text-gray-500">请选择来源</span>
|
||||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</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="add-weight" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入自重" type="number"/>
|
||||
</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="add-flightNo" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入进港航班号" type="text"/>
|
||||
</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="add-port" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="HFE" type="text"/>
|
||||
</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 class="text-red-500 ml-0.5">*</span></span>
|
||||
<input id="add-inTime" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入入库时间" type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center py-[14px]">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">备注</span>
|
||||
<input id="add-remark" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入备注" type="text"/>
|
||||
</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="saveUld()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<div class="absolute inset-0 bg-gray-100 z-[70] flex flex-col hidden" id="detailOverlay">
|
||||
<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="hideUldDetail()">
|
||||
<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">ULD详情</h1>
|
||||
<button class="absolute right-4 top-1/2 -translate-y-1/2 text-white text-lg" onclick="openEdit()">
|
||||
<iconify-icon icon="mdi:pencil" width="22"></iconify-icon>
|
||||
</button>
|
||||
</header>
|
||||
<div class="flex-1 overflow-y-auto p-4 no-scrollbar">
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden px-4 mb-6">
|
||||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||||
<span class="text-[13px] font-medium text-[#6B7280]">ULD编号</span>
|
||||
<span class="text-[14px] font-normal text-[#111827]" id="detail-uldNo">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||||
<span class="text-[13px] font-medium text-[#6B7280]">状态</span>
|
||||
<span class="text-[13px] font-medium px-2 py-0.5 rounded-[6px]" id="detail-status">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||||
<span class="text-[13px] font-medium text-[#6B7280]">所属航司</span>
|
||||
<span class="text-[14px] font-normal text-[#111827]" id="detail-airline">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||||
<span class="text-[13px] font-medium text-[#6B7280]">自重 (kg)</span>
|
||||
<span class="text-[14px] font-normal text-[#111827]" id="detail-weight">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||||
<span class="text-[13px] font-medium text-[#6B7280]">最大装载容积 (m³)</span>
|
||||
<span class="text-[14px] font-normal text-[#111827]" id="detail-volume">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||||
<span class="text-[13px] font-medium text-[#6B7280]">最大载重 (kg)</span>
|
||||
<span class="text-[14px] font-normal text-[#111827]" id="detail-maxWeight">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||||
<span class="text-[13px] font-medium text-[#6B7280]">进港航班号</span>
|
||||
<span class="text-[14px] font-normal text-[#111827]" id="detail-flightNo">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||||
<span class="text-[13px] font-medium text-[#6B7280]">所在港</span>
|
||||
<span class="text-[14px] font-normal text-[#111827]" id="detail-port">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||||
<span class="text-[13px] font-medium text-[#6B7280]">来源</span>
|
||||
<span class="text-[14px] font-normal text-[#111827]" id="detail-source">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||||
<span class="text-[13px] font-medium text-[#6B7280]">入库时间</span>
|
||||
<span class="text-[14px] font-normal text-[#111827]" id="detail-inTime">--</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-3.5">
|
||||
<span class="text-[13px] font-medium text-[#6B7280]">备注</span>
|
||||
<span class="text-[14px] font-normal text-[#111827]" id="detail-remark">--</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 修改页面 -->
|
||||
<div class="absolute inset-0 bg-gray-100 z-[80] flex flex-col hidden" id="editOverlay">
|
||||
<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="closeEdit()">
|
||||
<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">ULD修改</h1>
|
||||
</header>
|
||||
<div class="flex-1 overflow-y-auto p-4 no-scrollbar">
|
||||
<div class="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,0,0,0.05)] 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">ULD编号</span>
|
||||
<input id="edit-uldNo" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text" readonly/>
|
||||
</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>
|
||||
<div class="flex-1 flex items-center justify-between cursor-pointer status-display" onclick="showSelectPanel('editStatus', '请选择状态', ['可用', '占用', '维修'])">
|
||||
<span id="edit-status-text" class="text-[13px] font-medium px-2 py-0.5 rounded-[6px] text-gray-800">--</span>
|
||||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</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>
|
||||
<div class="flex-1 flex items-center justify-between cursor-pointer airline-display" onclick="showSelectPanel('editAirline', '请选择航司', ['CA', 'MU', 'CZ', '3U'])">
|
||||
<span id="edit-airline-text" class="text-[14px] text-gray-800">--</span>
|
||||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</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>
|
||||
<input id="edit-weight" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="number"/>
|
||||
</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-flightNo" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
|
||||
</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-port" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
|
||||
</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>
|
||||
<div class="flex-1 flex items-center justify-between cursor-pointer source-display" onclick="showSelectPanel('editSource', '请选择来源', ['空运', '陆运'])">
|
||||
<span id="edit-source-text" class="text-[14px] text-gray-800">--</span>
|
||||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</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-inTime" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center py-[14px]">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">备注</span>
|
||||
<input id="edit-remark" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
|
||||
</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 class="absolute inset-0 z-[100] bg-black/50 flex items-end justify-center" id="filterOverlay" onclick="toggleFilterDrawer(false)" style="display: none;">
|
||||
<div class="bg-white rounded-t-[20px] w-full max-w-[390px] px-5 pt-6 pb-8" onclick="event.stopPropagation()">
|
||||
<div class="relative flex items-center justify-center mb-6">
|
||||
<button class="absolute right-0 top-0 text-gray-400" onclick="toggleFilterDrawer(false)">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
<h2 class="text-[18px] font-bold text-gray-900">筛选条件</h2>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<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 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入入库时间" 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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入进港航班号" type="text"/>
|
||||
</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:chevron-down" 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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 mt-8">
|
||||
<button class="flex-1 h-11 text-[15px] font-medium text-gray-600 bg-white border border-gray-200 rounded-[10px]" onclick="resetFilter()">重置</button>
|
||||
<button class="flex-1 h-11 text-[15px] font-medium text-white bg-[#2563EB] rounded-[10px] shadow-sm" onclick="confirmFilter()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 选择面板 -->
|
||||
<div class="fixed inset-0 z-[100] bg-black/40 flex items-end justify-center" id="selectPanel" onclick="hideSelectPanel(event)" style="display: none;">
|
||||
<div class="bg-white rounded-t-[20px] w-full max-w-[390px] px-4 pt-4 pb-8" onclick="event.stopPropagation()">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-6"></div>
|
||||
<div class="text-center text-[16px] font-bold text-gray-900" id="selectPanelTitle">请选择</div>
|
||||
<button class="w-6 h-6 flex items-center justify-center text-gray-500" onclick="hideSelectPanel()">
|
||||
<iconify-icon icon="mdi:close" width="20"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-1" id="selectPanelOptions"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentDetail = {};
|
||||
|
||||
function showUldDetail(uldNo, status, airline, weight, volume, maxWeight, flightNo, port, location, remark) {
|
||||
currentDetail = { uldNo, status, airline, weight, volume, maxWeight, flightNo, port, location, remark };
|
||||
document.getElementById('detail-uldNo').innerText = uldNo;
|
||||
document.getElementById('detail-airline').innerText = airline;
|
||||
document.getElementById('detail-weight').innerText = weight;
|
||||
document.getElementById('detail-volume').innerText = volume;
|
||||
document.getElementById('detail-maxWeight').innerText = maxWeight;
|
||||
document.getElementById('detail-flightNo').innerText = flightNo;
|
||||
document.getElementById('detail-port').innerText = port;
|
||||
document.getElementById('detail-remark').innerText = remark;
|
||||
document.getElementById('detail-inTime').innerText = "2026-07-20 15:59:20";
|
||||
document.getElementById('detail-source').innerText = "空运";
|
||||
|
||||
const st = document.getElementById('detail-status');
|
||||
st.innerText = status;
|
||||
st.className = 'text-[11px] px-2 rounded-[6px] font-medium leading-none h-5 flex items-center';
|
||||
if (status === '占用') {
|
||||
st.classList.add('bg-orange-100', 'text-orange-600');
|
||||
} else if (status === '可用') {
|
||||
st.classList.add('bg-green-100','text-green-600');
|
||||
} else if (status === '维修') {
|
||||
st.classList.add('bg-red-100','text-red-600');
|
||||
} else {
|
||||
st.className = 'text-[14px] font-normal text-[#111827]';
|
||||
}
|
||||
|
||||
document.getElementById('detailOverlay').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function hideUldDetail() {
|
||||
document.getElementById('detailOverlay').classList.add('hidden');
|
||||
}
|
||||
|
||||
function openEdit() {
|
||||
document.getElementById('editOverlay').classList.remove('hidden');
|
||||
document.getElementById('edit-uldNo').value = currentDetail.uldNo;
|
||||
document.getElementById('edit-weight').value = currentDetail.weight;
|
||||
document.getElementById('edit-flightNo').value = currentDetail.flightNo;
|
||||
document.getElementById('edit-port').value = currentDetail.port;
|
||||
document.getElementById('edit-inTime').value = "2026-07-20 15:59:20";
|
||||
document.getElementById('edit-remark').value = currentDetail.remark;
|
||||
|
||||
const st = document.getElementById('edit-status-text');
|
||||
st.textContent = currentDetail.status;
|
||||
st.className = 'text-[13px] font-medium px-2 py-0.5 rounded-[6px]';
|
||||
if (currentDetail.status === '占用') {
|
||||
st.classList.add('bg-[#FFF3E0]','text-[#E67722]');
|
||||
} else if (currentDetail.status === '可用') {
|
||||
st.classList.add('bg-green-100','text-green-600');
|
||||
} else if (currentDetail.status === '维修') {
|
||||
st.classList.add('bg-red-100','text-red-600');
|
||||
} else {
|
||||
st.classList.add('text-gray-800');
|
||||
}
|
||||
|
||||
document.getElementById('edit-airline-text').textContent = currentDetail.airline;
|
||||
document.getElementById('edit-source-text').textContent = '空运';
|
||||
}
|
||||
|
||||
function closeEdit() {
|
||||
document.getElementById('editOverlay').classList.add('hidden');
|
||||
}
|
||||
|
||||
function saveEdit() {
|
||||
alert('修改成功');
|
||||
closeEdit();
|
||||
hideUldDetail();
|
||||
}
|
||||
|
||||
function toggleFilterDrawer(show) {
|
||||
document.getElementById('filterOverlay').style.display = show ? 'flex' : 'none';
|
||||
}
|
||||
function resetFilter() {
|
||||
document.querySelectorAll('#filterOverlay input').forEach(i=>i.value='');
|
||||
}
|
||||
function confirmFilter() {
|
||||
toggleFilterDrawer(false);
|
||||
}
|
||||
|
||||
function toggleSelectAll(checked) {
|
||||
document.querySelectorAll('main .custom-checkbox-round').forEach(cb=>cb.checked=checked);
|
||||
updateSelectedCount();
|
||||
}
|
||||
function handleCheckboxClick() {
|
||||
updateSelectedCount();
|
||||
}
|
||||
function updateSelectedCount() {
|
||||
const total = document.querySelectorAll('main .custom-checkbox-round').length;
|
||||
const ckd = document.querySelectorAll('main .custom-checkbox-round:checked').length;
|
||||
document.getElementById('selected-count').innerText = ckd+' / '+total;
|
||||
document.getElementById('select-all-cb').checked = total > 0 && total === ckd;
|
||||
}
|
||||
|
||||
function showAddDialog() {
|
||||
document.getElementById('addUldOverlay').classList.remove('hidden');
|
||||
}
|
||||
function hideAddDialog() {
|
||||
document.getElementById('addUldOverlay').classList.add('hidden');
|
||||
}
|
||||
function saveUld() {
|
||||
alert('保存成功');
|
||||
hideAddDialog();
|
||||
}
|
||||
|
||||
let currentSelectField = '';
|
||||
function showSelectPanel(field, title, options) {
|
||||
currentSelectField = field;
|
||||
document.getElementById('selectPanelTitle').textContent = title;
|
||||
const box = document.getElementById('selectPanelOptions');
|
||||
box.innerHTML = '';
|
||||
options.forEach(opt=>{
|
||||
const d = document.createElement('div');
|
||||
d.className = 'py-3 px-4 text-center border-b cursor-pointer hover:bg-gray-50';
|
||||
if(field.includes('status')){
|
||||
let cls = opt=='占用'?'bg-[#FFF3E0] text-[#E67722]':
|
||||
opt=='可用'?'bg-green-100 text-green-600':'bg-red-100 text-red-600';
|
||||
d.innerHTML = `<span class="${cls} px-2 py-0.5 rounded-[6px] text-sm font-medium">${opt}</span>`;
|
||||
} else {
|
||||
d.textContent = opt;
|
||||
}
|
||||
d.onclick = ()=>{
|
||||
if(field === 'editStatus'){
|
||||
const t = document.getElementById('edit-status-text');
|
||||
t.textContent = opt;
|
||||
t.className = 'text-[13px] font-medium px-2 py-0.5 rounded-[6px]';
|
||||
if(opt=='占用'){
|
||||
t.classList.add('bg-[#FFF3E0]','text-[#E67722]');
|
||||
}
|
||||
if(opt=='可用')t.classList.add('bg-green-100','text-green-600');
|
||||
if(opt=='维修')t.classList.add('bg-red-100','text-red-600');
|
||||
}
|
||||
if(field === 'editAirline') document.getElementById('edit-airline-text').textContent = opt;
|
||||
if(field === 'editSource') document.getElementById('edit-source-text').textContent = opt;
|
||||
if(field === 'status') document.getElementById('add-status-text').textContent = opt;
|
||||
if(field === 'airline') document.getElementById('add-airline-text').textContent = opt;
|
||||
if(field === 'source') document.getElementById('add-source-text').textContent = opt;
|
||||
hideSelectPanel();
|
||||
};
|
||||
box.appendChild(d);
|
||||
});
|
||||
document.getElementById('selectPanel').style.display = 'flex';
|
||||
}
|
||||
function hideSelectPanel() {
|
||||
document.getElementById('selectPanel').style.display = 'none';
|
||||
}
|
||||
|
||||
function handleBatchDelete() {
|
||||
const ckd = document.querySelectorAll('main .custom-checkbox-round:checked').length;
|
||||
if(ckd===0)return alert('请选择');
|
||||
if(confirm('确定删除？')) alert('删除成功');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
715
documents/5.5寸手持端设计文件/02_出库交接/出库交接.html
Normal file
715
documents/5.5寸手持端设计文件/02_出库交接/出库交接.html
Normal file
@@ -0,0 +1,715 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
|
||||
<title>出库交接 - 移动端原型</title>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||||
<!-- Iconify -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'PingFang SC';
|
||||
src: local('PingFang SC');
|
||||
}
|
||||
body {
|
||||
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
/* 模拟手机容器 */
|
||||
.phone-container {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #f5f6fa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border: 8px solid #1a1a1a;
|
||||
border-radius: 40px;
|
||||
}
|
||||
/* 隐藏滚动条但保留功能 */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
/* 页面切换动画 */
|
||||
.page {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.page.active {
|
||||
display: flex;
|
||||
}
|
||||
/* 按钮点击态 */
|
||||
.btn-active:active {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
/* 复选框样式 */
|
||||
.custom-checkbox {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.custom-checkbox:checked {
|
||||
background-color: #2563EB;
|
||||
border-color: #2563EB;
|
||||
}
|
||||
.custom-checkbox:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.custom-checkbox-round {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 50%;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.custom-checkbox-round:checked {
|
||||
background-color: #2563EB;
|
||||
border-color: #2563EB;
|
||||
}
|
||||
.custom-checkbox-round:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
/* 卡片选中样式已移除 */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-container">
|
||||
<!-- 状态栏模拟 -->
|
||||
<div class="h-10 w-full flex justify-between items-center px-8 flex-none bg-[#2563EB] text-white">
|
||||
<span class="text-xs font-semibold">09:41</span>
|
||||
<div class="flex space-x-1 items-center">
|
||||
<iconify-icon icon="mdi:signal" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:wifi" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:battery" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面1: 货运列表首页 -->
|
||||
<div class="page active" id="page-home">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center btn-active" onclick="alert('返回首页')">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">出库交接</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
|
||||
<!-- 内容滚动区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-24">
|
||||
<!-- 搜索栏 -->
|
||||
<section class="px-4 pt-4 pb-3 bg-white">
|
||||
<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-500 text-[14px] 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="搜索ULD编号" type="text"/>
|
||||
<button class="flex-none text-blue-500">
|
||||
<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" onclick="toggleFilterDrawer(true)">
|
||||
<iconify-icon class="text-xl" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 子Tab切换栏 -->
|
||||
<div class="flex bg-white border-b sticky top-0 z-20">
|
||||
<button class="flex-1 py-3 text-sm font-bold text-[#1F2937] border-b-2 border-[#1F2937] transition-all" id="tab-pending" onclick="switchTab('pending')">
|
||||
待交接 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5">3</span>
|
||||
</button>
|
||||
<button class="flex-1 py-3 text-sm font-bold text-gray-500 text-[14px] border-b-2 border-transparent transition-all" id="tab-shipped" onclick="switchTab('shipped')">
|
||||
已交接 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5">3</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<div class="p-3 pt-4 space-y-3" id="list-pending">
|
||||
<!-- 卡片 1 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">PMC90901CZ</div>
|
||||
</div>
|
||||
<div class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">IMP代码</div>
|
||||
</div>
|
||||
<!-- 航班信息行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260706/MU1111</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">架子车号</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">076</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">目的港</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">LAX</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">装机重</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">200kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 库位信息行 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">库位：大棚A3</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="showDetail({id: 'PMC87678MU', status: '待交接', rackNo: '076', location: 'A区-03货位', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 2 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">AKE87865MU</div>
|
||||
</div>
|
||||
<div class="bg-red-600 text-white text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">IMP代码</div>
|
||||
</div>
|
||||
<!-- 航班信息行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260706/CA2222</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">架子车号</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">066</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">目的港</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">LAX</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">装机重</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">150kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 库位信息行 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">库位：空侧-05</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="showDetail({id: 'AKE87865MU', status: '待交接', agent: '043', flightDate: '20260706', flightNo: 'CA2222', pieces: '85', weight: '150', rackNo: '055', carrier: 'CA', origin: 'PEK', location: 'B区-05货位', code: '076', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 3 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">PMC87678MU</div>
|
||||
</div>
|
||||
<div class="bg-red-600 text-white text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">IMP代码</div>
|
||||
</div>
|
||||
<!-- 航班信息行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260707/3U3333</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">架子车号</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">055</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">目的港</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">LAX</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">装机重</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">450kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 库位信息行 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">库位：C区-01货位</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="showDetail({id: 'PMC87678MU', status: '待交接', agent: 'DHL', flightDate: '20260707', flightNo: '3U3333', pieces: '200', weight: '450', rackNo: '055', carrier: '3U', origin: 'CTU', location: 'C区-01货位', code: '076', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已交接列表内容 -->
|
||||
<div class="p-3 pt-4 space-y-3 hidden" id="list-shipped">
|
||||
<!-- 卡片 1 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">PMC90901CZ</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已交接</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作信息行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260704/MU1111</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">架子车号</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">076</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">目的港</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">LAX</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">装机重</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">80kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作人信息 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">交接人：张三 · 交接时间：2026-07-05 11:45</span>
|
||||
</div>
|
||||
<!-- 查看详情链接 -->
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer" onclick="showDetail({id: 'PMC90901CZ', status: '已交接', agent: '076', rackNo: '076', location: 'B区-05货位', code: '076', counterTime: '2026-07-05 10:30', counterPerson: '张三', outboundTime: '2026-07-05 11:45', outboundPerson: '张三'})">
|
||||
查看详情 <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">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">AKE87865MU</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已交接</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作信息行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260705/CA2222</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">架子车号</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">043</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">目的港</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">LAX</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">装机重</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">300kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作人信息 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">交接人：赵六 · 交接时间：2026-07-06 10:30</span>
|
||||
</div>
|
||||
<!-- 查看详情链接 -->
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer" onclick="showDetail({id: 'AKE87865MU', status: '已交接', agent: '043', flightDate: '20260705', flightNo: 'CA2222', pieces: '120', weight: '300', pickupNo: 'TH20260702002', rackNo: '鲜花绿植', carrier: 'CA', origin: 'SFO', location: 'A区-08货位', code: '076', counterTime: '2026-07-06 09:15', counterPerson: '王五', outboundTime: '2026-07-06 10:30', outboundPerson: '赵六'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 3 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">PMC87678MU</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已交接</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作信息行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260705/3U3333</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">架子车号</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">077</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">目的港</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">LAX</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">装机重</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">160kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作人信息 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">交接人：孙八 · 交接时间：2026-07-06 15:20</span>
|
||||
</div>
|
||||
<!-- 查看详情链接 -->
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer" onclick="showDetail({id: 'PMC87678MU', status: '已交接', agent: 'DHL', flightDate: '20260705', flightNo: '3U3333', pieces: '75', weight: '160', pickupNo: 'TH20260703003', rackNo: '生鲜食品', carrier: '3U', origin: 'CDG', location: 'D区-02货位', code: 'NOR', counterTime: '2026-07-06 14:00', counterPerson: '钱七', outboundTime: '2026-07-06 15:20', outboundPerson: '孙八'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部工具栏 -->
|
||||
<div class="absolute bottom-0 w-full bg-white border-t border-gray-200 z-40 flex flex-col pt-4 pb-4" id="bottom-toolbar">
|
||||
<!-- 操作区域 -->
|
||||
<div class="px-4 flex items-center w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="custom-checkbox-round" id="select-all-cb" onclick="toggleSelectAll(this.checked)" type="checkbox"/>
|
||||
<label class="text-[13px] text-[#1F2937] font-medium cursor-pointer" for="select-all-cb">全选</label>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[12px] text-[#9CA3AF]">已选 <span id="selected-count">0</span> 项</span>
|
||||
<button class="bg-[#2563EB] text-white text-[15px] font-bold px-5 py-2 rounded-[10px] shadow-lg shadow-blue-500/25 btn-active" onclick="alert('交接操作')">
|
||||
交接
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面2: 详情页 -->
|
||||
<div class="page" id="page-detail">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center btn-active" onclick="switchPage('home')">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">板箱详情</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-8 p-4">
|
||||
<!-- 货运单据样式卡片 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100">
|
||||
<!-- 1. 顶部蓝色条带 -->
|
||||
<div class="bg-[#2563EB] px-4 py-3 flex justify-between items-center text-white">
|
||||
<span class="font-bold text-[17px] leading-tight" id="detail-awb">781-22222620</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<!-- 3. 货物名称 -->
|
||||
<div class="text-[22px] font-bold text-[#111827] mb-3" id="detail-rack-no">076</div>
|
||||
<!-- 4. 两列信息表格 -->
|
||||
<div class="grid grid-cols-2 gap-x-8 gap-y-3">
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">装机重</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-count">55</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">航班日期</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-weight">20260706</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">航班号</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-carrier">MU2231</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">目的港</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-flight-date">LAX</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">IMP代码</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-carrier">X</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">板型</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-flight-date">QP</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">库位</div>
|
||||
<div class="flex">
|
||||
<span class="bg-orange-50 text-orange-600 px-1 rounded text-[15px] font-bold" id="detail-location">1111111</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">备注</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-flight-no">危险品</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 复磅信息卡片 -->
|
||||
<div class="mt-4 bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 hidden" id="detail-outbound-card">
|
||||
<div class="bg-[#10B981] px-4 py-2.5">
|
||||
<span class="text-white font-semibold text-[15px]">复磅信息</span>
|
||||
</div>
|
||||
<div class="bg-white px-4 py-3 grid grid-cols-2 gap-y-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">复磅人</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-counter-person">-</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">复磅时间</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-counter-time">-</span>
|
||||
</div>
|
||||
<div class="flex flex-col" id="detail-outbound-person-row">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">交接人</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-outbound-person">-</span>
|
||||
</div>
|
||||
<div class="flex flex-col" id="detail-outbound-time-row">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">交接时间</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-outbound-time">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选条件弹窗（从ULD管理移植） -->
|
||||
<div class="absolute inset-0 z-[100] bg-black/50 flex items-end justify-center" id="filterOverlay" onclick="toggleFilterDrawer(false)" style="display: none;">
|
||||
<div class="bg-white rounded-t-[20px] w-full max-w-[375px] px-5 pt-6 pb-8" onclick="event.stopPropagation()">
|
||||
<!-- 标题 -->
|
||||
<div class="relative flex items-center justify-center mb-6">
|
||||
<button class="absolute right-0 top-0 text-gray-400" onclick="toggleFilterDrawer(false)">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
<h2 class="text-[18px] font-bold text-gray-900">筛选条件</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5">
|
||||
<!-- 航班日期 -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入航班号" type="text"/>
|
||||
</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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部按钮 -->
|
||||
<div class="flex gap-3 mt-8">
|
||||
<button class="flex-1 h-11 text-[15px] font-medium text-gray-600 bg-white border border-gray-200 rounded-[10px]" onclick="resetFilter()">重置</button>
|
||||
<button class="flex-1 h-11 text-[15px] font-medium text-white bg-[#2563EB] rounded-[10px] shadow-sm" onclick="confirmFilter()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 页面切换逻辑
|
||||
function switchPage(pageId) {
|
||||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||||
document.getElementById('page-' + pageId).classList.add('active');
|
||||
if(pageId === 'detail') {
|
||||
document.querySelector('#page-detail .overflow-y-auto').scrollTop = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 子Tab切换逻辑
|
||||
function switchTab(type) {
|
||||
const tabPending = document.getElementById('tab-pending');
|
||||
const tabShipped = document.getElementById('tab-shipped');
|
||||
const listPending = document.getElementById('list-pending');
|
||||
const listShipped = document.getElementById('list-shipped');
|
||||
const bottomToolbar = document.getElementById('bottom-toolbar');
|
||||
|
||||
if (type === 'pending') {
|
||||
// 待交接
|
||||
tabPending.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabPending.classList.remove('text-gray-500', 'border-transparent');
|
||||
|
||||
tabShipped.classList.add('text-gray-500', 'border-transparent');
|
||||
tabShipped.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
|
||||
listPending.classList.remove('hidden');
|
||||
listShipped.classList.add('hidden');
|
||||
bottomToolbar.style.display = 'flex';
|
||||
} else {
|
||||
// 已交接
|
||||
tabShipped.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabShipped.classList.remove('text-gray-500', 'border-transparent');
|
||||
|
||||
tabPending.classList.add('text-gray-500', 'border-transparent');
|
||||
tabPending.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
|
||||
listShipped.classList.remove('hidden');
|
||||
listPending.classList.add('hidden');
|
||||
bottomToolbar.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 全选/取消全选
|
||||
function toggleSelectAll(checked) {
|
||||
const checkboxes = document.querySelectorAll('.item-checkbox');
|
||||
checkboxes.forEach(cb => {
|
||||
cb.checked = checked;
|
||||
});
|
||||
updateSelectionCount();
|
||||
}
|
||||
|
||||
// 处理卡片复选框点击
|
||||
function handleCheckboxClick(checkbox, event) {
|
||||
event.stopPropagation();
|
||||
updateSelectionCount();
|
||||
const checkboxes = document.querySelectorAll('.item-checkbox');
|
||||
const selectAllCb = document.getElementById('select-all-cb');
|
||||
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
|
||||
selectAllCb.checked = allChecked;
|
||||
}
|
||||
|
||||
// 更新选中计数
|
||||
function updateSelectionCount() {
|
||||
const checkedCount = document.querySelectorAll('.item-checkbox:checked').length;
|
||||
document.getElementById('selected-count').textContent = checkedCount;
|
||||
}
|
||||
|
||||
// 显示详情页并填充数据
|
||||
function showDetail(data) {
|
||||
if (!data) return;
|
||||
const setText = (id, text) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = text || '-';
|
||||
};
|
||||
|
||||
setText('detail-awb', data.id);
|
||||
setText('detail-rack-no', data.rackNo);
|
||||
setText('detail-weight', (data.weight || '') + (data.weight && !data.weight.toString().includes('kg') ? ' kg' : ''));
|
||||
setText('detail-flight-date', data.flightDate);
|
||||
setText('detail-flight-no', data.flightNo);
|
||||
setText('detail-location', data.location);
|
||||
|
||||
const outboundCard = document.getElementById('detail-outbound-card');
|
||||
if (outboundCard) {
|
||||
outboundCard.classList.remove('hidden');
|
||||
setText('detail-counter-person', data.counterPerson);
|
||||
setText('detail-counter-time', data.counterTime);
|
||||
setText('detail-outbound-person', data.outboundPerson);
|
||||
setText('detail-outbound-time', data.outboundTime);
|
||||
|
||||
const outboundPersonRow = document.getElementById('detail-outbound-person-row');
|
||||
const outboundTimeRow = document.getElementById('detail-outbound-time-row');
|
||||
|
||||
if (data.status === '已交接') {
|
||||
outboundPersonRow.classList.remove('hidden');
|
||||
outboundTimeRow.classList.remove('hidden');
|
||||
} else {
|
||||
outboundPersonRow.classList.add('hidden');
|
||||
outboundTimeRow.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
switchPage('detail');
|
||||
}
|
||||
|
||||
// 筛选面板（移植自ULD管理）
|
||||
function toggleFilterDrawer(show) {
|
||||
const overlay = document.getElementById('filterOverlay');
|
||||
overlay.style.display = show ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
function resetFilter() {
|
||||
const inputs = document.querySelectorAll('#filterOverlay input');
|
||||
inputs.forEach(input => input.value = '');
|
||||
}
|
||||
|
||||
function confirmFilter() {
|
||||
toggleFilterDrawer(false);
|
||||
}
|
||||
|
||||
// 初始化日期
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
console.log("System date initialized:", today);
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
151
documents/5.5寸手持端设计文件/03_出港计重/detail.html
Normal file
151
documents/5.5寸手持端设计文件/03_出港计重/detail.html
Normal file
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 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>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background: #F3F4F6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
/* 统一手机外壳容器 */
|
||||
.phone-container {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 55px;
|
||||
border: 8px solid #1F2937;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
|
||||
position: relative;
|
||||
}
|
||||
/* 手机内部屏幕区域 */
|
||||
.phone-screen {
|
||||
flex: 1;
|
||||
background: #F2F5F9;
|
||||
margin: 0 4px 4px 4px;
|
||||
border-radius: 46px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.content-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-container">
|
||||
<div class="phone-screen">
|
||||
|
||||
<!-- 状态栏 + 导航栏 蓝色连体区域 -->
|
||||
<div class="bg-[#2563EB] flex flex-col flex-none">
|
||||
<!-- 手机状态栏 -->
|
||||
<div class="flex items-center justify-between h-[28px] text-white text-[12px] px-6">
|
||||
<span class="text-white font-medium tracking-wide">09:10</span>
|
||||
<div class="flex items-center gap-[5px]">
|
||||
<iconify-icon class="text-white text-[13px]" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-white text-[13px]" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-white text-[15px]" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="text-white h-12 flex items-center px-4">
|
||||
<a class="flex items-center gap-1" href="records.html">
|
||||
<iconify-icon class="text-xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span class="text-[16px]">返回</span>
|
||||
</a>
|
||||
<h1 class="flex-1 text-center text-[17px] font-semibold mr-10">运单详情</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-scroll">
|
||||
<!-- 卡片1 — 运单概览 -->
|
||||
<div class="bg-white rounded-xl shadow-md mb-4 overflow-hidden border border-gray-100 mx-4 mt-4">
|
||||
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800" id="det-uldTitle">基本信息</span>
|
||||
</div>
|
||||
|
||||
<div class="p-3 grid grid-cols-2 gap-y-3 gap-x-4 border-t border-gray-50 pt-3">
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">运单号</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-billNo">78111112222</span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">件数</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-piece">85</span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">重量</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-weight">156 kg</span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">特码</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-code">DGR</span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">代理</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-agent">ATR</span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">航班日期</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-flightDate">2026-07-03</span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">航班号</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-flightNo">MU2222</span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">航程</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-route">PVG - CAN</span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">业务类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-type">普通货物运输</span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">通道号</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-channel">出港收运1</span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">品名</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-itemName">电子产品</span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 mb-0.5">备注</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-remark">测试</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pb-6"></div>
|
||||
</div>
|
||||
|
||||
<!-- iOS 底部指示条 -->
|
||||
<div class="h-5 bg-[#F2F5F9] flex justify-center items-center flex-none">
|
||||
<div class="w-[134px] h-[5px] bg-gray-300 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
419
documents/5.5寸手持端设计文件/03_出港计重/main.html
Normal file
419
documents/5.5寸手持端设计文件/03_出港计重/main.html
Normal file
@@ -0,0 +1,419 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 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>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background: #F3F4F6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
/* 统一手机外壳容器 */
|
||||
.phone-container {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 55px;
|
||||
border: 8px solid #1F2937;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
|
||||
position: relative;
|
||||
}
|
||||
/* 手机内部屏幕区域 */
|
||||
.phone-screen {
|
||||
flex: 1;
|
||||
background: #F2F5F9;
|
||||
margin: 0 4px 4px 4px;
|
||||
border-radius: 46px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 隐藏滚动条 */
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
/* 卡片淡入动画 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.card-animate {
|
||||
animation: fadeInUp 0.5s ease-out both;
|
||||
}
|
||||
.card-animate:nth-child(1) { animation-delay: 0.05s; }
|
||||
.card-animate:nth-child(2) { animation-delay: 0.12s; }
|
||||
.card-animate:nth-child(3) { animation-delay: 0.19s; }
|
||||
.card-animate:nth-child(4) { animation-delay: 0.26s; }
|
||||
/* 卡片点击涟漪效果 */
|
||||
.card-item {
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.card-item:active {
|
||||
transform: scale(0.985);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
/* 筛选弹窗动画 */
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-container">
|
||||
<div class="phone-screen">
|
||||
<!-- ===== 顶部连体蓝色区域【状态栏+导航栏】 ===== -->
|
||||
<div class="bg-[#2563EB] flex flex-col flex-none">
|
||||
<!-- 手机状态栏 -->
|
||||
<div class="flex items-center justify-between h-[28px] text-white text-[12px] px-6">
|
||||
<span class="text-white font-medium tracking-wide">09:10</span>
|
||||
<div class="flex items-center gap-[5px]">
|
||||
<iconify-icon class="text-white text-[13px]" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-white text-[13px]" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-white text-[15px]" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<header class="text-white h-12 flex items-center px-4">
|
||||
<button class="flex items-center text-[15px] gap-0.5" onclick="window.history.back()">
|
||||
<iconify-icon class="text-xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-[17px] font-semibold">出港待计重</h1>
|
||||
<div class="w-12"></div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- ===== 主内容区 ===== -->
|
||||
<main class="flex-1 overflow-y-auto no-scrollbar bg-[#F2F5F9]">
|
||||
<!-- 搜索栏 -->
|
||||
<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-blue-500">
|
||||
<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" onclick="toggleFilterDrawer(true)">
|
||||
<iconify-icon class="text-xl" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 统计标签 -->
|
||||
<div class="flex items-center gap-2 px-4 pb-3">
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#2563EB]">
|
||||
<div class="text-[11px] text-gray-500">总票数</div>
|
||||
<div class="text-[22px] font-bold text-[#2563EB] leading-tight mt-0.5">4</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-orange-500">
|
||||
<div class="text-[11px] text-gray-500">待计重</div>
|
||||
<div class="text-[22px] font-bold text-orange-500 leading-tight mt-0.5">2</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#10B981]">
|
||||
<div class="text-[11px] text-gray-500">计重中</div>
|
||||
<div class="text-[22px] font-bold text-[#10B981] leading-tight mt-0.5">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 运单卡片列表 ===== -->
|
||||
<div class="px-0 pt-3 pb-8">
|
||||
<!-- 卡片 1 -->
|
||||
<div class="card-item card-animate bg-white rounded-2xl shadow-sm shadow-black/5 px-4 py-3.5 mx-4 mb-2.5 cursor-pointer" onclick="window.location.href='weighing.html'">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex items-center">
|
||||
<span class="text-[15px] font-bold text-[#1F2937]">78133363398</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">未计重</span>
|
||||
<iconify-icon class="text-gray-400" icon="mdi:chevron-right" width="14"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span>日期：20260721</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span>航程：HFE-LAX</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:truck-outline"></iconify-icon>
|
||||
<span>代理：中外运</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：DGR</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button class="w-full bg-[#EFF6FF] text-[#2563EB] text-xs py-2 rounded-[6px] font-medium h-8 flex items-center justify-center" onclick="event.stopPropagation(); this.disabled=true; this.classList.remove('bg-[#EFF6FF]','text-[#2563EB]'); this.classList.add('bg-gray-100','text-gray-400','cursor-not-allowed'); showToast('执行提前运抵：运单号 78133363396')">
|
||||
提前运抵
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 2 -->
|
||||
<div class="card-item card-animate bg-white rounded-2xl shadow-sm shadow-black/5 px-4 py-3.5 mx-4 mb-2.5 cursor-pointer" onclick="window.location.href='weighing.html'">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex items-center">
|
||||
<span class="text-[15px] font-bold text-[#1F2937]">78133363399</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">计重中</span>
|
||||
<iconify-icon class="text-gray-400" icon="mdi:chevron-right" width="14"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span>日期：20260721</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span>航程：HFE-LAX</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:truck-outline"></iconify-icon>
|
||||
<span>代理：中外运</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：DGR</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button class="w-full bg-[#EFF6FF] text-[#2563EB] text-xs py-2 rounded-[6px] font-medium h-8 flex items-center justify-center" onclick="event.stopPropagation(); this.disabled=true; this.classList.remove('bg-[#EFF6FF]','text-[#2563EB]'); this.classList.add('bg-gray-100','text-gray-400','cursor-not-allowed'); showToast('执行提前运抵：运单号 78133363397')">
|
||||
提前运抵
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 3 -->
|
||||
<div class="card-item card-animate bg-white rounded-2xl shadow-sm shadow-black/5 px-4 py-3.5 mx-4 mb-2.5 cursor-pointer" onclick="window.location.href='weighing.html'">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex items-center">
|
||||
<span class="text-[15px] font-bold text-[#1F2937]">78133363398</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">未计重</span>
|
||||
<iconify-icon class="text-gray-400" icon="mdi:chevron-right" width="14"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span>日期：20260721</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span>航程：HFE-LAX</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:truck-outline"></iconify-icon>
|
||||
<span>代理：中外运</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：DGR</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button class="w-full bg-[#EFF6FF] text-[#2563EB] text-xs py-2 rounded-[6px] font-medium h-8 flex items-center justify-center" onclick="event.stopPropagation(); this.disabled=true; this.classList.remove('bg-[#EFF6FF]','text-[#2563EB]'); this.classList.add('bg-gray-100','text-gray-400','cursor-not-allowed'); showToast('执行提前运抵：运单号 78133363398')">
|
||||
提前运抵
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 4 -->
|
||||
<div class="card-item card-animate bg-white rounded-2xl shadow-sm shadow-black/5 px-4 py-3.5 mx-4 mb-2.5 cursor-pointer" onclick="window.location.href='weighing.html'">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex items-center">
|
||||
<span class="text-[15px] font-bold text-[#1F2937]">78133363399</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">计重中</span>
|
||||
<iconify-icon class="text-gray-400 text-lg shrink-0" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span>日期：20260721</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span>航程：HFE-LAX</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:truck-outline"></iconify-icon>
|
||||
<span>代理：中外运</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：DGR</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button class="w-full bg-[#EFF6FF] text-[#2563EB] text-xs py-2 rounded-[6px] font-medium h-8 flex items-center justify-center" onclick="event.stopPropagation(); this.disabled=true; this.classList.remove('bg-[#EFF6FF]','text-[#2563EB]'); this.classList.add('bg-gray-100','text-gray-400','cursor-not-allowed'); showToast('执行提前运抵：运单号 78133363399')">
|
||||
提前运抵
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- ===== iOS 底部指示条 ===== -->
|
||||
<div class="h-5 bg-[#F2F5F9] flex justify-center items-center flex-none">
|
||||
<div class="w-[134px] h-[5px] bg-gray-300 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- 计重记录悬浮按钮 -->
|
||||
<a class="absolute bottom-[20px] right-[20px] w-[52px] h-[52px] bg-[#2563EB] rounded-full shadow-lg shadow-blue-500/30 flex items-center justify-center z-50 hover:bg-[#1d4ed8] active:scale-95 transition-transform" href="records.html">
|
||||
<iconify-icon class="text-white text-[24px]" icon="mdi:clipboard-text-clock"></iconify-icon>
|
||||
</a>
|
||||
|
||||
<!-- ================== 筛选弹窗（底部弹出） ================== -->
|
||||
<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" onclick="toggleFilterDrawer(false)">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
</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-sm">请选择通道号</span>
|
||||
<iconify-icon icon="mdi:chevron-down"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 mt-4">
|
||||
<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-800">
|
||||
<span class="text-sm font-medium">MU</span>
|
||||
</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-sm">请选择运单类型</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-sm">请选择代理人</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" onclick="resetFilter()">
|
||||
重置
|
||||
</button>
|
||||
<button class="flex-1 bg-[#2563EB] text-white py-3.5 rounded-xl font-bold shadow-lg shadow-blue-500/20" onclick="confirmFilter()">
|
||||
确认
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Toast 提示函数
|
||||
function showToast(msg) {
|
||||
var existing = document.querySelector('.custom-toast');
|
||||
if (existing) existing.remove();
|
||||
var toast = document.createElement('div');
|
||||
toast.className = 'custom-toast fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-900 text-white text-sm px-5 py-3 rounded-xl shadow-lg z-50 transition-opacity duration-200';
|
||||
toast.style.maxWidth = '280px';
|
||||
toast.style.textAlign = 'center';
|
||||
toast.style.pointerEvents = 'none';
|
||||
toast.textContent = msg;
|
||||
document.body.appendChild(toast);
|
||||
setTimeout(function() { toast.style.opacity = '0'; setTimeout(function() { toast.remove(); }, 200); }, 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');
|
||||
}
|
||||
}
|
||||
|
||||
// 重置筛选
|
||||
function resetFilter() {
|
||||
showToast('已重置筛选条件');
|
||||
}
|
||||
|
||||
// 确认筛选
|
||||
function confirmFilter() {
|
||||
toggleFilterDrawer(false);
|
||||
showToast('已应用筛选条件');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
282
documents/5.5寸手持端设计文件/03_出港计重/records.html
Normal file
282
documents/5.5寸手持端设计文件/03_出港计重/records.html
Normal file
@@ -0,0 +1,282 @@
|
||||
<!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>
|
||||
256
documents/5.5寸手持端设计文件/03_出港计重/weighing.html
Normal file
256
documents/5.5寸手持端设计文件/03_出港计重/weighing.html
Normal file
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #F3F4F6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
/* 统一手机外壳容器 */
|
||||
.phone-container {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 55px;
|
||||
border: 8px solid #1F2937;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
|
||||
position: relative;
|
||||
}
|
||||
/* 手机内部屏幕区域 */
|
||||
.phone-screen {
|
||||
flex: 1;
|
||||
background: #F2F5F9;
|
||||
margin: 0 4px 4px 4px;
|
||||
border-radius: 46px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.card-animate {
|
||||
animation: fadeInUp 0.35s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
.card-animate:nth-child(1) { animation-delay: 0s; }
|
||||
.card-animate:nth-child(2) { animation-delay: 0.05s; }
|
||||
.card-animate:nth-child(3) { animation-delay: 0.1s; }
|
||||
.card-animate:nth-child(4) { animation-delay: 0.15s; }
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
.animate-slideUp { animation: slideUp 0.3s ease-out; }
|
||||
input { transition: all 0.2s ease; }
|
||||
input:focus { transition: all 0.2s ease; }
|
||||
::-webkit-scrollbar { display: none; }
|
||||
* { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-container">
|
||||
<div class="phone-screen">
|
||||
|
||||
<!-- ===== ① 顶部连体蓝色区域（状态栏+导航栏） ===== -->
|
||||
<div class="bg-[#2563EB] flex flex-col flex-none">
|
||||
<!-- 手机状态栏 -->
|
||||
<div class="flex items-center justify-between h-[28px] text-white text-[12px] px-6">
|
||||
<span class="text-white font-medium tracking-wide">09:10</span>
|
||||
<div class="flex items-center gap-[5px]">
|
||||
<iconify-icon class="text-white text-[13px]" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-white text-[13px]" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-white text-[15px]" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<header class="text-white h-12 flex items-center px-4">
|
||||
<button class="flex items-center gap-0.5 text-white font-medium text-[15px] active:opacity-70 transition-opacity" onclick="window.location.href='main.html'">
|
||||
<iconify-icon class="text-white" height="24" icon="mdi:chevron-left" width="24"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-[17px] font-semibold">开始计重</h1>
|
||||
<div class="w-[60px]"></div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- ===== ③ 主内容区（滚动） ===== -->
|
||||
<main class="flex-1 overflow-y-auto no-scrollbar bg-[#F2F5F9] pb-4">
|
||||
<!-- 顶部运单卡片（原样不动） -->
|
||||
<div class="mx-4 mt-4 card-animate">
|
||||
<div class="bg-white rounded-2xl shadow-md shadow-black/5 overflow-hidden relative">
|
||||
<!-- 顶部渐变装饰条 -->
|
||||
<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">781333617</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">
|
||||
<div class="text-center">
|
||||
<p class="text-[10px] text-gray-400 mb-0.5">预配件数</p>
|
||||
<p class="text-[15px] font-bold text-gray-800">85</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-[10px] text-gray-400 mb-0.5">预配重量</p>
|
||||
<p class="text-[15px] font-bold text-gray-800">156 kg</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-[10px] text-gray-400 mb-0.5">预配体积</p>
|
||||
<p class="text-[15px] font-bold text-gray-800">4.52 m³</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 统一表单大卡片（字体样式统一为APP风格） ===== -->
|
||||
<div class="mx-4 mt-3 bg-white rounded-2xl shadow-sm shadow-black/5 overflow-hidden card-animate">
|
||||
<!-- 1. 通道号（必填）-->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openChannelPicker()">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">通道号<span class="text-red-500 ml-0.5">*</span></span>
|
||||
<span class="flex-1 text-[14px] text-gray-500 text-left" id="channelDisplay">请选择通道号</span>
|
||||
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
<!-- 2. 代理人 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openAgentPicker()">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">代理人</span>
|
||||
<span class="flex-1 text-[14px] text-gray-500 text-left" id="agentDisplay">请选择代理人</span>
|
||||
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
<!-- 3. 特码 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openCodePicker()">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">特码</span>
|
||||
<span class="flex-1 text-[14px] text-gray-500 text-left" id="codeDisplay">请选择特码</span>
|
||||
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
<!-- 4. 运抵件数 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">运抵件数</span>
|
||||
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" placeholder="请输入运抵件数" type="text"/>
|
||||
</div>
|
||||
<!-- 5. 运抵重量 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">运抵重量</span>
|
||||
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" type="text" value="0"/>
|
||||
</div>
|
||||
<!-- 6. 运抵体积 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">运抵体积</span>
|
||||
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" type="text" value="0.00"/>
|
||||
</div>
|
||||
<!-- 7. 托盘数量 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">托盘数量</span>
|
||||
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" placeholder="请输入托盘数量" type="text"/>
|
||||
</div>
|
||||
<!-- 8. 托盘自重 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">托盘自重</span>
|
||||
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" value="18" placeholder="请输入托盘自重" type="text"/>
|
||||
</div>
|
||||
|
||||
<!-- 航班信息 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">航班日期</span>
|
||||
<span class="flex-1 text-[14px] text-gray-800 text-left">20260703</span>
|
||||
</div>
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">航班号</span>
|
||||
<span class="flex-1 text-[14px] text-gray-800 text-left">MU1111</span>
|
||||
</div>
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">航程</span>
|
||||
<span class="flex-1 text-[14px] text-gray-800 text-left">HFE-LAX</span>
|
||||
</div>
|
||||
|
||||
<!-- 业务类型 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openBizPicker()">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">业务类型</span>
|
||||
<span class="flex-1 text-[14px] text-gray-800 text-left" id="bizDisplay">普通货物运输</span>
|
||||
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<div class="flex items-start h-auto min-h-[80px] px-4 py-3 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0 pt-1">备注</span>
|
||||
<textarea class="flex-1 text-[14px] text-gray-800 bg-transparent rounded-lg py-2 h-[60px] resize-none outline-none text-left" placeholder="请输入备注信息"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="px-4 mt-4 mb-2">
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 h-[52px] rounded-2xl text-[17px] font-semibold active:opacity-90 transition-all text-blue-600" style="background: #fff; border: 2px solid #2563EB;">
|
||||
分托计重
|
||||
</button>
|
||||
<button class="flex-1 h-[52px] rounded-2xl bg-[#2563EB] text-white text-[17px] font-semibold active:opacity-90 shadow-lg shadow-blue-200 transition-all" onclick="submitWeight()">
|
||||
完成计重
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- iOS 底部指示条 -->
|
||||
<div class="h-5 bg-[#F2F5F9] flex justify-center items-center flex-none">
|
||||
<div class="w-[134px] h-[5px] bg-gray-300 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openChannelPicker() {
|
||||
const options = ['A-01', 'A-02', 'B-01', 'B-02', 'C-01'];
|
||||
document.getElementById('channelDisplay').innerText = "A-01";
|
||||
document.getElementById('channelDisplay').classList.remove('text-gray-500');
|
||||
document.getElementById('channelDisplay').classList.add('text-gray-800');
|
||||
}
|
||||
|
||||
function openAgentPicker() {
|
||||
document.getElementById('agentDisplay').innerText = "上海中远海运物流";
|
||||
document.getElementById('agentDisplay').classList.remove('text-gray-500');
|
||||
document.getElementById('agentDisplay').classList.add('text-gray-800');
|
||||
}
|
||||
|
||||
function openCodePicker() {
|
||||
document.getElementById('codeDisplay').innerText = "GEN (普货)";
|
||||
document.getElementById('codeDisplay').classList.remove('text-gray-500');
|
||||
document.getElementById('codeDisplay').classList.add('text-gray-800');
|
||||
}
|
||||
|
||||
function openBizPicker() {
|
||||
}
|
||||
|
||||
function submitWeight() {
|
||||
alert("提交成功");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
306
documents/5.5寸手持端设计文件/03_出港计重/weight-detail.html
Normal file
306
documents/5.5寸手持端设计文件/03_出港计重/weight-detail.html
Normal file
@@ -0,0 +1,306 @@
|
||||
<!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>
|
||||
535
documents/5.5寸手持端设计文件/04_出港运抵/main.html
Normal file
535
documents/5.5寸手持端设计文件/04_出港运抵/main.html
Normal file
@@ -0,0 +1,535 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>出港运抵</title>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Iconify -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
background-color: #f3f6f8;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translate(-50%, 10px); }
|
||||
to { opacity: 1; transform: translate(-50%, 0); }
|
||||
}
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<div class="phone-shell w-[375px] h-[812px] bg-[#F5F5F7] overflow-hidden flex flex-col relative rounded-[48px] border-[10px] border-gray-900">
|
||||
<div class="bg-[#2563EB] flex-none">
|
||||
<div class="h-[44px] flex justify-between items-center px-8 text-white">
|
||||
<span class="text-[15px] font-semibold">09:41</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-lg" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-lg" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-xl" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-[44px] flex items-center px-4 relative">
|
||||
<div class="flex items-center text-white cursor-pointer" onclick="window.history.back()">
|
||||
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span class="text-sm">返回</span>
|
||||
</div>
|
||||
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<h1 class="text-white text-lg font-bold">出港运抵</h1>
|
||||
</div>
|
||||
<div class="ml-auto w-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar">
|
||||
<section class="px-4 pt-4 pb-3 bg-white">
|
||||
<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-blue-500">
|
||||
<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" onclick="showFilterSheet2()">
|
||||
<iconify-icon class="text-lg" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="flex bg-white border-b sticky top-0 z-20">
|
||||
<button class="tab-btn flex-1 py-3 text-sm font-bold border-b-2 transition-all text-[#1F2937] border-[#1F2937]" id="tab-pending" onclick="switchTab('pending')">
|
||||
待运抵 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5" id="count-pending">1</span>
|
||||
</button>
|
||||
<button class="tab-btn flex-1 py-3 text-sm font-bold border-b-2 transition-all text-gray-400 border-transparent" id="tab-shipped" onclick="switchTab('shipped')">
|
||||
已运抵 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5" id="count-shipped">4</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="px-5 pb-5 pt-3">
|
||||
<div class="flex flex-col items-center justify-center py-16 text-gray-400 hidden" id="empty-pending">
|
||||
<svg class="w-16 h-16 text-gray-300 mb-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
<p class="text-sm">暂无待运抵的运单</p>
|
||||
</div>
|
||||
|
||||
<!-- 待运抵卡片（长按显示补充按钮） -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-4 uld-card relative" data-status="pending">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="radio-btn border-2 border-gray-300 rounded-full w-5 h-5 inline-flex items-center justify-center flex-none cursor-pointer"></span>
|
||||
<div class="flex items-baseline">
|
||||
<span class="text-sm font-bold text-gray-900">78133363396</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-red-500 text-white text-[11px] font-medium px-2.5 py-0.5 rounded-full">提前运抵</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-gray-500 text-[13px] mt-3">
|
||||
<div><span>代理：</span><span>马道</span></div>
|
||||
<div><span>件数：</span><span>444</span></div>
|
||||
<div><span>重量：</span><span>150kg</span></div>
|
||||
<div><span>航班日期：</span><span>20260713</span></div>
|
||||
<div><span>航班号：</span><span>MU2033</span></div>
|
||||
<div><span>航程：</span><span>HFE-LAX</span></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button class="w-full bg-[#EFF6FF] text-[#2563EB] text-xs py-2 rounded-[6px] font-medium h-8 flex items-center justify-center gap-2" onclick="event.stopPropagation(); window.location.href='suborder.html'">
|
||||
查看分单
|
||||
<span class="text-[#2563EB] text-[10px] font-bold">3</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 长按弹出操作层 -->
|
||||
<div class="card-action-overlay absolute inset-0 bg-black/40 rounded-2xl z-10 hidden flex items-center justify-center pointer-events-none">
|
||||
<div class="flex items-center gap-4 pointer-events-auto shipped-actions hidden">
|
||||
<button class="bg-amber-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-amber-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); setTimeout(() => showResetStatusSheet(), 200)">重置</button>
|
||||
<button class="bg-emerald-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-emerald-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); window.location.href='receipt.html'">回执</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已运抵卡片1 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-4 uld-card relative" data-status="shipped" style="display: none;">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-bold text-gray-900">78133363397</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-indigo-100 text-indigo-500 text-[11px] font-medium px-2.5 py-0.5 rounded-full">W</span>
|
||||
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2 py-0.5 rounded-md">11</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-gray-500 text-[13px] mt-3">
|
||||
<div><span>代理：</span><span>徽远</span></div>
|
||||
<div><span>件数：</span><span>300</span></div>
|
||||
<div><span>重量：</span><span>120kg</span></div>
|
||||
<div><span>航班日期：</span><span>20260713</span></div>
|
||||
<div><span>航班号：</span><span>MU2033</span></div>
|
||||
<div><span>航程：</span><span>HFE-LAX</span></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button class="w-full bg-[#EFF6FF] text-[#2563EB] text-xs py-2 rounded-[6px] font-medium h-8 flex items-center justify-center gap-2" onclick="event.stopPropagation(); window.location.href='suborder.html'">
|
||||
查看分单
|
||||
<span class="text-[#2563EB] text-[10px] font-bold">2</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-action-overlay absolute inset-0 bg-black/40 rounded-2xl z-10 hidden flex items-center justify-center pointer-events-none">
|
||||
<div class="flex items-center gap-4 pointer-events-auto pending-actions hidden">
|
||||
<button class="bg-purple-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); window.location.href='supplement.html'">补充</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 pointer-events-auto shipped-actions hidden">
|
||||
<button class="bg-amber-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-amber-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); setTimeout(() => showResetStatusSheet(), 200)">重置</button>
|
||||
<button class="bg-emerald-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-emerald-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); window.location.href='receipt.html'">回执</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已运抵卡片2 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-4 uld-card relative" data-status="shipped" style="display: none;">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-bold text-gray-900">78133363398</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2.5 py-0.5 rounded-full">01</span>
|
||||
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2 py-0.5 rounded-md">11</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-gray-500 text-[13px] mt-3">
|
||||
<div><span>代理：</span><span>中外运</span></div>
|
||||
<div><span>件数：</span><span>130</span></div>
|
||||
<div><span>重量：</span><span>130kg</span></div>
|
||||
<div><span>航班日期：</span><span>20260713</span></div>
|
||||
<div><span>航班号：</span><span>MU2033</span></div>
|
||||
<div><span>航程：</span><span>HFE-LAX</span></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button class="w-full bg-[#EFF6FF] text-[#2563EB] text-xs py-2 rounded-[6px] font-medium h-8 flex items-center justify-center gap-2" onclick="event.stopPropagation(); window.location.href='suborder.html'">
|
||||
查看分单
|
||||
<span class="text-[#2563EB] text-[10px] font-bold">2</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-action-overlay absolute inset-0 bg-black/40 rounded-2xl z-10 hidden flex items-center justify-center pointer-events-none">
|
||||
<div class="flex items-center gap-4 pointer-events-auto pending-actions hidden">
|
||||
<button class="bg-purple-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); window.location.href='supplement.html'">补充</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 pointer-events-auto shipped-actions hidden">
|
||||
<button class="bg-amber-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-amber-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); setTimeout(() => showResetStatusSheet(), 200)">重置</button>
|
||||
<button class="bg-emerald-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-emerald-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); window.location.href='receipt.html'">回执</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已运抵卡片3：78133363399 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-4 uld-card relative" data-status="shipped" style="display: none;">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-bold text-gray-900">78133363399</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-amber-100 text-amber-600 text-[11px] font-medium px-2.5 py-0.5 rounded-full">E</span>
|
||||
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2 py-0.5 rounded-md">11</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-gray-500 text-[13px] mt-3">
|
||||
<div><span>代理：</span><span>MU</span></div>
|
||||
<div><span>件数：</span><span>300</span></div>
|
||||
<div><span>重量：</span><span>110kg</span></div>
|
||||
<div><span>航班日期：</span><span>20260713</span></div>
|
||||
<div><span>航班号：</span><span>MU2034</span></div>
|
||||
<div><span>航程：</span><span>HFE-LAX</span></div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button class="w-full bg-[#EFF6FF] text-[#2563EB] text-xs py-2 rounded-[6px] font-medium h-8 flex items-center justify-center gap-2" onclick="event.stopPropagation(); window.location.href='https://modao.cc/agent-py/workspace/6a50a1993333bc5bbd8ee054/waybill-arrival.html/suborder.html?render_html=true'">
|
||||
查看分单
|
||||
<span class="text-[#2563EB] text-[10px] font-bold">1</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 卡片操作菜单（默认隐藏） -->
|
||||
<div class="card-action-overlay absolute inset-0 bg-black/40 rounded-2xl z-10 hidden flex items-center justify-center pointer-events-none">
|
||||
<!-- 已运抵按钮容器（显示重置+回执） -->
|
||||
<div class="flex items-center gap-4 pointer-events-auto shipped-actions hidden">
|
||||
<button class="bg-amber-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-amber-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); setTimeout(() => showResetStatusSheet(), 200)">
|
||||
重置
|
||||
</button>
|
||||
<button class="bg-emerald-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-emerald-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); window.location.href='https://modao.cc/agent-py/workspace/6a50a1993333bc5bbd8ee054/waybill-arrival.html/receipt.html?render_html=true'">
|
||||
回执
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="flex-none bg-white border-t border-gray-100" id="bottom-action-bar">
|
||||
<div class="flex items-center justify-between px-5 py-3">
|
||||
<div class="flex items-center gap-2 select-all cursor-pointer">
|
||||
<span class="radio-select-all w-5 h-5 rounded-full border-2 border-gray-300 bg-white flex items-center justify-center"></span>
|
||||
<span class="text-sm text-gray-700 font-medium">全选</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 bottom-action-container">
|
||||
<span class="text-[12px] text-[#9CA3AF]">已选 <span id="selected-count">0</span> 项</span>
|
||||
<button class="bg-[#2563EB] text-white text-[15px] font-bold px-5 py-2 rounded-[10px] shadow-lg shadow-blue-500/25" onclick="alert('运抵申报')">申报</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pb-2 flex justify-center">
|
||||
<div class="w-32 h-1.5 bg-gray-200 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选弹窗 -->
|
||||
<div class="absolute inset-0 bg-black/40 z-50 hidden" id="filter-sheet2-overlay" onclick="hideFilterSheet2()"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-2xl z-50 transform translate-y-full transition-transform duration-300 ease-in-out" id="filter-sheet2">
|
||||
<div class="px-5 pt-5 pb-8">
|
||||
<div class="flex items-center justify-center mb-6 relative">
|
||||
<h3 class="text-base font-bold text-gray-900">筛选条件</h3>
|
||||
<button class="absolute right-0 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center" onclick="hideFilterSheet2()">
|
||||
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
||||
<line x1="18" x2="6" y1="6" y2="18"></line>
|
||||
<line x1="6" x2="18" y1="6" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="text-sm text-gray-500 font-medium mb-1.5 block">航班日期</label>
|
||||
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3">
|
||||
<iconify-icon class="text-gray-400 text-lg flex-none" icon="mdi:calendar"></iconify-icon>
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none px-2" placeholder="选择日期" type="text" value="2026-07-10"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-sm text-gray-500 font-medium mb-1.5 block">航班号</label>
|
||||
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3">
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none" placeholder="请输入航班号" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-sm text-gray-500 font-medium mb-1.5 block">代理</label>
|
||||
<select class="w-full bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 text-[14px] text-gray-800 outline-none appearance-none bg-[url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-[length:14px] bg-[right_12px_center] bg-no-repeat">
|
||||
<option disabled selected value="">请选择代理</option>
|
||||
<option value="马道">马道</option>
|
||||
<option value="徽远">徽远</option>
|
||||
<option value="中外运">中外运</option>
|
||||
<option value="MU">MU</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 mt-6">
|
||||
<button class="flex-1 py-3 text-sm font-medium text-gray-500 bg-gray-100 rounded-xl" onclick="hideFilterSheet2()">重置</button>
|
||||
<button class="flex-1 py-3 text-sm font-medium text-white bg-[#2563EB] rounded-xl" onclick="hideFilterSheet2()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 重置状态弹窗 -->
|
||||
<div class="absolute inset-0 bg-black/40 z-50 hidden" id="reset-sheet-overlay" onclick="hideResetStatusSheet()"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-2xl z-50 transform translate-y-full transition-transform duration-300 ease-in-out" id="reset-sheet">
|
||||
<div class="px-5 pt-5 pb-8">
|
||||
<div class="flex items-center justify-center mb-6 relative">
|
||||
<h3 class="text-base font-bold text-gray-900">重置状态</h3>
|
||||
<button class="absolute right-0 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center" onclick="hideResetStatusSheet()">
|
||||
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
||||
<line x1="18" x2="6" y1="6" y2="18"></line>
|
||||
<line x1="6" x2="18" y1="6" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-sm text-gray-500 font-medium mb-1.5 block">状态</label>
|
||||
<select class="w-full bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 text-[14px] text-gray-800 outline-none appearance-none bg-[url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-[length:14px] bg-[right_12px_center] bg-no-repeat" id="reset-status-select">
|
||||
<option disabled selected value="">请选择状态</option>
|
||||
<option value="">空</option>
|
||||
<option value="01">01</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="w-full mt-6 py-3 text-sm font-medium text-white bg-[#2563EB] rounded-xl" onclick="confirmResetStatus()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentTab = 'pending';
|
||||
let longPressTimer = null;
|
||||
let isLongPress = false;
|
||||
|
||||
// Toast提示
|
||||
function showToast(message) {
|
||||
const existingToast = document.querySelector('.custom-toast');
|
||||
if (existingToast) existingToast.remove();
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'custom-toast fixed bottom-32 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-sm px-5 py-3 rounded-xl shadow-lg z-50 animate-fadeIn';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
toast.style.transition = 'opacity 0.3s';
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 清空所有选中
|
||||
function resetAllSelections() {
|
||||
document.querySelectorAll('.radio-btn').forEach(radio => toggleRadio(radio, false));
|
||||
const selectAllRadio = document.querySelector('.radio-select-all');
|
||||
toggleRadio(selectAllRadio, false);
|
||||
}
|
||||
|
||||
// 切换标签页
|
||||
function switchTab(tab) {
|
||||
currentTab = tab;
|
||||
const tabPending = document.getElementById('tab-pending');
|
||||
const tabShipped = document.getElementById('tab-shipped');
|
||||
const bottomBar = document.getElementById('bottom-action-bar');
|
||||
const emptyTip = document.getElementById('empty-pending');
|
||||
|
||||
// 切换tab样式
|
||||
if (tab === 'pending') {
|
||||
tabPending.classList.remove('text-gray-400', 'border-transparent');
|
||||
tabPending.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabShipped.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabShipped.classList.add('text-gray-400', 'border-transparent');
|
||||
bottomBar.classList.remove('hidden');
|
||||
} else {
|
||||
tabPending.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabPending.classList.add('text-gray-400', 'border-transparent');
|
||||
tabShipped.classList.remove('text-gray-400', 'border-transparent');
|
||||
tabShipped.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
bottomBar.classList.add('hidden');
|
||||
}
|
||||
|
||||
// 切换卡片显示
|
||||
const allCards = document.querySelectorAll('.uld-card');
|
||||
let showCount = 0;
|
||||
allCards.forEach(card => {
|
||||
if (card.dataset.status === tab) {
|
||||
card.style.display = 'block';
|
||||
showCount++;
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
emptyTip.classList.toggle('hidden', showCount > 0);
|
||||
resetAllSelections();
|
||||
updateSelectCount();
|
||||
}
|
||||
|
||||
// 更新选中数量
|
||||
function updateSelectCount() {
|
||||
const list = document.querySelectorAll(`.uld-card[data-status="${currentTab}"] .radio-btn.bg-blue-500`);
|
||||
document.getElementById('selected-count').textContent = list.length;
|
||||
syncSelectAllStatus();
|
||||
}
|
||||
|
||||
// 同步全选按钮样式
|
||||
function syncSelectAllStatus() {
|
||||
const allCards = document.querySelectorAll(`.uld-card[data-status="${currentTab}"]`);
|
||||
const selectedCards = document.querySelectorAll(`.uld-card[data-status="${currentTab}"] .radio-btn.bg-blue-500`);
|
||||
const selectAllBtn = document.querySelector('.radio-select-all');
|
||||
if (allCards.length > 0 && allCards.length === selectedCards.length) {
|
||||
selectAllBtn.classList.add('bg-blue-500', 'border-blue-500');
|
||||
selectAllBtn.classList.remove('border-gray-300', 'bg-white');
|
||||
selectAllBtn.innerHTML = `<svg class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
|
||||
} else {
|
||||
selectAllBtn.classList.remove('bg-blue-500', 'border-blue-500');
|
||||
selectAllBtn.classList.add('border-gray-300', 'bg-white');
|
||||
selectAllBtn.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
// 单选按钮切换
|
||||
function toggleRadio(el, force) {
|
||||
const isChecked = force != null ? force : !el.classList.contains('bg-blue-500');
|
||||
if (isChecked) {
|
||||
el.classList.add('bg-blue-500', 'border-blue-500');
|
||||
el.classList.remove('border-gray-300', 'bg-white');
|
||||
el.innerHTML = `<svg class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
|
||||
} else {
|
||||
el.classList.remove('bg-blue-500', 'border-blue-500');
|
||||
el.classList.add('border-gray-300', 'bg-white');
|
||||
el.innerHTML = '';
|
||||
}
|
||||
updateSelectCount();
|
||||
}
|
||||
|
||||
// 单个单选点击
|
||||
document.querySelectorAll('.radio-btn').forEach(radio => {
|
||||
radio.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
toggleRadio(radio);
|
||||
};
|
||||
});
|
||||
|
||||
// 全选按钮
|
||||
document.querySelector('.select-all').onclick = function() {
|
||||
const currentCards = document.querySelectorAll(`.uld-card[data-status="${currentTab}"] .radio-btn`);
|
||||
const allSelected = Array.from(currentCards).every(item => item.classList.contains('bg-blue-500'));
|
||||
currentCards.forEach(radio => toggleRadio(radio, !allSelected));
|
||||
};
|
||||
|
||||
// ========== 完整长按逻辑（待运抵弹出补充，已运抵弹出重置回执） ==========
|
||||
document.querySelectorAll('.uld-card').forEach(card => {
|
||||
// 触摸长按
|
||||
card.addEventListener('touchstart', (e) => {
|
||||
// 点击单选框、按钮不触发长按
|
||||
if (e.target.closest('.radio-btn') || e.target.closest('button')) return;
|
||||
isLongPress = false;
|
||||
longPressTimer = setTimeout(() => {
|
||||
isLongPress = true;
|
||||
showCardAction(card);
|
||||
}, 600);
|
||||
});
|
||||
card.addEventListener('touchend', () => clearTimeout(longPressTimer));
|
||||
card.addEventListener('touchmove', () => clearTimeout(longPressTimer));
|
||||
|
||||
// 鼠标长按兼容
|
||||
card.addEventListener('mousedown', (e) => {
|
||||
if (e.target.closest('.radio-btn') || e.target.closest('button')) return;
|
||||
isLongPress = false;
|
||||
longPressTimer = setTimeout(() => {
|
||||
isLongPress = true;
|
||||
showCardAction(card);
|
||||
}, 600);
|
||||
});
|
||||
card.addEventListener('mouseup', () => clearTimeout(longPressTimer));
|
||||
card.addEventListener('mouseleave', () => clearTimeout(longPressTimer));
|
||||
});
|
||||
|
||||
// 展示卡片操作面板
|
||||
function showCardAction(card) {
|
||||
// 关闭所有卡片操作层
|
||||
document.querySelectorAll('.card-action-overlay').forEach(overlay => overlay.classList.add('hidden'));
|
||||
const overlay = card.querySelector('.card-action-overlay');
|
||||
const pendingAction = overlay.querySelector('.pending-actions');
|
||||
const shippedAction = overlay.querySelector('.shipped-actions');
|
||||
pendingAction.classList.add('hidden');
|
||||
shippedAction.classList.add('hidden');
|
||||
// 根据状态展示对应按钮
|
||||
if (card.dataset.status === 'pending') {
|
||||
pendingAction.classList.remove('hidden');
|
||||
} else {
|
||||
shippedAction.classList.remove('hidden');
|
||||
}
|
||||
overlay.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// 点击空白区域关闭操作弹窗
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.uld-card') && !e.target.closest('.card-action-overlay')) {
|
||||
document.querySelectorAll('.card-action-overlay').forEach(overlay => overlay.classList.add('hidden'));
|
||||
}
|
||||
});
|
||||
|
||||
// 筛选弹窗
|
||||
function showFilterSheet2() {
|
||||
const overlay = document.getElementById('filter-sheet2-overlay');
|
||||
const sheet = document.getElementById('filter-sheet2');
|
||||
overlay.classList.remove('hidden');
|
||||
setTimeout(() => sheet.classList.remove('translate-y-full'), 10);
|
||||
}
|
||||
function hideFilterSheet2() {
|
||||
const overlay = document.getElementById('filter-sheet2-overlay');
|
||||
const sheet = document.getElementById('filter-sheet2');
|
||||
sheet.classList.add('translate-y-full');
|
||||
setTimeout(() => overlay.classList.add('hidden'), 300);
|
||||
}
|
||||
|
||||
// 重置状态弹窗
|
||||
function showResetStatusSheet() {
|
||||
document.getElementById('reset-sheet-overlay').classList.remove('hidden');
|
||||
document.getElementById('reset-sheet').classList.remove('translate-y-full');
|
||||
}
|
||||
function hideResetStatusSheet() {
|
||||
document.getElementById('reset-sheet-overlay').classList.add('hidden');
|
||||
document.getElementById('reset-sheet').classList.add('translate-y-full');
|
||||
}
|
||||
function confirmResetStatus() {
|
||||
const selectVal = document.getElementById('reset-status-select').value;
|
||||
if (!selectVal) {
|
||||
alert('请选择状态');
|
||||
return;
|
||||
}
|
||||
alert('已选择状态：' + (selectVal === '' ? '置空' : selectVal));
|
||||
hideResetStatusSheet();
|
||||
}
|
||||
|
||||
// 页面初始化
|
||||
switchTab('pending');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
73
documents/5.5寸手持端设计文件/04_出港运抵/receipt.html
Normal file
73
documents/5.5寸手持端设计文件/04_出港运抵/receipt.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body class="bg-gray-100 min-h-screen flex items-center justify-center font-sans">
|
||||
<div class="phone-shell w-[375px] h-[812px] bg-[#F5F5F7] rounded-[48px] border-[10px] border-gray-900 overflow-hidden relative flex flex-col shadow-2xl">
|
||||
<!-- 状态栏 -->
|
||||
<div class="bg-blue-600 text-white text-xs px-6 py-1 flex justify-between items-center shrink-0 h-[44px]">
|
||||
<span class="text-[15px] font-semibold">09:41</span>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<iconify-icon class="text-lg" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-lg" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-xl" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="bg-blue-600 px-4 py-3 flex items-center gap-2 text-white shrink-0 h-[44px]">
|
||||
<a class="text-white text-sm flex items-center gap-1" href="main.html">
|
||||
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
返回
|
||||
</a>
|
||||
<span class="flex-1 text-center text-white font-bold text-base">回执内容</span>
|
||||
<div class="w-12"></div>
|
||||
</div>
|
||||
<!-- 内容列表 -->
|
||||
<div class="p-4 space-y-3 flex-1 overflow-y-auto no-scrollbar">
|
||||
<!-- 回执 1 -->
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm">
|
||||
<p class="text-gray-700 text-sm leading-relaxed">
|
||||
<span class="inline-block w-2 h-2 bg-blue-500 rounded-full mr-2.5 align-middle"></span>
|
||||
单一窗口回执内容：45201 空运出口运抵报告传输成功。比对结果为：运抵正常。
|
||||
</p>
|
||||
<p class="text-gray-400 text-xs mt-2 ml-[18px]">2026-07-10 11:03:38</p>
|
||||
</div>
|
||||
<!-- 回执 2 -->
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm">
|
||||
<p class="text-gray-700 text-sm leading-relaxed">
|
||||
<span class="inline-block w-2 h-2 bg-blue-500 rounded-full mr-2.5 align-middle"></span>
|
||||
单一窗口回执内容：45202 空运出口运抵报告传输成功。比对结果为：运抵正常。
|
||||
</p>
|
||||
<p class="text-gray-400 text-xs mt-2 ml-[18px]">2026-07-10 11:02:15</p>
|
||||
</div>
|
||||
<!-- 回执 3 -->
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm">
|
||||
<p class="text-gray-700 text-sm leading-relaxed">
|
||||
<span class="inline-block w-2 h-2 bg-blue-500 rounded-full mr-2.5 align-middle"></span>
|
||||
单一窗口回执内容：45203 空运出口运抵报告传输成功。比对结果为：运抵正常。
|
||||
</p>
|
||||
<p class="text-gray-400 text-xs mt-2 ml-[18px]">2026-07-10 10:58:42</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Home Indicator -->
|
||||
<div class="h-8 w-full flex items-center justify-center shrink-0">
|
||||
<div class="w-32 h-1.5 bg-gray-300 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
413
documents/5.5寸手持端设计文件/04_出港运抵/suborder.html
Normal file
413
documents/5.5寸手持端设计文件/04_出港运抵/suborder.html
Normal file
@@ -0,0 +1,413 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>分单明细 - 出港运抵</title>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||||
<!-- Iconify -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.phone-shell {
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-200 h-screen flex items-center justify-center font-sans">
|
||||
<!-- 手机外壳容器 -->
|
||||
<div class="phone-shell w-[375px] h-[812px] bg-[#F5F5F7] rounded-[48px] border-[10px] border-gray-900 overflow-hidden flex flex-col relative">
|
||||
<!-- 顶部蓝色背景区域 -->
|
||||
<div class="bg-[#1A73E8] flex-none">
|
||||
<!-- 状态栏 -->
|
||||
<div class="h-11 w-full flex justify-between items-center px-8 text-white">
|
||||
<span class="text-sm font-medium">09:41</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon icon="mingcute:signal-fill" width="16"></iconify-icon>
|
||||
<iconify-icon icon="mingcute:wifi-line" width="16"></iconify-icon>
|
||||
<iconify-icon class="rotate-90" icon="mingcute:battery-fill" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-[44px] px-4 flex items-center justify-between text-white">
|
||||
<button class="flex items-center gap-1 text-sm" onclick="window.location.href='main.html'">
|
||||
<iconify-icon icon="lucide:chevron-left" width="20"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="text-lg font-bold">分单明细</h1>
|
||||
<div class="w-10"></div> <!-- 占位 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 搜索栏 -->
|
||||
<section class="px-5 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-blue-500">
|
||||
<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" onclick="showFilterSheet()">
|
||||
<iconify-icon class="text-lg" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar px-5 pb-24 pt-2">
|
||||
<!-- 分单列表内容 -->
|
||||
<div class="space-y-4" id="suborder-list">
|
||||
<!-- 分单1 -->
|
||||
<div class="suborder-card bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-4 cursor-pointer transition-all relative active:scale-[0.98]" data-id="10001" onclick="toggleSuborderSelect(this)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="select-indicator border-2 border-gray-300 bg-white rounded-full w-5 h-5 inline-flex items-center justify-center flex-none cursor-pointer transition-colors"></span>
|
||||
<span class="text-sm font-bold text-gray-900">10001</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-indigo-100 text-indigo-500 text-[11px] font-medium px-2.5 py-0.5 rounded-full">W</span>
|
||||
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2 py-0.5 rounded-md">11</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-gray-500 text-[13px] mt-3">
|
||||
<div>
|
||||
<span>件数：</span><span>150</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>重量：</span><span>50kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片操作菜单（默认隐藏） -->
|
||||
<div class="card-action-overlay absolute inset-0 bg-black/40 rounded-2xl z-10 hidden flex items-center justify-center pointer-events-none">
|
||||
<div class="flex items-center gap-4 pointer-events-auto">
|
||||
<!-- 重置按钮 -->
|
||||
<button class="bg-amber-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-amber-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); setTimeout(() => showResetStatusSheet(), 200)">
|
||||
重置
|
||||
</button>
|
||||
<!-- 回执按钮 -->
|
||||
<button class="bg-emerald-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-emerald-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); window.location.href='receipt.html'">
|
||||
回执
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分单2 -->
|
||||
<div class="suborder-card bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-4 cursor-pointer transition-all relative active:scale-[0.98]" data-id="10002" onclick="toggleSuborderSelect(this)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="select-indicator border-2 border-gray-300 bg-white rounded-full w-5 h-5 inline-flex items-center justify-center flex-none cursor-pointer transition-colors"></span>
|
||||
<span class="text-sm font-bold text-gray-900">10002</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-amber-100 text-amber-600 text-[11px] font-medium px-2.5 py-0.5 rounded-full">E</span>
|
||||
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2 py-0.5 rounded-md">11</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-gray-500 text-[13px] mt-3">
|
||||
<div>
|
||||
<span>件数：</span><span>120</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>重量：</span><span>40kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片操作菜单（默认隐藏） -->
|
||||
<div class="card-action-overlay absolute inset-0 bg-black/40 rounded-2xl z-10 hidden flex items-center justify-center pointer-events-none">
|
||||
<div class="flex items-center gap-4 pointer-events-auto">
|
||||
<!-- 重置按钮 -->
|
||||
<button class="bg-amber-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-amber-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); setTimeout(() => showResetStatusSheet(), 200)">
|
||||
重置
|
||||
</button>
|
||||
<!-- 回执按钮 -->
|
||||
<button class="bg-emerald-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-emerald-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); window.location.href='receipt.html'">
|
||||
回执
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分单3 -->
|
||||
<div class="suborder-card bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-4 cursor-pointer transition-all relative active:scale-[0.98]" data-id="10003" onclick="toggleSuborderSelect(this)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="select-indicator border-2 border-gray-300 bg-white rounded-full w-5 h-5 inline-flex items-center justify-center flex-none cursor-pointer transition-colors"></span>
|
||||
<span class="text-sm font-bold text-gray-900">10003</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2.5 py-0.5 rounded-full">01</span>
|
||||
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2 py-0.5 rounded-md">11</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-gray-500 text-[13px] mt-3">
|
||||
<div>
|
||||
<span>件数：</span><span>174</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>重量：</span><span>60kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片操作菜单（默认隐藏） -->
|
||||
<div class="card-action-overlay absolute inset-0 bg-black/40 rounded-2xl z-10 hidden flex items-center justify-center pointer-events-none">
|
||||
<div class="flex items-center gap-4 pointer-events-auto">
|
||||
<!-- 重置按钮 -->
|
||||
<button class="bg-amber-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-amber-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); setTimeout(() => showResetStatusSheet(), 200)">
|
||||
重置
|
||||
</button>
|
||||
<!-- 回执按钮 -->
|
||||
<button class="bg-emerald-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-emerald-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); window.location.href='receipt.html'">
|
||||
回执
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="flex-none bg-white border-t border-gray-100">
|
||||
<div class="flex items-center justify-between px-5 py-3">
|
||||
<div class="flex items-center gap-2 select-all-container cursor-pointer" onclick="toggleSuborderSelectAll(this)">
|
||||
<span class="radio-select-all w-5 h-5 rounded-full border-2 border-gray-300 bg-white flex items-center justify-center transition-colors"></span>
|
||||
<span class="text-sm text-gray-700 font-medium">全选</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[12px] text-[#9CA3AF]" id="suborder-count">已选 0 / 3 项</span>
|
||||
<button class="bg-[#2563EB] text-white text-[15px] font-bold px-5 py-2 rounded-[10px] shadow-lg shadow-blue-500/25 active:scale-95 transition-transform" onclick="alert('申报成功')">申报</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选弹框遮罩 -->
|
||||
<div class="absolute inset-0 bg-black/40 z-30 hidden" id="filter-sheet-overlay" onclick="hideFilterSheet()"></div>
|
||||
<!-- 筛选弹框 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-2xl z-40 transform translate-y-full transition-transform duration-300 ease-in-out" id="filter-sheet">
|
||||
<div class="px-5 pt-5 pb-8">
|
||||
<!-- 标题 -->
|
||||
<div class="flex items-center justify-center mb-6 relative">
|
||||
<h3 class="text-base font-bold text-gray-900">筛选条件</h3>
|
||||
<button class="absolute right-0 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center" onclick="hideFilterSheet()">
|
||||
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
||||
<line x1="18" x2="6" y1="6" y2="18"></line>
|
||||
<line x1="6" x2="18" y1="6" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 筛选条件区域 -->
|
||||
<div class="space-y-4">
|
||||
<!-- 航班日期 -->
|
||||
<div>
|
||||
<label class="text-sm text-gray-500 font-medium mb-1.5 block">航班日期</label>
|
||||
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3">
|
||||
<iconify-icon class="text-gray-400 text-lg flex-none" icon="mdi:calendar"></iconify-icon>
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none px-2" placeholder="选择日期" type="text" value="2026-07-10"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 航班号 -->
|
||||
<div>
|
||||
<label class="text-sm text-gray-500 font-medium mb-1.5 block">航班号</label>
|
||||
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3">
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none" placeholder="请输入航班号" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 代理（已改为下拉框） -->
|
||||
<div>
|
||||
<label class="text-sm text-gray-500 font-medium mb-1.5 block">代理</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 text-[14px] text-gray-800 outline-none appearance-none focus:border-blue-500 focus:bg-white transition-all">
|
||||
<option disabled selected value="">请选择代理</option>
|
||||
<option value="马道">马道</option>
|
||||
<option value="徽远">徽远</option>
|
||||
<option value="中外运">中外运</option>
|
||||
</select>
|
||||
<iconify-icon class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-xl" icon="mdi:chevron-down"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分单号 -->
|
||||
<div>
|
||||
<label class="text-sm text-gray-500 font-medium mb-1.5 block">分单号</label>
|
||||
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3">
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none" placeholder="请输入分单号" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="flex gap-3 mt-6">
|
||||
<button class="flex-1 py-3 text-sm font-medium text-gray-500 bg-gray-100 rounded-xl" onclick="hideFilterSheet()">重置</button>
|
||||
<button class="flex-1 py-3 text-sm font-medium text-white bg-[#2563EB] rounded-xl" onclick="hideFilterSheet()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Home Indicator 底部横条 -->
|
||||
<div class="h-8 w-full flex justify-center items-center">
|
||||
<div class="w-32 h-1.5 bg-black rounded-full opacity-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 重置状态弹框 -->
|
||||
<div class="absolute inset-0 bg-black/40 z-30 hidden" id="reset-sheet-overlay" onclick="hideResetStatusSheet()"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-2xl z-40 transform translate-y-full transition-transform duration-300 ease-in-out" id="reset-sheet">
|
||||
<div class="px-5 pt-5 pb-8">
|
||||
<!-- 标题 -->
|
||||
<div class="flex items-center justify-center mb-6 relative">
|
||||
<h3 class="text-base font-bold text-gray-900">重置状态</h3>
|
||||
<button class="absolute right-0 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center" onclick="hideResetStatusSheet()">
|
||||
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
||||
<line x1="18" x2="6" y1="6" y2="18"></line>
|
||||
<line x1="6" x2="18" y1="6" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 状态下拉选择 -->
|
||||
<div>
|
||||
<label class="text-sm text-gray-500 font-medium mb-1.5 block">状态</label>
|
||||
<select class="w-full bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 text-[14px] text-gray-800 outline-none appearance-none bg-[url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%202000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-[length:14px] bg-[right_12px_center] bg-no-repeat" id="reset-status-select">
|
||||
<option disabled="" selected="" value="">请选择状态</option>
|
||||
<option value="">空</option>
|
||||
<option value="01">01</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 确认按钮 -->
|
||||
<button class="w-full mt-6 py-3 text-sm font-medium text-white bg-[#2563EB] rounded-xl" onclick="confirmResetStatus()">
|
||||
确定
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 单选分单卡片
|
||||
function toggleSuborderSelect(card) {
|
||||
if (window.isLongPressing) return;
|
||||
card.classList.toggle('selected');
|
||||
const indicator = card.querySelector('.select-indicator');
|
||||
if (card.classList.contains('selected')) {
|
||||
indicator.classList.remove('border-gray-300', 'bg-white');
|
||||
indicator.classList.add('bg-blue-500', 'border-blue-500');
|
||||
indicator.innerHTML = `<svg class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
|
||||
} else {
|
||||
indicator.classList.remove('bg-blue-500', 'border-blue-500');
|
||||
indicator.classList.add('border-gray-300', 'bg-white');
|
||||
indicator.innerHTML = '';
|
||||
}
|
||||
updateSuborderCount();
|
||||
}
|
||||
|
||||
// 全选/取消全选
|
||||
function toggleSuborderSelectAll(btn) {
|
||||
const allCards = document.querySelectorAll('.suborder-card');
|
||||
const isAllSelected = Array.from(allCards).every(card => card.classList.contains('selected'));
|
||||
if (isAllSelected) {
|
||||
allCards.forEach(card => {
|
||||
card.classList.remove('selected');
|
||||
const ci = card.querySelector('.select-indicator');
|
||||
ci.classList.remove('bg-blue-500', 'border-blue-500');
|
||||
ci.classList.add('border-gray-300', 'bg-white');
|
||||
ci.innerHTML = '';
|
||||
});
|
||||
} else {
|
||||
allCards.forEach(card => {
|
||||
card.classList.add('selected');
|
||||
const ci = card.querySelector('.select-indicator');
|
||||
ci.classList.remove('border-gray-300', 'bg-white');
|
||||
ci.classList.add('bg-blue-500', 'border-blue-500');
|
||||
ci.innerHTML = `<svg class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
|
||||
});
|
||||
}
|
||||
updateSuborderCount();
|
||||
}
|
||||
|
||||
// 更新底部选中数量
|
||||
function updateSuborderCount() {
|
||||
const selected = document.querySelectorAll('.suborder-card.selected').length;
|
||||
const total = document.querySelectorAll('.suborder-card').length;
|
||||
document.getElementById('suborder-count').innerText = `已选 ${selected} / ${total} 项`;
|
||||
updateSelectAllState(selected, total);
|
||||
}
|
||||
|
||||
// 同步全选按钮状态
|
||||
function updateSelectAllState(selectedCount, totalCount) {
|
||||
const allBtn = document.querySelector('.radio-select-all');
|
||||
if (selectedCount === totalCount && totalCount > 0) {
|
||||
allBtn.classList.remove('border-gray-300', 'bg-white');
|
||||
allBtn.classList.add('bg-blue-500', 'border-blue-500');
|
||||
allBtn.innerHTML = `<svg class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
|
||||
} else {
|
||||
allBtn.classList.remove('bg-blue-500', 'border-blue-500');
|
||||
allBtn.classList.add('border-gray-300', 'bg-white');
|
||||
allBtn.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选弹窗打开
|
||||
function showFilterSheet() {
|
||||
const overlay = document.getElementById('filter-sheet-overlay');
|
||||
const sheet = document.getElementById('filter-sheet');
|
||||
overlay.classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
sheet.classList.remove('translate-y-full');
|
||||
sheet.classList.add('translate-y-0');
|
||||
}, 10);
|
||||
}
|
||||
|
||||
// 筛选弹窗关闭
|
||||
function hideFilterSheet() {
|
||||
const overlay = document.getElementById('filter-sheet-overlay');
|
||||
const sheet = document.getElementById('filter-sheet');
|
||||
sheet.classList.add('translate-y-full');
|
||||
sheet.classList.remove('translate-y-0');
|
||||
setTimeout(() => {
|
||||
overlay.classList.add('hidden');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 卡片长按弹出操作菜单
|
||||
window.isLongPressing = false;
|
||||
document.querySelectorAll('.suborder-card').forEach(card => {
|
||||
let timer;
|
||||
// 鼠标按下
|
||||
card.addEventListener('mousedown', e => {
|
||||
if (e.target.closest('.select-indicator') || e.target.closest('button')) return;
|
||||
window.isLongPressing = false;
|
||||
timer = setTimeout(() => {
|
||||
window.isLongPressing = true;
|
||||
showSuborderActionMenu(card);
|
||||
}, 600);
|
||||
});
|
||||
card.addEventListener('mouseup', () => { clearTimeout(timer); setTimeout(()=>{window.isLongPressing=false},50) });
|
||||
card.addEventListener('mouseleave', () => { clearTimeout(timer); window.isLongPressing=false });
|
||||
// 触屏兼容
|
||||
card.addEventListener('touchstart', e => {
|
||||
if (e.target.closest('.select-indicator') || e.target.closest('button')) return;
|
||||
window.isLongPressing = false;
|
||||
timer = setTimeout(() => {
|
||||
window.isLongPressing = true;
|
||||
showSuborderActionMenu(card);
|
||||
}, 600);
|
||||
});
|
||||
card.addEventListener('touchend', () => { clearTimeout(timer); setTimeout(()=>{window.isLongPressing=false},50) });
|
||||
card.addEventListener('touchmove', () => { clearTimeout(timer); window.isLongPressing=false });
|
||||
});
|
||||
|
||||
function showSuborderActionMenu(card) {
|
||||
document.querySelectorAll('.card-action-overlay').forEach(o => o.classList.add('hidden'));
|
||||
const overlay = card.querySelector('.card-action-overlay');
|
||||
if (overlay) overlay.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// 重置状态弹窗
|
||||
function showResetStatusSheet() {
|
||||
document.getElementById('reset-sheet-overlay').classList.remove('hidden');
|
||||
document.getElementById('reset-sheet').classList.remove('translate-y-full');
|
||||
}
|
||||
function hideResetStatusSheet() {
|
||||
document.getElementById('reset-sheet-overlay').classList.add('hidden');
|
||||
document.getElementById('reset-sheet').classList.add('translate-y-full');
|
||||
}
|
||||
function confirmResetStatus() {
|
||||
const s = document.getElementById('reset-status-select');
|
||||
if (!s.value && s.selectedIndex===0) { alert('请选择状态'); return; }
|
||||
alert(s.value==='' ? '已选择状态: 置空' : '已选择状态: '+s.value);
|
||||
hideResetStatusSheet();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
175
documents/5.5寸手持端设计文件/04_出港运抵/supplement.html
Normal file
175
documents/5.5寸手持端设计文件/04_出港运抵/supplement.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>补充信息</title>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||||
<!-- Iconify -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
background-color: #f3f4f6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-200">
|
||||
<!-- Phone Shell -->
|
||||
<div class="phone-shell w-[375px] h-[812px] bg-[#F5F5F7] overflow-hidden flex flex-col relative rounded-[48px] border-[10px] border-gray-900 shadow-2xl">
|
||||
<!-- Status Bar & Nav Bar Container -->
|
||||
<div class="bg-[#1A73E8] flex-none">
|
||||
<!-- Status Bar -->
|
||||
<div class="h-[44px] flex justify-between items-center px-8 text-white">
|
||||
<span class="text-[15px] font-semibold">09:41</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<iconify-icon class="text-lg" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-lg" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-xl" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation Bar -->
|
||||
<div class="h-[44px] flex items-center px-4 relative">
|
||||
<div class="flex items-center text-white cursor-pointer" onclick="window.location.href='main.html'">
|
||||
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span class="text-sm">返回</span>
|
||||
</div>
|
||||
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<h1 class="text-white text-lg font-bold">补充信息</h1>
|
||||
</div>
|
||||
<div class="ml-auto w-10"></div> <!-- Placeholder for right side -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Area -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar p-4 space-y-4">
|
||||
<!-- 收货人信息 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="w-1.5 h-4 bg-[#1A73E8] rounded-full"></div>
|
||||
<h3 class="text-sm font-bold text-gray-900">收货人信息</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="text-[13px] text-gray-500 font-medium mb-1.5 block">收货人名称</label>
|
||||
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 focus-within:border-blue-500 focus-within:bg-white transition-all">
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none" placeholder="请输入收货人名称" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[13px] text-gray-500 font-medium mb-1.5 block">国家代码</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 text-[14px] text-gray-800 outline-none appearance-none focus:border-blue-500 focus:bg-white transition-all">
|
||||
<option disabled="" value="">请选择</option>
|
||||
<option selected="" value="US">US - 美国</option>
|
||||
<option value="CN">CN - 中国</option>
|
||||
<option value="JP">JP - 日本</option>
|
||||
<option value="UK">UK - 英国</option>
|
||||
<option value="DE">DE - 德国</option>
|
||||
<option value="FR">FR - 法国</option>
|
||||
</select>
|
||||
<iconify-icon class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-xl" icon="mdi:chevron-down"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[13px] text-gray-500 font-medium mb-1.5 block">通讯方式</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 text-[14px] text-gray-800 outline-none appearance-none focus:border-blue-500 focus:bg-white transition-all">
|
||||
<option disabled="" selected="" value="">请选择</option>
|
||||
<option value="phone">电话</option>
|
||||
<option value="email">邮件</option>
|
||||
<option value="fax">传真</option>
|
||||
</select>
|
||||
<iconify-icon class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-xl" icon="mdi:chevron-down"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[13px] text-gray-500 font-medium mb-1.5 block">联系号码</label>
|
||||
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 focus-within:border-blue-500 focus-within:bg-white transition-all">
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none" placeholder="请输入联系号码" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[13px] text-gray-500 font-medium mb-1.5 block">地址</label>
|
||||
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 focus-within:border-blue-500 focus-within:bg-white transition-all">
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none" placeholder="请输入地址" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 发货人信息 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="w-1.5 h-4 bg-[#1A73E8] rounded-full"></div>
|
||||
<h3 class="text-sm font-bold text-gray-900">发货人信息</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="text-[13px] text-gray-500 font-medium mb-1.5 block">发货人名称</label>
|
||||
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 focus-within:border-blue-500 focus-within:bg-white transition-all">
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none" placeholder="请输入发货人名称" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[13px] text-gray-500 font-medium mb-1.5 block">国家代码</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 text-[14px] text-gray-800 outline-none appearance-none focus:border-blue-500 focus:bg-white transition-all">
|
||||
<option disabled="" value="">请选择</option>
|
||||
<option selected="" value="US">US - 美国</option>
|
||||
<option value="CN">CN - 中国</option>
|
||||
<option value="JP">JP - 日本</option>
|
||||
<option value="UK">UK - 英国</option>
|
||||
<option value="DE">DE - 德国</option>
|
||||
<option value="FR">FR - 法国</option>
|
||||
</select>
|
||||
<iconify-icon class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-xl" icon="mdi:chevron-down"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[13px] text-gray-500 font-medium mb-1.5 block">通讯方式</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 text-[14px] text-gray-800 outline-none appearance-none focus:border-blue-500 focus:bg-white transition-all">
|
||||
<option disabled="" selected="" value="">请选择</option>
|
||||
<option value="phone">电话</option>
|
||||
<option value="email">邮件</option>
|
||||
<option value="fax">传真</option>
|
||||
</select>
|
||||
<iconify-icon class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-xl" icon="mdi:chevron-down"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[13px] text-gray-500 font-medium mb-1.5 block">联系号码</label>
|
||||
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 focus-within:border-blue-500 focus-within:bg-white transition-all">
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none" placeholder="请输入联系号码" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[13px] text-gray-500 font-medium mb-1.5 block">地址</label>
|
||||
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 focus-within:border-blue-500 focus-within:bg-white transition-all">
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none" placeholder="请输入地址" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部确定按钮 -->
|
||||
<div class="px-5 py-4 shrink-0">
|
||||
<button class="w-full bg-[#2563EB] text-white text-[15px] font-bold py-3.5 rounded-xl shadow-lg shadow-blue-500/30 active:scale-[0.98] transition-all" onclick="alert('补充信息已提交'); window.location.href='main.html'">
|
||||
确定
|
||||
</button>
|
||||
<!-- Home Indicator -->
|
||||
<div class="mt-4 flex justify-center">
|
||||
<div class="w-32 h-1.5 bg-gray-200 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
668
documents/5.5寸手持端设计文件/05_出港移库/出港移库.html
Normal file
668
documents/5.5寸手持端设计文件/05_出港移库/出港移库.html
Normal file
@@ -0,0 +1,668 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
|
||||
<title>出港移库 - 移动端原型</title>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||||
<!-- Iconify -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'PingFang SC';
|
||||
src: local('PingFang SC');
|
||||
}
|
||||
body {
|
||||
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
/* 同步参考页面body背景色 */
|
||||
background-color: #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
/* 模拟手机容器 - 同步参考底色 */
|
||||
.phone-container {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #f5f6fa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border: 8px solid #1a1a1a;
|
||||
border-radius: 40px;
|
||||
}
|
||||
/* 隐藏滚动条但保留滚动 */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
/* 页面切换动画 */
|
||||
.page {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.page.active {
|
||||
display: flex;
|
||||
}
|
||||
/* 筛选面板弹出动画 */
|
||||
#filter-panel {
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
#filter-panel.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.overlay {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.overlay.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
/* 按钮按压效果 */
|
||||
.btn-active:active {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
/* 复选框样式 */
|
||||
.custom-checkbox {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.custom-checkbox:checked {
|
||||
background-color: #2563EB;
|
||||
border-color: #2563EB;
|
||||
}
|
||||
.custom-checkbox:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.custom-checkbox-round {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 50%;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.custom-checkbox-round:checked {
|
||||
background-color: #2563EB;
|
||||
border-color: #2563EB;
|
||||
}
|
||||
.custom-checkbox-round:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-container">
|
||||
<!-- 状态栏 -->
|
||||
<div class="h-10 w-full flex justify-between items-center px-8 flex-none bg-[#2563EB] text-white">
|
||||
<span class="text-xs font-semibold">09:41</span>
|
||||
<div class="flex gap-1 items-center">
|
||||
<iconify-icon icon="mdi:signal" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:wifi" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:battery" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表首页 -->
|
||||
<div class="page active" id="page-home">
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center btn-active" onclick="alert('返回首页')">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">出港移库</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容区域 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-24">
|
||||
<!-- 搜索栏 -->
|
||||
<section class="px-4 pt-4 pb-3 bg-white">
|
||||
<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-blue-500">
|
||||
<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" onclick="toggleFilterDrawer(true)">
|
||||
<iconify-icon class="text-xl" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tab切换 -->
|
||||
<div class="flex bg-white border-b sticky top-0 z-20">
|
||||
<button class="flex-1 py-3 text-sm font-bold text-[#1F2937] border-b-2 border-[#1F2937] transition-all" id="tab-pending" onclick="switchTab('pending')">
|
||||
待移库 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5">3</span>
|
||||
</button>
|
||||
<button class="flex-1 py-3 text-sm font-bold text-gray-400 border-b-2 border-transparent transition-all" id="tab-shipped" onclick="switchTab('shipped')">
|
||||
已移库 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5">3</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 待移库列表 -->
|
||||
<div class="p-3 pt-4 space-y-3" id="list-pending">
|
||||
<!-- 卡片1 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363573</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">NOR</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">100件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">200kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</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="showDetail({id: '78133363573', status: '待移库', agent: 'NOR', pieces: '100', weight: '200', goodsName: '电子元器件', carrier: 'MU', route: 'HFE-NKG-LAX', location: 'A区-03货位', code: 'NOR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片2 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363574</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">CTA</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">85件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">150kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-PEK-LAX</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="showDetail({id: '78133363574', status: '待移库', agent: 'CTA', pieces: '85', weight: '150', goodsName: '服装鞋帽', carrier: 'CA', route: 'HFE-PEK-LAX', location: 'B区-05货位', code: 'NOR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片3 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363575</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">DHL</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">200件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">450kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</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="showDetail({id: '78133363575', status: '待移库', agent: 'DHL', pieces: '200', weight: '450', goodsName: '精密模具', carrier: '3U', route: 'HFE-NKG-LAX', location: 'C区-01货位', code: 'NOR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已移库列表 -->
|
||||
<div class="p-3 pt-4 space-y-3 hidden" id="list-shipped">
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363001</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">NOR</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">50件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">80kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</span>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363001', status: '已移库', agent: 'NOR', pieces: '50', weight: '80', pickupNo: 'TH20260701001', goodsName: '精密仪器', carrier: 'MU', route: 'HFE-NKG-LAX', location: 'B区-05货位', code: 'NOR', counterTime: '2026-07-05 10:30', counterPerson: '张三', outboundTime: '2026-07-05 11:45', outboundPerson: '张三'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363002</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">CTA</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">120件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">300kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-PEK-LAX</span>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363002', status: '已移库', agent: 'CTA', pieces: '120', weight: '300', pickupNo: 'TH20260702002', goodsName: '鲜花绿植', carrier: 'CA', route: 'HFE-PEK-LAX', location: 'A区-08货位', code: 'NOR', counterTime: '2026-07-06 09:15', counterPerson: '王五', outboundTime: '2026-07-06 10:30', outboundPerson: '赵六'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363003</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">DHL</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">75件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">160kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</span>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363003', status: '已移库', agent: 'DHL', pieces: '75', weight: '160', pickupNo: 'TH20260703003', goodsName: '生鲜食品', carrier: '3U', route: 'HFE-NKG-LAX', location: 'D区-02货位', code: 'NOR', counterTime: '2026-07-06 14:00', counterPerson: '钱七', outboundTime: '2026-07-06 15:20', outboundPerson: '孙八'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="absolute bottom-0 w-full bg-white border-t border-gray-200 z-40 flex flex-col pt-4 pb-4" id="bottom-toolbar">
|
||||
<div class="px-4 flex items-center w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="custom-checkbox-round" id="select-all-cb" onclick="toggleSelectAll(this.checked)" type="checkbox"/>
|
||||
<label class="text-[13px] text-[#1F2937] font-medium cursor-pointer" for="select-all-cb">全选</label>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[12px] text-[#9CA3AF]">已选 <span id="selected-count">0</span> 项</span>
|
||||
<button class="bg-[#2563EB] text-white text-[15px] font-bold px-5 py-2 rounded-[10px] shadow-lg shadow-blue-500/25 btn-active" onclick="alert('移库操作')">
|
||||
移库
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运单详情页面 -->
|
||||
<div class="page" id="page-detail">
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center btn-active" onclick="switchPage('page-home')">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">运单详情</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-8 p-4">
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100">
|
||||
<div class="bg-[#2563EB] px-4 py-3 flex justify-between items-center text-white">
|
||||
<span class="font-bold text-[17px] leading-tight" id="detail-awb">781-22222620</span>
|
||||
<div class="flex items-center text-[13px] font-normal opacity-90">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full mr-1.5"></span>
|
||||
<span id="detail-time">2026-05-10 08:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-[#EF4444] text-white text-[11px] px-1.5 py-0.5 rounded leading-tight font-medium">国际进港</span>
|
||||
<span class="text-[13px] font-normal text-[#666666] border-l border-gray-300 pl-2">普通货物运输</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[22px] font-bold text-[#111827] mb-3" id="detail-goods-name">电子元器件</div>
|
||||
<div class="grid grid-cols-2 gap-x-8 gap-y-3">
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">件数</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-count">55</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">重量</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-weight">622.00 kg</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">特码</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-code">NOR</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">代理</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-agent">NOR</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">出运路径</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-route">HFE-PEK-LAX</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">承运人</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-bold" id="detail-carrier">MU</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 移库信息卡片 -->
|
||||
<div class="mt-4 bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 hidden" id="detail-outbound-card">
|
||||
<div class="bg-[#10B981] px-4 py-2.5">
|
||||
<span class="text-white font-semibold text-[15px]">移库信息</span>
|
||||
</div>
|
||||
<div class="bg-white px-4 py-3 grid grid-cols-2 gap-y-3">
|
||||
<div class="flex flex-col" id="detail-outbound-person-row">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">移库人</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-outbound-person">-</span>
|
||||
</div>
|
||||
<div class="flex flex-col" id="detail-outbound-time-row">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">移库时间</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-outbound-time">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部筛选遮罩 -->
|
||||
<div class="overlay absolute inset-0 z-30" id="filter-overlay" onclick="toggleFilterDrawer(false)"></div>
|
||||
|
||||
<!-- 筛选弹窗 -->
|
||||
<div class="absolute bottom-0 w-full bg-white rounded-t-3xl z-50 p-6 shadow-2xl overflow-hidden" id="filter-panel">
|
||||
<div class="relative flex items-center justify-center mb-6">
|
||||
<h2 class="text-[18px] font-bold text-gray-900">筛选条件</h2>
|
||||
<button class="absolute right-0 top-0 text-gray-400" onclick="toggleFilterDrawer(false)">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<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-800">
|
||||
<span class="text-sm font-medium">MU</span>
|
||||
</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-sm">请选择运单类型</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-sm">请选择特码</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="alert('已重置')">
|
||||
重置
|
||||
</button>
|
||||
<button class="flex-1 bg-[#2563EB] text-white py-3.5 rounded-xl font-bold shadow-lg shadow-blue-500/20 btn-active" onclick="toggleFilterDrawer(false)">
|
||||
确认
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 页面切换
|
||||
function switchPage(pageId) {
|
||||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||||
document.getElementById(pageId).classList.add('active');
|
||||
if(pageId === 'page-detail'){
|
||||
document.querySelector('#page-detail .no-scrollbar').scrollTop = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tab切换
|
||||
function switchTab(type) {
|
||||
const tabPending = document.getElementById('tab-pending');
|
||||
const tabShipped = document.getElementById('tab-shipped');
|
||||
const listPending = document.getElementById('list-pending');
|
||||
const listShipped = document.getElementById('list-shipped');
|
||||
const bottomToolbar = document.getElementById('bottom-toolbar');
|
||||
|
||||
if (type === 'pending') {
|
||||
tabPending.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabPending.classList.remove('text-gray-400', 'border-transparent');
|
||||
tabShipped.classList.add('text-gray-400', 'border-transparent');
|
||||
tabShipped.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
|
||||
listPending.classList.remove('hidden');
|
||||
listShipped.classList.add('hidden');
|
||||
bottomToolbar.style.display = 'flex';
|
||||
} else {
|
||||
tabShipped.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabShipped.classList.remove('text-gray-400', 'border-transparent');
|
||||
tabPending.classList.add('text-gray-400', 'border-transparent');
|
||||
tabPending.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
|
||||
listShipped.classList.remove('hidden');
|
||||
listPending.classList.add('hidden');
|
||||
bottomToolbar.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 全选
|
||||
function toggleSelectAll(checked) {
|
||||
const checkboxes = document.querySelectorAll('.item-checkbox');
|
||||
checkboxes.forEach(cb => {
|
||||
cb.checked = checked;
|
||||
});
|
||||
updateSelectionCount();
|
||||
}
|
||||
|
||||
// 单选
|
||||
function handleCheckboxClick(checkbox, event) {
|
||||
event.stopPropagation();
|
||||
updateSelectionCount();
|
||||
const allBox = document.getElementById('select-all-cb');
|
||||
const all = Array.from(document.querySelectorAll('.item-checkbox')).every(i => i.checked);
|
||||
allBox.checked = all;
|
||||
}
|
||||
|
||||
// 更新选中数量
|
||||
function updateSelectionCount() {
|
||||
const cnt = document.querySelectorAll('.item-checkbox:checked').length;
|
||||
document.getElementById('selected-count').textContent = cnt;
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
function showDetail(data) {
|
||||
if (!data) return;
|
||||
const setText = (id, val) => {
|
||||
const el = document.getElementById(id);
|
||||
if(el) el.textContent = val || '-';
|
||||
};
|
||||
setText('detail-awb', data.id);
|
||||
setText('detail-goods-name', data.goodsName);
|
||||
setText('detail-count', data.pieces);
|
||||
setText('detail-weight', data.weight + (String(data.weight).includes('kg') ? '' : ' kg'));
|
||||
setText('detail-code', data.code);
|
||||
setText('detail-agent', data.agent);
|
||||
setText('detail-carrier', data.carrier);
|
||||
setText('detail-route', data.route || 'HFE-PEK-LAX');
|
||||
setText('detail-location', data.location);
|
||||
|
||||
const outboundCard = document.getElementById('detail-outbound-card');
|
||||
if(data.status === '待移库'){
|
||||
outboundCard.classList.add('hidden');
|
||||
}else{
|
||||
outboundCard.classList.remove('hidden');
|
||||
setText('detail-outbound-person', data.outboundPerson);
|
||||
setText('detail-outbound-time', data.outboundTime);
|
||||
}
|
||||
switchPage('page-detail');
|
||||
}
|
||||
|
||||
// 筛选抽屉
|
||||
function toggleFilterDrawer(show) {
|
||||
const panel = document.getElementById('filter-panel');
|
||||
const overlay = document.getElementById('filter-overlay');
|
||||
if(show){
|
||||
panel.classList.add('show');
|
||||
overlay.classList.add('show');
|
||||
}else{
|
||||
panel.classList.remove('show');
|
||||
overlay.classList.remove('show');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
963
documents/5.5寸手持端设计文件/06_出港查询/出港查询.html
Normal file
963
documents/5.5寸手持端设计文件/06_出港查询/出港查询.html
Normal file
@@ -0,0 +1,963 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>出港查询</title>
|
||||
<!-- Tailwind CSS (本地) -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||||
<!-- Iconify 图标 -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'PingFang SC';
|
||||
src: local('PingFang SC');
|
||||
}
|
||||
body {
|
||||
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 隐藏滚动条但保留功能 */
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.tag-occupied { background-color: #dcfce7; color: #22c55e; } /* 已离港 - 绿色 */
|
||||
.tag-available { background-color: #dcfce7; color: #22c55e; } /* 已离港 - 绿色 */
|
||||
.tag-repair { background-color: #fce7e7; color: #ef4444; } /* 离港 - 红色 */
|
||||
|
||||
/* 页面切换动画 */
|
||||
.page {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
background-color: #f3f4f6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.page::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.page-hidden-right { transform: translateX(100%); }
|
||||
.page-hidden-left { transform: translateX(-100%); }
|
||||
|
||||
|
||||
/* 统一的深蓝色调 */
|
||||
.bg-header-blue { background-color: #2563EB; }
|
||||
|
||||
|
||||
/* 标签页样式 */
|
||||
.tab-item {
|
||||
position: relative;
|
||||
padding: 12px 0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.tab-item.active {
|
||||
color: #2563eb;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tab-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #2563eb;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.tab-item.active::after {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
/* ========== 筛选弹窗样式 提升层级+动画稳定 ========== */
|
||||
.filter-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.25s ease, visibility 0.25s ease;
|
||||
}
|
||||
.filter-overlay.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.filter-sheet {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
padding: 20px;
|
||||
z-index: 10000;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.25s ease-out;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.filter-sheet.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* 筛选输入框统一样式 */
|
||||
.filter-input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.filter-input:focus {
|
||||
border-color: #2563EB;
|
||||
}
|
||||
|
||||
/* 下拉框箭头浅灰色 + 全浏览器兼容修复 */
|
||||
select.filter-input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
background-size: 16px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
/* 清除IE默认下拉箭头 */
|
||||
select.filter-input::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="w-[375px] h-[812px] bg-[#F3F4F6] overflow-hidden flex flex-col relative shadow-2xl rounded-[40px] border-[8px] border-gray-800">
|
||||
<!-- 状态栏 -->
|
||||
<div class="bg-header-blue flex-none z-50">
|
||||
<div class="flex justify-between items-center px-6 pt-3 pb-1 text-[12px] font-medium text-white">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<iconify-icon icon="material-symbols:signal-cellular-4-bar-rounded"></iconify-icon>
|
||||
<iconify-icon icon="material-symbols:wifi"></iconify-icon>
|
||||
<iconify-icon icon="material-symbols:battery-full-rounded"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选弹窗容器 移到最外层，层级提升 -->
|
||||
<div class="filter-overlay" id="filterOverlay"></div>
|
||||
<div class="filter-sheet" id="filterSheet">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="relative flex items-center justify-center mb-6">
|
||||
<button class="absolute right-0 top-0 text-gray-400" onclick="closeFilter()">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
<h2 class="text-[18px] font-bold text-gray-900">筛选条件</h2>
|
||||
</div>
|
||||
|
||||
<!-- 筛选表单区域 -->
|
||||
<div class="space-y-4 mb-7">
|
||||
<!-- 1.航班日期 -->
|
||||
<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>
|
||||
<!-- 2.航班号 -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入航班号" type="text" id="filterFlightNo">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 3.代理 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 5.目的港 -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入目的港" type="text" id="filterOrigin">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 6.运单类型 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 7.业务类型 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 8.品名(中) -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入中文品名" type="text" id="filterCnName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 h-11 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium" onclick="resetFilter()">重置</button>
|
||||
<button class="flex-1 h-11 bg-[#2563EB] text-white rounded-lg text-sm font-medium" onclick="confirmFilter()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面主容器 -->
|
||||
<div class="flex-1 relative overflow-hidden">
|
||||
<!-- 列表页 -->
|
||||
<div class="page z-10" id="listPage">
|
||||
<!-- 头部 -->
|
||||
<header class="bg-header-blue pt-2 pb-4 px-4 flex items-center relative flex-none">
|
||||
<button class="flex items-center text-white text-sm absolute left-4">
|
||||
<iconify-icon class="text-xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="mx-auto text-white font-bold text-lg">出港查询</h1>
|
||||
</header>
|
||||
<!-- 搜索栏 筛选按钮已移除边框 -->
|
||||
<div class="p-3 bg-transparent flex items-center gap-3 border-b border-gray-100 flex-none">
|
||||
<div class="flex-1 bg-white rounded-xl flex items-center px-3 py-[10px] gap-2 border border-gray-50">
|
||||
<iconify-icon class="text-[#9ca3af] text-lg" icon="mdi:magnify"></iconify-icon>
|
||||
<input class="bg-transparent text-[14px] w-full outline-none text-gray-700 placeholder-[#9ca3af]" placeholder="搜索运单号" type="text"/>
|
||||
<iconify-icon class="text-[#2563eb] text-lg" icon="mdi:qrcode-scan" onclick="alert('开启扫码功能')"></iconify-icon>
|
||||
</div>
|
||||
<!-- 筛选按钮 无圆形实线边框 -->
|
||||
<button id="filterBtn" class="w-10 h-10 flex items-center justify-center bg-white rounded-full relative z-[99999]">
|
||||
<iconify-icon class="text-[#2563eb] text-xl" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 统计标签 -->
|
||||
<div class="flex items-center gap-2 px-4 pb-3">
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#2563EB]">
|
||||
<div class="text-[11px] text-gray-500">总票数</div>
|
||||
<div class="text-[22px] font-bold text-[#2563EB] leading-tight mt-0.5">4</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-orange-500">
|
||||
<div class="text-[11px] text-gray-500">已入库</div>
|
||||
<div class="text-[22px] font-bold text-orange-500 leading-tight mt-0.5">2</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#10B981]">
|
||||
<div class="text-[11px] text-gray-500">已离港</div>
|
||||
<div class="text-[22px] font-bold text-[#10B981] leading-tight mt-0.5">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ULD 列表内容 -->
|
||||
<div class="p-3 space-y-3 pb-24 overflow-y-auto hide-scrollbar">
|
||||
<!-- 卡片 1 -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363396')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">78133363396</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已离港</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：444</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：555</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
|
||||
<span>代理人：中外运</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：DGR</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片 2 -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363397')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">78133363397</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已离港</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：120</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：320</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
|
||||
<span>代理人：徽远</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：PER</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片 3 -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363398')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">78133363398</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已入库</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：268</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：780</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
|
||||
<span>代理人：中外运</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：NOR</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片 4 -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363399')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">78133363399</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已离港</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：85</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：210</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
|
||||
<span>代理人：徽远</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：DGR</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片 5 -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363400')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">78133363400</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已离港</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：350</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：430</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
|
||||
<span>代理人：中外运</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：PER</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情页 -->
|
||||
<div class="page z-20 page-hidden-right !bg-[#f0f2f5]" id="detailPage">
|
||||
<!-- 头部 -->
|
||||
<header class="bg-header-blue pt-2 pb-4 px-4 flex items-center relative flex-none">
|
||||
<button class="flex items-center text-white text-sm absolute left-4 active:opacity-70" onclick="goBack()">
|
||||
<iconify-icon class="text-xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="mx-auto text-white font-bold text-lg">出港详情</h1>
|
||||
<div class="absolute right-4 flex items-center">
|
||||
<iconify-icon class="text-red-500 text-2xl" icon="mdi:file-document-edit-outline"></iconify-icon>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 标签页 -->
|
||||
<div class="bg-white px-4 border-b border-gray-200 flex-none">
|
||||
<div class="flex justify-around">
|
||||
<div class="tab-item active cursor-pointer" onclick="switchTab(0)">运单信息</div>
|
||||
<div class="tab-item cursor-pointer" onclick="switchTab(1)">仓库信息</div>
|
||||
<div class="tab-item cursor-pointer" onclick="switchTab(2)">库位信息</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详情内容区 -->
|
||||
<div class="flex-1 overflow-y-auto hide-scrollbar">
|
||||
<!-- 运单信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3" id="tab-content-0">
|
||||
<!-- 卡片1：基本信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800" id="det-uldTitle">基本信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-2 gap-2">
|
||||
<!-- Row 1 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单号</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-billNo"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">代理人</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-agent"></span>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">特码</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-code"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">承运人</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-carrier"></span>
|
||||
</div>
|
||||
<!-- Row 3 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">始发站</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-route"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">中转站</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-outboundTime"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">目的站</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-dest"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">UN编号</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-unNo"></span>
|
||||
</div>
|
||||
<!-- Row 5 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center" id="det-lockStatus-container">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5" id="det-lockStatus-label">锁定状态</span>
|
||||
<div id="det-lockStatus-wrapper">
|
||||
<span class="text-xs font-semibold" id="det-lockStatus"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">包装类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-packType"></span>
|
||||
</div>
|
||||
<!-- Row 6 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">业务类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-type"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库时间</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-outboundTime"></span>
|
||||
</div>
|
||||
<!-- Row 4 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-billType"></span>
|
||||
</div>
|
||||
<!-- Row 7 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">品名(中)</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-itemNameCn"></span>
|
||||
</div>
|
||||
<!-- Row 8 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">品名(英)</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-itemNameEn"></span>
|
||||
</div>
|
||||
<!-- Row 9 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">备注</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-remark"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片2：件重信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800">件重信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-3 gap-2">
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单件数</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-pieces"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-weight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">计费重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-calcWeight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库件数</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-inPieces"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-inWeight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center opacity-0">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">—</div>
|
||||
<div class="text-xs text-gray-800 font-semibold">—</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片3：回执信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800">回执信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-3 gap-2">
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">预配舱单</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-originalManifest"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运抵报告</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-tallyReport"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center" id="det-customsRelease-container">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">海关放行</div>
|
||||
<div id="det-customsRelease-wrapper">
|
||||
<div class="text-xs font-semibold" id="det-customsRelease"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">装载舱单</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-loadManifest"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">理货报告</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-cargoReport"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center opacity-0">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">—</div>
|
||||
<div class="text-xs text-gray-800 font-semibold">—</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 仓库信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3 hidden" id="tab-content-1"></div>
|
||||
<!-- 库位信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3 hidden" id="tab-content-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const uldData = {
|
||||
'78133363396': {
|
||||
billNo: '78133363396', agent: '中外运', code: 'DGR',
|
||||
pieces: '444', weight: '555.0', type: '普通货物运输',
|
||||
inPieces: '444', inWeight: '555.0', calcWeight: '555.0',
|
||||
carrier: 'CA', route: 'HFE', packType: '纸箱',
|
||||
billType: '国际出港（国际直航）', unNo: '—', dest: 'LAX',
|
||||
itemNameCn: '电子元器件', itemNameEn: 'Electronic Components',
|
||||
lockStatus: '未锁定', outboundTime: '—', remark: '需冷藏存储',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',
|
||||
warehouse: [
|
||||
{ batch: '1', pieces: 200, weight: 300.0, flightDate: '2026-07-08', flightNo: 'CA1234',route: 'HFE',dest: 'LAX', time: '2026-07-08 14:30:00' },
|
||||
{ batch: '2', pieces: 244, weight: 255.0, flightDate: '2026-07-09', flightNo: 'CA5678',route: 'HFE',dest: 'LAX', time: '2026-07-09 09:10:46' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'A-01-001', inPerson: '张三', inTime: '2026-07-08 14:30', outPerson: '李四', outTime: '2026-07-09 10:00' },
|
||||
{ id: 'B-02-005', inPerson: '王五', inTime: '2026-07-09 09:10', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363397': {
|
||||
billNo: '78133363397', agent: '徽远', code: 'PER',
|
||||
pieces: '120', weight: '320.0', type: '普通货物运输',
|
||||
inPieces: '120', inWeight: '320.0', calcWeight: '320.0',
|
||||
carrier: 'MU', route: 'PVG-NRT', packType: '托盘',
|
||||
billType: '国际出港（国际直航）', unNo: '—', dest: 'PVG',
|
||||
itemNameCn: '服装', itemNameEn: 'Garments',
|
||||
lockStatus: '未锁定', outboundTime: '—', remark: '易碎品，轻拿轻放',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',
|
||||
warehouse: [
|
||||
{ batch: '3', pieces: 60, weight: 150.0, flightDate: '2026-07-07', flightNo: 'MU123',route: 'HFE',dest: 'LAX', time: '2026-07-07 16:20:00' },
|
||||
{ batch: '4', pieces: 60, weight: 170.0, flightDate: '2026-07-08', flightNo: 'MU456',route: 'HFE',dest: 'LAX', time: '2026-07-08 11:00:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'A-03-012', inPerson: '赵六', inTime: '2026-07-07 16:20', outPerson: '钱七', outTime: '2026-07-08 14:00' },
|
||||
{ id: 'C-01-008', inPerson: '孙八', inTime: '2026-07-08 11:00', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363398': {
|
||||
billNo: '78133363398', agent: '中外运', code: 'NOR',
|
||||
pieces: '268', weight: '780.0', type: '普通货物运输',
|
||||
inPieces: '268', inWeight: '780.0', calcWeight: '780.0',
|
||||
carrier: 'CZ', route: 'CAN-AMS', packType: '托盘',
|
||||
billType: '国际出港（国际直航）', unNo: '—', dest: 'CAN',
|
||||
itemNameCn: '机械设备', itemNameEn: 'Machinery Equipment',
|
||||
lockStatus: '锁定', outboundTime: '2026-07-09 08:00', remark: '需叉车装卸',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',
|
||||
warehouse: [
|
||||
{ batch: '5', pieces: 150, weight: 420.0, flightDate: '2026-07-08', flightNo: 'CZ789',route: 'HFE',dest: 'LAX', time: '2026-07-08 22:15:00' },
|
||||
{ batch: '6', pieces: 118, weight: 360.0, flightDate: '2026-07-09', flightNo: 'CZ012',route: 'HFE',dest: 'LAX', time: '2026-07-09 06:30:00' },
|
||||
{ batch: '7', pieces: 100, weight: 200.0, flightDate: '2026-07-09', flightNo: 'CZ345',route: 'HFE',dest: 'LAX', time: '2026-07-09 13:00:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'B-01-003', inPerson: '张三', inTime: '2026-07-08 22:15', outPerson: '李四', outTime: '2026-07-09 06:00' },
|
||||
{ id: 'A-02-010', inPerson: '王五', inTime: '2026-07-09 06:30', outPerson: '—', outTime: '—' },
|
||||
{ id: 'C-03-007', inPerson: '赵六', inTime: '2026-07-09 13:00', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363399': {
|
||||
billNo: '78133363399', agent: '徽远', code: 'DGR',
|
||||
pieces: '85', weight: '210.0', type: '危险品运输',
|
||||
inPieces: '85', inWeight: '210.0', calcWeight: '210.0',
|
||||
carrier: '3U', route: 'CTU-SIN', packType: '铁箱',
|
||||
billType: '国际出港（国际直航）', unNo: 'UN3480', dest: 'CTU',
|
||||
itemNameCn: '锂电池', itemNameEn: 'Lithium Battery',
|
||||
lockStatus: '锁定', outboundTime: '—', remark: '危险品，单独存放',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',
|
||||
warehouse: [
|
||||
{ batch: '8', pieces: 45, weight: 110.0, flightDate: '2026-07-08', flightNo: '3U678',route: 'HFE',dest: 'LAX', time: '2026-07-08 18:00:00' },
|
||||
{ batch: '9', pieces: 40, weight: 100.0, flightDate: '2026-07-09', flightNo: '3U901',route: 'HFE',dest: 'LAX', time: '2026-07-09 07:45:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'D-01-002', inPerson: '钱七', inTime: '2026-07-08 18:00', outPerson: '孙八', outTime: '2026-07-09 08:00' },
|
||||
{ id: 'A-04-015', inPerson: '张三', inTime: '2026-07-09 07:45', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363400': {
|
||||
billNo: '78133363400', agent: '中外运', code: 'PER',
|
||||
pieces: '350', weight: '430.0', type: '普通货物运输',
|
||||
inPieces: '350', inWeight: '430.0', calcWeight: '430.0',
|
||||
carrier: 'HU', route: 'HKG-HFE', packType: '纸箱',
|
||||
billType: '国际出港（国际直航）', unNo: '—', dest: 'HFE',
|
||||
itemNameCn: '食品', itemNameEn: 'Food Products',
|
||||
lockStatus: '未锁定', outboundTime: '2026-07-09 11:30', remark: '保质期至2026-12',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',
|
||||
warehouse: [
|
||||
{ batch: '10', pieces: 180, weight: 220.0, flightDate: '2026-07-07', flightNo: 'HU234',route: 'HFE',dest: 'LAX', time: '2026-07-07 20:00:00' },
|
||||
{ batch: '11', pieces: 170, weight: 210.0, flightDate: '2026-07-09', flightNo: 'HU567',route: 'HFE',dest: 'LAX', time: '2026-07-09 10:30:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'B-02-011', inPerson: '李四', inTime: '2026-07-07 20:00', outPerson: '王五', outTime: '2026-07-08 16:00' },
|
||||
{ id: 'C-01-009', inPerson: '赵六', inTime: '2026-07-09 10:30', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// 核心修复：等待DOM全部渲染完成后再绑定点击事件，避免获取元素为null
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
const filterSheet = document.getElementById('filterSheet');
|
||||
const filterBtn = document.getElementById('filterBtn');
|
||||
|
||||
// 点击遮罩空白关闭，添加self防止弹窗内部点击穿透关闭
|
||||
filterOverlay.addEventListener('click', function(e) {
|
||||
if (e.target === filterOverlay) {
|
||||
closeFilter();
|
||||
}
|
||||
});
|
||||
// 筛选按钮点击打开弹窗
|
||||
filterBtn.addEventListener('click', openFilter);
|
||||
});
|
||||
|
||||
// 打开筛选弹窗
|
||||
function openFilter() {
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
const filterSheet = document.getElementById('filterSheet');
|
||||
filterOverlay.classList.add('show');
|
||||
setTimeout(() => filterSheet.classList.add('show'), 10);
|
||||
}
|
||||
|
||||
// 关闭筛选弹窗
|
||||
function closeFilter() {
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
const filterSheet = document.getElementById('filterSheet');
|
||||
filterSheet.classList.remove('show');
|
||||
setTimeout(() => filterOverlay.classList.remove('show'), 250);
|
||||
}
|
||||
|
||||
// 重置所有筛选输入框
|
||||
function resetFilter() {
|
||||
document.querySelectorAll('.filter-input').forEach(input => {
|
||||
input.value = '';
|
||||
});
|
||||
}
|
||||
|
||||
// 确定筛选（模拟查询，可对接后端筛选逻辑）
|
||||
function confirmFilter() {
|
||||
const params = {
|
||||
flightDate: document.getElementById('filterFlightDate').value,
|
||||
flightNo: document.getElementById('filterFlightNo').value,
|
||||
agent: document.getElementById('filterAgent').value,
|
||||
code: document.getElementById('filterCode').value,
|
||||
origin: document.getElementById('filterOrigin').value,
|
||||
billType: document.getElementById('filterBillType').value,
|
||||
bizType: document.getElementById('filterBizType').value,
|
||||
cnName: document.getElementById('filterCnName').value
|
||||
};
|
||||
console.log('筛选参数：', params);
|
||||
alert('筛选执行成功，控制台可查看筛选条件');
|
||||
closeFilter();
|
||||
}
|
||||
|
||||
function showDetail(id) {
|
||||
const listPage = document.getElementById('listPage');
|
||||
const detailPage = document.getElementById('detailPage');
|
||||
|
||||
const data = uldData[id];
|
||||
if (data) {
|
||||
document.getElementById('det-uldTitle').innerText = '基本信息';
|
||||
document.getElementById('det-billNo').innerText = data.billNo;
|
||||
document.getElementById('det-agent').innerText = data.agent;
|
||||
document.getElementById('det-code').innerText = data.code;
|
||||
document.getElementById('det-carrier').innerText = data.carrier;
|
||||
document.getElementById('det-route').innerText = data.route;
|
||||
document.getElementById('det-dest').innerText = data.dest;
|
||||
document.getElementById('det-billType').innerText = data.billType;
|
||||
document.getElementById('det-unNo').innerText = data.unNo;
|
||||
|
||||
// 锁定状态渲染
|
||||
const lockStatusEl = document.getElementById('det-lockStatus');
|
||||
if (data.lockStatus === '锁定') {
|
||||
lockStatusEl.innerHTML = '<iconify-icon icon="mdi:lock" class="mr-1"></iconify-icon>锁定';
|
||||
lockStatusEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-red-50 text-red-600 inline-flex items-center';
|
||||
} else {
|
||||
lockStatusEl.innerHTML = '—';
|
||||
lockStatusEl.className = 'text-xs font-semibold text-gray-800';
|
||||
}
|
||||
|
||||
document.getElementById('det-packType').innerText = data.packType;
|
||||
document.getElementById('det-type').innerText = data.type;
|
||||
document.getElementById('det-outboundTime').innerText = data.outboundTime || '—';
|
||||
document.getElementById('det-itemNameCn').innerText = data.itemNameCn || '—';
|
||||
document.getElementById('det-itemNameEn').innerText = data.itemNameEn || '—';
|
||||
document.getElementById('det-remark').innerText = data.remark || '—';
|
||||
|
||||
// 件重信息
|
||||
document.getElementById('det-pieces').innerText = data.pieces;
|
||||
document.getElementById('det-weight').innerText = data.weight;
|
||||
document.getElementById('det-calcWeight').innerText = data.calcWeight;
|
||||
document.getElementById('det-inPieces').innerText = data.inPieces;
|
||||
document.getElementById('det-inWeight').innerText = data.inWeight;
|
||||
|
||||
// 海关放行标签
|
||||
const customsReleaseEl = document.getElementById('det-customsRelease');
|
||||
if (data.customsRelease === '11') {
|
||||
customsReleaseEl.innerText = '11';
|
||||
customsReleaseEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-green-50 text-green-600 inline-block';
|
||||
} else {
|
||||
customsReleaseEl.innerText = data.customsRelease;
|
||||
customsReleaseEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-gray-100 text-gray-600 inline-block';
|
||||
}
|
||||
|
||||
// 渲染仓库批次列表
|
||||
const warehouseContainer = document.getElementById('tab-content-1');
|
||||
warehouseContainer.innerHTML = '';
|
||||
data.warehouse.forEach(item => {
|
||||
warehouseContainer.innerHTML += `
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="flex justify-between items-center pt-3 pb-1.5 px-3 mb-2 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 inline-block"></span>
|
||||
<span class="text-xs font-semibold text-gray-900">批次号: ${item.batch}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-1.5 px-3 pb-2">
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">件数</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.pieces}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">重量</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${parseFloat(item.weight).toFixed(1)} kg</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">航班日期</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.flightDate}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">航班号</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.flightNo}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">始发站</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.route}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">目的站</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.dest}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// 渲染库位信息
|
||||
const locationContainer = document.getElementById('tab-content-2');
|
||||
locationContainer.innerHTML = '';
|
||||
data.locations.forEach(loc => {
|
||||
locationContainer.innerHTML += `
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="flex justify-between items-center pt-3 pb-1.5 px-3 mb-2 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 inline-block"></span>
|
||||
<span class="text-xs font-bold text-gray-900">${loc.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-1.5 px-3 pb-2">
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库人</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${loc.inPerson}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库时间</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${loc.inTime}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库人</div>
|
||||
<div class="text-xs ${loc.outPerson === '—' ? 'text-gray-500 text-[14px]' : 'text-gray-800'} font-semibold">${loc.outPerson}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库时间</div>
|
||||
<div class="text-xs ${loc.outTime === '—' ? 'text-gray-500 text-[14px]' : 'text-gray-800'} font-semibold">${loc.outTime}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
switchTab(0);
|
||||
listPage.classList.add('page-hidden-left');
|
||||
detailPage.classList.remove('page-hidden-right');
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
const listPage = document.getElementById('listPage');
|
||||
const detailPage = document.getElementById('detailPage');
|
||||
listPage.classList.remove('page-hidden-left');
|
||||
detailPage.classList.add('page-hidden-right');
|
||||
}
|
||||
|
||||
function switchTab(index) {
|
||||
const tabs = document.querySelectorAll('.tab-item');
|
||||
const contents = document.querySelectorAll('.tab-pane');
|
||||
tabs.forEach((tab, i) => {
|
||||
if (i === index) {
|
||||
tab.classList.add('active');
|
||||
contents[i].classList.remove('hidden');
|
||||
} else {
|
||||
tab.classList.remove('active');
|
||||
contents[i].classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索框聚焦监听
|
||||
document.querySelector('input[placeholder="搜索ULD编号"]').addEventListener('focus', () => {
|
||||
console.log('搜索框已激活');
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
139
documents/5.5寸手持端设计文件/06_出港查询/运单追踪.html
Normal file
139
documents/5.5寸手持端设计文件/06_出港查询/运单追踪.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 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>
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: local('sans-serif');
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
/* 模拟手机容器阴影 */
|
||||
.phone-shell {
|
||||
box-shadow: 0 50px 100px -20px rgba(0,0,0,0.25), 0 30px 60px -30px rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-200 flex justify-center items-center min-h-screen p-4">
|
||||
<!-- 模拟手机屏幕容器 -->
|
||||
<div class="phone-shell w-[375px] h-[812px] bg-[#F5F5F7] overflow-hidden flex flex-col relative rounded-[48px] border-[10px] border-gray-900">
|
||||
<!-- 顶部蓝色区域 (包含状态栏和导航栏) -->
|
||||
<div class="bg-[#1A73E8] flex-none">
|
||||
<!-- 系统状态栏模拟 -->
|
||||
<div class="h-11 w-full flex justify-between items-center px-8 text-white">
|
||||
<span class="text-[15px] font-bold">09:41</span>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<iconify-icon class="text-sm" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-base" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-xl" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-[44px] px-4 flex items-center justify-between">
|
||||
<button class="flex items-center text-white space-x-0.5">
|
||||
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span class="text-base">返回</span>
|
||||
</button>
|
||||
<h1 class="text-lg font-bold text-white absolute left-1/2 -translate-x-1/2">运单追踪</h1>
|
||||
<div class="w-10"></div> <!-- 占位保持平衡 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar px-5 pt-6 pb-12">
|
||||
<!-- 流转状态卡片 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-5">
|
||||
<!-- 运单号 Header -->
|
||||
<div class="flex items-center justify-between pt-2 pb-5 mb-8 border-b border-gray-100">
|
||||
<div class="text-xl font-black text-gray-900 leading-none tracking-tight">
|
||||
78133358743
|
||||
</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="mb-6">
|
||||
<h2 class="text-base font-semibold text-gray-700 flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-700 inline-block" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
流转状态
|
||||
</h2>
|
||||
</div>
|
||||
<div class="relative pl-7 pb-2">
|
||||
<div class="absolute left-[9px] top-2 bottom-4 w-[2px] bg-gray-100"></div>
|
||||
<!-- 状态 1: 当前 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[27px] top-1 w-[20px] h-[20px] rounded-full bg-green-600 border-4 border-green-100 flex items-center justify-center ring-1 ring-green-600/20">
|
||||
<div class="w-2 h-2 rounded-full bg-white"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-green-700">原始舱单</span>
|
||||
<span class="text-green-600 text-xs font-normal bg-green-50 px-2 py-0.5 rounded-full">放行状态：01</span>
|
||||
</div>
|
||||
<div class="text-gray-400 text-xs font-normal flex items-center gap-1.5">
|
||||
<span>2026-07-10 11:03:38</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 2 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">分拣理货</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 3 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">理货申报</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 4 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">海关放行</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 5 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">柜台办结</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 6 -->
|
||||
<div class="relative mb-2">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">提取出库</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 模块 4: 操作详情卡片 -> 已删除 -->
|
||||
<!-- 底部占位 -->
|
||||
<div class="text-center py-6">
|
||||
<p class="text-[10px] text-gray-300 uppercase tracking-[0.2em] font-bold">查询信息已触底</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部 Home Indicator 模拟 -->
|
||||
<div class="h-8 w-full flex justify-center items-center flex-none bg-white/60 backdrop-blur-md">
|
||||
<div class="w-32 h-1.5 bg-black rounded-full opacity-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>ml>
|
||||
932
documents/5.5寸手持端设计文件/07_出港仓库/出港仓库.html
Normal file
932
documents/5.5寸手持端设计文件/07_出港仓库/出港仓库.html
Normal file
@@ -0,0 +1,932 @@
|
||||
<!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>
|
||||
@font-face {
|
||||
font-family: 'PingFang SC';
|
||||
src: local('PingFang SC');
|
||||
}
|
||||
body {
|
||||
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 隐藏滚动条但保留功能 */
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.tag-occupied { background-color: #dcfce7; color: #22c55e; } /* 已离港 - 绿色 */
|
||||
.tag-available { background-color: #dcfce7; color: #22c55e; } /* 已离港 - 绿色 */
|
||||
.tag-repair { background-color: #fce7e7; color: #ef4444; } /* 离港 - 红色 */
|
||||
|
||||
/* 页面切换动画 */
|
||||
.page {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
background-color: #f3f4f6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.page::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.page-hidden-right { transform: translateX(100%); }
|
||||
.page-hidden-left { transform: translateX(-100%); }
|
||||
|
||||
|
||||
/* 统一的深蓝色调 */
|
||||
.bg-header-blue { background-color: #2563EB; }
|
||||
|
||||
|
||||
/* 标签页样式 */
|
||||
.tab-item {
|
||||
position: relative;
|
||||
padding: 12px 0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.tab-item.active {
|
||||
color: #2563eb;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tab-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #2563eb;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.tab-item.active::after {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
/* ========== 筛选弹窗样式 提升层级+动画稳定 ========== */
|
||||
.filter-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.25s ease, visibility 0.25s ease;
|
||||
}
|
||||
.filter-overlay.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.filter-sheet {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
padding: 20px;
|
||||
z-index: 10000;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.25s ease-out;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.filter-sheet.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* 筛选输入框统一样式 */
|
||||
.filter-input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.filter-input:focus {
|
||||
border-color: #2563EB;
|
||||
}
|
||||
|
||||
/* 下拉框箭头浅灰色 + 全浏览器兼容修复 */
|
||||
select.filter-input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
background-size: 16px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
/* 清除IE默认下拉箭头 */
|
||||
select.filter-input::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
0% { top: 0; }
|
||||
100% { top: 100%; }
|
||||
}
|
||||
.scan-line {
|
||||
animation: scan 2s linear infinite;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.bottom-drawer {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="w-[375px] h-[812px] bg-[#F3F4F6] overflow-hidden flex flex-col relative shadow-2xl rounded-[40px] border-[8px] border-gray-800">
|
||||
<!-- 状态栏 -->
|
||||
<div class="h-6 w-full bg-[#2563EB] flex justify-between items-center px-6 text-white text-xs pt-1">
|
||||
<span>09:41</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<iconify-icon icon="material-symbols:signal-cellular-4-bar-rounded"></iconify-icon>
|
||||
<iconify-icon icon="material-symbols:wifi"></iconify-icon>
|
||||
<iconify-icon icon="material-symbols:battery-full-rounded"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 筛选弹窗容器 移到最外层，层级提升 -->
|
||||
<div class="filter-overlay" id="filterOverlay"></div>
|
||||
<div class="filter-sheet" id="filterSheet">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="relative flex items-center justify-center mb-6">
|
||||
<button class="absolute right-0 top-0 text-gray-400" onclick="closeFilter()">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
<h2 class="text-[18px] font-bold text-gray-900">筛选条件</h2>
|
||||
</div>
|
||||
<!-- 筛选表单区域 -->
|
||||
<div class="space-y-4 mb-7">
|
||||
<!-- 1.航班日期 -->
|
||||
<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>
|
||||
<!-- 2.航班号 -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入航班号" type="text" id="filterFlightNo">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 3.代理 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 5.目的站 -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入目的站" type="text" id="filterOrigin">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 6.运单类型 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 7.业务类型 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 8.品名(中) -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入中文品名" type="text" id="filterCnName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 h-11 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium" onclick="resetFilter()">重置</button>
|
||||
<button class="flex-1 h-11 bg-[#2563EB] text-white rounded-lg text-sm font-medium" onclick="confirmFilter()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面主容器 -->
|
||||
<div class="flex-1 relative overflow-hidden">
|
||||
<!-- 列表首页：出港仓库卡片页面 -->
|
||||
<div class="page z-10" id="listPage">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="bg-[#2563EB] h-14 flex items-center justify-between px-4 flex-none">
|
||||
<button class="flex items-center text-white text-sm" onclick="showToast('返回上一级')">
|
||||
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="text-white font-bold text-lg">出港仓库</h1>
|
||||
<div class="w-12"></div>
|
||||
</header>
|
||||
<!-- 搜索区 -->
|
||||
<section class="bg-[#F3F4F6] p-3 flex-none">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex-1 relative">
|
||||
<iconify-icon class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-lg" icon="mdi:magnify"></iconify-icon>
|
||||
<input class="w-full bg-white rounded-full pl-10 pr-10 py-2.5 text-sm shadow-sm border border-gray-200 outline-none" onkeypress="if(event.keyCode==13) showToast('执行搜索')" placeholder="搜索运单号" type="text"/>
|
||||
<button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-[#2563EB]" onclick="toggleScanOverlay(true)">
|
||||
<iconify-icon class="text-lg" icon="mdi:qrcode-scan"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<button id="filterBtn" class="bg-white p-2.5 rounded-full shadow-sm border border-gray-200 text-[#2563EB] flex items-center justify-center flex-none" onclick="openFilter()">
|
||||
<iconify-icon class="text-xl" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 统计栏 -->
|
||||
<section class="px-3 pb-3 flex justify-between gap-2 flex-none">
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#2563EB]">
|
||||
<div class="text-[11px] text-gray-500">总票数</div>
|
||||
<div class="text-lg font-bold text-[#2563EB]">8</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-orange-500">
|
||||
<div class="text-[11px] text-gray-500">未清仓</div>
|
||||
<div class="text-lg font-bold text-orange-500">4</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#10B981]">
|
||||
<div class="text-[11px] text-gray-500">已清仓</div>
|
||||
<div class="text-lg font-bold text-[#10B981]">4</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 卡片列表容器 -->
|
||||
<main class="flex-1 overflow-y-auto px-3 pb-4 custom-scrollbar" id="cardListContainer">
|
||||
</main>
|
||||
<!-- 扫码层 -->
|
||||
<div class="absolute inset-0 z-50 bg-black hidden flex flex-col" id="scanOverlay">
|
||||
<div class="p-6 flex justify-between items-center text-white">
|
||||
<button onclick="toggleScanOverlay(false)">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
<span class="text-sm font-medium">扫描运单条码</span>
|
||||
<button><iconify-icon class="text-2xl" icon="mdi:flashlight"></iconify-icon></button>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center justify-center p-12">
|
||||
<div class="w-64 h-64 border-2 border-[#2563EB] relative overflow-hidden rounded-lg">
|
||||
<div class="absolute top-0 left-0 w-full h-0.5 bg-[#2563EB] shadow-[0_0_10px_#2563EB] scan-line"></div>
|
||||
<div class="absolute top-0 left-0 w-6 h-6 border-t-4 border-l-4 border-[#2563EB]"></div>
|
||||
<div class="absolute top-0 right-0 w-6 h-6 border-t-4 border-r-4 border-[#2563EB]"></div>
|
||||
<div class="absolute bottom-0 left-0 w-6 h-6 border-b-4 border-l-4 border-[#2563EB]"></div>
|
||||
<div class="absolute bottom-0 right-0 w-6 h-6 border-b-4 border-r-4 border-[#2563EB]"></div>
|
||||
</div>
|
||||
<p class="text-white text-xs mt-6 opacity-60 text-center px-4">将条码/二维码放入框内，即可自动扫描</p>
|
||||
</div>
|
||||
<div class="h-32 bg-black flex justify-center items-center gap-12 text-white">
|
||||
<div class="flex flex-col items-center opacity-60">
|
||||
<iconify-icon class="text-3xl" icon="mdi:image-outline"></iconify-icon>
|
||||
<span class="text-[10px] mt-1">相册</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<iconify-icon class="text-3xl" icon="mdi:keyboard-outline"></iconify-icon>
|
||||
<span class="text-[10px] mt-1">手动输入</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toast -->
|
||||
<div class="absolute bottom-20 left-1/2 -translate-x-1/2 bg-black bg-opacity-80 text-white text-xs px-4 py-2 rounded-full hidden z-[60] whitespace-nowrap" id="toast">提示内容</div>
|
||||
</div>
|
||||
|
||||
<!-- 出港货物页面（右滑弹出） -->
|
||||
<div class="page z-20 page-hidden-right !bg-[#f0f2f5]" id="detailPage">
|
||||
<!-- 头部 -->
|
||||
<header class="bg-header-blue pt-2 pb-4 px-4 flex items-center relative flex-none">
|
||||
<button class="flex items-center text-white text-sm absolute left-4 active:opacity-70" onclick="goBack()">
|
||||
<iconify-icon class="text-xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="mx-auto text-white font-bold text-lg">出港货物</h1>
|
||||
<div class="absolute right-4 flex items-center">
|
||||
<iconify-icon class="text-red-500 text-2xl" icon="mdi:file-document-edit-outline"></iconify-icon>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 标签页 -->
|
||||
<div class="bg-white px-4 border-b border-gray-200 flex-none">
|
||||
<div class="flex justify-around">
|
||||
<div class="tab-item active cursor-pointer" onclick="switchTab(0)">运单信息</div>
|
||||
<div class="tab-item cursor-pointer" onclick="switchTab(1)">仓库信息</div>
|
||||
<div class="tab-item cursor-pointer" onclick="switchTab(2)">库位信息</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详情内容区 -->
|
||||
<div class="flex-1 overflow-y-auto hide-scrollbar">
|
||||
<!-- 运单信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3" id="tab-content-0">
|
||||
<!-- 卡片1：基本信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800" id="det-uldTitle">基本信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-2 gap-2">
|
||||
<!-- Row 1 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单号</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-billNo"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">代理人</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-agent"></span>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">特码</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-code"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">承运人</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-carrier"></span>
|
||||
</div>
|
||||
<!-- Row 3 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">始发站</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-route"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">中转站</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-outboundTime"></span>
|
||||
</div>
|
||||
<!-- Row 4 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">目的站</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-dest"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">UN编号</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-unNo"></span>
|
||||
</div>
|
||||
<!-- Row 5 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center" id="det-lockStatus-container">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5" id="det-lockStatus-label">锁定状态</span>
|
||||
<div id="det-lockStatus-wrapper">
|
||||
<span class="text-xs font-semibold" id="det-lockStatus"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">包装类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-packType"></span>
|
||||
</div>
|
||||
<!-- Row 6 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">业务类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-type"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库时间</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-ciTime"></span>
|
||||
</div>
|
||||
<!-- Row 7 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-billType"></span>
|
||||
</div>
|
||||
<!-- Row 8 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">品名(中)</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-itemNameCn"></span>
|
||||
</div>
|
||||
<!-- Row 9 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">品名(英)</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-itemNameEn"></span>
|
||||
</div>
|
||||
<!-- Row 10 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">备注</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-remark"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片2：件重信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800">件重信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-3 gap-2">
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单件数</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-pieces"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-weight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">计费重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-calcWeight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库件数</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-inPieces"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-inWeight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center opacity-0">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">—</div>
|
||||
<div class="text-xs text-gray-800 font-semibold">—</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片3：回执信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800">回执信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-3 gap-2">
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">预配舱单</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-originalManifest"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运抵报告</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-arriReport"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center" id="det-customsRelease-container">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">海关放行</div>
|
||||
<div id="det-customsRelease-wrapper">
|
||||
<div class="text-xs font-semibold" id="det-customsRelease"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">装载舱单</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-mftReport"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">理货报告</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-tallyReport"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 仓库信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3 hidden" id="tab-content-1"></div>
|
||||
<!-- 库位信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3 hidden" id="tab-content-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 运单详情数据源（用于出港货物渲染）
|
||||
const uldData = {
|
||||
'78133363396': {
|
||||
billNo: '78133363396', agent: '中外运', code: 'DGR',
|
||||
pieces: '444', weight: '555.0', type: '普通货物运输',
|
||||
inPieces: '444', inWeight: '555.0', calcWeight: '555.0',
|
||||
carrier: 'CA', route: 'HFE', packType: '纸箱',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'LAX',
|
||||
itemNameCn: '电子元器件', itemNameEn: 'Electronic Components',
|
||||
lockStatus: '未锁定', outboundTime: '—', remark: '需冷藏存储',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',ciTime: '2026-07-08 14:30:00',arriReport: '01',mftReport: '01',
|
||||
warehouse: [
|
||||
{ batch: '1', pieces: 200, weight: 300.0, flightDate: '2026-07-08', flightNo: 'CA1234',route: 'HFE',dest: 'LAX', time: '2026-07-08 14:30:00' },
|
||||
{ batch: '2', pieces: 244, weight: 255.0, flightDate: '2026-07-09', flightNo: 'CA5678',route: 'HFE',dest: 'LAX', time: '2026-07-09 09:10:46' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'A-01-001', inPerson: '张三', inTime: '2026-07-08 14:30', outPerson: '李四', outTime: '2026-07-09 10:00' },
|
||||
{ id: 'B-02-005', inPerson: '王五', inTime: '2026-07-09 09:10', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363397': {
|
||||
billNo: '78133363397', agent: '徽远', code: 'PER',
|
||||
pieces: '120', weight: '320.0', type: '普通货物运输',
|
||||
inPieces: '120', inWeight: '320.0', calcWeight: '320.0',
|
||||
carrier: 'MU', route: 'PVG-NRT', packType: '托盘',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'PVG',
|
||||
itemNameCn: '服装', itemNameEn: 'Garments',
|
||||
lockStatus: '未锁定', outboundTime: '—', remark: '易碎品，轻拿轻放',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',ciTime: '2026-07-08 14:30:00',arriReport: '01',mftReport: '01',
|
||||
warehouse: [
|
||||
{ batch: '3', pieces: 60, weight: 150.0, flightDate: '2026-07-07', flightNo: 'MU123', time: '2026-07-07 16:20:00' },
|
||||
{ batch: '4', pieces: 60, weight: 170.0, flightDate: '2026-07-08', flightNo: 'MU456', time: '2026-07-08 11:00:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'A-03-012', inPerson: '赵六', inTime: '2026-07-07 16:20', outPerson: '钱七', outTime: '2026-07-08 14:00' },
|
||||
{ id: 'C-01-008', inPerson: '孙八', inTime: '2026-07-08 11:00', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363398': {
|
||||
billNo: '78133363398', agent: '中外运', code: 'NOR',
|
||||
pieces: '268', weight: '780.0', type: '普通货物运输',
|
||||
inPieces: '268', inWeight: '780.0', calcWeight: '780.0',
|
||||
carrier: 'CZ', route: 'CAN-AMS', packType: '托盘',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'CAN',
|
||||
itemNameCn: '机械设备', itemNameEn: 'Machinery Equipment',
|
||||
lockStatus: '锁定', outboundTime: '2026-07-09 08:00', remark: '需叉车装卸',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',ciTime: '2026-07-08 14:30:00',arriReport: '01',mftReport: '01',
|
||||
warehouse: [
|
||||
{ batch: '5', pieces: 150, weight: 420.0, flightDate: '2026-07-08', flightNo: 'CZ789', time: '2026-07-08 22:15:00' },
|
||||
{ batch: '6', pieces: 118, weight: 360.0, flightDate: '2026-07-09', flightNo: 'CZ012', time: '2026-07-09 06:30:00' },
|
||||
{ batch: '7', pieces: 100, weight: 200.0, flightDate: '2026-07-09', flightNo: 'CZ345', time: '2026-07-09 13:00:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'B-01-003', inPerson: '张三', inTime: '2026-07-08 22:15', outPerson: '李四', outTime: '2026-07-09 06:00' },
|
||||
{ id: 'A-02-010', inPerson: '王五', inTime: '2026-07-09 06:30', outPerson: '—', outTime: '—' },
|
||||
{ id: 'C-03-007', inPerson: '赵六', inTime: '2026-07-09 13:00', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363399': {
|
||||
billNo: '78133363399', agent: '徽远', code: 'DGR',
|
||||
pieces: '85', weight: '210.0', type: '危险品运输',
|
||||
inPieces: '85', inWeight: '210.0', calcWeight: '210.0',
|
||||
carrier: '3U', route: 'CTU-SIN', packType: '铁箱',
|
||||
billType: '国际进港（国际直航）', unNo: 'UN3480', dest: 'CTU',
|
||||
itemNameCn: '锂电池', itemNameEn: 'Lithium Battery',
|
||||
lockStatus: '锁定', outboundTime: '—', remark: '危险品，单独存放',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',ciTime: '2026-07-08 14:30:00',arriReport: '01',mftReport: '01',
|
||||
warehouse: [
|
||||
{ batch: '8', pieces: 45, weight: 110.0, flightDate: '2026-07-08', flightNo: '3U678', time: '2026-07-08 18:00:00' },
|
||||
{ batch: '9', pieces: 40, weight: 100.0, flightDate: '2026-07-09', flightNo: '3U901', time: '2026-07-09 07:45:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'D-01-002', inPerson: '钱七', inTime: '2026-07-08 18:00', outPerson: '孙八', outTime: '2026-07-09 08:00' },
|
||||
{ id: 'A-04-015', inPerson: '张三', inTime: '2026-07-09 07:45', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363400': {
|
||||
billNo: '78133363400', agent: '中外运', code: 'PER',
|
||||
pieces: '350', weight: '430.0', type: '普通货物运输',
|
||||
inPieces: '350', inWeight: '430.0', calcWeight: '430.0',
|
||||
carrier: 'HU', route: 'HKG-LAX', packType: '纸箱',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'LAX',
|
||||
itemNameCn: '食品', itemNameEn: 'Food Products',
|
||||
lockStatus: '未锁定', outboundTime: '2026-07-09 11:30', remark: '保质期至2026-12',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',ciTime: '2026-07-08 14:30:00',arriReport: '01',mftReport: '01',
|
||||
warehouse: [
|
||||
{ batch: '10', pieces: 180, weight: 220.0, flightDate: '2026-07-07', flightNo: 'HU234', time: '2026-07-07 20:00:00' },
|
||||
{ batch: '11', pieces: 170, weight: 210.0, flightDate: '2026-07-09', flightNo: 'HU567', time: '2026-07-09 10:30:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'B-02-011', inPerson: '李四', inTime: '2026-07-07 20:00', outPerson: '王五', outTime: '2026-07-08 16:00' },
|
||||
{ id: 'C-01-009', inPerson: '赵六', inTime: '2026-07-09 10:30', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
}
|
||||
};
|
||||
// 出港仓库卡片列表数据源
|
||||
const data = [
|
||||
{ id: "78133363396", status: "已清仓", flight: "20260702/MU1111", route: "HFE-LAX", pcs: 111, weight: 2300 },
|
||||
{ id: "78133363397", status: "未清仓", flight: "20260702/MU2222", route: "NRT-LAX", pcs: 85, weight: 1560 },
|
||||
{ id: "78133363398", status: "已清仓", flight: "20260702/MU3333", route: "FRA-LAX", pcs: 200, weight: 4200 },
|
||||
{ id: "78133363399", status: "未清仓", flight: "20260702/MU4444", route: "HFE-PVG", pcs: 50, weight: 980 },
|
||||
{ id: "78133363400", status: "未清仓", flight: "20260702/MU5555", route: "CDG-LAX", pcs: 168, weight: 3150 },
|
||||
{ id: "78133363401", status: "已清仓", flight: "20260702/MU6666", route: "SIN-LAX", pcs: 92, weight: 1800 },
|
||||
{ id: "78133363402", status: "未清仓", flight: "20260702/MU7777", route: "HFE-HFE", pcs: 145, weight: 2800 },
|
||||
{ id: "78133363403", status: "已清仓", flight: "20260702/MU8888", route: "HND-LAX", pcs: 73, weight: 1420 }
|
||||
];
|
||||
|
||||
// 渲染仓库卡片列表
|
||||
function renderList() {
|
||||
const container = document.getElementById('cardListContainer');
|
||||
container.innerHTML = data.map((item) => {
|
||||
const isCleared = item.status === '已清仓';
|
||||
const departure = item.route.split('-')[0];
|
||||
const flightNo = item.flight.split('/')[1];
|
||||
return `
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer mb-3" onclick="showDetail('${item.id}')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">${item.id}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
${getStatusTag(item.status)}
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：${item.pcs}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：${item.weight}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span>航班号：${flightNo}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span>目的站：${departure}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 gap-2 mt-3">
|
||||
<button onclick="event.stopPropagation(); showToast('执行清仓操作：运单号 ${item.id}')"
|
||||
class="text-xs py-1.5 px-2 rounded-[6px] font-medium h-8 ${isCleared ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-[#EFF6FF] text-[#2563EB]'}" ${isCleared ? 'disabled' : ''}>
|
||||
清仓
|
||||
</button>
|
||||
<button onclick="event.stopPropagation(); showToast('修改库位：运单号 ${item.id}')"
|
||||
class="bg-[#EFF6FF] text-[#2563EB] text-xs py-1.5 px-2 rounded-[6px] font-medium h-8">
|
||||
修改库位
|
||||
</button>
|
||||
<button onclick="event.stopPropagation(); showToast('执行出库：运单号 ${item.id}')"
|
||||
class="bg-[#EFF6FF] text-[#2563EB] text-xs py-1.5 px-2 rounded-[6px] font-medium h-8">
|
||||
出库
|
||||
</button>
|
||||
<button onclick="event.stopPropagation(); showToast('执行入库：运单号 ${item.id}')"
|
||||
class="bg-[#EFF6FF] text-[#2563EB] text-xs py-1.5 px-2 rounded-[6px] font-medium h-8">
|
||||
入库
|
||||
</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 状态标签渲染
|
||||
function getStatusTag(status) {
|
||||
let color = '';
|
||||
switch(status) {
|
||||
case '已清仓': color = 'bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium'; break;
|
||||
case '未清仓': color = 'bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium'; break;
|
||||
}
|
||||
return `<span class="${color}">${status}</span>`;
|
||||
}
|
||||
|
||||
// 跳转至出港货物页面，填充数据
|
||||
function showDetail(id) {
|
||||
const listPage = document.getElementById('listPage');
|
||||
const detailPage = document.getElementById('detailPage');
|
||||
|
||||
const data = uldData[id];
|
||||
if (!data) {
|
||||
showToast("暂无该运单详情数据");
|
||||
return;
|
||||
}
|
||||
// 填充基础信息
|
||||
document.getElementById('det-billNo').innerText = data.billNo;
|
||||
document.getElementById('det-agent').innerText = data.agent;
|
||||
document.getElementById('det-code').innerText = data.code;
|
||||
document.getElementById('det-carrier').innerText = data.carrier;
|
||||
document.getElementById('det-route').innerText = data.route;
|
||||
document.getElementById('det-dest').innerText = data.dest;
|
||||
document.getElementById('det-billType').innerText = data.billType;
|
||||
document.getElementById('det-unNo').innerText = data.unNo;
|
||||
document.getElementById('det-ciTime').innerText = data.ciTime;
|
||||
// 锁定状态样式
|
||||
const lockStatusEl = document.getElementById('det-lockStatus');
|
||||
if (data.lockStatus === '锁定') {
|
||||
lockStatusEl.innerHTML = '<iconify-icon icon="mdi:lock" class="mr-1"></iconify-icon>锁定';
|
||||
lockStatusEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-red-50 text-red-600 inline-flex items-center';
|
||||
} else {
|
||||
lockStatusEl.innerText = '—';
|
||||
lockStatusEl.className = 'text-xs font-semibold text-gray-800';
|
||||
}
|
||||
|
||||
document.getElementById('det-packType').innerText = data.packType;
|
||||
document.getElementById('det-type').innerText = data.type;
|
||||
document.getElementById('det-outboundTime').innerText = data.outboundTime || '—';
|
||||
document.getElementById('det-itemNameCn').innerText = data.itemNameCn || '—';
|
||||
document.getElementById('det-itemNameEn').innerText = data.itemNameEn || '—';
|
||||
document.getElementById('det-remark').innerText = data.remark || '—';
|
||||
|
||||
// 件重信息
|
||||
document.getElementById('det-pieces').innerText = data.pieces;
|
||||
document.getElementById('det-weight').innerText = data.weight;
|
||||
document.getElementById('det-calcWeight').innerText = data.calcWeight;
|
||||
document.getElementById('det-inPieces').innerText = data.inPieces;
|
||||
document.getElementById('det-inWeight').innerText = data.inWeight;
|
||||
|
||||
// 海关放行标签
|
||||
const customsReleaseEl = document.getElementById('det-customsRelease');
|
||||
if (data.customsRelease === '11') {
|
||||
customsReleaseEl.innerText = '11';
|
||||
customsReleaseEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-green-50 text-green-600 inline-block';
|
||||
} else {
|
||||
customsReleaseEl.innerText = data.customsRelease;
|
||||
customsReleaseEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-gray-100 text-gray-600 inline-block';
|
||||
}
|
||||
document.getElementById('det-originalManifest').innerText = data.originalManifest;
|
||||
document.getElementById('det-arriReport').innerText = data.arriReport;
|
||||
document.getElementById('det-mftReport').innerText = data.mftReport;
|
||||
document.getElementById('det-tallyReport').innerText = data.tallyReport;
|
||||
// 渲染仓库批次
|
||||
const warehouseContainer = document.getElementById('tab-content-1');
|
||||
warehouseContainer.innerHTML = '';
|
||||
data.warehouse.forEach(item => {
|
||||
warehouseContainer.innerHTML += `
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="flex justify-between items-center pt-3 pb-1.5 px-3 mb-2 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 inline-block"></span>
|
||||
<span class="text-xs font-semibold text-gray-900">批次号: ${item.batch}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-1.5 px-3 pb-2">
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">件数</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.pieces}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">重量</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${parseFloat(item.weight).toFixed(1)} kg</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">航班日期</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.flightDate}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">航班号</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.flightNo}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">始发站</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.route}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">目的站</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.dest}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// 渲染库位信息
|
||||
const locationContainer = document.getElementById('tab-content-2');
|
||||
locationContainer.innerHTML = '';
|
||||
data.locations.forEach(loc => {
|
||||
locationContainer.innerHTML += `
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="flex justify-between items-center pt-3 pb-1.5 px-3 mb-2 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 inline-block"></span>
|
||||
<span class="text-xs font-bold text-gray-900">${loc.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-1.5 px-3 pb-2">
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库人</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${loc.inPerson}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库时间</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${loc.inTime}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库人</div>
|
||||
<div class="text-xs ${loc.outPerson === '—' ? 'text-gray-500' : 'text-gray-800'} font-semibold">${loc.outPerson}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库时间</div>
|
||||
<div class="text-xs ${loc.outTime === '—' ? 'text-gray-500' : 'text-gray-800'} font-semibold">${loc.outTime}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// 默认激活运单信息标签
|
||||
switchTab(0);
|
||||
// 页面切换动画：列表左滑隐藏，详情滑入
|
||||
listPage.classList.add('page-hidden-left');
|
||||
detailPage.classList.remove('page-hidden-right');
|
||||
}
|
||||
|
||||
// 返回列表页
|
||||
function goBack() {
|
||||
const listPage = document.getElementById('listPage');
|
||||
const detailPage = document.getElementById('detailPage');
|
||||
listPage.classList.remove('page-hidden-left');
|
||||
detailPage.classList.add('page-hidden-right');
|
||||
}
|
||||
|
||||
// 切换详情标签页
|
||||
function switchTab(index) {
|
||||
const tabs = document.querySelectorAll('.tab-item');
|
||||
const contents = document.querySelectorAll('.tab-pane');
|
||||
tabs.forEach((tab, i) => {
|
||||
if (i === index) {
|
||||
tab.classList.add('active');
|
||||
contents[i].classList.remove('hidden');
|
||||
} else {
|
||||
tab.classList.remove('active');
|
||||
contents[i].classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Toast提示
|
||||
function showToast(msg) {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.innerText = msg;
|
||||
toast.classList.remove('hidden');
|
||||
setTimeout(() => toast.classList.add('hidden'), 2000);
|
||||
}
|
||||
|
||||
// 筛选弹窗方法
|
||||
function openFilter() {
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
const filterSheet = document.getElementById('filterSheet');
|
||||
filterOverlay.classList.add('show');
|
||||
setTimeout(() => filterSheet.classList.add('show'), 10);
|
||||
}
|
||||
function closeFilter() {
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
const filterSheet = document.getElementById('filterSheet');
|
||||
filterSheet.classList.remove('show');
|
||||
setTimeout(() => filterOverlay.classList.remove('show'), 250);
|
||||
}
|
||||
function resetFilter() {
|
||||
document.querySelectorAll('.filter-input').forEach(input => {
|
||||
input.value = '';
|
||||
});
|
||||
}
|
||||
function confirmFilter() {
|
||||
const params = {
|
||||
flightDate: document.getElementById('filterFlightDate')?.value || '',
|
||||
flightNo: document.getElementById('filterFlightNo')?.value || '',
|
||||
agent: '',
|
||||
code: '',
|
||||
origin: document.getElementById('filterOrigin')?.value || '',
|
||||
billType: '',
|
||||
bizType: '',
|
||||
cnName: document.getElementById('filterCnName')?.value || ''
|
||||
};
|
||||
console.log('筛选参数：', params);
|
||||
alert('筛选执行成功，控制台可查看筛选条件');
|
||||
closeFilter();
|
||||
}
|
||||
|
||||
// 扫码弹窗
|
||||
function toggleScanOverlay(show) {
|
||||
const overlay = document.getElementById('scanOverlay');
|
||||
if (show) overlay.classList.remove('hidden');
|
||||
else overlay.classList.add('hidden');
|
||||
}
|
||||
|
||||
// 页面加载完成初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderList();
|
||||
// 筛选遮罩点击关闭
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
filterOverlay.addEventListener('click', function(e) {
|
||||
if (e.target === filterOverlay) closeFilter();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
139
documents/5.5寸手持端设计文件/07_出港仓库/运单追踪.html
Normal file
139
documents/5.5寸手持端设计文件/07_出港仓库/运单追踪.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 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>
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: local('sans-serif');
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
/* 模拟手机容器阴影 */
|
||||
.phone-shell {
|
||||
box-shadow: 0 50px 100px -20px rgba(0,0,0,0.25), 0 30px 60px -30px rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-200 flex justify-center items-center min-h-screen p-4">
|
||||
<!-- 模拟手机屏幕容器 -->
|
||||
<div class="phone-shell w-[375px] h-[812px] bg-[#F5F5F7] overflow-hidden flex flex-col relative rounded-[48px] border-[10px] border-gray-900">
|
||||
<!-- 顶部蓝色区域 (包含状态栏和导航栏) -->
|
||||
<div class="bg-[#1A73E8] flex-none">
|
||||
<!-- 系统状态栏模拟 -->
|
||||
<div class="h-11 w-full flex justify-between items-center px-8 text-white">
|
||||
<span class="text-[15px] font-bold">09:41</span>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<iconify-icon class="text-sm" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-base" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-xl" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-[44px] px-4 flex items-center justify-between">
|
||||
<button class="flex items-center text-white space-x-0.5">
|
||||
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span class="text-base">返回</span>
|
||||
</button>
|
||||
<h1 class="text-lg font-bold text-white absolute left-1/2 -translate-x-1/2">运单追踪</h1>
|
||||
<div class="w-10"></div> <!-- 占位保持平衡 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar px-5 pt-6 pb-12">
|
||||
<!-- 流转状态卡片 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-5">
|
||||
<!-- 运单号 Header -->
|
||||
<div class="flex items-center justify-between pt-2 pb-5 mb-8 border-b border-gray-100">
|
||||
<div class="text-xl font-black text-gray-900 leading-none tracking-tight">
|
||||
78133358743
|
||||
</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="mb-6">
|
||||
<h2 class="text-base font-semibold text-gray-700 flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-700 inline-block" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
流转状态
|
||||
</h2>
|
||||
</div>
|
||||
<div class="relative pl-7 pb-2">
|
||||
<div class="absolute left-[9px] top-2 bottom-4 w-[2px] bg-gray-100"></div>
|
||||
<!-- 状态 1: 当前 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[27px] top-1 w-[20px] h-[20px] rounded-full bg-green-600 border-4 border-green-100 flex items-center justify-center ring-1 ring-green-600/20">
|
||||
<div class="w-2 h-2 rounded-full bg-white"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-green-700">原始舱单</span>
|
||||
<span class="text-green-600 text-xs font-normal bg-green-50 px-2 py-0.5 rounded-full">放行状态：01</span>
|
||||
</div>
|
||||
<div class="text-gray-400 text-xs font-normal flex items-center gap-1.5">
|
||||
<span>2026-07-10 11:03:38</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 2 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">分拣理货</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 3 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">理货申报</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 4 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">海关放行</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 5 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">柜台办结</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 6 -->
|
||||
<div class="relative mb-2">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">提取出库</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 模块 4: 操作详情卡片 -> 已删除 -->
|
||||
<!-- 底部占位 -->
|
||||
<div class="text-center py-6">
|
||||
<p class="text-[10px] text-gray-300 uppercase tracking-[0.2em] font-bold">查询信息已触底</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部 Home Indicator 模拟 -->
|
||||
<div class="h-8 w-full flex justify-center items-center flex-none bg-white/60 backdrop-blur-md">
|
||||
<div class="w-32 h-1.5 bg-black rounded-full opacity-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>ml>
|
||||
139
documents/5.5寸手持端设计文件/08_进港仓库/运单追踪.html
Normal file
139
documents/5.5寸手持端设计文件/08_进港仓库/运单追踪.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 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>
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: local('sans-serif');
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
/* 模拟手机容器阴影 */
|
||||
.phone-shell {
|
||||
box-shadow: 0 50px 100px -20px rgba(0,0,0,0.25), 0 30px 60px -30px rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-200 flex justify-center items-center min-h-screen p-4">
|
||||
<!-- 模拟手机屏幕容器 -->
|
||||
<div class="phone-shell w-[375px] h-[812px] bg-[#F5F5F7] overflow-hidden flex flex-col relative rounded-[48px] border-[10px] border-gray-900">
|
||||
<!-- 顶部蓝色区域 (包含状态栏和导航栏) -->
|
||||
<div class="bg-[#1A73E8] flex-none">
|
||||
<!-- 系统状态栏模拟 -->
|
||||
<div class="h-11 w-full flex justify-between items-center px-8 text-white">
|
||||
<span class="text-[15px] font-bold">09:41</span>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<iconify-icon class="text-sm" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-base" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-xl" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-[44px] px-4 flex items-center justify-between">
|
||||
<button class="flex items-center text-white space-x-0.5">
|
||||
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span class="text-base">返回</span>
|
||||
</button>
|
||||
<h1 class="text-lg font-bold text-white absolute left-1/2 -translate-x-1/2">运单追踪</h1>
|
||||
<div class="w-10"></div> <!-- 占位保持平衡 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar px-5 pt-6 pb-12">
|
||||
<!-- 流转状态卡片 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-5">
|
||||
<!-- 运单号 Header -->
|
||||
<div class="flex items-center justify-between pt-2 pb-5 mb-8 border-b border-gray-100">
|
||||
<div class="text-xl font-black text-gray-900 leading-none tracking-tight">
|
||||
78133358743
|
||||
</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="mb-6">
|
||||
<h2 class="text-base font-semibold text-gray-700 flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-700 inline-block" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
流转状态
|
||||
</h2>
|
||||
</div>
|
||||
<div class="relative pl-7 pb-2">
|
||||
<div class="absolute left-[9px] top-2 bottom-4 w-[2px] bg-gray-100"></div>
|
||||
<!-- 状态 1: 当前 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[27px] top-1 w-[20px] h-[20px] rounded-full bg-green-600 border-4 border-green-100 flex items-center justify-center ring-1 ring-green-600/20">
|
||||
<div class="w-2 h-2 rounded-full bg-white"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-green-700">原始舱单</span>
|
||||
<span class="text-green-600 text-xs font-normal bg-green-50 px-2 py-0.5 rounded-full">放行状态：01</span>
|
||||
</div>
|
||||
<div class="text-gray-400 text-xs font-normal flex items-center gap-1.5">
|
||||
<span>2026-07-10 11:03:38</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 2 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">分拣理货</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 3 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">理货申报</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 4 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">海关放行</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 5 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">柜台办结</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 6 -->
|
||||
<div class="relative mb-2">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">提取出库</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 模块 4: 操作详情卡片 -> 已删除 -->
|
||||
<!-- 底部占位 -->
|
||||
<div class="text-center py-6">
|
||||
<p class="text-[10px] text-gray-300 uppercase tracking-[0.2em] font-bold">查询信息已触底</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部 Home Indicator 模拟 -->
|
||||
<div class="h-8 w-full flex justify-center items-center flex-none bg-white/60 backdrop-blur-md">
|
||||
<div class="w-32 h-1.5 bg-black rounded-full opacity-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>ml>
|
||||
924
documents/5.5寸手持端设计文件/08_进港仓库/进港仓库.html
Normal file
924
documents/5.5寸手持端设计文件/08_进港仓库/进港仓库.html
Normal file
@@ -0,0 +1,924 @@
|
||||
<!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>
|
||||
@font-face {
|
||||
font-family: 'PingFang SC';
|
||||
src: local('PingFang SC');
|
||||
}
|
||||
body {
|
||||
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 隐藏滚动条但保留功能 */
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.tag-occupied { background-color: #dcfce7; color: #22c55e; } /* 已离港 - 绿色 */
|
||||
.tag-available { background-color: #dcfce7; color: #22c55e; } /* 已离港 - 绿色 */
|
||||
.tag-repair { background-color: #fce7e7; color: #ef4444; } /* 离港 - 红色 */
|
||||
|
||||
/* 页面切换动画 */
|
||||
.page {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
background-color: #f3f4f6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.page::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.page-hidden-right { transform: translateX(100%); }
|
||||
.page-hidden-left { transform: translateX(-100%); }
|
||||
|
||||
|
||||
/* 统一的深蓝色调 */
|
||||
.bg-header-blue { background-color: #2563EB; }
|
||||
|
||||
|
||||
/* 标签页样式 */
|
||||
.tab-item {
|
||||
position: relative;
|
||||
padding: 12px 0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.tab-item.active {
|
||||
color: #2563eb;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tab-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #2563eb;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.tab-item.active::after {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
/* ========== 筛选弹窗样式 提升层级+动画稳定 ========== */
|
||||
.filter-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.25s ease, visibility 0.25s ease;
|
||||
}
|
||||
.filter-overlay.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.filter-sheet {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
padding: 20px;
|
||||
z-index: 10000;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.25s ease-out;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.filter-sheet.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* 筛选输入框统一样式 */
|
||||
.filter-input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.filter-input:focus {
|
||||
border-color: #2563EB;
|
||||
}
|
||||
|
||||
/* 下拉框箭头浅灰色 + 全浏览器兼容修复 */
|
||||
select.filter-input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
background-size: 16px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
/* 清除IE默认下拉箭头 */
|
||||
select.filter-input::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
0% { top: 0; }
|
||||
100% { top: 100%; }
|
||||
}
|
||||
.scan-line {
|
||||
animation: scan 2s linear infinite;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.bottom-drawer {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="w-[375px] h-[812px] bg-[#F3F4F6] overflow-hidden flex flex-col relative shadow-2xl rounded-[40px] border-[8px] border-gray-800">
|
||||
<!-- 状态栏 -->
|
||||
<div class="h-6 w-full bg-[#2563EB] flex justify-between items-center px-6 text-white text-xs pt-1">
|
||||
<span>09:41</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<iconify-icon icon="material-symbols:signal-cellular-4-bar-rounded"></iconify-icon>
|
||||
<iconify-icon icon="material-symbols:wifi"></iconify-icon>
|
||||
<iconify-icon icon="material-symbols:battery-full-rounded"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 筛选弹窗容器 移到最外层，层级提升 -->
|
||||
<div class="filter-overlay" id="filterOverlay"></div>
|
||||
<div class="filter-sheet" id="filterSheet">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="relative flex items-center justify-center mb-6">
|
||||
<button class="absolute right-0 top-0 text-gray-400" onclick="closeFilter()">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
<h2 class="text-[18px] font-bold text-gray-900">筛选条件</h2>
|
||||
</div>
|
||||
<!-- 筛选表单区域 -->
|
||||
<div class="space-y-4 mb-7">
|
||||
<!-- 1.航班日期 -->
|
||||
<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>
|
||||
<!-- 2.航班号 -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入航班号" type="text" id="filterFlightNo">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 3.代理 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 5.始发站 -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入始发站" type="text" id="filterOrigin">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 6.运单类型 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 7.业务类型 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 8.品名(中) -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入中文品名" type="text" id="filterCnName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 h-11 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium" onclick="resetFilter()">重置</button>
|
||||
<button class="flex-1 h-11 bg-[#2563EB] text-white rounded-lg text-sm font-medium" onclick="confirmFilter()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面主容器 -->
|
||||
<div class="flex-1 relative overflow-hidden">
|
||||
<!-- 列表首页：进港仓库卡片页面 -->
|
||||
<div class="page z-10" id="listPage">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="bg-[#2563EB] h-14 flex items-center justify-between px-4 flex-none">
|
||||
<button class="flex items-center text-white text-sm" onclick="showToast('返回上一级')">
|
||||
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="text-white font-bold text-lg">进港仓库</h1>
|
||||
<div class="w-12"></div>
|
||||
</header>
|
||||
<!-- 搜索区 -->
|
||||
<section class="bg-[#F3F4F6] p-3 flex-none">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex-1 relative">
|
||||
<iconify-icon class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-lg" icon="mdi:magnify"></iconify-icon>
|
||||
<input class="w-full bg-white rounded-full pl-10 pr-10 py-2.5 text-sm shadow-sm border border-gray-200 outline-none" onkeypress="if(event.keyCode==13) showToast('执行搜索')" placeholder="搜索运单号/航班号..." type="text"/>
|
||||
<button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-[#2563EB]" onclick="toggleScanOverlay(true)">
|
||||
<iconify-icon class="text-lg" icon="mdi:qrcode-scan"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<button id="filterBtn" class="bg-white p-2.5 rounded-full shadow-sm border border-gray-200 text-[#2563EB] flex items-center justify-center flex-none" onclick="openFilter()">
|
||||
<iconify-icon class="text-xl" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 统计栏 -->
|
||||
<section class="px-3 pb-3 flex justify-between gap-2 flex-none">
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#2563EB]">
|
||||
<div class="text-[11px] text-gray-500">总票数</div>
|
||||
<div class="text-lg font-bold text-[#2563EB]">8</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-orange-500">
|
||||
<div class="text-[11px] text-gray-500">未清仓</div>
|
||||
<div class="text-lg font-bold text-orange-500">4</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#10B981]">
|
||||
<div class="text-[11px] text-gray-500">已清仓</div>
|
||||
<div class="text-lg font-bold text-[#10B981]">4</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 卡片列表容器 -->
|
||||
<main class="flex-1 overflow-y-auto px-3 pb-4 custom-scrollbar" id="cardListContainer">
|
||||
</main>
|
||||
<!-- 扫码层 -->
|
||||
<div class="absolute inset-0 z-50 bg-black hidden flex flex-col" id="scanOverlay">
|
||||
<div class="p-6 flex justify-between items-center text-white">
|
||||
<button onclick="toggleScanOverlay(false)">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
<span class="text-sm font-medium">扫描运单条码</span>
|
||||
<button><iconify-icon class="text-2xl" icon="mdi:flashlight"></iconify-icon></button>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center justify-center p-12">
|
||||
<div class="w-64 h-64 border-2 border-[#2563EB] relative overflow-hidden rounded-lg">
|
||||
<div class="absolute top-0 left-0 w-full h-0.5 bg-[#2563EB] shadow-[0_0_10px_#2563EB] scan-line"></div>
|
||||
<div class="absolute top-0 left-0 w-6 h-6 border-t-4 border-l-4 border-[#2563EB]"></div>
|
||||
<div class="absolute top-0 right-0 w-6 h-6 border-t-4 border-r-4 border-[#2563EB]"></div>
|
||||
<div class="absolute bottom-0 left-0 w-6 h-6 border-b-4 border-l-4 border-[#2563EB]"></div>
|
||||
<div class="absolute bottom-0 right-0 w-6 h-6 border-b-4 border-r-4 border-[#2563EB]"></div>
|
||||
</div>
|
||||
<p class="text-white text-xs mt-6 opacity-60 text-center px-4">将条码/二维码放入框内，即可自动扫描</p>
|
||||
</div>
|
||||
<div class="h-32 bg-black flex justify-center items-center gap-12 text-white">
|
||||
<div class="flex flex-col items-center opacity-60">
|
||||
<iconify-icon class="text-3xl" icon="mdi:image-outline"></iconify-icon>
|
||||
<span class="text-[10px] mt-1">相册</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<iconify-icon class="text-3xl" icon="mdi:keyboard-outline"></iconify-icon>
|
||||
<span class="text-[10px] mt-1">手动输入</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toast -->
|
||||
<div class="absolute bottom-20 left-1/2 -translate-x-1/2 bg-black bg-opacity-80 text-white text-xs px-4 py-2 rounded-full hidden z-[60] whitespace-nowrap" id="toast">提示内容</div>
|
||||
</div>
|
||||
|
||||
<!-- 进港货物页面（右滑弹出） -->
|
||||
<div class="page z-20 page-hidden-right !bg-[#f0f2f5]" id="detailPage">
|
||||
<!-- 头部 -->
|
||||
<header class="bg-header-blue pt-2 pb-4 px-4 flex items-center relative flex-none">
|
||||
<button class="flex items-center text-white text-sm absolute left-4 active:opacity-70" onclick="goBack()">
|
||||
<iconify-icon class="text-xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="mx-auto text-white font-bold text-lg">进港货物</h1>
|
||||
<div class="absolute right-4 flex items-center">
|
||||
<iconify-icon class="text-red-500 text-2xl" icon="mdi:file-document-edit-outline"></iconify-icon>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 标签页 -->
|
||||
<div class="bg-white px-4 border-b border-gray-200 flex-none">
|
||||
<div class="flex justify-around">
|
||||
<div class="tab-item active cursor-pointer" onclick="switchTab(0)">运单信息</div>
|
||||
<div class="tab-item cursor-pointer" onclick="switchTab(1)">仓库信息</div>
|
||||
<div class="tab-item cursor-pointer" onclick="switchTab(2)">库位信息</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详情内容区 -->
|
||||
<div class="flex-1 overflow-y-auto hide-scrollbar">
|
||||
<!-- 运单信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3" id="tab-content-0">
|
||||
<!-- 卡片1：基本信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800" id="det-uldTitle">基本信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-2 gap-2">
|
||||
<!-- Row 1 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单号</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-billNo"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">代理人</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-agent"></span>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">特码</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-code"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">承运人</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-carrier"></span>
|
||||
</div>
|
||||
<!-- Row 3 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">始发站</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-route"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">中转站</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-outboundTime"></span>
|
||||
</div>
|
||||
<!-- Row 4 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">目的站</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-dest"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">UN编号</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-unNo"></span>
|
||||
</div>
|
||||
<!-- Row 5 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center" id="det-lockStatus-container">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5" id="det-lockStatus-label">锁定状态</span>
|
||||
<div id="det-lockStatus-wrapper">
|
||||
<span class="text-xs font-semibold" id="det-lockStatus"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">包装类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-packType"></span>
|
||||
</div>
|
||||
<!-- Row 6 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">业务类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-type"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库时间</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-ciTime"></span>
|
||||
</div>
|
||||
<!-- Row 7 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-billType"></span>
|
||||
</div>
|
||||
<!-- Row 8 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">品名(中)</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-itemNameCn"></span>
|
||||
</div>
|
||||
<!-- Row 9 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">品名(英)</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-itemNameEn"></span>
|
||||
</div>
|
||||
<!-- Row 10 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">备注</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-remark"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片2：件重信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800">件重信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-3 gap-2">
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单件数</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-pieces"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-weight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">计费重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-calcWeight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库件数</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-inPieces"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-inWeight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center opacity-0">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">—</div>
|
||||
<div class="text-xs text-gray-800 font-semibold">—</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片3：回执信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800">回执信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-3 gap-2">
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">原始舱单</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-originalManifest"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">理货报告</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-tallyReport"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center" id="det-customsRelease-container">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">海关放行</div>
|
||||
<div id="det-customsRelease-wrapper">
|
||||
<div class="text-xs font-semibold" id="det-customsRelease"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 仓库信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3 hidden" id="tab-content-1"></div>
|
||||
<!-- 库位信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3 hidden" id="tab-content-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 运单详情数据源（用于进港货物渲染）
|
||||
const uldData = {
|
||||
'78133363396': {
|
||||
billNo: '78133363396', agent: '中外运', code: 'DGR',
|
||||
pieces: '444', weight: '555.0', type: '普通货物运输',
|
||||
inPieces: '444', inWeight: '555.0', calcWeight: '555.0',
|
||||
carrier: 'CA', route: 'LAX', packType: '纸箱',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'HFE',
|
||||
itemNameCn: '电子元器件', itemNameEn: 'Electronic Components',
|
||||
lockStatus: '未锁定', outboundTime: '—', remark: '需冷藏存储',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',ciTime: '2026-07-08 14:30:00',
|
||||
warehouse: [
|
||||
{ batch: '1', pieces: 200, weight: 300.0, flightDate: '2026-07-08', flightNo: 'CA1234',route: 'LAX',dest: 'HFE', time: '2026-07-08 14:30:00' },
|
||||
{ batch: '2', pieces: 244, weight: 255.0, flightDate: '2026-07-09', flightNo: 'CA5678',route: 'LAX',dest: 'HFE', time: '2026-07-09 09:10:46' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'A-01-001', inPerson: '张三', inTime: '2026-07-08 14:30', outPerson: '李四', outTime: '2026-07-09 10:00' },
|
||||
{ id: 'B-02-005', inPerson: '王五', inTime: '2026-07-09 09:10', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363397': {
|
||||
billNo: '78133363397', agent: '徽远', code: 'PER',
|
||||
pieces: '120', weight: '320.0', type: '普通货物运输',
|
||||
inPieces: '120', inWeight: '320.0', calcWeight: '320.0',
|
||||
carrier: 'MU', route: 'PVG-NRT', packType: '托盘',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'PVG',
|
||||
itemNameCn: '服装', itemNameEn: 'Garments',
|
||||
lockStatus: '未锁定', outboundTime: '—', remark: '易碎品，轻拿轻放',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',ciTime: '2026-07-08 14:30:00',
|
||||
warehouse: [
|
||||
{ batch: '3', pieces: 60, weight: 150.0, flightDate: '2026-07-07', flightNo: 'MU123', time: '2026-07-07 16:20:00' },
|
||||
{ batch: '4', pieces: 60, weight: 170.0, flightDate: '2026-07-08', flightNo: 'MU456', time: '2026-07-08 11:00:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'A-03-012', inPerson: '赵六', inTime: '2026-07-07 16:20', outPerson: '钱七', outTime: '2026-07-08 14:00' },
|
||||
{ id: 'C-01-008', inPerson: '孙八', inTime: '2026-07-08 11:00', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363398': {
|
||||
billNo: '78133363398', agent: '中外运', code: 'NOR',
|
||||
pieces: '268', weight: '780.0', type: '普通货物运输',
|
||||
inPieces: '268', inWeight: '780.0', calcWeight: '780.0',
|
||||
carrier: 'CZ', route: 'CAN-AMS', packType: '托盘',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'CAN',
|
||||
itemNameCn: '机械设备', itemNameEn: 'Machinery Equipment',
|
||||
lockStatus: '锁定', outboundTime: '2026-07-09 08:00', remark: '需叉车装卸',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',ciTime: '2026-07-08 14:30:00',
|
||||
warehouse: [
|
||||
{ batch: '5', pieces: 150, weight: 420.0, flightDate: '2026-07-08', flightNo: 'CZ789', time: '2026-07-08 22:15:00' },
|
||||
{ batch: '6', pieces: 118, weight: 360.0, flightDate: '2026-07-09', flightNo: 'CZ012', time: '2026-07-09 06:30:00' },
|
||||
{ batch: '7', pieces: 100, weight: 200.0, flightDate: '2026-07-09', flightNo: 'CZ345', time: '2026-07-09 13:00:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'B-01-003', inPerson: '张三', inTime: '2026-07-08 22:15', outPerson: '李四', outTime: '2026-07-09 06:00' },
|
||||
{ id: 'A-02-010', inPerson: '王五', inTime: '2026-07-09 06:30', outPerson: '—', outTime: '—' },
|
||||
{ id: 'C-03-007', inPerson: '赵六', inTime: '2026-07-09 13:00', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363399': {
|
||||
billNo: '78133363399', agent: '徽远', code: 'DGR',
|
||||
pieces: '85', weight: '210.0', type: '危险品运输',
|
||||
inPieces: '85', inWeight: '210.0', calcWeight: '210.0',
|
||||
carrier: '3U', route: 'CTU-SIN', packType: '铁箱',
|
||||
billType: '国际进港（国际直航）', unNo: 'UN3480', dest: 'CTU',
|
||||
itemNameCn: '锂电池', itemNameEn: 'Lithium Battery',
|
||||
lockStatus: '锁定', outboundTime: '—', remark: '危险品，单独存放',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',ciTime: '2026-07-08 14:30:00',
|
||||
warehouse: [
|
||||
{ batch: '8', pieces: 45, weight: 110.0, flightDate: '2026-07-08', flightNo: '3U678', time: '2026-07-08 18:00:00' },
|
||||
{ batch: '9', pieces: 40, weight: 100.0, flightDate: '2026-07-09', flightNo: '3U901', time: '2026-07-09 07:45:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'D-01-002', inPerson: '钱七', inTime: '2026-07-08 18:00', outPerson: '孙八', outTime: '2026-07-09 08:00' },
|
||||
{ id: 'A-04-015', inPerson: '张三', inTime: '2026-07-09 07:45', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363400': {
|
||||
billNo: '78133363400', agent: '中外运', code: 'PER',
|
||||
pieces: '350', weight: '430.0', type: '普通货物运输',
|
||||
inPieces: '350', inWeight: '430.0', calcWeight: '430.0',
|
||||
carrier: 'HU', route: 'HKG-HFE', packType: '纸箱',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'HFE',
|
||||
itemNameCn: '食品', itemNameEn: 'Food Products',
|
||||
lockStatus: '未锁定', outboundTime: '2026-07-09 11:30', remark: '保质期至2026-12',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',ciTime: '2026-07-08 14:30:00',
|
||||
warehouse: [
|
||||
{ batch: '10', pieces: 180, weight: 220.0, flightDate: '2026-07-07', flightNo: 'HU234', time: '2026-07-07 20:00:00' },
|
||||
{ batch: '11', pieces: 170, weight: 210.0, flightDate: '2026-07-09', flightNo: 'HU567', time: '2026-07-09 10:30:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'B-02-011', inPerson: '李四', inTime: '2026-07-07 20:00', outPerson: '王五', outTime: '2026-07-08 16:00' },
|
||||
{ id: 'C-01-009', inPerson: '赵六', inTime: '2026-07-09 10:30', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// 进港仓库卡片列表数据源
|
||||
const data = [
|
||||
{ id: "78133363396", status: "已清仓", flight: "20260702/MU1111", route: "LAX-HFE", pcs: 111, weight: 2300 },
|
||||
{ id: "78133363397", status: "未清仓", flight: "20260702/MU2222", route: "NRT-HFE", pcs: 85, weight: 1560 },
|
||||
{ id: "78133363398", status: "已清仓", flight: "20260702/MU3333", route: "FRA-HFE", pcs: 200, weight: 4200 },
|
||||
{ id: "78133363399", status: "未清仓", flight: "20260702/MU4444", route: "LAX-PVG", pcs: 50, weight: 980 },
|
||||
{ id: "78133363400", status: "未清仓", flight: "20260702/MU5555", route: "CDG-HFE", pcs: 168, weight: 3150 },
|
||||
{ id: "78133363401", status: "已清仓", flight: "20260702/MU6666", route: "SIN-HFE", pcs: 92, weight: 1800 },
|
||||
{ id: "78133363402", status: "未清仓", flight: "20260702/MU7777", route: "LAX-NKG", pcs: 145, weight: 2800 },
|
||||
{ id: "78133363403", status: "已清仓", flight: "20260702/MU8888", route: "HND-HFE", pcs: 73, weight: 1420 }
|
||||
];
|
||||
|
||||
// 渲染仓库卡片列表
|
||||
function renderList() {
|
||||
const container = document.getElementById('cardListContainer');
|
||||
container.innerHTML = data.map((item) => {
|
||||
const isCleared = item.status === '已清仓';
|
||||
const departure = item.route.split('-')[0];
|
||||
const flightNo = item.flight.split('/')[1];
|
||||
return `
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer mb-3" onclick="showDetail('${item.id}')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">${item.id}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
${getStatusTag(item.status)}
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：${item.pcs}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：${item.weight}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span>航班号：${flightNo}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span>始发站：${departure}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 gap-2 mt-3">
|
||||
<button onclick="event.stopPropagation(); showToast('执行清仓操作：运单号 ${item.id}')"
|
||||
class="text-xs py-1.5 px-2 rounded-[6px] font-medium h-8 ${isCleared ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-[#EFF6FF] text-[#2563EB]'}" ${isCleared ? 'disabled' : ''}>
|
||||
清仓
|
||||
</button>
|
||||
<button onclick="event.stopPropagation(); showToast('修改库位：运单号 ${item.id}')"
|
||||
class="bg-[#EFF6FF] text-[#2563EB] text-xs py-1.5 px-2 rounded-[6px] font-medium h-8">
|
||||
修改库位
|
||||
</button>
|
||||
<button onclick="event.stopPropagation(); showToast('执行出库：运单号 ${item.id}')"
|
||||
class="bg-[#EFF6FF] text-[#2563EB] text-xs py-1.5 px-2 rounded-[6px] font-medium h-8">
|
||||
出库
|
||||
</button>
|
||||
<button onclick="event.stopPropagation(); showToast('执行入库：运单号 ${item.id}')"
|
||||
class="bg-[#EFF6FF] text-[#2563EB] text-xs py-1.5 px-2 rounded-[6px] font-medium h-8">
|
||||
入库
|
||||
</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 状态标签渲染
|
||||
function getStatusTag(status) {
|
||||
let color = '';
|
||||
switch(status) {
|
||||
case '已清仓': color = 'bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium'; break;
|
||||
case '未清仓': color = 'bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium'; break;
|
||||
}
|
||||
return `<span class="${color}">${status}</span>`;
|
||||
}
|
||||
|
||||
// 跳转至进港货物页面，填充数据
|
||||
function showDetail(id) {
|
||||
const listPage = document.getElementById('listPage');
|
||||
const detailPage = document.getElementById('detailPage');
|
||||
|
||||
const data = uldData[id];
|
||||
if (!data) {
|
||||
showToast("暂无该运单详情数据");
|
||||
return;
|
||||
}
|
||||
// 填充基础信息
|
||||
document.getElementById('det-billNo').innerText = data.billNo;
|
||||
document.getElementById('det-agent').innerText = data.agent;
|
||||
document.getElementById('det-code').innerText = data.code;
|
||||
document.getElementById('det-carrier').innerText = data.carrier;
|
||||
document.getElementById('det-route').innerText = data.route;
|
||||
document.getElementById('det-dest').innerText = data.dest;
|
||||
document.getElementById('det-billType').innerText = data.billType;
|
||||
document.getElementById('det-unNo').innerText = data.unNo;
|
||||
document.getElementById('det-ciTime').innerText = data.ciTime;
|
||||
// 锁定状态样式
|
||||
const lockStatusEl = document.getElementById('det-lockStatus');
|
||||
if (data.lockStatus === '锁定') {
|
||||
lockStatusEl.innerHTML = '<iconify-icon icon="mdi:lock" class="mr-1"></iconify-icon>锁定';
|
||||
lockStatusEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-red-50 text-red-600 inline-flex items-center';
|
||||
} else {
|
||||
lockStatusEl.innerText = '—';
|
||||
lockStatusEl.className = 'text-xs font-semibold text-gray-800';
|
||||
}
|
||||
|
||||
document.getElementById('det-packType').innerText = data.packType;
|
||||
document.getElementById('det-type').innerText = data.type;
|
||||
document.getElementById('det-outboundTime').innerText = data.outboundTime || '—';
|
||||
document.getElementById('det-itemNameCn').innerText = data.itemNameCn || '—';
|
||||
document.getElementById('det-itemNameEn').innerText = data.itemNameEn || '—';
|
||||
document.getElementById('det-remark').innerText = data.remark || '—';
|
||||
|
||||
// 件重信息
|
||||
document.getElementById('det-pieces').innerText = data.pieces;
|
||||
document.getElementById('det-weight').innerText = data.weight;
|
||||
document.getElementById('det-calcWeight').innerText = data.calcWeight;
|
||||
document.getElementById('det-inPieces').innerText = data.inPieces;
|
||||
document.getElementById('det-inWeight').innerText = data.inWeight;
|
||||
|
||||
// 海关放行标签
|
||||
const customsReleaseEl = document.getElementById('det-customsRelease');
|
||||
if (data.customsRelease === '11') {
|
||||
customsReleaseEl.innerText = '11';
|
||||
customsReleaseEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-green-50 text-green-600 inline-block';
|
||||
} else {
|
||||
customsReleaseEl.innerText = data.customsRelease;
|
||||
customsReleaseEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-gray-100 text-gray-600 inline-block';
|
||||
}
|
||||
document.getElementById('det-originalManifest').innerText = data.originalManifest;
|
||||
document.getElementById('det-tallyReport').innerText = data.tallyReport;
|
||||
|
||||
// 渲染仓库批次
|
||||
const warehouseContainer = document.getElementById('tab-content-1');
|
||||
warehouseContainer.innerHTML = '';
|
||||
data.warehouse.forEach(item => {
|
||||
warehouseContainer.innerHTML += `
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="flex justify-between items-center pt-3 pb-1.5 px-3 mb-2 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 inline-block"></span>
|
||||
<span class="text-xs font-semibold text-gray-900">批次号: ${item.batch}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-1.5 px-3 pb-2">
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">件数</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.pieces}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">重量</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${parseFloat(item.weight).toFixed(1)} kg</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">航班日期</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.flightDate}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">航班号</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.flightNo}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">始发站</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.route}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">目的站</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.dest}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// 渲染库位信息
|
||||
const locationContainer = document.getElementById('tab-content-2');
|
||||
locationContainer.innerHTML = '';
|
||||
data.locations.forEach(loc => {
|
||||
locationContainer.innerHTML += `
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="flex justify-between items-center pt-3 pb-1.5 px-3 mb-2 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 inline-block"></span>
|
||||
<span class="text-xs font-bold text-gray-900">${loc.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-1.5 px-3 pb-2">
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库人</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${loc.inPerson}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库时间</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${loc.inTime}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库人</div>
|
||||
<div class="text-xs ${loc.outPerson === '—' ? 'text-gray-500' : 'text-gray-800'} font-semibold">${loc.outPerson}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库时间</div>
|
||||
<div class="text-xs ${loc.outTime === '—' ? 'text-gray-500' : 'text-gray-800'} font-semibold">${loc.outTime}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// 默认激活运单信息标签
|
||||
switchTab(0);
|
||||
// 页面切换动画：列表左滑隐藏，详情滑入
|
||||
listPage.classList.add('page-hidden-left');
|
||||
detailPage.classList.remove('page-hidden-right');
|
||||
}
|
||||
|
||||
// 返回列表页
|
||||
function goBack() {
|
||||
const listPage = document.getElementById('listPage');
|
||||
const detailPage = document.getElementById('detailPage');
|
||||
listPage.classList.remove('page-hidden-left');
|
||||
detailPage.classList.add('page-hidden-right');
|
||||
}
|
||||
|
||||
// 切换详情标签页
|
||||
function switchTab(index) {
|
||||
const tabs = document.querySelectorAll('.tab-item');
|
||||
const contents = document.querySelectorAll('.tab-pane');
|
||||
tabs.forEach((tab, i) => {
|
||||
if (i === index) {
|
||||
tab.classList.add('active');
|
||||
contents[i].classList.remove('hidden');
|
||||
} else {
|
||||
tab.classList.remove('active');
|
||||
contents[i].classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Toast提示
|
||||
function showToast(msg) {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.innerText = msg;
|
||||
toast.classList.remove('hidden');
|
||||
setTimeout(() => toast.classList.add('hidden'), 2000);
|
||||
}
|
||||
|
||||
// 筛选弹窗方法
|
||||
function openFilter() {
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
const filterSheet = document.getElementById('filterSheet');
|
||||
filterOverlay.classList.add('show');
|
||||
setTimeout(() => filterSheet.classList.add('show'), 10);
|
||||
}
|
||||
function closeFilter() {
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
const filterSheet = document.getElementById('filterSheet');
|
||||
filterSheet.classList.remove('show');
|
||||
setTimeout(() => filterOverlay.classList.remove('show'), 250);
|
||||
}
|
||||
function resetFilter() {
|
||||
document.querySelectorAll('.filter-input').forEach(input => {
|
||||
input.value = '';
|
||||
});
|
||||
}
|
||||
function confirmFilter() {
|
||||
const params = {
|
||||
flightDate: document.getElementById('filterFlightDate')?.value || '',
|
||||
flightNo: document.getElementById('filterFlightNo')?.value || '',
|
||||
agent: '',
|
||||
code: '',
|
||||
origin: document.getElementById('filterOrigin')?.value || '',
|
||||
billType: '',
|
||||
bizType: '',
|
||||
cnName: document.getElementById('filterCnName')?.value || ''
|
||||
};
|
||||
console.log('筛选参数：', params);
|
||||
alert('筛选执行成功，控制台可查看筛选条件');
|
||||
closeFilter();
|
||||
}
|
||||
|
||||
// 扫码弹窗
|
||||
function toggleScanOverlay(show) {
|
||||
const overlay = document.getElementById('scanOverlay');
|
||||
if (show) overlay.classList.remove('hidden');
|
||||
else overlay.classList.add('hidden');
|
||||
}
|
||||
|
||||
// 页面加载完成初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderList();
|
||||
// 筛选遮罩点击关闭
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
filterOverlay.addEventListener('click', function(e) {
|
||||
if (e.target === filterOverlay) closeFilter();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
773
documents/5.5寸手持端设计文件/09_提取出库/提取出库.html
Normal file
773
documents/5.5寸手持端设计文件/09_提取出库/提取出库.html
Normal file
@@ -0,0 +1,773 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
|
||||
<title>提取出库 - 移动端原型</title>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||||
<!-- Iconify -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'PingFang SC';
|
||||
src: local('PingFang SC');
|
||||
}
|
||||
body {
|
||||
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
/* 模拟手机容器 */
|
||||
.phone-container {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #f5f6fa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border: 8px solid #1a1a1a;
|
||||
border-radius: 40px;
|
||||
}
|
||||
/* 隐藏滚动条但保留功能 */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
/* 页面切换动画 */
|
||||
.page {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.page.active {
|
||||
display: flex;
|
||||
}
|
||||
/* 筛选面板动画 */
|
||||
#filter-panel {
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
#filter-panel.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.overlay {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.overlay.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
/* 按钮点击态 */
|
||||
.btn-active:active {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
/* 复选框样式 */
|
||||
.custom-checkbox {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.custom-checkbox:checked {
|
||||
background-color: #2563EB;
|
||||
border-color: #2563EB;
|
||||
}
|
||||
.custom-checkbox:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.custom-checkbox-round {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 50%;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.custom-checkbox-round:checked {
|
||||
background-color: #2563EB;
|
||||
border-color: #2563EB;
|
||||
}
|
||||
.custom-checkbox-round:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
/* 卡片选中样式已移除 */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-container">
|
||||
<!-- 状态栏模拟 -->
|
||||
<div class="h-10 w-full flex justify-between items-center px-8 flex-none bg-[#2563EB] text-white">
|
||||
<span class="text-xs font-semibold">09:41</span>
|
||||
<div class="flex space-x-1 items-center">
|
||||
<iconify-icon icon="mdi:signal" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:wifi" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:battery" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页面1: 货运列表首页 -->
|
||||
<div class="page active" id="page-home">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center btn-active" onclick="alert('返回首页')">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">提取出库</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
<!-- 内容滚动区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-24">
|
||||
<!-- 搜索栏 -->
|
||||
<section class="px-4 pt-4 pb-3 bg-white">
|
||||
<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-blue-500">
|
||||
<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" onclick="toggleFilterDrawer(true)">
|
||||
<iconify-icon class="text-xl" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 子Tab切换栏 -->
|
||||
<div class="flex bg-white border-b sticky top-0 z-20">
|
||||
<button class="flex-1 py-3 text-sm font-bold text-[#1F2937] border-b-2 border-[#1F2937] transition-all" id="tab-pending" onclick="switchTab('pending')">
|
||||
待出库 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5">3</span>
|
||||
</button>
|
||||
<button class="flex-1 py-3 text-sm font-bold text-gray-400 border-b-2 border-transparent transition-all" id="tab-shipped" onclick="switchTab('shipped')">
|
||||
已出库 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5">3</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 列表内容 -->
|
||||
<div class="p-3 pt-4 space-y-3" id="list-pending">
|
||||
<!-- 卡片 1 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363573</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待出库</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 提货车辆行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">提货车辆：皖A88909</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">代理人</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">ATR</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">100件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">200kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 库位信息行 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">库位：A区-03货位</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="showDetail({id: '78133363573', status: '待出库', agent: 'ATR', flightDate: '20260706', flightNo: 'MU1111', pieces: '100', weight: '200', goodsName: '电子元器件', carrier: 'MU', origin: 'LAX', location: 'A区-03货位', code: 'NOR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片 2 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363574</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待出库</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 提货车辆行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">提货车辆：皖A78223</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">代理人</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">CTA</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">85件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">150kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 库位信息行 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">库位：B区-05货位</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="showDetail({id: '78133363574', status: '待出库', agent: 'CTA', flightDate: '20260706', flightNo: 'CA2222', pieces: '85', weight: '150', goodsName: '服装鞋帽', carrier: 'CA', origin: 'PEK', location: 'B区-05货位', code: 'ATR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片 3 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363575</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待出库</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 提货车辆行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">提货车辆：皖A67651</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">代理人</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">DHL</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">200件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">450kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 库位信息行 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">库位：C区-01货位</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="showDetail({id: '78133363575', status: '待出库', agent: 'DHL', flightDate: '20260707', flightNo: '3U3333', pieces: '200', weight: '450', goodsName: '精密模具', carrier: '3U', origin: 'CTU', location: 'C区-01货位', code: 'ATR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 已出库列表内容 -->
|
||||
<div class="p-3 pt-4 space-y-3 hidden" id="list-shipped">
|
||||
<!-- 卡片 1 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363001</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已出库</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作信息行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">提货车辆：皖A23422</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">代理人</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">ATR</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">50件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">80kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作人信息 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出库人：张三 · 出库时间：2026-07-05 11:45</span>
|
||||
</div>
|
||||
<!-- 查看详情链接 -->
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer" onclick="showDetail({id: '78133363001', status: '已出库', agent: 'ATR', flightDate: '20260704', flightNo: 'MU1111', pieces: '50', weight: '80', pickupNo: 'TH20260701001', goodsName: '精密仪器', carrier: 'MU', origin: 'LAX', location: 'B区-05货位', code: 'ATR', counterTime: '2026-07-05 10:30', counterPerson: '张三', outboundTime: '2026-07-05 11:45', outboundPerson: '张三'})">
|
||||
查看详情 <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">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363002</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已出库</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作信息行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">提货车辆：皖A79909</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">代理人</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">CTA</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">120件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">300kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作人信息 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出库人：赵六 · 出库时间：2026-07-06 10:30</span>
|
||||
</div>
|
||||
<!-- 查看详情链接 -->
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer" onclick="showDetail({id: '78133363002', status: '已出库', agent: 'CTA', flightDate: '20260705', flightNo: 'CA2222', pieces: '120', weight: '300', pickupNo: 'TH20260702002', goodsName: '鲜花绿植', carrier: 'CA', origin: 'SFO', location: 'A区-08货位', code: 'ATR', counterTime: '2026-07-06 09:15', counterPerson: '王五', outboundTime: '2026-07-06 10:30', outboundPerson: '赵六'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片 3 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3">
|
||||
<!-- 顶部行 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363003</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已出库</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作信息行 -->
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:airplane"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">提货车辆：皖A66712</span>
|
||||
</div>
|
||||
<!-- 统计框 -->
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">代理人</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">DHL</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">75件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">160kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作人信息 -->
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出库人：孙八 · 出库时间：2026-07-06 15:20</span>
|
||||
</div>
|
||||
<!-- 查看详情链接 -->
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer" onclick="showDetail({id: '78133363003', status: '已出库', agent: 'DHL', flightDate: '20260705', flightNo: '3U3333', pieces: '75', weight: '160', pickupNo: 'TH20260703003', goodsName: '生鲜食品', carrier: '3U', origin: 'CDG', location: 'D区-02货位', code: 'NOR', counterTime: '2026-07-06 14:00', counterPerson: '钱七', outboundTime: '2026-07-06 15:20', outboundPerson: '孙八'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部工具栏 -->
|
||||
<div class="absolute bottom-0 w-full bg-white border-t border-gray-200 z-40 flex flex-col pt-4 pb-4" id="bottom-toolbar">
|
||||
<!-- 操作区域 -->
|
||||
<div class="px-4 flex items-center w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="custom-checkbox-round" id="select-all-cb" onclick="toggleSelectAll(this.checked)" type="checkbox"/>
|
||||
<label class="text-[13px] text-[#1F2937] font-medium cursor-pointer" for="select-all-cb">全选</label>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[12px] text-[#9CA3AF]">已选 <span id="selected-count">0</span> 项</span>
|
||||
<button class="bg-[#2563EB] text-white text-[15px] font-bold px-5 py-2 rounded-[10px] shadow-lg shadow-blue-500/25 btn-active" onclick="alert('出库操作')">
|
||||
出库
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页面2: 详情页 -->
|
||||
<div class="page" id="page-detail">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center btn-active" onclick="switchPage('home')">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">运单详情</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-8 p-4">
|
||||
<!-- 货运单据样式卡片 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100">
|
||||
<!-- 1. 顶部蓝色条带 -->
|
||||
<div class="bg-[#2563EB] px-4 py-3 flex justify-between items-center text-white">
|
||||
<span class="font-bold text-[17px] leading-tight" id="detail-awb">781-22222620</span>
|
||||
<div class="flex items-center text-[13px] font-normal opacity-90">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full mr-1.5"></span>
|
||||
<span id="detail-time">2026-05-10 08:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<!-- 2. 标签区 -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-[#EF4444] text-white text-[11px] px-1.5 py-0.5 rounded leading-tight font-medium">国际进港</span>
|
||||
<span class="text-[13px] font-normal text-[#666666] border-l border-gray-300 pl-2">普通货物运输</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 3. 货物名称 -->
|
||||
<div class="text-[22px] font-bold text-[#111827] mb-3" id="detail-goods-name">电子元器件</div>
|
||||
<!-- 4. 两列信息表格 -->
|
||||
<div class="grid grid-cols-2 gap-x-8 gap-y-3">
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">件数</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-count">55</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">重量</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-weight">622.00 kg</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">特码</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-code">NOR</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">代理</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-agent">ATR</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">始发港</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-origin">LAX</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">目的港</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-carrier">MU</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">航班日期</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-flight-date">20260706</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">航班号</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-flight-no">MU1111</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">库位</div>
|
||||
<div class="flex">
|
||||
<span class="bg-orange-50 text-orange-600 px-1 rounded text-[15px] font-bold" id="detail-location">1111111</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">提货单号</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-delivery-no">TH20260706001</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 提货信息卡片 -->
|
||||
<div class="mt-4 bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 hidden" id="detail-outbound-card">
|
||||
<div class="bg-[#10B981] px-4 py-2.5">
|
||||
<span class="text-white font-semibold text-[15px]">提货信息</span>
|
||||
</div>
|
||||
<div class="bg-white px-4 py-3 grid grid-cols-2 gap-y-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">柜台办理人</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-counter-person">-</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">柜台办理时间</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-counter-time">-</span>
|
||||
</div>
|
||||
<div class="flex flex-col" id="detail-outbound-person-row">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">出库人</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-outbound-person">-</span>
|
||||
</div>
|
||||
<div class="flex flex-col" id="detail-outbound-time-row">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">出库时间</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-outbound-time">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部筛选面板蒙层 -->
|
||||
<div class="overlay absolute inset-0 z-40" id="filter-overlay" onclick="toggleFilterDrawer(false)"></div>
|
||||
<!-- 筛选面板 -->
|
||||
<div class="absolute bottom-0 w-full bg-white rounded-t-3xl z-50 p-6 shadow-2xl overflow-hidden" id="filter-panel">
|
||||
<!-- 标题 + 关闭按钮 -->
|
||||
<div class="relative flex items-center justify-center mb-6">
|
||||
<h2 class="text-[18px] font-bold text-gray-900">筛选条件</h2>
|
||||
<button class="absolute right-0 top-0 text-gray-400" onclick="toggleFilterDrawer(false)">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- 航班日期 -->
|
||||
<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-sm">请选择航班日期</span>
|
||||
<iconify-icon class="text-gray-400" icon="mdi:calendar-month-outline"></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">
|
||||
<input class="bg-transparent outline-none text-sm w-full text-gray-800" placeholder="请输入航班号" type="text"/>
|
||||
</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-sm">请选择代理人</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-sm">请选择特码</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="alert('已重置')">
|
||||
重置
|
||||
</button>
|
||||
<button class="flex-1 bg-[#2563EB] text-white py-3.5 rounded-xl font-bold shadow-lg shadow-blue-500/20 btn-active" onclick="toggleFilterDrawer(false)">
|
||||
确认
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// 页面切换逻辑
|
||||
function switchPage(pageId) {
|
||||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||||
document.getElementById('page-' + pageId).classList.add('active');
|
||||
|
||||
// 如果进入详情页，可以重置滚动
|
||||
if(pageId === 'detail') {
|
||||
document.querySelector('#page-detail .overflow-y-auto').scrollTop = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 子Tab切换逻辑
|
||||
function switchTab(type) {
|
||||
const tabPending = document.getElementById('tab-pending');
|
||||
const tabShipped = document.getElementById('tab-shipped');
|
||||
const listPending = document.getElementById('list-pending');
|
||||
const listShipped = document.getElementById('list-shipped');
|
||||
const bottomToolbar = document.getElementById('bottom-toolbar');
|
||||
|
||||
if (type === 'pending') {
|
||||
tabPending.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabPending.classList.remove('text-gray-400', 'border-transparent');
|
||||
tabShipped.classList.add('text-gray-400', 'border-transparent');
|
||||
tabShipped.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
|
||||
listPending.classList.remove('hidden');
|
||||
listShipped.classList.add('hidden');
|
||||
bottomToolbar.style.display = 'flex';
|
||||
} else {
|
||||
tabShipped.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabShipped.classList.remove('text-gray-400', 'border-transparent');
|
||||
tabPending.classList.add('text-gray-400', 'border-transparent');
|
||||
tabPending.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
|
||||
listShipped.classList.remove('hidden');
|
||||
listPending.classList.add('hidden');
|
||||
bottomToolbar.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 全选/取消全选
|
||||
function toggleSelectAll(checked) {
|
||||
const checkboxes = document.querySelectorAll('.item-checkbox');
|
||||
checkboxes.forEach(cb => {
|
||||
cb.checked = checked;
|
||||
updateCardStyle(cb);
|
||||
});
|
||||
updateSelectionCount();
|
||||
}
|
||||
|
||||
// 处理卡片复选框点击
|
||||
function handleCheckboxClick(checkbox, event) {
|
||||
event.stopPropagation(); // 阻止触发卡片详情点击
|
||||
updateCardStyle(checkbox);
|
||||
updateSelectionCount();
|
||||
|
||||
// 更新全选状态
|
||||
const checkboxes = document.querySelectorAll('.item-checkbox');
|
||||
const selectAllCb = document.getElementById('select-all-cb');
|
||||
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
|
||||
selectAllCb.checked = allChecked;
|
||||
}
|
||||
|
||||
// 更新卡片选中样式 (已根据需求移除背景和边框变化，仅保留复选框状态)
|
||||
function updateCardStyle(checkbox) {
|
||||
// 卡片不再随选中状态改变背景和边框颜色
|
||||
}
|
||||
|
||||
// 更新选中计数
|
||||
function updateSelectionCount() {
|
||||
const checkedCount = document.querySelectorAll('.item-checkbox:checked').length;
|
||||
document.getElementById('selected-count').textContent = checkedCount;
|
||||
}
|
||||
|
||||
// 显示详情页并填充数据
|
||||
function showDetail(data) {
|
||||
if (!data) return;
|
||||
|
||||
const setText = (id, text) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = text || '-';
|
||||
};
|
||||
|
||||
setText('detail-awb', data.id);
|
||||
setText('detail-time', new Date().toISOString().replace('T', ' ').substring(0, 16));
|
||||
setText('detail-goods-name', data.goodsName);
|
||||
setText('detail-count', data.pieces);
|
||||
setText('detail-weight', data.weight + (data.weight && data.weight.toString().includes('kg') ? '' : ' kg'));
|
||||
setText('detail-code', data.code);
|
||||
setText('detail-agent', data.agent);
|
||||
setText('detail-carrier', data.carrier);
|
||||
setText('detail-origin', data.origin);
|
||||
setText('detail-flight-date', data.flightDate);
|
||||
setText('detail-flight-no', data.flightNo);
|
||||
setText('detail-location', data.location);
|
||||
setText('detail-delivery-no', data.pickupNo);
|
||||
|
||||
const outboundCard = document.getElementById('detail-outbound-card');
|
||||
if (outboundCard) {
|
||||
// 始终显示提货信息卡片
|
||||
outboundCard.classList.remove('hidden');
|
||||
|
||||
setText('detail-counter-person', data.counterPerson);
|
||||
setText('detail-counter-time', data.counterTime);
|
||||
setText('detail-outbound-person', data.outboundPerson);
|
||||
setText('detail-outbound-time', data.outboundTime);
|
||||
|
||||
const outboundPersonRow = document.getElementById('detail-outbound-person-row');
|
||||
const outboundTimeRow = document.getElementById('detail-outbound-time-row');
|
||||
|
||||
if (data.status === '已出库') {
|
||||
// 已出库显示全部
|
||||
if (outboundPersonRow) outboundPersonRow.classList.remove('hidden');
|
||||
if (outboundTimeRow) outboundTimeRow.classList.remove('hidden');
|
||||
} else {
|
||||
// 待出库隐藏出库人信息
|
||||
if (outboundPersonRow) outboundPersonRow.classList.add('hidden');
|
||||
if (outboundTimeRow) outboundTimeRow.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
switchPage('detail');
|
||||
}
|
||||
|
||||
// 筛选面板显示隐藏
|
||||
function toggleFilterDrawer(show) {
|
||||
const panel = document.getElementById('filter-panel');
|
||||
const overlay = document.getElementById('filter-overlay');
|
||||
if (show) {
|
||||
panel.classList.add('show');
|
||||
overlay.classList.add('show');
|
||||
} else {
|
||||
panel.classList.remove('show');
|
||||
overlay.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化显示日期
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
console.log("System date initialized:", today);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
147
documents/5.5寸手持端设计文件/10_进港查询/运单追踪.html
Normal file
147
documents/5.5寸手持端设计文件/10_进港查询/运单追踪.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 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>
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: local('sans-serif');
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
/* 模拟手机容器阴影 */
|
||||
.phone-shell {
|
||||
box-shadow: 0 50px 100px -20px rgba(0,0,0,0.25), 0 30px 60px -30px rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-200 flex justify-center items-center min-h-screen p-4">
|
||||
<!-- 模拟手机屏幕容器 -->
|
||||
<div class="phone-shell w-[375px] h-[812px] bg-[#F5F5F7] overflow-hidden flex flex-col relative rounded-[48px] border-[10px] border-gray-900">
|
||||
<!-- 顶部蓝色区域 (包含状态栏和导航栏) -->
|
||||
<div class="bg-[#1A73E8] flex-none">
|
||||
<!-- 系统状态栏模拟 -->
|
||||
<div class="h-11 w-full flex justify-between items-center px-8 text-white">
|
||||
<span class="text-[15px] font-bold">09:41</span>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<iconify-icon class="text-sm" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-base" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-xl" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-[44px] px-4 flex items-center justify-between">
|
||||
<button class="flex items-center text-white space-x-0.5">
|
||||
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span class="text-base">返回</span>
|
||||
</button>
|
||||
<h1 class="text-lg font-bold text-white absolute left-1/2 -translate-x-1/2">运单追踪</h1>
|
||||
<div class="w-10"></div> <!-- 占位保持平衡 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar px-5 pt-6 pb-12">
|
||||
<!-- 流转状态卡片 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-5">
|
||||
<!-- 运单号 Header -->
|
||||
<div class="flex items-center justify-between pt-2 pb-5 mb-8 border-b border-gray-100">
|
||||
<div class="text-xl font-black text-gray-900 leading-none tracking-tight">
|
||||
78133358743
|
||||
</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="mb-6">
|
||||
<h2 class="text-base font-semibold text-gray-700 flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-700 inline-block" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
流转状态
|
||||
</h2>
|
||||
</div>
|
||||
<div class="relative pl-7 pb-2">
|
||||
<div class="absolute left-[9px] top-2 bottom-4 w-[2px] bg-gray-100"></div>
|
||||
|
||||
<!-- 状态 1: 当前 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[27px] top-1 w-[20px] h-[20px] rounded-full bg-green-600 border-4 border-green-100 flex items-center justify-center ring-1 ring-green-600/20">
|
||||
<div class="w-2 h-2 rounded-full bg-white"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-green-700">原始舱单</span>
|
||||
<span class="text-green-600 text-xs font-normal bg-green-50 px-2 py-0.5 rounded-full">放行状态：01</span>
|
||||
</div>
|
||||
<div class="text-gray-400 text-xs font-normal flex items-center gap-1.5">
|
||||
<span>2026-07-10 11:03:38</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 2 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">航班落地</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 2 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">分拣理货</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 3 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">理货申报</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 4 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">海关放行</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 5 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">柜台办结</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 6 -->
|
||||
<div class="relative mb-2">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">提取出库</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 模块 4: 操作详情卡片 -> 已删除 -->
|
||||
<!-- 底部占位 -->
|
||||
<div class="text-center py-6">
|
||||
<p class="text-[10px] text-gray-300 uppercase tracking-[0.2em] font-bold">查询信息已触底</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部 Home Indicator 模拟 -->
|
||||
<div class="h-8 w-full flex justify-center items-center flex-none bg-white/60 backdrop-blur-md">
|
||||
<div class="w-32 h-1.5 bg-black rounded-full opacity-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>ml>
|
||||
951
documents/5.5寸手持端设计文件/10_进港查询/进港查询.html
Normal file
951
documents/5.5寸手持端设计文件/10_进港查询/进港查询.html
Normal file
@@ -0,0 +1,951 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>进港查询</title>
|
||||
<!-- Tailwind CSS (本地) -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||||
<!-- Iconify 图标 -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'PingFang SC';
|
||||
src: local('PingFang SC');
|
||||
}
|
||||
body {
|
||||
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 隐藏滚动条但保留功能 */
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.tag-occupied { background-color: #dcfce7; color: #22c55e; } /* 已出库 - 绿色 */
|
||||
.tag-available { background-color: #dcfce7; color: #22c55e; } /* 已出库 - 绿色 */
|
||||
.tag-repair { background-color: #fce7e7; color: #ef4444; } /* 离港 - 红色 */
|
||||
|
||||
/* 页面切换动画 */
|
||||
.page {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
background-color: #f3f4f6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.page::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.page-hidden-right { transform: translateX(100%); }
|
||||
.page-hidden-left { transform: translateX(-100%); }
|
||||
|
||||
|
||||
/* 统一的深蓝色调 */
|
||||
.bg-header-blue { background-color: #2563EB; }
|
||||
|
||||
|
||||
/* 标签页样式 */
|
||||
.tab-item {
|
||||
position: relative;
|
||||
padding: 12px 0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.tab-item.active {
|
||||
color: #2563eb;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tab-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #2563eb;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.tab-item.active::after {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
/* ========== 筛选弹窗样式 提升层级+动画稳定 ========== */
|
||||
.filter-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.25s ease, visibility 0.25s ease;
|
||||
}
|
||||
.filter-overlay.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.filter-sheet {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
padding: 20px;
|
||||
z-index: 10000;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.25s ease-out;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.filter-sheet.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* 筛选输入框统一样式 */
|
||||
.filter-input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.filter-input:focus {
|
||||
border-color: #2563EB;
|
||||
}
|
||||
|
||||
/* 下拉框箭头浅灰色 + 全浏览器兼容修复 */
|
||||
select.filter-input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
background-size: 16px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
/* 清除IE默认下拉箭头 */
|
||||
select.filter-input::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="w-[375px] h-[812px] bg-[#F3F4F6] overflow-hidden flex flex-col relative shadow-2xl rounded-[40px] border-[8px] border-gray-800">
|
||||
<!-- 状态栏 -->
|
||||
<div class="bg-header-blue flex-none z-50">
|
||||
<div class="flex justify-between items-center px-6 pt-3 pb-1 text-[12px] font-medium text-white">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<iconify-icon icon="material-symbols:signal-cellular-4-bar-rounded"></iconify-icon>
|
||||
<iconify-icon icon="material-symbols:wifi"></iconify-icon>
|
||||
<iconify-icon icon="material-symbols:battery-full-rounded"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选弹窗容器 移到最外层，层级提升 -->
|
||||
<div class="filter-overlay" id="filterOverlay"></div>
|
||||
<div class="filter-sheet" id="filterSheet">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="relative flex items-center justify-center mb-6">
|
||||
<button class="absolute right-0 top-0 text-gray-400" onclick="closeFilter()">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
<h2 class="text-[18px] font-bold text-gray-900">筛选条件</h2>
|
||||
</div>
|
||||
<!-- 筛选表单区域 -->
|
||||
<div class="space-y-4 mb-7">
|
||||
<!-- 1.航班日期 -->
|
||||
<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>
|
||||
<!-- 1.航班日期 -->
|
||||
<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>
|
||||
<!-- 2.航班号 -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入航班号" type="text" id="filterFlightNo">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 3.代理 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 5.始发站 -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入始发站" type="text" id="filterOrigin">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 6.运单类型 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 7.业务类型 -->
|
||||
<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:chevron-down" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 8.品名(中) -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入中文品名" type="text" id="filterCnName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 h-11 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium" onclick="resetFilter()">重置</button>
|
||||
<button class="flex-1 h-11 bg-[#2563EB] text-white rounded-lg text-sm font-medium" onclick="confirmFilter()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面主容器 -->
|
||||
<div class="flex-1 relative overflow-hidden">
|
||||
<!-- 列表页 -->
|
||||
<div class="page z-10" id="listPage">
|
||||
<!-- 头部 -->
|
||||
<header class="bg-header-blue pt-2 pb-4 px-4 flex items-center relative flex-none">
|
||||
<button class="flex items-center text-white text-sm absolute left-4">
|
||||
<iconify-icon class="text-xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="mx-auto text-white font-bold text-lg">进港查询</h1>
|
||||
</header>
|
||||
<!-- 搜索栏 筛选按钮已移除边框 -->
|
||||
<div class="p-3 bg-transparent flex items-center gap-3 border-b border-gray-100 flex-none">
|
||||
<div class="flex-1 bg-white rounded-xl flex items-center px-3 py-[10px] gap-2 border border-gray-50">
|
||||
<iconify-icon class="text-[#9ca3af] text-lg" icon="mdi:magnify"></iconify-icon>
|
||||
<input class="bg-transparent text-[14px] w-full outline-none text-gray-700 placeholder-[#9ca3af]" placeholder="搜索运单号" type="text"/>
|
||||
<iconify-icon class="text-[#2563eb] text-lg" icon="mdi:qrcode-scan" onclick="alert('开启扫码功能')"></iconify-icon>
|
||||
</div>
|
||||
<!-- 筛选按钮 无圆形实线边框 -->
|
||||
<button id="filterBtn" class="w-10 h-10 flex items-center justify-center bg-white rounded-full relative z-[99999]">
|
||||
<iconify-icon class="text-[#2563eb] text-xl" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 统计标签 -->
|
||||
<div class="flex items-center gap-2 px-4 pb-3">
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#2563EB]">
|
||||
<div class="text-[11px] text-gray-500">总票数</div>
|
||||
<div class="text-[22px] font-bold text-[#2563EB] leading-tight mt-0.5">4</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-orange-500">
|
||||
<div class="text-[11px] text-gray-500">已入库</div>
|
||||
<div class="text-[22px] font-bold text-orange-500 leading-tight mt-0.5">2</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#10B981]">
|
||||
<div class="text-[11px] text-gray-500">已出库</div>
|
||||
<div class="text-[22px] font-bold text-[#10B981] leading-tight mt-0.5">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ULD 列表内容 -->
|
||||
<div class="p-3 space-y-3 pb-24 overflow-y-auto hide-scrollbar">
|
||||
<!-- 卡片 1 -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363396')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">78133363396</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已出库</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：444</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：555</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
|
||||
<span>代理人：中外运</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：DGR</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片 2 -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363397')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">78133363397</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已出库</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：120</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：320</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
|
||||
<span>代理人：徽远</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：PER</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片 3 -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363398')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">78133363398</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已入库</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：268</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：780</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
|
||||
<span>代理人：中外运</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：NOR</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片 4 -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363399')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">78133363399</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已出库</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：85</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：210</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
|
||||
<span>代理人：徽远</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：DGR</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片 5 -->
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363400')">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-bold text-[#1a1a1a]">78133363400</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已出库</span>
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
|
||||
<span>件数：350</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
|
||||
<span>重量：430</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
|
||||
<span>代理人：中外运</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
|
||||
<span>特码：PER</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情页 -->
|
||||
<div class="page z-20 page-hidden-right !bg-[#f0f2f5]" id="detailPage">
|
||||
<!-- 头部 -->
|
||||
<header class="bg-header-blue pt-2 pb-4 px-4 flex items-center relative flex-none">
|
||||
<button class="flex items-center text-white text-sm absolute left-4 active:opacity-70" onclick="goBack()">
|
||||
<iconify-icon class="text-xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="mx-auto text-white font-bold text-lg">进港货物</h1>
|
||||
<div class="absolute right-4 flex items-center">
|
||||
<iconify-icon class="text-red-500 text-2xl" icon="mdi:file-document-edit-outline"></iconify-icon>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 标签页 -->
|
||||
<div class="bg-white px-4 border-b border-gray-200 flex-none">
|
||||
<div class="flex justify-around">
|
||||
<div class="tab-item active cursor-pointer" onclick="switchTab(0)">运单信息</div>
|
||||
<div class="tab-item cursor-pointer" onclick="switchTab(1)">仓库信息</div>
|
||||
<div class="tab-item cursor-pointer" onclick="switchTab(2)">库位信息</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详情内容区 -->
|
||||
<div class="flex-1 overflow-y-auto hide-scrollbar">
|
||||
<!-- 运单信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3" id="tab-content-0">
|
||||
<!-- 卡片1：基本信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800" id="det-uldTitle">基本信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-2 gap-2">
|
||||
<!-- Row 1 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单号</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-billNo"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">代理人</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-agent"></span>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">特码</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-code"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">承运人</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-carrier"></span>
|
||||
</div>
|
||||
<!-- Row 3 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">始发港</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-route"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">中转站</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-outboundTime"></span>
|
||||
</div>
|
||||
<!-- Row 4 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">目的站</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-dest"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">UN编号</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-unNo"></span>
|
||||
</div>
|
||||
<!-- Row 5 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center" id="det-lockStatus-container">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5" id="det-lockStatus-label">锁定状态</span>
|
||||
<div id="det-lockStatus-wrapper">
|
||||
<span class="text-xs font-semibold" id="det-lockStatus"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">包装类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-packType"></span>
|
||||
</div>
|
||||
<!-- Row 6 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">业务类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-type"></span>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库时间</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-outboundTime"></span>
|
||||
</div>
|
||||
<!-- Row 7 运单类型单独一行 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单类型</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-billType"></span>
|
||||
</div>
|
||||
<!-- Row 8 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">品名(中)</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-itemNameCn"></span>
|
||||
</div>
|
||||
<!-- Row 9 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">品名(英)</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-itemNameEn"></span>
|
||||
</div>
|
||||
<!-- Row 10 -->
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
|
||||
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">备注</span>
|
||||
<span class="text-xs text-gray-800 font-semibold truncate" id="det-remark"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片2：件重信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800">件重信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-3 gap-2">
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单件数</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-pieces"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-weight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">计费重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-calcWeight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">已出库件数</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-inPieces"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">已出库重量</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-inWeight"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center opacity-0">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">—</div>
|
||||
<div class="text-xs text-gray-800 font-semibold">—</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片3：回执信息 -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
|
||||
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
|
||||
<span class="text-xs font-semibold text-gray-800">回执信息</span>
|
||||
</div>
|
||||
<div class="p-3 grid grid-cols-3 gap-2">
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">原始舱单</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-originalManifest"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">理货报告</div>
|
||||
<div class="text-xs text-gray-800 font-semibold" id="det-tallyReport"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center" id="det-customsRelease-container">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">海关放行</div>
|
||||
<div id="det-customsRelease-wrapper">
|
||||
<div class="text-xs font-semibold" id="det-customsRelease"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 仓库信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3 hidden" id="tab-content-1"></div>
|
||||
<!-- 库位信息标签页 -->
|
||||
<div class="tab-pane p-3 space-y-3 hidden" id="tab-content-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const uldData = {
|
||||
'78133363396': {
|
||||
billNo: '78133363396', agent: '中外运', code: 'DGR',
|
||||
pieces: '444', weight: '555.0', type: '普通货物运输',
|
||||
inPieces: '444', inWeight: '555.0', calcWeight: '555.0',
|
||||
carrier: 'CA', route: 'LAX', packType: '纸箱',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'HFE',
|
||||
itemNameCn: '电子元器件', itemNameEn: 'Electronic Components',
|
||||
lockStatus: '未锁定', outboundTime: '—', remark: '需冷藏存储',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',
|
||||
warehouse: [
|
||||
{ batch: '1', pieces: 200, weight: 300.0, flightDate: '2026-07-08', flightNo: 'CA1234',route: 'LAX',dest: 'HFE', time: '2026-07-08 14:30:00' },
|
||||
{ batch: '2', pieces: 244, weight: 255.0, flightDate: '2026-07-09', flightNo: 'CA5678',route: 'LAX',dest: 'HFE', time: '2026-07-09 09:10:46' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'A-01-001', inPerson: '张三', inTime: '2026-07-08 14:30', outPerson: '李四', outTime: '2026-07-09 10:00' },
|
||||
{ id: 'B-02-005', inPerson: '王五', inTime: '2026-07-09 09:10', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363397': {
|
||||
billNo: '78133363397', agent: '徽远', code: 'PER',
|
||||
pieces: '120', weight: '320.0', type: '普通货物运输',
|
||||
inPieces: '120', inWeight: '320.0', calcWeight: '320.0',
|
||||
carrier: 'MU', route: 'PVG-NRT', packType: '托盘',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'PVG',
|
||||
itemNameCn: '服装', itemNameEn: 'Garments',
|
||||
lockStatus: '未锁定', outboundTime: '—', remark: '易碎品，轻拿轻放',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',
|
||||
warehouse: [
|
||||
{ batch: '3', pieces: 60, weight: 150.0, flightDate: '2026-07-07', flightNo: 'MU123',route: 'LAX',dest: 'HFE', time: '2026-07-07 16:20:00' },
|
||||
{ batch: '4', pieces: 60, weight: 170.0, flightDate: '2026-07-08', flightNo: 'MU456',route: 'LAX',dest: 'HFE', time: '2026-07-08 11:00:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'A-03-012', inPerson: '赵六', inTime: '2026-07-07 16:20', outPerson: '钱七', outTime: '2026-07-08 14:00' },
|
||||
{ id: 'C-01-008', inPerson: '孙八', inTime: '2026-07-08 11:00', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363398': {
|
||||
billNo: '78133363398', agent: '中外运', code: 'NOR',
|
||||
pieces: '268', weight: '780.0', type: '普通货物运输',
|
||||
inPieces: '268', inWeight: '780.0', calcWeight: '780.0',
|
||||
carrier: 'CZ', route: 'CAN-AMS', packType: '托盘',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'CAN',
|
||||
itemNameCn: '机械设备', itemNameEn: 'Machinery Equipment',
|
||||
lockStatus: '锁定', outboundTime: '2026-07-09 08:00', remark: '需叉车装卸',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',
|
||||
warehouse: [
|
||||
{ batch: '5', pieces: 150, weight: 420.0, flightDate: '2026-07-08', flightNo: 'CZ789',route: 'LAX',dest: 'HFE', time: '2026-07-08 22:15:00' },
|
||||
{ batch: '6', pieces: 118, weight: 360.0, flightDate: '2026-07-09', flightNo: 'CZ012',route: 'LAX',dest: 'HFE', time: '2026-07-09 06:30:00' },
|
||||
{ batch: '7', pieces: 100, weight: 200.0, flightDate: '2026-07-09', flightNo: 'CZ345',route: 'LAX',dest: 'HFE', time: '2026-07-09 13:00:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'B-01-003', inPerson: '张三', inTime: '2026-07-08 22:15', outPerson: '李四', outTime: '2026-07-09 06:00' },
|
||||
{ id: 'A-02-010', inPerson: '王五', inTime: '2026-07-09 06:30', outPerson: '—', outTime: '—' },
|
||||
{ id: 'C-03-007', inPerson: '赵六', inTime: '2026-07-09 13:00', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363399': {
|
||||
billNo: '78133363399', agent: '徽远', code: 'DGR',
|
||||
pieces: '85', weight: '210.0', type: '危险品运输',
|
||||
inPieces: '85', inWeight: '210.0', calcWeight: '210.0',
|
||||
carrier: '3U', route: 'CTU-SIN', packType: '铁箱',
|
||||
billType: '国际进港（国际直航）', unNo: 'UN3480', dest: 'CTU',
|
||||
itemNameCn: '锂电池', itemNameEn: 'Lithium Battery',
|
||||
lockStatus: '锁定', outboundTime: '—', remark: '危险品，单独存放',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',
|
||||
warehouse: [
|
||||
{ batch: '8', pieces: 45, weight: 110.0, flightDate: '2026-07-08', flightNo: '3U678',route: 'LAX',dest: 'HFE', time: '2026-07-08 18:00:00' },
|
||||
{ batch: '9', pieces: 40, weight: 100.0, flightDate: '2026-07-09', flightNo: '3U901',route: 'LAX',dest: 'HFE', time: '2026-07-09 07:45:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'D-01-002', inPerson: '钱七', inTime: '2026-07-08 18:00', outPerson: '孙八', outTime: '2026-07-09 08:00' },
|
||||
{ id: 'A-04-015', inPerson: '张三', inTime: '2026-07-09 07:45', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
},
|
||||
'78133363400': {
|
||||
billNo: '78133363400', agent: '中外运', code: 'PER',
|
||||
pieces: '350', weight: '430.0', type: '普通货物运输',
|
||||
inPieces: '350', inWeight: '430.0', calcWeight: '430.0',
|
||||
carrier: 'HU', route: 'HKG-HFE', packType: '纸箱',
|
||||
billType: '国际进港（国际直航）', unNo: '—', dest: 'HFE',
|
||||
itemNameCn: '食品', itemNameEn: 'Food Products',
|
||||
lockStatus: '未锁定', outboundTime: '2026-07-09 11:30', remark: '保质期至2026-12',
|
||||
originalManifest: '01', tallyReport: '01', customsRelease: '11',
|
||||
warehouse: [
|
||||
{ batch: '10', pieces: 180, weight: 220.0, flightDate: '2026-07-07', flightNo: 'HU234',route: 'LAX',dest: 'HFE', time: '2026-07-07 20:00:00' },
|
||||
{ batch: '11', pieces: 170, weight: 210.0, flightDate: '2026-07-09', flightNo: 'HU567',route: 'LAX',dest: 'HFE', time: '2026-07-09 10:30:00' }
|
||||
],
|
||||
locations: [
|
||||
{ id: 'B-02-011', inPerson: '李四', inTime: '2026-07-07 20:00', outPerson: '王五', outTime: '2026-07-08 16:00' },
|
||||
{ id: 'C-01-009', inPerson: '赵六', inTime: '2026-07-09 10:30', outPerson: '—', outTime: '—' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// 核心修复：等待DOM全部渲染完成后再绑定点击事件，避免获取元素为null
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
const filterSheet = document.getElementById('filterSheet');
|
||||
const filterBtn = document.getElementById('filterBtn');
|
||||
|
||||
// 点击遮罩空白关闭，添加self防止弹窗内部点击穿透关闭
|
||||
filterOverlay.addEventListener('click', function(e) {
|
||||
if (e.target === filterOverlay) {
|
||||
closeFilter();
|
||||
}
|
||||
});
|
||||
// 筛选按钮点击打开弹窗
|
||||
filterBtn.addEventListener('click', openFilter);
|
||||
});
|
||||
|
||||
// 打开筛选弹窗
|
||||
function openFilter() {
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
const filterSheet = document.getElementById('filterSheet');
|
||||
filterOverlay.classList.add('show');
|
||||
setTimeout(() => filterSheet.classList.add('show'), 10);
|
||||
}
|
||||
|
||||
// 关闭筛选弹窗
|
||||
function closeFilter() {
|
||||
const filterOverlay = document.getElementById('filterOverlay');
|
||||
const filterSheet = document.getElementById('filterSheet');
|
||||
filterSheet.classList.remove('show');
|
||||
setTimeout(() => filterOverlay.classList.remove('show'), 250);
|
||||
}
|
||||
|
||||
// 重置所有筛选输入框
|
||||
function resetFilter() {
|
||||
document.querySelectorAll('.filter-input').forEach(input => {
|
||||
input.value = '';
|
||||
});
|
||||
}
|
||||
|
||||
// 确定筛选（模拟查询，可对接后端筛选逻辑）
|
||||
function confirmFilter() {
|
||||
const params = {
|
||||
flightDate: document.getElementById('filterFlightDate').value,
|
||||
flightNo: document.getElementById('filterFlightNo').value,
|
||||
agent: document.getElementById('filterAgent').value,
|
||||
code: document.getElementById('filterCode').value,
|
||||
origin: document.getElementById('filterOrigin').value,
|
||||
billType: document.getElementById('filterBillType').value,
|
||||
bizType: document.getElementById('filterBizType').value,
|
||||
cnName: document.getElementById('filterCnName').value
|
||||
};
|
||||
console.log('筛选参数：', params);
|
||||
alert('筛选执行成功，控制台可查看筛选条件');
|
||||
closeFilter();
|
||||
}
|
||||
|
||||
function showDetail(id) {
|
||||
const listPage = document.getElementById('listPage');
|
||||
const detailPage = document.getElementById('detailPage');
|
||||
|
||||
const data = uldData[id];
|
||||
if (data) {
|
||||
document.getElementById('det-uldTitle').innerText = '基本信息';
|
||||
document.getElementById('det-billNo').innerText = data.billNo;
|
||||
document.getElementById('det-agent').innerText = data.agent;
|
||||
document.getElementById('det-code').innerText = data.code;
|
||||
document.getElementById('det-carrier').innerText = data.carrier;
|
||||
document.getElementById('det-route').innerText = data.route;
|
||||
document.getElementById('det-dest').innerText = data.dest;
|
||||
document.getElementById('det-billType').innerText = data.billType;
|
||||
document.getElementById('det-unNo').innerText = data.unNo;
|
||||
|
||||
// 锁定状态渲染
|
||||
const lockStatusEl = document.getElementById('det-lockStatus');
|
||||
if (data.lockStatus === '锁定') {
|
||||
lockStatusEl.innerHTML = '<iconify-icon icon="mdi:lock" class="mr-1"></iconify-icon>锁定';
|
||||
lockStatusEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-red-50 text-red-600 inline-flex items-center';
|
||||
} else {
|
||||
lockStatusEl.innerHTML = '—';
|
||||
lockStatusEl.className = 'text-xs font-semibold text-gray-800';
|
||||
}
|
||||
|
||||
document.getElementById('det-packType').innerText = data.packType;
|
||||
document.getElementById('det-type').innerText = data.type;
|
||||
document.getElementById('det-outboundTime').innerText = data.outboundTime || '—';
|
||||
document.getElementById('det-itemNameCn').innerText = data.itemNameCn || '—';
|
||||
document.getElementById('det-itemNameEn').innerText = data.itemNameEn || '—';
|
||||
document.getElementById('det-remark').innerText = data.remark || '—';
|
||||
|
||||
// 件重信息
|
||||
document.getElementById('det-pieces').innerText = data.pieces;
|
||||
document.getElementById('det-weight').innerText = data.weight;
|
||||
document.getElementById('det-calcWeight').innerText = data.calcWeight;
|
||||
document.getElementById('det-inPieces').innerText = data.inPieces;
|
||||
document.getElementById('det-inWeight').innerText = data.inWeight;
|
||||
|
||||
// 海关放行标签
|
||||
const customsReleaseEl = document.getElementById('det-customsRelease');
|
||||
if (data.customsRelease === '11') {
|
||||
customsReleaseEl.innerText = '已放行';
|
||||
customsReleaseEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-green-50 text-green-600 inline-block';
|
||||
} else {
|
||||
customsReleaseEl.innerText = data.customsRelease || '未放行';
|
||||
customsReleaseEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-gray-100 text-gray-600 inline-block';
|
||||
}
|
||||
|
||||
// 渲染仓库批次列表
|
||||
const warehouseContainer = document.getElementById('tab-content-1');
|
||||
warehouseContainer.innerHTML = '';
|
||||
data.warehouse.forEach(item => {
|
||||
warehouseContainer.innerHTML += `
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="flex justify-between items-center pt-3 pb-1.5 px-3 mb-2 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 inline-block"></span>
|
||||
<span class="text-xs font-semibold text-gray-900">批次号: ${item.batch}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-1.5 px-3 pb-2">
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">件数</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.pieces}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">重量</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${parseFloat(item.weight).toFixed(1)} kg</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">航班日期</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.flightDate}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">航班号</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.flightNo}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">始发站</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.route}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">目的站</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${item.dest}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// 渲染库位信息
|
||||
const locationContainer = document.getElementById('tab-content-2');
|
||||
locationContainer.innerHTML = '';
|
||||
data.locations.forEach(loc => {
|
||||
locationContainer.innerHTML += `
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="flex justify-between items-center pt-3 pb-1.5 px-3 mb-2 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 inline-block"></span>
|
||||
<span class="text-xs font-bold text-gray-900">${loc.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-1.5 px-3 pb-2">
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库人</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${loc.inPerson}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库时间</div>
|
||||
<div class="text-xs font-semibold text-gray-800">${loc.inTime}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库人</div>
|
||||
<div class="text-xs ${loc.outPerson === '—' ? 'text-gray-500 text-[14px]' : 'text-gray-800'} font-semibold">${loc.outPerson}</div>
|
||||
</div>
|
||||
<div class="bg-gray-50/50 rounded-lg p-2">
|
||||
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库时间</div>
|
||||
<div class="text-xs ${loc.outTime === '—' ? 'text-gray-500 text-[14px]' : 'text-gray-800'} font-semibold">${loc.outTime}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
switchTab(0);
|
||||
listPage.classList.add('page-hidden-left');
|
||||
detailPage.classList.remove('page-hidden-right');
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
const listPage = document.getElementById('listPage');
|
||||
const detailPage = document.getElementById('detailPage');
|
||||
listPage.classList.remove('page-hidden-left');
|
||||
detailPage.classList.add('page-hidden-right');
|
||||
}
|
||||
|
||||
function switchTab(index) {
|
||||
const tabs = document.querySelectorAll('.tab-item');
|
||||
const contents = document.querySelectorAll('.tab-pane');
|
||||
tabs.forEach((tab, i) => {
|
||||
if (i === index) {
|
||||
tab.classList.add('active');
|
||||
contents[i].classList.remove('hidden');
|
||||
} else {
|
||||
tab.classList.remove('active');
|
||||
contents[i].classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索框聚焦监听
|
||||
document.querySelector('input[placeholder="搜索ULD编号"]').addEventListener('focus', () => {
|
||||
console.log('搜索框已激活');
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
134
documents/5.5寸手持端设计文件/11_进港移库/photo.html
Normal file
134
documents/5.5寸手持端设计文件/11_进港移库/photo.html
Normal file
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<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>
|
||||
@font-face {
|
||||
font-family: 'PingFang SC';
|
||||
src: local('PingFang SC');
|
||||
}
|
||||
body {
|
||||
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background-color: #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
.phone-container {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #f5f6fa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border: 8px solid #1a1a1a;
|
||||
border-radius: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-container">
|
||||
<!-- 状态栏 -->
|
||||
<div class="h-10 w-full flex justify-between items-center px-8 flex-none bg-[#2563EB] text-white">
|
||||
<span class="text-xs font-semibold">09:41</span>
|
||||
<div class="flex gap-1 items-center">
|
||||
<iconify-icon icon="mdi:signal" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:wifi" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:battery" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center" onclick="closeWin()">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">拍照上传</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="flex-1 overflow-y-auto p-4 bg-[#f5f6fa]">
|
||||
<div class="bg-white rounded-xl p-5 shadow">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-bold">运单照片上传</h2>
|
||||
</div>
|
||||
|
||||
<div id="previewWrap" class="grid grid-cols-3 gap-2 mb-4 min-h-[100px]"></div>
|
||||
|
||||
<input type="file" id="fileInput" accept="image/*" capture="camera" multiple class="hidden">
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 bg-blue-600 text-white py-2 rounded" onclick="fileInput.click()">
|
||||
拍照/上传
|
||||
</button>
|
||||
<button class="flex-1 bg-green-600 text-white py-2 rounded" onclick="submitPhotos()">
|
||||
确认提交
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const awb = sessionStorage.getItem('currentAwb');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const previewWrap = document.getElementById('previewWrap');
|
||||
let fileList = [];
|
||||
|
||||
// 选择图片
|
||||
fileInput.onchange = function () {
|
||||
for (let file of this.files) {
|
||||
const url = URL.createObjectURL(file);
|
||||
fileList.push({ file, url });
|
||||
renderPreview();
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染预览
|
||||
function renderPreview() {
|
||||
previewWrap.innerHTML = '';
|
||||
fileList.forEach((item, idx) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'relative border rounded h-20 overflow-hidden';
|
||||
div.innerHTML = `
|
||||
<img src="${item.url}" class="w-full h-full object-cover">
|
||||
<button onclick="delImg(${idx})"
|
||||
class="absolute top-1 right-1 w-5 h-5 bg-red-500 text-white rounded-full text-xs flex items-center justify-center">
|
||||
×
|
||||
</button>
|
||||
`;
|
||||
previewWrap.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
function delImg(index) {
|
||||
fileList.splice(index, 1);
|
||||
renderPreview();
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submitPhotos() {
|
||||
const urls = fileList.map(item => item.url);
|
||||
sessionStorage.setItem('uploadedPhotos', JSON.stringify(urls));
|
||||
closeWin();
|
||||
}
|
||||
|
||||
function closeWin() {
|
||||
window.close();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
831
documents/5.5寸手持端设计文件/11_进港移库/进港移库.html
Normal file
831
documents/5.5寸手持端设计文件/11_进港移库/进港移库.html
Normal file
@@ -0,0 +1,831 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
|
||||
<title>进港移库 - 移动端原型</title>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||||
<!-- Iconify -->
|
||||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'PingFang SC';
|
||||
src: local('PingFang SC');
|
||||
}
|
||||
body {
|
||||
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
.phone-container {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #f5f6fa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border: 8px solid #1a1a1a;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.page {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.page.active {
|
||||
display: flex;
|
||||
}
|
||||
#filter-panel {
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
#filter-panel.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.overlay {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.overlay.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.btn-active:active {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.custom-checkbox {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.custom-checkbox:checked {
|
||||
background-color: #2563EB;
|
||||
border-color: #2563EB;
|
||||
}
|
||||
.custom-checkbox:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.custom-checkbox-round {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 50%;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.custom-checkbox-round:checked {
|
||||
background-color: #2563EB;
|
||||
border-color: #2563EB;
|
||||
}
|
||||
.custom-checkbox-round:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
/* 长按拍照浮层核心样式 */
|
||||
.card-action-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border-radius: 20px;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-action-overlay.show {
|
||||
display: flex;
|
||||
pointer-events: auto;
|
||||
}
|
||||
/* 卡片必须相对定位，浮层才能盖住自身 */
|
||||
.pending-card, #list-shipped > div {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-container">
|
||||
<!-- 状态栏 -->
|
||||
<div class="h-10 w-full flex justify-between items-center px-8 flex-none bg-[#2563EB] text-white">
|
||||
<span class="text-xs font-semibold">09:41</span>
|
||||
<div class="flex gap-1 items-center">
|
||||
<iconify-icon icon="mdi:signal" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:wifi" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:battery" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表首页 -->
|
||||
<div class="page active" id="page-home">
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center btn-active" onclick="alert('返回首页')">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">进港移库</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容区域 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-24">
|
||||
<!-- 搜索栏 -->
|
||||
<section class="px-4 pt-4 pb-3 bg-white">
|
||||
<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-blue-500">
|
||||
<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" onclick="toggleFilterDrawer(true)">
|
||||
<iconify-icon class="text-xl" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tab切换 -->
|
||||
<div class="flex bg-white border-b sticky top-0 z-20">
|
||||
<button class="flex-1 py-3 text-sm font-bold text-[#1F2937] border-b-2 border-[#1F2937] transition-all" id="tab-pending" onclick="switchTab('pending')">
|
||||
待移库 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5">3</span>
|
||||
</button>
|
||||
<button class="flex-1 py-3 text-sm font-bold text-gray-400 border-b-2 border-transparent transition-all" id="tab-shipped" onclick="switchTab('shipped')">
|
||||
已移库 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5">3</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 待移库列表 -->
|
||||
<div class="p-3 pt-4 space-y-3" id="list-pending">
|
||||
<!-- 卡片1 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363573</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">NOR</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">100件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">200kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</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="showDetail({id: '78133363573', status: '待移库', agent: 'NOR', pieces: '100', weight: '200', goodsName: '电子元器件', carrier: 'MU', route: 'HFE-NKG-LAX', location: 'A区-03货位', code: 'NOR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 拍照浮层 -->
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363573')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片2 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363574</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">PER</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">85件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">150kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-PEK-LAX</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="showDetail({id: '78133363574', status: '待移库', agent: 'PER', pieces: '85', weight: '150', goodsName: '服装鞋帽', carrier: 'CA', route: 'HFE-PEK-LAX', location: 'B区-05货位', code: 'NOR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363574')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片3 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363575</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">DHL</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">200件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">450kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</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="showDetail({id: '78133363575', status: '待移库', agent: 'DHL', pieces: '200', weight: '450', goodsName: '精密模具', carrier: '3U', route: 'HFE-NKG-LAX', location: 'C区-01货位', code: 'NOR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363575')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已移库列表 -->
|
||||
<div class="p-3 pt-4 space-y-3 hidden" id="list-shipped">
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363001</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">NOR</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">50件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">80kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</span>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363001', status: '已移库', agent: 'NOR', pieces: '50', weight: '80', pickupNo: 'TH20260701001', goodsName: '精密仪器', carrier: 'MU', route: 'HFE-NKG-LAX', location: 'B区-05货位', code: 'NOR', counterTime: '2026-07-05 10:30', counterPerson: '张三', outboundTime: '2026-07-05 11:45', outboundPerson: '张三'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363001')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363002</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">PER</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">120件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">300kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-PEK-LAX</span>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363002', status: '已移库', agent: 'PER', pieces: '120', weight: '300', pickupNo: 'TH20260702002', goodsName: '鲜花绿植', carrier: 'CA', route: 'HFE-PEK-LAX', location: 'A区-08货位', code: 'NOR', counterTime: '2026-07-06 09:15', counterPerson: '王五', outboundTime: '2026-07-06 10:30', outboundPerson: '赵六'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363002')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363003</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">DHL</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">75件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">160kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</span>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363003', status: '已移库', agent: 'DHL', pieces: '75', weight: '160', pickupNo: 'TH20260703003', goodsName: '生鲜食品', carrier: '3U', route: 'HFE-NKG-LAX', location: 'D区-02货位', code: 'NOR', counterTime: '2026-07-06 14:00', counterPerson: '钱七', outboundTime: '2026-07-06 15:20', outboundPerson: '孙八'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363003')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="absolute bottom-0 w-full bg-white border-t border-gray-200 z-40 flex flex-col pt-4 pb-4" id="bottom-toolbar">
|
||||
<div class="px-4 flex items-center w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="custom-checkbox-round" id="select-all-cb" onclick="toggleSelePERll(this.checked)" type="checkbox"/>
|
||||
<label class="text-[13px] text-[#1F2937] font-medium cursor-pointer" for="select-all-cb">全选</label>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[12px] text-[#9CA3AF]">已选 <span id="selected-count">0</span> 项</span>
|
||||
<button class="bg-[#2563EB] text-white text-[15px] font-bold px-5 py-2 rounded-[10px] shadow-lg shadow-blue-500/25 btn-active" onclick="alert('移库操作')">
|
||||
移库
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运单详情页面 -->
|
||||
<div class="page" id="page-detail">
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center btn-active" onclick="switchPage('page-home')">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">运单详情</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-8 p-4">
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100">
|
||||
<div class="bg-[#2563EB] px-4 py-3 flex justify-between items-center text-white">
|
||||
<span class="font-bold text-[17px] leading-tight" id="detail-awb">781-22222620</span>
|
||||
<div class="flex items-center text-[13px] font-normal opacity-90">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full mr-1.5"></span>
|
||||
<span id="detail-time">2026-05-10 08:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-[#EF4444] text-white text-[11px] px-1.5 py-0.5 rounded leading-tight font-medium">国际进港</span>
|
||||
<span class="text-[13px] font-normal text-[#666666] border-l border-gray-300 pl-2">普通货物运输</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[22px] font-bold text-[#111827] mb-3" id="detail-goods-name">电子元器件</div>
|
||||
<div class="grid grid-cols-2 gap-x-8 gap-y-3">
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">件数</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-count">55</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">重量</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-weight">622.00 kg</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">特码</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-code">NOR</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">代理</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-agent">NOR</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">出运路径</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-route">HFE-PEK-LAX</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">承运人</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-bold" id="detail-carrier">MU</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 移库信息卡片-->
|
||||
<div class="mt-4 bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 hidden" id="detail-outbound-card">
|
||||
<div class="bg-[#10B981] px-4 py-2.5">
|
||||
<span class="text-white font-semibold text-[15px]">移库信息</span>
|
||||
</div>
|
||||
<div class="bg-white px-4 py-3 grid grid-cols-2 gap-y-3">
|
||||
<div class="flex flex-col" id="detail-outbound-person-row">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">移库人</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-outbound-person">-</span>
|
||||
</div>
|
||||
<div class="flex flex-col" id="detail-outbound-time-row">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">移库时间</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-outbound-time">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 异常照片-->
|
||||
<div class="mt-4 bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100">
|
||||
<div class="bg-[#F9971E] px-4 py-3 flex items-center">
|
||||
<span class="text-white font-semibold text-[15px]">异常照片</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div id="image-preview-list" class="grid grid-cols-3 gap-3">
|
||||
<div class="border border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center text-gray-400 text-lg">+</div>
|
||||
<div class="border border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center text-gray-400 text-lg">+</div>
|
||||
<div class="border border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center text-gray-400 text-lg">+</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部筛选遮罩 -->
|
||||
<div class="overlay absolute inset-0 z-30" id="filter-overlay" onclick="toggleFilterDrawer(false)"></div>
|
||||
|
||||
<!-- 筛选弹窗 -->
|
||||
<div class="absolute bottom-0 w-full bg-white rounded-t-3xl z-50 p-6 shadow-2xl overflow-hidden" 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" onclick="toggleFilterDrawer(false)">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<!-- 1.航班日期 -->
|
||||
<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>
|
||||
<!-- 2.航班号 -->
|
||||
<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">
|
||||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入航班号" type="text" id="filterFlightNo">
|
||||
</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-sm">请选择特码</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-sm">请选择特码</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="alert('已重置')">
|
||||
重置
|
||||
</button>
|
||||
<button class="flex-1 bg-[#2563EB] text-white py-3.5 rounded-xl font-bold shadow-lg shadow-blue-500/20 btn-active" onclick="toggleFilterDrawer(false)">
|
||||
确认
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 页面切换
|
||||
function switchPage(pageId) {
|
||||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||||
document.getElementById(pageId).classList.add('active');
|
||||
if(pageId === 'page-detail'){
|
||||
document.querySelector('#page-detail .no-scrollbar').scrollTop = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tab切换
|
||||
function switchTab(type) {
|
||||
const tabPending = document.getElementById('tab-pending');
|
||||
const tabShipped = document.getElementById('tab-shipped');
|
||||
const listPending = document.getElementById('list-pending');
|
||||
const listShipped = document.getElementById('list-shipped');
|
||||
const bottomToolbar = document.getElementById('bottom-toolbar');
|
||||
|
||||
if (type === 'pending') {
|
||||
tabPending.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabPending.classList.remove('text-gray-400', 'border-transparent');
|
||||
tabShipped.classList.add('text-gray-400', 'border-transparent');
|
||||
tabShipped.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
|
||||
listPending.classList.remove('hidden');
|
||||
listShipped.classList.add('hidden');
|
||||
bottomToolbar.style.display = 'flex';
|
||||
} else {
|
||||
tabShipped.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabShipped.classList.remove('text-gray-400', 'border-transparent');
|
||||
tabPending.classList.add('text-gray-400', 'border-transparent');
|
||||
tabPending.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
|
||||
listShipped.classList.remove('hidden');
|
||||
listPending.classList.add('hidden');
|
||||
bottomToolbar.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 全选
|
||||
function toggleSelePERll(checked) {
|
||||
const checkboxes = document.querySelectorAll('.item-checkbox');
|
||||
checkboxes.forEach(cb => {
|
||||
cb.checked = checked;
|
||||
});
|
||||
updateSelectionCount();
|
||||
}
|
||||
|
||||
// 单选
|
||||
function handleCheckboxClick(checkbox, event) {
|
||||
event.stopPropagation();
|
||||
updateSelectionCount();
|
||||
const allBox = document.getElementById('select-all-cb');
|
||||
const all = Array.from(document.querySelectorAll('.item-checkbox')).every(i => i.checked);
|
||||
allBox.checked = all;
|
||||
}
|
||||
|
||||
// 更新选中数量
|
||||
function updateSelectionCount() {
|
||||
const cnt = document.querySelectorAll('.item-checkbox:checked').length;
|
||||
document.getElementById('selected-count').textContent = cnt;
|
||||
}
|
||||
|
||||
// 图片存储全局对象
|
||||
let photoStore = {};
|
||||
|
||||
// 查看详情
|
||||
function showDetail(data) {
|
||||
if (!data) return;
|
||||
const setText = (id, val) => {
|
||||
const el = document.getElementById(id);
|
||||
if(el) el.textContent = val || '-';
|
||||
};
|
||||
setText('detail-awb', data.id);
|
||||
setText('detail-goods-name', data.goodsName);
|
||||
setText('detail-count', data.pieces);
|
||||
setText('detail-weight', data.weight + (String(data.weight).includes('kg') ? '' : ' kg'));
|
||||
setText('detail-code', data.code);
|
||||
setText('detail-agent', data.agent);
|
||||
setText('detail-carrier', data.carrier);
|
||||
setText('detail-route', data.route || 'HFE-PEK-LAX');
|
||||
|
||||
// 渲染图片：最多3格，有图显示图片，空位虚线+占位
|
||||
const list = document.getElementById('image-preview-list');
|
||||
list.innerHTML = '';
|
||||
const imgs = photoStore[data.id] || [];
|
||||
const maxSlot = 3;
|
||||
for(let i = 0; i < maxSlot; i++){
|
||||
if(imgs[i]){
|
||||
// 已有图片
|
||||
const imgWrap = document.createElement('div');
|
||||
imgWrap.className = 'border border-gray-200 rounded-lg h-24 overflow-hidden';
|
||||
imgWrap.innerHTML = `<img src="${imgs[i]}" class="w-full h-full object-cover">`;
|
||||
list.appendChild(imgWrap);
|
||||
}else{
|
||||
// 空虚线占位框
|
||||
const emptyBox = document.createElement('div');
|
||||
emptyBox.className = 'border border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center text-gray-400 text-lg';
|
||||
emptyBox.textContent = '+';
|
||||
list.appendChild(emptyBox);
|
||||
}
|
||||
}
|
||||
|
||||
const outboundCard = document.getElementById('detail-outbound-card');
|
||||
if(data.status === '待移库'){
|
||||
outboundCard.classList.add('hidden');
|
||||
}else{
|
||||
outboundCard.classList.remove('hidden');
|
||||
setText('detail-outbound-person', data.outboundPerson);
|
||||
setText('detail-outbound-time', data.outboundTime);
|
||||
}
|
||||
switchPage('page-detail');
|
||||
}
|
||||
|
||||
// 筛选抽屉
|
||||
function toggleFilterDrawer(show) {
|
||||
const panel = document.getElementById('filter-panel');
|
||||
const overlay = document.getElementById('filter-overlay');
|
||||
if(show){
|
||||
panel.classList.add('show');
|
||||
overlay.classList.add('show');
|
||||
}else{
|
||||
panel.classList.remove('show');
|
||||
overlay.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
// ===================== 长按拍照完整逻辑 =====================
|
||||
let longPressTimer = null;
|
||||
const LONG_PRESS_DELAY = 600;
|
||||
let isShowOverlay = false;
|
||||
|
||||
// 关闭单个遮罩
|
||||
function closeSelf(dom) {
|
||||
dom.classList.remove('show');
|
||||
isShowOverlay = false;
|
||||
}
|
||||
// 关闭全部遮罩
|
||||
function closeAllOverlay() {
|
||||
document.querySelectorAll('.card-action-overlay').forEach(item => {
|
||||
item.classList.remove('show');
|
||||
})
|
||||
isShowOverlay = false;
|
||||
}
|
||||
// 开始长按
|
||||
function startLongPress(cardDom, e) {
|
||||
if (e) e.preventDefault();
|
||||
if (isShowOverlay) return;
|
||||
closeAllOverlay();
|
||||
clearTimeout(longPressTimer);
|
||||
longPressTimer = setTimeout(() => {
|
||||
cardDom.querySelector('.card-action-overlay').classList.add('show');
|
||||
isShowOverlay = true;
|
||||
}, LONG_PRESS_DELAY)
|
||||
}
|
||||
// 滑动取消长按
|
||||
function cancelLongPress() {
|
||||
if (!isShowOverlay) clearTimeout(longPressTimer);
|
||||
}
|
||||
// 松开鼠标/手指
|
||||
function endLongPress() {
|
||||
clearTimeout(longPressTimer);
|
||||
}
|
||||
// 跳转拍照页，传递运单号
|
||||
function goToPhoto(awb) {
|
||||
sessionStorage.setItem('currentAwb', awb);
|
||||
window.open('photo.html', '_blank');
|
||||
}
|
||||
// 页面加载读取上传图片
|
||||
window.onload = function() {
|
||||
const uploadData = sessionStorage.getItem('uploadedPhotos');
|
||||
const awb = sessionStorage.getItem('currentAwb');
|
||||
if(uploadData && awb) {
|
||||
photoStore[awb] = JSON.parse(uploadData);
|
||||
sessionStorage.removeItem('uploadedPhotos');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user