YANG JIANKUAN
db062c8ee3
- 落地手机端双形态适配框架：同名布局+资源限定符（layout/手机、 layout-sw600dp/平板）自动切换，DeviceUtil 设备形态判定，7个 手机版公共组件（PhoneSearchBar/StatusTab/DataLayout/FilterPanel/ BottomBar/StatBox/KvItem） - 完成「国际出港移库」「国际出港出库交接」两页手机端适配，新增 各自详情页（IntExpMoveDetailActivity/IntExpOutHandoverDetailActivity） - 手机端首页菜单接入"出港移库""出库交接"入口 - 修复手机端进入页面先横屏后转竖屏的闪屏问题：Manifest 全项目 192 处改为 screenOrientation="unspecified"，由 BaseActivity 按设备形态运行时锁定方向 - 修复该方案的中间版本在平板端引入的回归（先竖后横 + UI放大1.6倍） - AutoSize 补充手机竖屏 390×844 设计基准 - 修复 CHANGELOG.md 因脚本异常导致的内容重复损坏（膨胀至12万行）， 恢复正常结构并补充本次变更记录 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
419 lines
24 KiB
HTML
419 lines
24 KiB
HTML
<!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> |