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>
881
documents/5.5寸首页新样式/5.5设计图html/dashboard.html
Normal file
@@ -0,0 +1,881 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
.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;
|
||||
--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(18px, 5.6vw, 20px);
|
||||
height: clamp(18px, 5.6vw, 20px);
|
||||
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
|
||||
.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;
|
||||
/* 为右下角悬浮的设置按钮留出避让空间,滚到底时列表不被遮挡 */
|
||||
padding-bottom: calc(52px + var(--tab-height) + 16px + 20px);
|
||||
}
|
||||
|
||||
.main-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* 航班动态设置:右下角悬浮按钮,抬升到 tab 栏之上 */
|
||||
.settings-fab {
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
right: 16px;
|
||||
bottom: calc(var(--tab-height) + 16px);
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: #E8EFFD;
|
||||
color: #3B71E8;
|
||||
transform: translateZ(0);
|
||||
box-shadow: 0 4px 14px rgba(31, 42, 51, 0.14);
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
transition: transform 140ms ease, box-shadow 140ms ease;
|
||||
}
|
||||
|
||||
.settings-fab:active {
|
||||
transform: translateZ(0) scale(0.96);
|
||||
box-shadow: 0 2px 8px rgba(31, 42, 51, 0.18);
|
||||
}
|
||||
|
||||
.settings-fab:focus-visible {
|
||||
outline: 2px solid rgba(59, 113, 232, 0.55);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.settings-fab .settings-fab-icon {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 主卡片:白卡 + 1px 描边 + 轻阴影,与两页统一 */
|
||||
.flight-card {
|
||||
margin: clamp(10px, 3vw, 14px);
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EDF0F4;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: 10px clamp(10px, 3.4vw, 14px);
|
||||
border-bottom: 1px solid #EEF1F5;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
flex: none;
|
||||
font-size: clamp(13px, 3.7vw, 14px);
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.2px;
|
||||
color: #16202A;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scope-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex: none;
|
||||
padding: 2px;
|
||||
border-radius: 999px;
|
||||
background: #F4F6F9;
|
||||
border: 1px solid #EDF0F4;
|
||||
/* 作为筛选行中的一个平级项,宽度按内容自适应,不拉伸 */
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.scope-option {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
padding: 0 clamp(5px, 1.6vw, 8px);
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: #6B7A8D;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: background-color 140ms ease, color 140ms ease;
|
||||
}
|
||||
|
||||
.scope-option.is-active {
|
||||
background: #3B71E8;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 筛选行:国内/国际、进港/出港、日期控件为三个平级项。
|
||||
控件本体按内容自适应,不拉伸;两段间隙为 flex 弹性间隔,
|
||||
各占剩余空间的一半,因此首项贴左内边距、末项贴右内边距 */
|
||||
.card-head > .scope-group,
|
||||
.card-head > .date-group {
|
||||
flex: 0 0 auto;
|
||||
max-width: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-head > .gap-flex {
|
||||
flex: 1 1 0%;
|
||||
min-width: 0;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.date-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
flex: none;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
width: 30px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
border: 1px solid #EDF0F4;
|
||||
border-radius: 7px;
|
||||
background: #FFFFFF;
|
||||
color: #3B71E8;
|
||||
font-size: 8px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.2px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||
transition: border-color 140ms ease, box-shadow 140ms ease;
|
||||
}
|
||||
|
||||
.date-picker:focus-visible,
|
||||
.date-picker.is-open {
|
||||
border-color: #3B71E8;
|
||||
box-shadow: 0 0 0 2px rgba(59, 113, 232, 0.14), 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.date-picker .date-month {
|
||||
font-size: 8px;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: #98A4B3;
|
||||
}
|
||||
|
||||
.date-picker .date-day {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
color: #3B71E8;
|
||||
}
|
||||
|
||||
.date-step {
|
||||
flex: none;
|
||||
width: 22px;
|
||||
height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #16202A;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.date-picker + .date-step,
|
||||
.date-step + .date-picker {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.date-step.is-next {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.date-step iconify-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dir-tab {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0 clamp(5px, 1.6vw, 8px);
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6B7A8D;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background-color 140ms ease, color 140ms ease;
|
||||
}
|
||||
|
||||
.dir-tab.is-active {
|
||||
background: #3B71E8;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dir-tab + .dir-tab {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* 导航栏右侧图标组:仅铃铛 */
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.nav-icon-btn {
|
||||
position: relative;
|
||||
flex: none;
|
||||
width: clamp(32px, 10vw, 34px);
|
||||
height: clamp(32px, 10vw, 34px);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
transition: background-color 140ms ease, opacity 140ms ease;
|
||||
}
|
||||
|
||||
.nav-icon-btn:active {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.nav-icon-btn:focus-visible {
|
||||
outline: 2px solid rgba(255, 255, 255, 0.7);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.nav-icon-btn iconify-icon {
|
||||
width: clamp(17px, 5.4vw, 19px);
|
||||
height: clamp(17px, 5.4vw, 19px);
|
||||
}
|
||||
|
||||
.table-head {
|
||||
display: grid;
|
||||
grid-template-columns: 0.95fr 1fr 1.05fr 1fr;
|
||||
align-items: center;
|
||||
background: #F4F6F9;
|
||||
border-bottom: 1px solid #EEF1F5;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.table-head span {
|
||||
padding: 9px 4px;
|
||||
text-align: center;
|
||||
color: #6B7A8D;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
flex: 1;
|
||||
min-height: 120px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.flight-row {
|
||||
display: grid;
|
||||
grid-template-columns: 0.95fr 1fr 1.05fr 1fr;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
border-bottom: 1px solid #EEF1F5;
|
||||
}
|
||||
|
||||
.flight-row span {
|
||||
padding: 9px 4px;
|
||||
text-align: center;
|
||||
color: #16202A;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tab-bar .tab-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.flight-card {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
gap: 0;
|
||||
padding: 8px 9px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.scope-group {
|
||||
gap: 2px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.scope-option,
|
||||
.dir-tab {
|
||||
font-size: 11.5px;
|
||||
height: 22px;
|
||||
padding: 0 clamp(4px, 1.3vw, 7px);
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
width: 27px;
|
||||
height: 31px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.settings-fab {
|
||||
right: 12px;
|
||||
bottom: calc(var(--tab-height) + 12px);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.settings-fab .settings-fab-icon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.date-picker .date-month {
|
||||
font-size: 7px;
|
||||
}
|
||||
|
||||
.date-picker .date-day {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.date-step {
|
||||
width: 19px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
.date-step iconify-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.dir-tab {
|
||||
height: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-head span {
|
||||
padding: 8px 2px;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.flight-row span {
|
||||
padding: 8px 2px;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
bottom: 72px;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.tab-button,
|
||||
.nav-icon-btn,
|
||||
.settings-fab,
|
||||
.toast {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 359px) {
|
||||
.table-head,
|
||||
.flight-row {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.table-head span,
|
||||
.flight-row span {
|
||||
padding: 8px 1px;
|
||||
font-size: 10.5px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
<div class="nav-actions absolute right-[8px] top-1/2 -translate-y-1/2">
|
||||
<button aria-label="通知,507 条消息" class="nav-icon-btn text-white" 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)]">507</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- 主内容滚动区 -->
|
||||
<main class="main-scroll min-h-0 flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-[#F5F7FA]" id="mainContent">
|
||||
<section aria-label="航班动态" class="flight-card">
|
||||
<!-- 首行:国内/国际 + 进港/出港分段 + 图标式日期 -->
|
||||
<div class="card-head">
|
||||
<div aria-label="国内国际" class="scope-group" role="radiogroup">
|
||||
<button aria-checked="true" class="scope-option is-active" data-scope="国内" onclick="selectScope(this)" role="radio" type="button">国内</button>
|
||||
<button aria-checked="false" class="scope-option" data-scope="国际" onclick="selectScope(this)" role="radio" type="button">国际</button>
|
||||
</div>
|
||||
<span aria-hidden="true" class="gap-flex"></span>
|
||||
<div aria-label="进港出港方向" class="scope-group" role="radiogroup">
|
||||
<button aria-checked="true" class="dir-tab is-active" data-dir="进港" onclick="selectDirection(this)" role="radio" type="button">进港</button>
|
||||
<button aria-checked="false" class="dir-tab" data-dir="出港" onclick="selectDirection(this)" role="radio" type="button">出港</button>
|
||||
</div>
|
||||
<span aria-hidden="true" class="gap-flex"></span>
|
||||
<div class="date-group">
|
||||
<button aria-label="前一天" class="date-step date-step-prev" data-date-step="-1" onclick="stepDate(-1)" type="button">
|
||||
<iconify-icon height="18" icon="mdi:chevron-left" width="18"></iconify-icon>
|
||||
</button>
|
||||
<button aria-label="选择日期" class="date-picker" id="datePicker" type="button">
|
||||
<span class="date-month" id="dateMonth">10月</span>
|
||||
<span class="date-day" id="dateDay">20</span>
|
||||
<input aria-label="日期" class="date-input" id="dateInput" type="date" value="2026-10-20"/>
|
||||
</button>
|
||||
<button aria-label="后一天" class="date-step is-next" data-date-step="1" onclick="stepDate(1)" type="button">
|
||||
<iconify-icon height="18" icon="mdi:chevron-right" width="18"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表头 -->
|
||||
<div class="table-head" role="row">
|
||||
<span role="columnheader">航班号</span>
|
||||
<span role="columnheader">航程</span>
|
||||
<span role="columnheader">地区类型</span>
|
||||
<span role="columnheader">计划起飞</span>
|
||||
</div>
|
||||
<!-- 数据区 -->
|
||||
<div aria-label="航班动态列表" class="table-body">
|
||||
<div class="flight-row" role="row">
|
||||
<span role="cell">MU2222</span>
|
||||
<span role="cell">HFE-PEK</span>
|
||||
<span role="cell">国内</span>
|
||||
<span role="cell">12:20</span>
|
||||
</div>
|
||||
<div class="flight-row" role="row">
|
||||
<span role="cell">MU6895</span>
|
||||
<span role="cell">HFE-LAX</span>
|
||||
<span role="cell">国际</span>
|
||||
<span role="cell">02:26</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- 右下角悬浮:航班动态设置 -->
|
||||
<button aria-label="航班动态设置" class="settings-fab" onclick="showToast('航班动态设置')" type="button">
|
||||
<svg aria-hidden="true" class="settings-fab-icon" focusable="false" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" fill="#3B71E8"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- 底部 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-current="page" aria-label="首页,当前页面" class="tab-button is-active" onclick="switchTab('首页')" type="button">
|
||||
<iconify-icon icon="mdi:home"></iconify-icon>
|
||||
<span class="tab-label is-active">首页</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-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 showNotificationToast() {
|
||||
showToast("您有 507 条待处理消息");
|
||||
}
|
||||
|
||||
function selectScope(target) {
|
||||
const options = document.querySelectorAll(".scope-option");
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
const isTarget = options[i] === target;
|
||||
options[i].classList.toggle("is-active", isTarget);
|
||||
options[i].setAttribute("aria-checked", isTarget ? "true" : "false");
|
||||
}
|
||||
}
|
||||
|
||||
function selectDirection(target) {
|
||||
const tabs = document.querySelectorAll(".dir-tab");
|
||||
for (let i = 0; i < tabs.length; i++) {
|
||||
const isTarget = tabs[i] === target;
|
||||
tabs[i].classList.toggle("is-active", isTarget);
|
||||
tabs[i].setAttribute("aria-checked", isTarget ? "true" : "false");
|
||||
}
|
||||
}
|
||||
|
||||
function switchTab(name) {
|
||||
if (name === "国内") {
|
||||
window.location.href = "domestic.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 + "模块暂未接入");
|
||||
}
|
||||
|
||||
(function () {
|
||||
const datePicker = document.getElementById("datePicker");
|
||||
const dateInput = document.getElementById("dateInput");
|
||||
const dateMonth = document.getElementById("dateMonth");
|
||||
const dateDay = document.getElementById("dateDay");
|
||||
if (!datePicker || !dateInput || !dateMonth || !dateDay) return;
|
||||
|
||||
function renderDate(value) {
|
||||
if (!value) return;
|
||||
const parts = value.split("-");
|
||||
const month = parseInt(parts[1], 10);
|
||||
const day = parseInt(parts[2], 10);
|
||||
if (!month || !day) return;
|
||||
dateMonth.textContent = month + "月";
|
||||
dateDay.textContent = String(day);
|
||||
datePicker.setAttribute("aria-label", "选择日期,当前 " + month + "月" + day + "日");
|
||||
}
|
||||
|
||||
window.stepDate = function (offset) {
|
||||
const parts = dateInput.value.split("-");
|
||||
const current = new Date(
|
||||
parseInt(parts[0], 10) || 2026,
|
||||
(parseInt(parts[1], 10) || 1) - 1,
|
||||
parseInt(parts[2], 10) || 1
|
||||
);
|
||||
current.setDate(current.getDate() + offset);
|
||||
const y = current.getFullYear();
|
||||
const m = String(current.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(current.getDate()).padStart(2, "0");
|
||||
dateInput.value = y + "-" + m + "-" + d;
|
||||
renderDate(dateInput.value);
|
||||
};
|
||||
|
||||
renderDate(dateInput.value);
|
||||
|
||||
datePicker.addEventListener("click", function (event) {
|
||||
if (event.target === dateInput) return;
|
||||
if (typeof dateInput.showPicker === "function") {
|
||||
try {
|
||||
dateInput.showPicker();
|
||||
} catch (error) {
|
||||
dateInput.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
dateInput.addEventListener("focus", function () {
|
||||
datePicker.classList.add("is-open");
|
||||
});
|
||||
|
||||
dateInput.addEventListener("blur", function () {
|
||||
datePicker.classList.remove("is-open");
|
||||
});
|
||||
|
||||
dateInput.addEventListener("change", function () {
|
||||
if (dateInput.value) {
|
||||
renderDate(dateInput.value);
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
535
documents/5.5寸首页新样式/5.5设计图html/domestic.html
Normal file
@@ -0,0 +1,535 @@
|
||||
<!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>
|
||||
694
documents/5.5寸首页新样式/5.5设计图html/home.html
Normal file
@@ -0,0 +1,694 @@
|
||||
<!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>
|
||||
BIN
documents/5.5寸首页新样式/icons/国内/guonei_03.png
Normal file
|
After Width: | Height: | Size: 7.1 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_05.png
Normal file
|
After Width: | Height: | Size: 7.7 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_07.png
Normal file
|
After Width: | Height: | Size: 7.8 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_13.png
Normal file
|
After Width: | Height: | Size: 7.7 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_15.png
Normal file
|
After Width: | Height: | Size: 8.1 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_17.png
Normal file
|
After Width: | Height: | Size: 8.5 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_22.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_23.png
Normal file
|
After Width: | Height: | Size: 8.5 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_26.png
Normal file
|
After Width: | Height: | Size: 7.4 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_03.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_07.gif
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_09.gif
Normal file
|
After Width: | Height: | Size: 5.6 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_11.gif
Normal file
|
After Width: | Height: | Size: 5.6 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_16.png
Normal file
|
After Width: | Height: | Size: 9.7 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_17.gif
Normal file
|
After Width: | Height: | Size: 5.5 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_19.gif
Normal file
|
After Width: | Height: | Size: 6.0 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_24.gif
Normal file
|
After Width: | Height: | Size: 5.5 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_26.gif
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_28.gif
Normal file
|
After Width: | Height: | Size: 5.4 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_33.gif
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_35.gif
Normal file
|
After Width: | Height: | Size: 5.7 KiB |