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

535
documents/5.5寸手持端设计文件/04_出港运抵/main.html Normal file
View 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
View 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
View 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
View 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>