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:
256
documents/5.5寸手持端设计文件/03_出港计重/weighing.html
Normal file
256
documents/5.5寸手持端设计文件/03_出港计重/weighing.html
Normal file
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
|
||||
<title>开始计重 - 货运管理系统</title>
|
||||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #F3F4F6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
/* 统一手机外壳容器 */
|
||||
.phone-container {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 55px;
|
||||
border: 8px solid #1F2937;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
|
||||
position: relative;
|
||||
}
|
||||
/* 手机内部屏幕区域 */
|
||||
.phone-screen {
|
||||
flex: 1;
|
||||
background: #F2F5F9;
|
||||
margin: 0 4px 4px 4px;
|
||||
border-radius: 46px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.card-animate {
|
||||
animation: fadeInUp 0.35s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
.card-animate:nth-child(1) { animation-delay: 0s; }
|
||||
.card-animate:nth-child(2) { animation-delay: 0.05s; }
|
||||
.card-animate:nth-child(3) { animation-delay: 0.1s; }
|
||||
.card-animate:nth-child(4) { animation-delay: 0.15s; }
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
.animate-slideUp { animation: slideUp 0.3s ease-out; }
|
||||
input { transition: all 0.2s ease; }
|
||||
input:focus { transition: all 0.2s ease; }
|
||||
::-webkit-scrollbar { display: none; }
|
||||
* { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-container">
|
||||
<div class="phone-screen">
|
||||
|
||||
<!-- ===== ① 顶部连体蓝色区域(状态栏+导航栏) ===== -->
|
||||
<div class="bg-[#2563EB] flex flex-col flex-none">
|
||||
<!-- 手机状态栏 -->
|
||||
<div class="flex items-center justify-between h-[28px] text-white text-[12px] px-6">
|
||||
<span class="text-white font-medium tracking-wide">09:10</span>
|
||||
<div class="flex items-center gap-[5px]">
|
||||
<iconify-icon class="text-white text-[13px]" icon="mdi:signal-cellular-3"></iconify-icon>
|
||||
<iconify-icon class="text-white text-[13px]" icon="mdi:wifi"></iconify-icon>
|
||||
<iconify-icon class="text-white text-[15px]" icon="mdi:battery"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<header class="text-white h-12 flex items-center px-4">
|
||||
<button class="flex items-center gap-0.5 text-white font-medium text-[15px] active:opacity-70 transition-opacity" onclick="window.location.href='main.html'">
|
||||
<iconify-icon class="text-white" height="24" icon="mdi:chevron-left" width="24"></iconify-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-[17px] font-semibold">开始计重</h1>
|
||||
<div class="w-[60px]"></div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- ===== ③ 主内容区(滚动) ===== -->
|
||||
<main class="flex-1 overflow-y-auto no-scrollbar bg-[#F2F5F9] pb-4">
|
||||
<!-- 顶部运单卡片(原样不动) -->
|
||||
<div class="mx-4 mt-4 card-animate">
|
||||
<div class="bg-white rounded-2xl shadow-md shadow-black/5 overflow-hidden relative">
|
||||
<!-- 顶部渐变装饰条 -->
|
||||
<div class="h-1" style="background: linear-gradient(90deg, #2563EB, #60A5FA, #2563EB);"></div>
|
||||
<!-- 内容区 -->
|
||||
<div class="px-5 py-4">
|
||||
<!-- 第一行:运单号 + 状态徽标 -->
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></div>
|
||||
<span class="text-[20px] font-bold text-gray-900 tracking-wider">781333617</span>
|
||||
</div>
|
||||
<span class="text-[11px] font-medium text-blue-600 bg-blue-50 px-2.5 py-1 rounded-full border border-blue-100">国际出港</span>
|
||||
</div>
|
||||
<!-- 分割线 -->
|
||||
<div class="border-t border-gray-50 mb-3"></div>
|
||||
<!-- 统一信息区域:浅灰底圆角容器,包含预配 -->
|
||||
<div class="bg-gray-50/70 rounded-xl px-4 py-3">
|
||||
<!-- 预配信息三列 -->
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div class="text-center">
|
||||
<p class="text-[10px] text-gray-400 mb-0.5">预配件数</p>
|
||||
<p class="text-[15px] font-bold text-gray-800">85</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-[10px] text-gray-400 mb-0.5">预配重量</p>
|
||||
<p class="text-[15px] font-bold text-gray-800">156 kg</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-[10px] text-gray-400 mb-0.5">预配体积</p>
|
||||
<p class="text-[15px] font-bold text-gray-800">4.52 m³</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 统一表单大卡片(字体样式统一为APP风格) ===== -->
|
||||
<div class="mx-4 mt-3 bg-white rounded-2xl shadow-sm shadow-black/5 overflow-hidden card-animate">
|
||||
<!-- 1. 通道号(必填)-->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openChannelPicker()">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">通道号<span class="text-red-500 ml-0.5">*</span></span>
|
||||
<span class="flex-1 text-[14px] text-gray-500 text-left" id="channelDisplay">请选择通道号</span>
|
||||
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
<!-- 2. 代理人 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openAgentPicker()">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">代理人</span>
|
||||
<span class="flex-1 text-[14px] text-gray-500 text-left" id="agentDisplay">请选择代理人</span>
|
||||
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
<!-- 3. 特码 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openCodePicker()">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">特码</span>
|
||||
<span class="flex-1 text-[14px] text-gray-500 text-left" id="codeDisplay">请选择特码</span>
|
||||
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
<!-- 4. 运抵件数 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">运抵件数</span>
|
||||
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" placeholder="请输入运抵件数" type="text"/>
|
||||
</div>
|
||||
<!-- 5. 运抵重量 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">运抵重量</span>
|
||||
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" type="text" value="0"/>
|
||||
</div>
|
||||
<!-- 6. 运抵体积 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">运抵体积</span>
|
||||
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" type="text" value="0.00"/>
|
||||
</div>
|
||||
<!-- 7. 托盘数量 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">托盘数量</span>
|
||||
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" placeholder="请输入托盘数量" type="text"/>
|
||||
</div>
|
||||
<!-- 8. 托盘自重 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">托盘自重</span>
|
||||
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" value="18" placeholder="请输入托盘自重" type="text"/>
|
||||
</div>
|
||||
|
||||
<!-- 航班信息 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">航班日期</span>
|
||||
<span class="flex-1 text-[14px] text-gray-800 text-left">20260703</span>
|
||||
</div>
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">航班号</span>
|
||||
<span class="flex-1 text-[14px] text-gray-800 text-left">MU1111</span>
|
||||
</div>
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">航程</span>
|
||||
<span class="flex-1 text-[14px] text-gray-800 text-left">HFE-LAX</span>
|
||||
</div>
|
||||
|
||||
<!-- 业务类型 -->
|
||||
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openBizPicker()">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">业务类型</span>
|
||||
<span class="flex-1 text-[14px] text-gray-800 text-left" id="bizDisplay">普通货物运输</span>
|
||||
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<div class="flex items-start h-auto min-h-[80px] px-4 py-3 border-b border-gray-100">
|
||||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0 pt-1">备注</span>
|
||||
<textarea class="flex-1 text-[14px] text-gray-800 bg-transparent rounded-lg py-2 h-[60px] resize-none outline-none text-left" placeholder="请输入备注信息"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="px-4 mt-4 mb-2">
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 h-[52px] rounded-2xl text-[17px] font-semibold active:opacity-90 transition-all text-blue-600" style="background: #fff; border: 2px solid #2563EB;">
|
||||
分托计重
|
||||
</button>
|
||||
<button class="flex-1 h-[52px] rounded-2xl bg-[#2563EB] text-white text-[17px] font-semibold active:opacity-90 shadow-lg shadow-blue-200 transition-all" onclick="submitWeight()">
|
||||
完成计重
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- iOS 底部指示条 -->
|
||||
<div class="h-5 bg-[#F2F5F9] flex justify-center items-center flex-none">
|
||||
<div class="w-[134px] h-[5px] bg-gray-300 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openChannelPicker() {
|
||||
const options = ['A-01', 'A-02', 'B-01', 'B-02', 'C-01'];
|
||||
document.getElementById('channelDisplay').innerText = "A-01";
|
||||
document.getElementById('channelDisplay').classList.remove('text-gray-500');
|
||||
document.getElementById('channelDisplay').classList.add('text-gray-800');
|
||||
}
|
||||
|
||||
function openAgentPicker() {
|
||||
document.getElementById('agentDisplay').innerText = "上海中远海运物流";
|
||||
document.getElementById('agentDisplay').classList.remove('text-gray-500');
|
||||
document.getElementById('agentDisplay').classList.add('text-gray-800');
|
||||
}
|
||||
|
||||
function openCodePicker() {
|
||||
document.getElementById('codeDisplay').innerText = "GEN (普货)";
|
||||
document.getElementById('codeDisplay').classList.remove('text-gray-500');
|
||||
document.getElementById('codeDisplay').classList.add('text-gray-800');
|
||||
}
|
||||
|
||||
function openBizPicker() {
|
||||
}
|
||||
|
||||
function submitWeight() {
|
||||
alert("提交成功");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user