Files
aerologic-app/documents/5.5寸首页新样式/5.5设计图html/home.html
YANG JIANKUAN 542c35b22d feat(phone): 5.5 寸手持端首页按新设计稿改版
按 documents/5.5寸首页新样式/ 设计稿还原 PDAEnterActivity 四个 Tab(仅 module_p,平板不经过该页):

- 国内/国际 Tab:分组标题栏 + 三列宫格(PdaMenuGroup / PdaMenuRenderer),分组与顺序按设计稿;
  20 个入口换新图标(源 GIF/PNG 转 PNG 放 drawable-nodpi,放 xxhdpi 会先缩后放发糊),
  设计稿未覆盖的入口追加到组尾沿用旧图标
- 权限过滤 authList.contains(key) 与改版前逐字一致:ADMIN 账号入口集合改版前后 diff 为空
  (国内 9、国际 12),21 个入口逐个点击跳转目标不变
- 首页航班动态:卡片 + 国内/国际、进港/出港分段 + 日期卡片(‹ › 翻日)+ 浅色表格 + 设置悬浮钮;
  默认方向改为进港,日期统一补零,日期选择器从当前选中日期打开
- 底部 Tab 栏(16dp 图标与文字居中)、消息铃铛与角标(四个 Tab 统一位置、切换不再移动)、
  状态栏 #3B71E8;「我的」顶栏同步新导航栏样式;首页 AutoSize 基准 400 → 390
- 删除 module_p 中不再引用的旧菜单/Tab 图标副本
- CLAUDE.md / phone-adapt skill 更新首页菜单入口说明,补图标发糊、分段控件描边与取整两个坑

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-21 13:37:04 +08:00

695 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html class="w-full h-full overflow-hidden" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" 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>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: #F0F3F7;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
"HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Source Han Sans SC",
"Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
button {
font: inherit;
-webkit-tap-highlight-color: transparent;
}
/* 全页字体统一:覆盖 Tailwind 默认字体族,数字统一等宽 */
.app-frame,
.app-frame *,
.app-frame *::before,
.app-frame *::after {
font-family: inherit;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.app-frame {
width: 100%;
height: 100%;
max-width: min(393px, 100vw);
max-height: min(852px, 100vh);
display: flex;
flex-direction: column;
overflow: hidden;
background: #F5F7FA;
position: relative;
/* 以 360×640(5.51 寸 16:9)为小屏基准,宫格尺寸随视口宽度等比缩放 */
--tile-size: clamp(48px, 15.3vw, 60px);
--icon-size: calc(var(--tile-size) * 0.55);
--tag-size: clamp(28px, 8.9vw, 35px);
--tag-offset: calc(var(--tag-size) * 0.2);
--tag-line: calc(var(--tag-size) * 0.4);
--nav-height: 52px;
--tab-height: 68px;
}
.nav-bar {
height: var(--nav-height);
}
.nav-title {
font-size: clamp(16px, 4.8vw, 18px);
line-height: 1.3;
font-weight: 600;
letter-spacing: clamp(0px, 0.16vw, 0.3px);
}
.nav-bell {
width: clamp(30px, 9.4vw, 34px);
height: clamp(30px, 9.4vw, 34px);
}
.nav-bell iconify-icon {
width: clamp(22px, 6.9vw, 25px);
height: clamp(22px, 6.9vw, 25px);
}
.nav-badge {
min-width: clamp(21px, 6.7vw, 24px);
font-size: clamp(10px, 2.9vw, 11px);
line-height: clamp(14px, 4.2vw, 15px);
letter-spacing: 0;
}
.tab-bar {
height: var(--tab-height);
}
.tab-bar iconify-icon {
width: clamp(22px, 6.7vw, 24px);
height: clamp(22px, 6.7vw, 24px);
}
.tab-bar .tab-icon-stack {
width: clamp(25px, 7.5vw, 27px);
height: clamp(22px, 6.7vw, 24px);
}
.tab-bar .tab-icon-stack > iconify-icon:first-child {
width: clamp(20px, 6.1vw, 22px);
height: clamp(20px, 6.1vw, 22px);
}
.tab-bar .tab-icon-stack > iconify-icon:last-child {
width: clamp(15px, 4.7vw, 17px);
height: clamp(15px, 4.7vw, 17px);
}
.tab-bar .tab-label {
font-size: 11.5px;
line-height: 1.4;
font-weight: 400;
}
.tab-bar .tab-label.is-active {
font-weight: 500;
}
.status-bar {
height: clamp(26px, 8.3vw, 30px);
}
.main-scroll {
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-y: contain;
}
.main-scroll::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.group-bar {
height: 41px;
flex: none;
display: flex;
align-items: center;
gap: 10px;
padding: 0 24px;
background: #F4F6F9;
border-top: 1px solid #FFFFFF;
}
.group-title {
font-size: clamp(13px, 3.7vw, 14px);
line-height: 1.4;
font-weight: 400;
letter-spacing: 0.2px;
color: #16202A;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 0;
row-gap: clamp(12px, 4.6vw, 18px);
background: #ffffff;
padding: clamp(14px, 4.6vw, 18px) clamp(12px, 5vw, 18px) clamp(18px, 6vw, 24px);
}
.group-arrow {
display: block;
flex: none;
width: auto;
height: clamp(12px, 3.6vw, 15px);
object-fit: contain;
filter: drop-shadow(0 1px 1px rgba(37, 99, 235, 0.28));
}
.feature-card {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
transition: transform 140ms ease;
}
.feature-card:active {
transform: scale(0.94);
}
.icon-tile {
width: var(--tile-size);
height: var(--tile-size);
flex: none;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: calc(var(--tile-size) * 0.267);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
inset 0 -1px 0 rgba(255, 255, 255, 0.45),
0 6px 12px -7px rgba(54, 80, 99, 0.34);
}
.icon-tile::before {
content: "";
position: absolute;
top: calc(var(--tile-size) * 0.1);
left: calc(var(--tile-size) * 0.167);
width: calc(var(--tile-size) * 0.3);
height: calc(var(--tile-size) * 0.133);
border-radius: 999px;
background: rgba(255, 255, 255, 0.46);
filter: blur(2px);
pointer-events: none;
}
.icon-tile::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.5);
pointer-events: none;
}
.corner-tag {
position: absolute;
left: 0;
top: 0;
width: var(--tag-size);
height: var(--tag-size);
overflow: hidden;
border-top-left-radius: inherit;
pointer-events: none;
z-index: 3;
}
.corner-tag span {
position: absolute;
left: calc(var(--tag-size) * -0.429);
top: var(--tag-offset);
width: calc(var(--tag-size) * 1.714);
transform: rotate(-45deg);
background: linear-gradient(90deg, #4e97ff 0%, #2f7df6 53%, #2a73eb 100%);
color: #ffffff;
font-size: clamp(7px, 2.1vw, 8px);
line-height: var(--tag-line);
letter-spacing: 0.5px;
text-align: center;
font-weight: 500;
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.32);
}
.icon-main {
filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.22))
drop-shadow(0 3px 3px rgba(37, 56, 76, 0.18));
}
.icon-stage {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--icon-size);
height: var(--icon-size);
}
.icon-stage > iconify-icon {
width: calc(var(--icon-size) * 0.94);
height: calc(var(--icon-size) * 0.94);
}
.icon-stage > .icon-sub {
width: calc(var(--icon-size) * 0.62);
height: calc(var(--icon-size) * 0.62);
}
.icon-stage > .icon-mini {
width: calc(var(--icon-size) * 0.46);
height: calc(var(--icon-size) * 0.46);
}
.icon-tile.is-image {
color: transparent;
background: transparent;
box-shadow: 0 6px 12px -7px rgba(54, 80, 99, 0.26);
}
.icon-tile.is-image::before,
.icon-tile.is-image::after {
content: none;
}
.icon-tile.is-image > .tile-img {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
object-position: center;
-webkit-user-drag: none;
user-select: none;
}
.mini-accent {
position: absolute;
right: calc(var(--tile-size) * -0.13);
bottom: calc(var(--tile-size) * -0.115);
width: calc(var(--tile-size) * 0.283);
height: calc(var(--tile-size) * 0.283);
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 5px rgba(31, 48, 67, 0.12);
z-index: 4;
}
.mini-accent iconify-icon {
width: calc(var(--tile-size) * 0.19);
height: calc(var(--tile-size) * 0.19);
}
.feature-label {
margin-top: clamp(6px, 2.2vw, 10px);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
color: #2d3640;
font-size: clamp(12px, 3.4vw, 13px);
line-height: 1.3;
font-weight: 400;
letter-spacing: 0;
white-space: nowrap;
text-align: center;
}
.tile-purple {
color: #8b66f4;
background:
radial-gradient(circle at 29% 22%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 42%),
linear-gradient(145deg, #f7f2ff 0%, #ece3ff 60%, #e4d8ff 100%);
}
.tile-mint {
color: #67c8bb;
background:
radial-gradient(circle at 29% 22%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0) 42%),
linear-gradient(145deg, #effcf9 0%, #ddf8f2 58%, #d4f4ed 100%);
}
.tile-blue {
color: #4b8df5;
background:
radial-gradient(circle at 29% 22%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0) 42%),
linear-gradient(145deg, #f1f6ff 0%, #e6efff 60%, #dce8ff 100%);
}
.tile-pink {
color: #ee6f7d;
background:
radial-gradient(circle at 29% 22%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0) 42%),
linear-gradient(145deg, #fff3f4 0%, #ffe6e9 58%, #ffdde2 100%);
}
.tile-peach {
color: #f2a34b;
background:
radial-gradient(circle at 29% 22%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0) 42%),
linear-gradient(145deg, #fff8ee 0%, #ffefdd 60%, #ffe8cf 100%);
}
.tile-green {
color: #35ae8b;
background:
radial-gradient(circle at 29% 22%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0) 42%),
linear-gradient(145deg, #f0fcf8 0%, #e0f8f1 58%, #d7f5ec 100%);
}
.tab-button {
flex: 1;
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border: 0;
background: transparent;
color: #98A4B3;
cursor: pointer;
transition: color 140ms ease, transform 140ms ease;
}
.tab-button:active {
transform: scale(0.94);
}
.tab-button.is-active {
color: #3B71E8;
}
.toast {
position: absolute;
left: 50%;
bottom: 80px;
z-index: 60;
max-width: calc(100% - 44px);
width: max-content;
padding: 9px 16px;
border-radius: 999px;
background: rgba(29, 41, 57, 0.9);
color: #ffffff;
font-size: 12px;
line-height: 1.5;
text-align: center;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 8px);
transition: opacity 180ms ease, transform 180ms ease;
box-shadow: 0 8px 24px rgba(18, 33, 49, 0.18);
backdrop-filter: blur(8px);
}
.toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* 5.51 寸小屏(窄屏或矮屏)收紧纵向节奏,保证首屏完整 */
@media (max-width: 374px), (max-height: 760px) {
.app-frame {
--nav-height: 46px;
--tab-height: 58px;
--tag-offset: 5.4px;
--tag-line: 13px;
}
.group-bar {
height: 35px;
gap: 8px;
padding: 0 16px;
}
.nav-title {
font-size: 16px;
}
.group-title {
font-size: 13px;
}
.feature-label {
font-size: 12px;
}
.tab-bar .tab-label {
font-size: 11px;
}
.group-arrow {
height: 12px;
}
.feature-grid {
row-gap: 12px;
padding: 14px 12px 18px;
}
.toast {
bottom: 72px;
font-size: 11px;
line-height: 1.5;
padding: 8px 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.feature-card,
.tab-button,
.toast {
transition: none;
}
}
</style>
</head>
<body>
<div class="app-frame">
<!-- 顶部系统状态栏 -->
<header class="flex-none bg-[#3B71E8] text-white">
<div class="status-bar flex items-center justify-between px-3">
<div class="flex items-center gap-[7px]">
<span class="text-[11.5px] font-semibold tracking-[0.2px]">16:48</span>
</div>
<div aria-label="Wi-Fi" class="flex min-w-0 items-center gap-[5px]">
<iconify-icon class="opacity-95" height="14" icon="mdi:wifi" width="14"></iconify-icon>
</div>
</div>
</header>
<!-- 蓝色导航栏 -->
<nav aria-label="国际业务导航栏" class="nav-bar relative z-20 flex flex-none items-center justify-center bg-[#3B71E8] text-white">
<h1 class="nav-title">国际业务</h1>
<button aria-label="通知,341 条消息" class="nav-bell absolute right-[12px] top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full active:bg-white/10" onclick="showNotificationToast()" type="button">
<iconify-icon class="drop-shadow-[0_1px_1px_rgba(0,0,0,0.12)]" icon="mdi:bell-outline"></iconify-icon>
<span class="nav-badge absolute -right-[2px] top-[0px] rounded-full bg-[#e1192d] px-[4px] text-center font-semibold text-white shadow-[0_1px_2px_rgba(145,16,31,0.35)]">341</span>
</button>
</nav>
<!-- 主内容滚动区 -->
<main class="main-scroll min-h-0 flex-1 overflow-y-auto overflow-x-hidden bg-[#F5F7FA]" id="mainContent">
<!-- 国际出港 -->
<section aria-labelledby="outbound-title">
<div class="group-bar">
<img alt="" aria-hidden="true" class="group-arrow" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/f48cf8269922458abee299bf1f4bdfae.png"/>
<h2 class="group-title" id="outbound-title">国际出港</h2>
</div>
<div class="feature-grid">
<button aria-label="出港计重" class="feature-card" onclick="openFeature('出港计重')" type="button">
<span class="icon-tile is-image">
<img alt="出港计重图标" class="tile-img" draggable="false" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/1e9507a32e7c45dea0362c3cc87b98c2.gif"/>
</span>
<span class="feature-label">出港计重</span>
</button>
<button aria-label="出港抵运" class="feature-card" onclick="openFeature('出港抵运')" type="button">
<span class="icon-tile is-image">
<img alt="出港抵运图标" class="tile-img" draggable="false" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/1c4971c9a2d9459da4ee19b5b5431bf1.gif"/>
</span>
<span class="feature-label">出港抵运</span>
</button>
<button aria-label="出港交接" class="feature-card" onclick="openFeature('出港交接')" type="button">
<span class="icon-tile is-image">
<img alt="出港交接图标" class="tile-img" draggable="false" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/460f6760462b4690823a98613894ce6e.gif"/>
</span>
<span class="feature-label">出港交接</span>
</button>
<button aria-label="出港移库" class="feature-card" onclick="openFeature('出港移库')" type="button">
<span class="icon-tile is-image">
<img alt="出港移库图标" class="tile-img" draggable="false" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/0bc7fe8fff684d748b0b27f2a120c6ed.gif"/>
</span>
<span class="feature-label">出港移库</span>
</button>
<button aria-label="出港仓库" class="feature-card" onclick="openFeature('出港仓库')" type="button">
<span class="icon-tile is-image">
<img alt="出港仓库图标" class="tile-img" draggable="false" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/18258a4775944c13b120d486ea13e925.gif"/>
</span>
<span class="feature-label">出港仓库</span>
</button>
<button aria-label="出港查询" class="feature-card" onclick="openFeature('出港查询')" type="button">
<span class="icon-tile is-image">
<img alt="出港查询图标" class="tile-img" draggable="false" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/6c6fa3ed9a1449f1a704dbb6415814a1.png"/>
</span>
<span class="feature-label">出港查询</span>
</button>
</div>
</section>
<!-- 国际进港 -->
<section aria-labelledby="inbound-title">
<div class="group-bar">
<img alt="" aria-hidden="true" class="group-arrow" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/f48cf8269922458abee299bf1f4bdfae.png"/>
<h2 class="group-title" id="inbound-title">国际进港</h2>
</div>
<div class="feature-grid">
<button aria-label="进港理货" class="feature-card" onclick="openFeature('进港理货')" type="button">
<span class="icon-tile is-image">
<img alt="进港理货图标" class="tile-img" draggable="false" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/cc9965b937344aca99bdf329fea23e91.gif"/>
</span>
<span class="feature-label">进港理货</span>
</button>
<button aria-label="提取出库" class="feature-card" onclick="openFeature('提取出库')" type="button">
<span class="icon-tile is-image">
<img alt="提取出库图标" class="tile-img" draggable="false" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/7bcf76ae718e4da9a784a7003c3884a7.gif"/>
</span>
<span class="feature-label">提取出库</span>
</button>
<button aria-label="进港仓库" class="feature-card" onclick="openFeature('进港仓库')" type="button">
<span class="icon-tile is-image">
<img alt="进港仓库图标" class="tile-img" draggable="false" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/2d325743d7004623a87c3982190fe1d9.gif"/>
</span>
<span class="feature-label">进港仓库</span>
</button>
<button aria-label="进港查询" class="feature-card" onclick="openFeature('进港查询')" type="button">
<span class="icon-tile is-image">
<img alt="进港查询图标" class="tile-img" draggable="false" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/0fd94c77b8c644b8bb37c1b5d471fcaf.gif"/>
</span>
<span class="feature-label">进港查询</span>
</button>
</div>
</section>
<!-- 综合管理 -->
<section aria-labelledby="manage-title" class="pb-2">
<div class="group-bar">
<img alt="" aria-hidden="true" class="group-arrow" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/f48cf8269922458abee299bf1f4bdfae.png"/>
<h2 class="group-title" id="manage-title">综合管理</h2>
</div>
<div class="feature-grid" style="padding-bottom: clamp(16px, 5.6vw, 22px);">
<button aria-label="ULD管理" class="feature-card" onclick="openFeature('ULD管理')" type="button">
<span class="icon-tile is-image">
<img alt="ULD管理图标" class="tile-img" draggable="false" src="https://modao.cc/agent-py/media/generated_images/2026-10-20/7b2321b0f277416abad0b61252c5730a.gif"/>
</span>
<span class="feature-label">ULD管理</span>
</button>
</div>
</section>
</main>
<!-- 底部 Tab 栏 -->
<nav aria-label="底部导航" class="tab-bar relative z-30 flex flex-none items-stretch border-t border-[#EDF0F4] bg-white pb-[4px] shadow-[0_-1px_2px_rgba(16,24,40,0.04)]">
<button aria-label="首页" class="tab-button" onclick="switchTab('首页')" type="button">
<iconify-icon icon="mdi:home-outline"></iconify-icon>
<span class="tab-label">首页</span>
</button>
<button aria-label="国内" class="tab-button" onclick="switchTab('国内')" type="button">
<iconify-icon icon="mdi:earth"></iconify-icon>
<span class="tab-label">国内</span>
</button>
<button aria-current="page" aria-label="国际,当前页面" class="tab-button is-active" onclick="switchTab('国际')" type="button">
<span class="tab-icon-stack relative inline-flex items-center justify-center">
<iconify-icon class="absolute bottom-0 left-0" icon="mdi:earth"></iconify-icon>
<iconify-icon class="absolute right-0 top-0 -rotate-[14deg]" icon="mdi:airplane"></iconify-icon>
</span>
<span class="tab-label is-active">国际</span>
</button>
<button aria-label="我的" class="tab-button" onclick="switchTab('我的')" type="button">
<iconify-icon icon="mdi:account-circle-outline"></iconify-icon>
<span class="tab-label">我的</span>
</button>
</nav>
<div aria-live="polite" class="toast" id="toast" role="status"></div>
</div>
<script>
let toastTimer = null;
function showToast(message) {
const toast = document.getElementById("toast");
if (!toast) return;
toast.textContent = message;
toast.classList.add("is-visible");
if (toastTimer) {
clearTimeout(toastTimer);
}
toastTimer = setTimeout(function () {
toast.classList.remove("is-visible");
}, 1800);
}
function openFeature(name) {
showToast(name + " · 功能即将开放");
}
function showNotificationToast() {
showToast("您有 341 条待处理消息");
}
function switchTab(name) {
if (name === "首页") {
window.location.href = "dashboard.html";
return;
}
if (name === "国内") {
window.location.href = "domestic.html";
return;
}
if (name === "国际") {
const main = document.getElementById("mainContent");
if (main) {
main.scrollTo({ top: 0, behavior: "smooth" });
}
showToast("当前已在国际业务");
return;
}
showToast(name + "模块暂未接入");
}
</script>
</body>
</html>