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:
195
documents/5.5寸手持端设计文件/00_全部入口总览.html
Normal file
195
documents/5.5寸手持端设计文件/00_全部入口总览.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>5.5 寸手持端设计稿 · 全部入口总览</title>
|
||||
<style>
|
||||
:root {
|
||||
--cols: 4;
|
||||
--scale: 1;
|
||||
--pw: 430px;
|
||||
--ph: 890px;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0 32px 48px;
|
||||
background: #EEF1F6;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Arial, sans-serif;
|
||||
color: #1F2937;
|
||||
}
|
||||
header {
|
||||
padding: 32px 0 20px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
h1 small {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #6B7280;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #E3E8F0;
|
||||
border-radius: 10px;
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.05);
|
||||
}
|
||||
.toolbar label { color: #6B7280; margin-right: 6px; }
|
||||
.toolbar select {
|
||||
font-size: 13px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #D8DEE9;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: #1F2937;
|
||||
}
|
||||
.toolbar button {
|
||||
font-size: 13px;
|
||||
padding: 5px 12px;
|
||||
border: 1px solid #2563EB;
|
||||
background: #2563EB;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toolbar button:active { opacity: .8; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cols), max-content);
|
||||
gap: 28px 24px;
|
||||
justify-content: start;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #E3E8F0;
|
||||
border-radius: 14px;
|
||||
padding: 12px 12px 14px;
|
||||
box-shadow: 0 2px 10px rgba(17,24,39,.06);
|
||||
width: calc(var(--pw) * var(--scale) + 24px);
|
||||
}
|
||||
.cap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 2px 10px;
|
||||
}
|
||||
.no {
|
||||
flex: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
background: #2563EB;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.name { font-size: 15px; font-weight: 600; }
|
||||
.tag {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
color: #2563EB;
|
||||
background: #EAF1FE;
|
||||
border-radius: 5px;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
.frame {
|
||||
width: calc(var(--pw) * var(--scale));
|
||||
height: calc(var(--ph) * var(--scale));
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background: #E5E7EB;
|
||||
}
|
||||
.frame iframe {
|
||||
width: var(--pw);
|
||||
height: var(--ph);
|
||||
border: 0;
|
||||
display: block;
|
||||
transform: scale(var(--scale));
|
||||
transform-origin: top left;
|
||||
}
|
||||
body.clean .toolbar { display: none; }
|
||||
body.clean header { padding-bottom: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>5.5 寸手持端设计稿 · 全部入口总览
|
||||
<small>共 11 个业务入口 · 单机画布 390 × 844</small>
|
||||
</h1>
|
||||
<div class="toolbar">
|
||||
<span><label>列数</label>
|
||||
<select id="cols" onchange="setVar('--cols', this.value)">
|
||||
<option>2</option><option>3</option><option selected>4</option><option>5</option><option>6</option>
|
||||
</select>
|
||||
</span>
|
||||
<span><label>缩放</label>
|
||||
<select id="scale" onchange="setVar('--scale', this.value)">
|
||||
<option value="1">100%</option>
|
||||
<option value="0.85">85%</option>
|
||||
<option value="0.75">75%</option>
|
||||
<option value="0.6">60%</option>
|
||||
<option value="0.5">50%</option>
|
||||
</select>
|
||||
</span>
|
||||
<button onclick="document.body.classList.toggle('clean')">隐藏工具栏</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid" id="grid"></div>
|
||||
|
||||
<script>
|
||||
const PAGES = [
|
||||
['01', 'ULD 管理', '综合管理', '01_ULD管理/ULD管理.html'],
|
||||
['02', '出库交接', '国际出港', '02_出库交接/出库交接.html'],
|
||||
['03', '出港计重', '国际出港', '03_出港计重/main.html'],
|
||||
['04', '出港运抵', '国际出港', '04_出港运抵/main.html'],
|
||||
['05', '出港移库', '国际出港', '05_出港移库/出港移库.html'],
|
||||
['06', '出港查询', '国际出港', '06_出港查询/出港查询.html'],
|
||||
['07', '出港仓库', '国际出港', '07_出港仓库/出港仓库.html'],
|
||||
['08', '进港仓库', '国际进港', '08_进港仓库/进港仓库.html'],
|
||||
['09', '提取出库', '国际进港', '09_提取出库/提取出库.html'],
|
||||
['10', '进港查询', '国际进港', '10_进港查询/进港查询.html'],
|
||||
['11', '进港移库', '国际进港', '11_进港移库/进港移库.html'],
|
||||
];
|
||||
|
||||
document.getElementById('grid').innerHTML = PAGES.map(([no, name, menu, src]) => `
|
||||
<div class="card">
|
||||
<div class="cap">
|
||||
<span class="no">${no}</span>
|
||||
<span class="name">${name}</span>
|
||||
<span class="tag">${menu}</span>
|
||||
</div>
|
||||
<div class="frame">
|
||||
<iframe src="${src}" loading="eager" scrolling="no"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
function setVar(k, v) {
|
||||
document.documentElement.style.setProperty(k, v);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user