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>
256 lines
14 KiB
HTML
256 lines
14 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(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> |