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>
196 lines
5.7 KiB
HTML
196 lines
5.7 KiB
HTML
<!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>
|