feat: 完成国际出港移库/出库交接页面5.5寸手机端适配
- 落地手机端双形态适配框架：同名布局+资源限定符（layout/手机、 layout-sw600dp/平板）自动切换，DeviceUtil 设备形态判定，7个 手机版公共组件（PhoneSearchBar/StatusTab/DataLayout/FilterPanel/ BottomBar/StatBox/KvItem） - 完成「国际出港移库」「国际出港出库交接」两页手机端适配，新增 各自详情页（IntExpMoveDetailActivity/IntExpOutHandoverDetailActivity） - 手机端首页菜单接入"出港移库""出库交接"入口 - 修复手机端进入页面先横屏后转竖屏的闪屏问题：Manifest 全项目 192 处改为 screenOrientation="unspecified"，由 BaseActivity 按设备形态运行时锁定方向 - 修复该方案的中间版本在平板端引入的回归（先竖后横 + UI放大1.6倍） - AutoSize 补充手机竖屏 390×844 设计基准 - 修复 CHANGELOG.md 因脚本异常导致的内容重复损坏（膨胀至12万行）， 恢复正常结构并补充本次变更记录 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
139
documents/5.5寸手持端设计文件/07_出港仓库/运单追踪.html
Normal file
139
documents/5.5寸手持端设计文件/07_出港仓库/运单追踪.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
|
||||
<title>国际进港查询 - 物流跟踪</title>
|
||||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: local('sans-serif');
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
/* 模拟手机容器阴影 */
|
||||
.phone-shell {
|
||||
box-shadow: 0 50px 100px -20px rgba(0,0,0,0.25), 0 30px 60px -30px rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-200 flex justify-center items-center min-h-screen p-4">
|
||||
<!-- 模拟手机屏幕容器 -->
|
||||
<div class="phone-shell w-[375px] h-[812px] bg-[#F5F5F7] overflow-hidden flex flex-col relative rounded-[48px] border-[10px] border-gray-900">
|
||||
<!-- 顶部蓝色区域 (包含状态栏和导航栏) -->
|
||||
<div class="bg-[#1A73E8] flex-none">
|
||||
<!-- 系统状态栏模拟 -->
|
||||
<div class="h-11 w-full flex justify-between items-center px-8 text-white">
|
||||
<span class="text-[15px] font-bold">09:41</span>
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<iconify-icon class="text-sm" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-base" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-xl" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="h-[44px] px-4 flex items-center justify-between">
|
||||
<button class="flex items-center text-white space-x-0.5">
|
||||
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
|
||||
<span class="text-base">返回</span>
|
||||
</button>
|
||||
<h1 class="text-lg font-bold text-white absolute left-1/2 -translate-x-1/2">运单追踪</h1>
|
||||
<div class="w-10"></div> <!-- 占位保持平衡 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar px-5 pt-6 pb-12">
|
||||
<!-- 流转状态卡片 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-5">
|
||||
<!-- 运单号 Header -->
|
||||
<div class="flex items-center justify-between pt-2 pb-5 mb-8 border-b border-gray-100">
|
||||
<div class="text-xl font-black text-gray-900 leading-none tracking-tight">
|
||||
78133358743
|
||||
</div>
|
||||
<span class="text-[11px] font-medium text-blue-600 bg-blue-50 px-2.5 py-1 rounded-full border border-blue-100">国际进港</span>
|
||||
</div>
|
||||
<!-- 流转状态标题 -->
|
||||
<div class="mb-6">
|
||||
<h2 class="text-base font-semibold text-gray-700 flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-700 inline-block" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
流转状态
|
||||
</h2>
|
||||
</div>
|
||||
<div class="relative pl-7 pb-2">
|
||||
<div class="absolute left-[9px] top-2 bottom-4 w-[2px] bg-gray-100"></div>
|
||||
<!-- 状态 1: 当前 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[27px] top-1 w-[20px] h-[20px] rounded-full bg-green-600 border-4 border-green-100 flex items-center justify-center ring-1 ring-green-600/20">
|
||||
<div class="w-2 h-2 rounded-full bg-white"></div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-green-700">原始舱单</span>
|
||||
<span class="text-green-600 text-xs font-normal bg-green-50 px-2 py-0.5 rounded-full">放行状态：01</span>
|
||||
</div>
|
||||
<div class="text-gray-400 text-xs font-normal flex items-center gap-1.5">
|
||||
<span>2026-07-10 11:03:38</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 2 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">分拣理货</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 3 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">理货申报</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 4 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">海关放行</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 5 -->
|
||||
<div class="relative mb-10">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">柜台办结</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态 6 -->
|
||||
<div class="relative mb-2">
|
||||
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold text-gray-400">提取出库</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 模块 4: 操作详情卡片 -> 已删除 -->
|
||||
<!-- 底部占位 -->
|
||||
<div class="text-center py-6">
|
||||
<p class="text-[10px] text-gray-300 uppercase tracking-[0.2em] font-bold">查询信息已触底</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部 Home Indicator 模拟 -->
|
||||
<div class="h-8 w-full flex justify-center items-center flex-none bg-white/60 backdrop-blur-md">
|
||||
<div class="w-32 h-1.5 bg-black rounded-full opacity-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>ml>
|
||||
Reference in New Issue
Block a user