eric/aerologic-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成国际出港移库/出库交接页面5.5寸手机端适配

Browse Source 
- 落地手机端双形态适配框架：同名布局+资源限定符（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:
杨建宽
2026-07-29 14:18:29 +08:00
parent 9c4588e47e
commit db062c8ee3
134 changed files with 19602 additions and 2965 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
documents/5.5寸手持端设计文件/03_出港计重/detail.html Normal file
View 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
View 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
View 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
View 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
View 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>