542c35b22d
按 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>
536 lines
16 KiB
HTML
536 lines
16 KiB
HTML
<!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);
|
||
--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.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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="dom-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="dom-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/4dfe2842e40947c9916d27c6da2829a9.png"/>
|
||
</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/d209b04e82874625ae8977733789486a.png"/>
|
||
</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/3655ce17a68b4090870f929d7a510c64.png"/>
|
||
</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/934528d010e74d1690dce7b20cee545c.png"/>
|
||
</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/9c2d255f57d6416ab18713b02431023e.png"/>
|
||
</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/50e01da375de4c1bb4574401ba60500c.png"/>
|
||
</span>
|
||
<span class="feature-label">转运记录</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
<!-- 国内进港 -->
|
||
<section aria-labelledby="dom-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="dom-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/153ca414db114dd487852b22727fb38f.png"/>
|
||
</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/2dc4ad4cc1884f4692da574db217e91e.png"/>
|
||
</span>
|
||
<span class="feature-label">进港移库</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
<!-- 综合管理 -->
|
||
<section aria-labelledby="dom-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="dom-manage-title">综合管理</h2>
|
||
</div>
|
||
<div class="feature-grid" style="padding-bottom: clamp(16px, 5.6vw, 22px);">
|
||
<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/2d2e97049ef44cfabbf1ed051702d567.png"/>
|
||
</span>
|
||
<span class="feature-label">事故签证</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-current="page" aria-label="国内，当前页面" class="tab-button is-active" onclick="switchTab('国内')" type="button">
|
||
<iconify-icon icon="mdi:earth"></iconify-icon>
|
||
<span class="tab-label is-active">国内</span>
|
||
</button>
|
||
<button aria-label="国际" class="tab-button" 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">国际</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 = "home.html";
|
||
return;
|
||
}
|
||
|
||
if (name === "国内") {
|
||
const main = document.getElementById("mainContent");
|
||
if (main) {
|
||
main.scrollTo({ top: 0, behavior: "smooth" });
|
||
}
|
||
showToast("当前已在国内业务");
|
||
return;
|
||
}
|
||
|
||
showToast(name + "模块暂未接入");
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|