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>
This commit is contained in:
YANG JIANKUAN
@@ -183,14 +183,16 @@ if (DeviceUtil.isPhone()) viewModel.initPhoneExtras()
|
|||||||
手机端首页是 `module_p` 的 `PDAEnterActivity`，「国际」Tab 的菜单在
|
手机端首页是 `module_p` 的 `PDAEnterActivity`，「国际」Tab 的菜单在
|
||||||
`module_p/.../ui/enter/gj/GjViewModel.kt`（国内在 `gn/GnViewModel.kt`）。
|
`module_p/.../ui/enter/gj/GjViewModel.kt`（国内在 `gn/GnViewModel.kt`）。
|
||||||
**菜单是手写清单，不是接口下发**；权限串只做过滤（`authList.contains(bean.key)`）。
|
**菜单是手写清单，不是接口下发**；权限串只做过滤（`authList.contains(bean.key)`）。
|
||||||
|
2026-10-21 起清单按 `documents/5.5寸首页新样式/` 设计稿分组（`PdaMenuGroup`），新入口加进对应分组。
|
||||||
|
|
||||||
适配完页面不回来加一行，手机上就**根本没有入口**——出库交接第一版就漏了这步，
|
适配完页面不回来加一行，手机上就**根本没有入口**——出库交接第一版就漏了这步，
|
||||||
只能靠 adb 直启才能进去。加法：
|
只能靠 adb 直启才能进去。加法：
|
||||||
|
|
||||||
```kotlin
|
```kotlin
|
||||||
|
// 加在 GjViewModel.groups 的「国际出港」分组里
|
||||||
ActionBean(
|
ActionBean(
|
||||||
"出港移库",
|
"出港移库",
|
||||||
R.drawable.gjc_yi_ku_icon, // 图标复用 Pad 同款，复制 PNG 到 module_p/res/drawable-xxhdpi/
|
R.drawable.img_pda_menu_gjc_move, // 设计稿宫格图标（icons/ 源图转 PNG 放 drawable-nodpi，放 xxhdpi 会糊）；没有新图标的沿用旧图标
|
||||||
Constant.AuthName.GjcYiKuListActivity, // 权限串与 Pad 端菜单一致
|
Constant.AuthName.GjcYiKuListActivity, // 权限串与 Pad 端菜单一致
|
||||||
ARouterConstants.ACTIVITY_URL_INT_EXP_MOVE // 填了 route 就走通用跳转，无需 when 分支
|
ARouterConstants.ACTIVITY_URL_INT_EXP_MOVE // 填了 route 就走通用跳转，无需 when 分支
|
||||||
),
|
),
|
||||||
|
|||||||
12
CHANGELOG.md
12
CHANGELOG.md
@@ -8,6 +8,18 @@
|
|||||||
## [Unreleased]
|
## [Unreleased]
|
||||||
|
|
||||||
### 变更 (Changed)
|
### 变更 (Changed)
|
||||||
|
- 【5.5 寸首页改版 · 2026-10-21】手持端首页 `PDAEnterActivity` 四个 Tab 按 `documents/5.5寸首页新样式/` 设计稿
|
||||||
|
1:1 还原（仅 module_p，平板不经过该页，零影响）：
|
||||||
|
① 国内/国际 Tab 改为「分组标题栏 + 三列宫格」（新增 `PdaMenuGroup` / `PdaMenuRenderer`），分组与顺序按设计稿，
|
||||||
|
20 个入口换设计稿新图标（源 GIF/PNG 统一转 PNG 放 drawable-nodpi——放 xxhdpi 实测解码后再放大发糊），
|
||||||
|
设计稿未画的入口追加到组尾沿用旧图标；
|
||||||
|
权限过滤 `authList.contains(key)` 与改版前逐字一致——ADMIN 账号改版前后入口集合 diff 为空（国内 9、国际 12），
|
||||||
|
21 个入口逐个点击跳转目标与原映射一致。
|
||||||
|
② 首页航班动态改为卡片 + 国内/国际、进港/出港分段 + 日期卡片（‹ › 前后翻日）+ 浅色表格 + 右下设置悬浮钮；
|
||||||
|
默认方向按设计稿改为「进港」；日期改为补零格式（原选择器会写出 `2026-10-5`），选择器从当前选中日期打开。
|
||||||
|
③ 底部 Tab 栏、消息铃铛与角标、状态栏（#3B71E8）按设计稿重做（Tab 图标 16dp 并与文字水平居中，
|
||||||
|
不照搬设计稿偏左上的 16px 图形），「我的」顶栏同步新导航栏样式；分段控件 padding 计入 1dp 描边以上下居中；消息铃铛四个 Tab 统一按国内/国际设计稿位置（首页设计稿略有偏差），切 Tab 不再移动；
|
||||||
|
首页 AutoSize 基准由 400 改为设计稿画布 390。删除 module_p 中不再引用的旧菜单/Tab 图标副本 19 个。
|
||||||
- 【手机适配分支合入主干 · 2026-10-11】`feature/phone-ui-adaptation` 合并入 `main`，此后平板与 5.5 寸手机只在
|
- 【手机适配分支合入主干 · 2026-10-11】`feature/phone-ui-adaptation` 合并入 `main`，此后平板与 5.5 寸手机只在
|
||||||
`main` 上同时开发。合并以平板业务为准：
|
`main` 上同时开发。合并以平板业务为准：
|
||||||
① 主干 58 个平板提交（运抵海关放行/运抵状态筛选/海关回执、出库交接装机状态/允许装机、出港移库详情与侧滑编辑、
|
① 主干 58 个平板提交（运抵海关放行/运抵状态筛选/海关回执、出库交接装机状态/允许装机、出港移库详情与侧滑编辑、
|
||||||
|
|||||||
46
CLAUDE.md
46
CLAUDE.md
@@ -1012,9 +1012,11 @@ Manifest 写死 `userLandscape` 时，即使 `BaseActivity` 在 `super.onCreate`
|
|||||||
| 国内 | `GnViewModel` | `module_p/.../ui/enter/gn/` |
|
| 国内 | `GnViewModel` | `module_p/.../ui/enter/gn/` |
|
||||||
| 国际 | `GjViewModel` | `module_p/.../ui/enter/gj/` |
|
| 国际 | `GjViewModel` | `module_p/.../ui/enter/gj/` |
|
||||||
|
|
||||||
**菜单项是手写清单，不是接口下发**。权限机制只做过滤：登录返回的权限串存在
|
**菜单项是手写清单，不是接口下发**。登录接口只下发「分组 → 权限码」（`auths`，形如
|
||||||
`SharedPreferenceUtil.getString(Constant.Share.authList)`（一个逗号分隔的长字符串），
|
`{"IntExp":["AppIntExpCheckWeighing",…],"Supervision":[…]}`，存在
|
||||||
菜单项按 `authList.contains(bean.key)` 决定显不显示。
|
`SharedPreferenceUtil.getString(Constant.Share.authList)`），菜单名称/图标/跳转在平板和手机上都是前端写死的映射。
|
||||||
|
手机端菜单项按 `authList.contains(bean.key)` 决定显不显示（`PdaMenuGroup.kt` 的 `filterByAuth()`，
|
||||||
|
**2026-10-21 首页改版时刻意保持与改版前逐字一致**，保证同一账号的入口集合不变）。
|
||||||
|
|
||||||
所以「适配完页面但手机首页看不到入口」的原因通常**不是没权限，而是清单里没加**。
|
所以「适配完页面但手机首页看不到入口」的原因通常**不是没权限，而是清单里没加**。
|
||||||
排查顺序：先确认权限串里有对应 key，再去看清单。
|
排查顺序：先确认权限串里有对应 key，再去看清单。
|
||||||
@@ -1025,25 +1027,43 @@ adb -s <serial> shell "run-as com.lukouguoji.aerologic \
|
|||||||
cat /data/data/com.lukouguoji.aerologic/shared_prefs/data.xml" | tr ',' '\n' | grep -oE "App[A-Za-z]+" | sort -u
|
cat /data/data/com.lukouguoji.aerologic/shared_prefs/data.xml" | tr ',' '\n' | grep -oE "App[A-Za-z]+" | sort -u
|
||||||
```
|
```
|
||||||
|
|
||||||
加一项就是加一行 —— `ActionBean` 的第 4 个参数填 ARouter 路由即可，无需写 when 分支
|
**2026-10-21 起首页按 `documents/5.5寸首页新样式/` 设计稿改版**：清单按设计稿分组
|
||||||
|
（`PdaMenuGroup(标题, 入口列表)`，如国际 Tab =「国际出港 / 国际进港 / 综合管理」），
|
||||||
|
由 `PdaMenuRenderer` 渲染成「分组标题栏 + 三列宫格」，过滤后为空的分组整组隐藏。
|
||||||
|
**分组口径以设计稿为准，不是接口的 auths 分组**（例如单证交接/转运记录在接口里属 Supervision，
|
||||||
|
设计稿放在「国内出港」）。
|
||||||
|
|
||||||
|
加一项就是在对应分组里加一行 —— `ActionBean` 的第 4 个参数填 ARouter 路由即可，无需写 when 分支
|
||||||
（`module_p` 只依赖 `module_base`，看不到 `module_gjc` 等业务模块，跨模块只能走路由）：
|
（`module_p` 只依赖 `module_base`，看不到 `module_gjc` 等业务模块，跨模块只能走路由）：
|
||||||
|
|
||||||
```kotlin
|
```kotlin
|
||||||
ActionBean(
|
PdaMenuGroup(
|
||||||
"出港移库",
|
"国际出港", listOf(
|
||||||
R.drawable.gjc_yi_ku_icon, // 图标复用 Pad 端同款
|
ActionBean(
|
||||||
Constant.AuthName.GjcYiKuListActivity, // 权限串，与 Pad 端菜单保持一致
|
"出港移库",
|
||||||
ARouterConstants.ACTIVITY_URL_INT_EXP_MOVE // 有 route 就走通用跳转
|
R.drawable.img_pda_menu_gjc_move, // 设计稿新版宫格图标
|
||||||
|
Constant.AuthName.GjcYiKuListActivity, // 权限串，与 Pad 端菜单保持一致
|
||||||
|
ARouterConstants.ACTIVITY_URL_INT_EXP_MOVE // 有 route 就走通用跳转
|
||||||
|
),
|
||||||
|
…
|
||||||
|
)
|
||||||
),
|
),
|
||||||
```
|
```
|
||||||
|
|
||||||
两点注意：
|
注意：
|
||||||
|
|
||||||
- **权限串与路由都要和 Pad 端菜单对齐**：以 `app/.../HomeFragment.kt` 里该权限对应的
|
- **权限串与路由都要和 Pad 端菜单对齐**：以 `app/.../HomeFragment.kt` 里该权限对应的
|
||||||
`ARouter.build(...)` 为准。同一业务常有新旧两个 Activity（如移库的 `GjcYiKuListActivity`
|
`ARouter.build(...)` 为准。同一业务常有新旧两个 Activity（如移库的 `GjcYiKuListActivity`
|
||||||
与 `IntExpMoveActivity`），Pad 菜单实际跳的才是要适配的那个
|
与 `IntExpMoveActivity`），Pad 菜单实际跳的才是要适配的那个
|
||||||
- **图标**：`module_p` 看不到 `module_gjc` 的资源，把 Pad 图标 PNG 复制一份到
|
- **图标**：设计稿图标源文件在 `documents/5.5寸首页新样式/icons/`（约 167px 方图，自带「国际/国内」角标），
|
||||||
`module_p/src/main/res/drawable-xxhdpi/`（该模块既有 4 个图标就是这么放的，同名不同密度桶可共存）
|
统一转 PNG（源文件多为单帧 GIF，GIF 只有 256 色 + 1 位透明，不进资源）后放
|
||||||
|
`module_p/src/main/res/drawable-nodpi/img_pda_menu_*.png`，按 59.7dp 宫格居中裁剪 + 圆角显示。
|
||||||
|
**必须放 nodpi，不能放 xxhdpi**：167px 放 xxhdpi 会在 ~295dpi 设备上解码时先缩到 ≈103px，再被拉伸到
|
||||||
|
宫格的 110px，实测明显发糊；nodpi 原尺寸解码、由固定尺寸 ImageView 一次缩小，与浏览器渲染设计稿一致
|
||||||
|
**设计稿没有的入口追加到所属分组末尾、沿用旧图标**（如「板箱过磅」`gjc_fu_bang_icon`）
|
||||||
|
- **改动清单后核对入口集合**：登录后分别在「国内 / 国际」Tab 用 `ui_probe.sh texts`（需滚动）导出入口名，
|
||||||
|
与改动前 `LC_ALL=C sort` 后 diff（CJK 文本不加 `LC_ALL=C` 排序不稳定，会 diff 出假差异）。
|
||||||
|
ADMIN 测试账号基线：国内 9 个、国际 12 个
|
||||||
|
|
||||||
**示例：状态 Tab 零 ViewModel 改动**（`IntExpMoveActivity` 已实现）
|
**示例：状态 Tab 零 ViewModel 改动**（`IntExpMoveActivity` 已实现）
|
||||||
|
|
||||||
@@ -1313,6 +1333,8 @@ adb shell am start -n com.lukouguoji.aerologic/com.lukouguoji.gjc.activity.IntEx
|
|||||||
| 布局构建报 `Error: The string "--" is not permitted within comments` | XML 注释中出现连续双横线（如写"兜底 \"--\""），XML 规范禁止 | 注释里改用文字描述（如「兜底双横线」），代码绑定表达式中的 `"--"` 不受影响 |
|
| 布局构建报 `Error: The string "--" is not permitted within comments` | XML 注释中出现连续双横线（如写"兜底 \"--\""），XML 规范禁止 | 注释里改用文字描述（如「兜底双横线」），代码绑定表达式中的 `"--"` 不受影响 |
|
||||||
| 多选页手机版点「全选」后底部「已选 N 项」不更新（单卡勾选正常） | 批量勾选在 `checkAllClick` 里直接 set，不走 FlowBus 的单卡 EVENT_CHECK_CHANGED 事件，`selectedCountText` 只在事件回调里更新 | `checkAllClick` 末尾自行同步 `selectedCountText`（平板布局不绑定该字段，无影响） |
|
| 多选页手机版点「全选」后底部「已选 N 项」不更新（单卡勾选正常） | 批量勾选在 `checkAllClick` 里直接 set，不走 FlowBus 的单卡 EVENT_CHECK_CHANGED 事件，`selectedCountText` 只在事件回调里更新 | `checkAllClick` 末尾自行同步 `selectedCountText`（平板布局不绑定该字段，无影响） |
|
||||||
| 手机版数字输入框（`PhoneFormRow` 双向绑 Double 的 `xxxStr`）输入 "18" 变成 "81" | getter 由 Double 反推字符串（"1" → "1.0"），与输入框文本不等触发 `setText`，光标回到开头 | Bean 里保留输入原文（`@Transient` 私有 String），getter 优先返回原文（参考 `GjcCheckInRecord.trayTotalWeightStr`） |
|
| 手机版数字输入框（`PhoneFormRow` 双向绑 Double 的 `xxxStr`）输入 "18" 变成 "81" | getter 由 Double 反推字符串（"1" → "1.0"），与输入框文本不等触发 `setText`，光标回到开头 | Bean 里保留输入原文（`@Transient` 私有 String），getter 优先返回原文（参考 `GjcCheckInRecord.trayTotalWeightStr`） |
|
||||||
|
| 固定 dp 尺寸显示的位图图标在手机上发糊（设计稿里很清晰） | 位图放进了比「源像素 ÷ 显示 dp」更高的密度桶（如 167px 的宫格图放 xxhdpi，在 ~295dpi 设备上解码先缩到 103px，再拉伸到 110px 显示） | 只按固定 dp 尺寸显示的设计稿位图放 `drawable-nodpi`（原尺寸解码，View 一次缩小）；排查：截图放大对比设计稿，算 `源px × 设备dpi / 桶dpi` 是否小于显示 px |
|
||||||
|
| 分段/胶囊控件里选中块上下不居中（上窄下宽） | 设计稿 CSS 的 `border` 计入盒子尺寸，而 Android shape 的 `stroke` 画在 background 上、不占 padding——照抄 CSS 的 `padding: 2px` 少了 1dp 描边 | 容器 padding = CSS padding + border 宽度（如 2 + 1 = 3dp），且容器高度用 `wrap_content`——写死 28dp 时 28/3/22dp 各自取整成 px，内框比选中块少 1px，选中块底边被截；用像素列取色（`magick … txt:-`）量上下间隙验证 |
|
||||||
| XML 里 `bean.a ?? bean.b` 兜底不生效，字段明明有值却显示占位符 | 网络层转换器把 JSON null 归一成空串 `""`，DataBinding 的 `??` 只判 null 不判空串，永远取到左侧的空串 | 在 Bean 上加计算属性做 `isNullOrEmpty` 双兜底（如 `agentDisplay`），XML 绑计算属性（进港查询/出港查询代理人已踩过） |
|
| XML 里 `bean.a ?? bean.b` 兜底不生效，字段明明有值却显示占位符 | 网络层转换器把 JSON null 归一成空串 `""`，DataBinding 的 `??` 只判 null 不判空串，永远取到左侧的空串 | 在 Bean 上加计算属性做 `isNullOrEmpty` 双兜底（如 `agentDisplay`），XML 绑计算属性（进港查询/出港查询代理人已踩过） |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
881
documents/5.5寸首页新样式/5.5设计图html/dashboard.html
Normal file
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
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
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
BIN
documents/5.5寸首页新样式/icons/国内/guonei_03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_05.png
Normal file
BIN
documents/5.5寸首页新样式/icons/国内/guonei_05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_07.png
Normal file
BIN
documents/5.5寸首页新样式/icons/国内/guonei_07.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_13.png
Normal file
BIN
documents/5.5寸首页新样式/icons/国内/guonei_13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_15.png
Normal file
BIN
documents/5.5寸首页新样式/icons/国内/guonei_15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_17.png
Normal file
BIN
documents/5.5寸首页新样式/icons/国内/guonei_17.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_22.png
Normal file
BIN
documents/5.5寸首页新样式/icons/国内/guonei_22.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_23.png
Normal file
BIN
documents/5.5寸首页新样式/icons/国内/guonei_23.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
documents/5.5寸首页新样式/icons/国内/guonei_26.png
Normal file
BIN
documents/5.5寸首页新样式/icons/国内/guonei_26.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_03.png
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_07.gif
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_07.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_09.gif
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_09.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_11.gif
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_11.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_16.png
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_17.gif
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_17.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_19.gif
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_19.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_24.gif
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_24.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_26.gif
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_26.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_28.gif
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_28.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_33.gif
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_33.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
documents/5.5寸首页新样式/icons/国际/guoji_35.gif
Normal file
BIN
documents/5.5寸首页新样式/icons/国际/guoji_35.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
@@ -2,9 +2,11 @@ package com.sixin.module_p.ui.enter
|
|||||||
|
|
||||||
import android.content.Context.RECEIVER_EXPORTED
|
import android.content.Context.RECEIVER_EXPORTED
|
||||||
import android.content.IntentFilter
|
import android.content.IntentFilter
|
||||||
|
import android.graphics.Typeface
|
||||||
import android.os.Build
|
import android.os.Build
|
||||||
import android.os.Bundle
|
import android.os.Bundle
|
||||||
import android.view.View
|
import android.view.View
|
||||||
|
import androidx.core.content.ContextCompat
|
||||||
import com.alibaba.android.arouter.facade.annotation.Route
|
import com.alibaba.android.arouter.facade.annotation.Route
|
||||||
import com.lukouguoji.module_base.base.CustomVP2Adapter
|
import com.lukouguoji.module_base.base.CustomVP2Adapter
|
||||||
import com.lukouguoji.module_base.bean.SocketEventBean
|
import com.lukouguoji.module_base.bean.SocketEventBean
|
||||||
@@ -41,6 +43,9 @@ class PDAEnterActivity : BasePdaActivity<ActivityPdaenterBinding, PDAEnterViewMo
|
|||||||
override fun initOnCreate(savedInstanceState: Bundle?) {
|
override fun initOnCreate(savedInstanceState: Bundle?) {
|
||||||
binding.viewModel = viewModel
|
binding.viewModel = viewModel
|
||||||
|
|
||||||
|
// 状态栏与顶部导航栏同色（设计稿状态栏为 #3B71E8 蓝底白字）
|
||||||
|
window.statusBarColor = ContextCompat.getColor(this, R.color.phone_home_primary)
|
||||||
|
|
||||||
binding.vp.adapter =
|
binding.vp.adapter =
|
||||||
CustomVP2Adapter(viewModel.fragmentList, supportFragmentManager, lifecycle)
|
CustomVP2Adapter(viewModel.fragmentList, supportFragmentManager, lifecycle)
|
||||||
binding.vp.isUserInputEnabled = false
|
binding.vp.isUserInputEnabled = false
|
||||||
@@ -48,6 +53,7 @@ class PDAEnterActivity : BasePdaActivity<ActivityPdaenterBinding, PDAEnterViewMo
|
|||||||
|
|
||||||
viewModel.index.observe(this) {
|
viewModel.index.observe(this) {
|
||||||
binding.vp.setCurrentItem(it, false)
|
binding.vp.setCurrentItem(it, false)
|
||||||
|
updateTabStyle(it)
|
||||||
}
|
}
|
||||||
|
|
||||||
FlowBus.with<Any>(ConstantEvent.LOGOUT)
|
FlowBus.with<Any>(ConstantEvent.LOGOUT)
|
||||||
@@ -93,6 +99,17 @@ class PDAEnterActivity : BasePdaActivity<ActivityPdaenterBinding, PDAEnterViewMo
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tab 切换时的纯 UI 调整：选中 Tab 文字加粗（设计稿 font-weight 500，选择器表达不了字重）
|
||||||
|
*/
|
||||||
|
private fun updateTabStyle(index: Int) {
|
||||||
|
listOf(binding.tvTabHome, binding.tvTabGn, binding.tvTabGj, binding.tvTabMine)
|
||||||
|
.forEachIndexed { i, tv ->
|
||||||
|
tv.typeface = if (i == index) Typeface.create("sans-serif-medium", Typeface.NORMAL)
|
||||||
|
else Typeface.DEFAULT
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
override fun onDestroy() {
|
override fun onDestroy() {
|
||||||
super.onDestroy()
|
super.onDestroy()
|
||||||
unregisterReceiver(receiver)
|
unregisterReceiver(receiver)
|
||||||
@@ -101,6 +118,7 @@ class PDAEnterActivity : BasePdaActivity<ActivityPdaenterBinding, PDAEnterViewMo
|
|||||||
|
|
||||||
override fun isBaseOnWidth() = true
|
override fun isBaseOnWidth() = true
|
||||||
|
|
||||||
override fun getSizeInDp(): Float = PDAHelper.PDA_WIDTH
|
/** 首页按 documents/5.5寸首页新样式/ 设计稿 390dp 画布等比还原（其余 PDA 页仍为 [PDAHelper.PDA_WIDTH]） */
|
||||||
|
override fun getSizeInDp(): Float = 390f
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
package com.sixin.module_p.ui.enter
|
||||||
|
|
||||||
|
import android.view.LayoutInflater
|
||||||
|
import android.view.View
|
||||||
|
import android.widget.LinearLayout
|
||||||
|
import android.widget.Space
|
||||||
|
import com.lukouguoji.module_base.bean.ActionBean
|
||||||
|
import com.lukouguoji.module_base.common.Constant
|
||||||
|
import com.lukouguoji.module_base.db.perference.SharedPreferenceUtil
|
||||||
|
import com.sixin.module_p.databinding.ItemPdaActionBinding
|
||||||
|
import com.sixin.module_p.databinding.ItemPdaMenuGroupBinding
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 手持端首页「国内 / 国际」Tab 的菜单分组（标题 + 组内顺序取自 documents/5.5寸首页新样式/ 设计稿）
|
||||||
|
*/
|
||||||
|
data class PdaMenuGroup(
|
||||||
|
val title: String,
|
||||||
|
val items: List<ActionBean>
|
||||||
|
)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 按登录返回的 authList 过滤，**判定方式与改版前逐字一致**（`authList.contains(key)`），
|
||||||
|
* 保证改版前后同一账号看到的入口集合不变；过滤后为空的分组整组不显示
|
||||||
|
*/
|
||||||
|
fun List<PdaMenuGroup>.filterByAuth(): List<PdaMenuGroup> =
|
||||||
|
map { group ->
|
||||||
|
group.copy(items = group.items.filter {
|
||||||
|
SharedPreferenceUtil.getString(Constant.Share.authList).contains(it.key)
|
||||||
|
})
|
||||||
|
}.filter { it.items.isNotEmpty() }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 把分组菜单渲染成设计稿的「分组标题栏 + 三列宫格」
|
||||||
|
*
|
||||||
|
* 入口数量是固定的小清单，直接按行铺 LinearLayout，比 RecyclerView 多类型 + 网格装饰简单，
|
||||||
|
* 也能精确还原设计稿的行距与内边距
|
||||||
|
*/
|
||||||
|
object PdaMenuRenderer {
|
||||||
|
|
||||||
|
private const val SPAN_COUNT = 3
|
||||||
|
|
||||||
|
/** 宫格行距（设计稿 row-gap 12px） */
|
||||||
|
private const val ROW_GAP_DP = 12f
|
||||||
|
|
||||||
|
/** 最后一组宫格底部内边距（设计稿 padding-bottom: clamp(16px, 5.6vw, 22px)） */
|
||||||
|
private const val LAST_GRID_PADDING_BOTTOM_DP = 22f
|
||||||
|
|
||||||
|
fun render(
|
||||||
|
container: LinearLayout,
|
||||||
|
groups: List<PdaMenuGroup>,
|
||||||
|
onItemClick: (ActionBean) -> Unit
|
||||||
|
) {
|
||||||
|
container.removeAllViews()
|
||||||
|
val inflater = LayoutInflater.from(container.context)
|
||||||
|
|
||||||
|
groups.forEachIndexed { groupIndex, group ->
|
||||||
|
val groupBinding = ItemPdaMenuGroupBinding.inflate(inflater, container, true)
|
||||||
|
groupBinding.title = group.title
|
||||||
|
groupBinding.executePendingBindings()
|
||||||
|
|
||||||
|
val grid = groupBinding.llGrid
|
||||||
|
if (groupIndex == groups.lastIndex) {
|
||||||
|
grid.setPadding(
|
||||||
|
grid.paddingLeft,
|
||||||
|
grid.paddingTop,
|
||||||
|
grid.paddingRight,
|
||||||
|
grid.dp(LAST_GRID_PADDING_BOTTOM_DP)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
group.items.chunked(SPAN_COUNT).forEachIndexed { rowIndex, rowItems ->
|
||||||
|
val row = LinearLayout(container.context).apply {
|
||||||
|
orientation = LinearLayout.HORIZONTAL
|
||||||
|
}
|
||||||
|
grid.addView(
|
||||||
|
row,
|
||||||
|
LinearLayout.LayoutParams(
|
||||||
|
LinearLayout.LayoutParams.MATCH_PARENT,
|
||||||
|
LinearLayout.LayoutParams.WRAP_CONTENT
|
||||||
|
).apply {
|
||||||
|
if (rowIndex > 0) topMargin = grid.dp(ROW_GAP_DP)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
rowItems.forEach { bean ->
|
||||||
|
val cell = ItemPdaActionBinding.inflate(inflater, row, false)
|
||||||
|
cell.bean = bean
|
||||||
|
cell.ivIcon.setImageResource(bean.icon)
|
||||||
|
// 圆角裁剪：XML 的 android:clipToOutline 仅 API 31+ 生效，需代码设置
|
||||||
|
cell.ivIcon.clipToOutline = true
|
||||||
|
cell.executePendingBindings()
|
||||||
|
cell.ll.setOnClickListener { onItemClick(bean) }
|
||||||
|
row.addView(cell.root, cellParams())
|
||||||
|
}
|
||||||
|
// 末行不足三个时补位，保证列宽一致
|
||||||
|
repeat(SPAN_COUNT - rowItems.size) {
|
||||||
|
row.addView(Space(container.context), cellParams())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private fun cellParams() =
|
||||||
|
LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f)
|
||||||
|
|
||||||
|
/** 用 View 自身 resources 换算（已被 AutoSize 改写为当前页面基准） */
|
||||||
|
private fun View.dp(value: Float) = (value * resources.displayMetrics.density + 0.5f).toInt()
|
||||||
|
}
|
||||||
@@ -2,13 +2,9 @@ package com.sixin.module_p.ui.enter.gj
|
|||||||
|
|
||||||
import androidx.fragment.app.Fragment
|
import androidx.fragment.app.Fragment
|
||||||
import com.lukouguoji.module_base.base.BaseBindingFragment
|
import com.lukouguoji.module_base.base.BaseBindingFragment
|
||||||
import com.lukouguoji.module_base.base.CommonAdapter
|
|
||||||
import com.lukouguoji.module_base.interfaces.IOnItemClickListener
|
|
||||||
import com.lukouguoji.module_base.ktx.addOnItemClickListener
|
|
||||||
import com.lukouguoji.module_base.ktx.loge
|
|
||||||
import com.lukouguoji.module_base.ktx.refresh
|
|
||||||
import com.sixin.module_p.R
|
import com.sixin.module_p.R
|
||||||
import com.sixin.module_p.databinding.FragmentGjBinding
|
import com.sixin.module_p.databinding.FragmentGjBinding
|
||||||
|
import com.sixin.module_p.ui.enter.PdaMenuRenderer
|
||||||
|
|
||||||
class GjFragment : BaseBindingFragment<FragmentGjBinding, GjViewModel>() {
|
class GjFragment : BaseBindingFragment<FragmentGjBinding, GjViewModel>() {
|
||||||
override fun layoutId(): Int {
|
override fun layoutId(): Int {
|
||||||
@@ -22,16 +18,9 @@ class GjFragment : BaseBindingFragment<FragmentGjBinding, GjViewModel>() {
|
|||||||
override fun initOnViewCreated() {
|
override fun initOnViewCreated() {
|
||||||
binding.viewModel = viewModel
|
binding.viewModel = viewModel
|
||||||
|
|
||||||
binding.rv.adapter =
|
PdaMenuRenderer.render(binding.llMenu, viewModel.groups) {
|
||||||
CommonAdapter(requireContext(), R.layout.item_pda_action, GjViewHolder::class.java)
|
viewModel.onItemClick(it)
|
||||||
|
}
|
||||||
binding.rv.addOnItemClickListener(object : IOnItemClickListener {
|
|
||||||
override fun onItemClick(position: Int, type: Int) {
|
|
||||||
viewModel.onItemClick(position)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
binding.rv.refresh(viewModel.actionList)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
companion object {
|
companion object {
|
||||||
|
|||||||
@@ -1,13 +0,0 @@
|
|||||||
package com.sixin.module_p.ui.enter.gj
|
|
||||||
|
|
||||||
import android.view.View
|
|
||||||
import com.lukouguoji.module_base.base.BaseViewHolder
|
|
||||||
import com.lukouguoji.module_base.bean.ActionBean
|
|
||||||
import com.sixin.module_p.databinding.ItemPdaActionBinding
|
|
||||||
|
|
||||||
class GjViewHolder(view: View) : BaseViewHolder<ActionBean, ItemPdaActionBinding>(view) {
|
|
||||||
override fun onBind(item: Any?, position: Int) {
|
|
||||||
binding.bean = getItemBean(item)
|
|
||||||
notifyItemClick(position, binding.ll)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -4,10 +4,11 @@ import com.alibaba.android.arouter.launcher.ARouter
|
|||||||
import com.lukouguoji.module_base.base.BaseViewModel
|
import com.lukouguoji.module_base.base.BaseViewModel
|
||||||
import com.lukouguoji.module_base.bean.ActionBean
|
import com.lukouguoji.module_base.bean.ActionBean
|
||||||
import com.lukouguoji.module_base.common.Constant
|
import com.lukouguoji.module_base.common.Constant
|
||||||
import com.lukouguoji.module_base.db.perference.SharedPreferenceUtil
|
|
||||||
import com.lukouguoji.module_base.ktx.loge
|
import com.lukouguoji.module_base.ktx.loge
|
||||||
import com.lukouguoji.module_base.router.ARouterConstants
|
import com.lukouguoji.module_base.router.ARouterConstants
|
||||||
import com.sixin.module_p.R
|
import com.sixin.module_p.R
|
||||||
|
import com.sixin.module_p.ui.enter.PdaMenuGroup
|
||||||
|
import com.sixin.module_p.ui.enter.filterByAuth
|
||||||
import com.sixin.module_p.ui.guobang.PdaGuoBangActivity
|
import com.sixin.module_p.ui.guobang.PdaGuoBangActivity
|
||||||
import com.sixin.module_p.ui.lihuo.PdaLiHuoActivity
|
import com.sixin.module_p.ui.lihuo.PdaLiHuoActivity
|
||||||
import com.sixin.module_p.ui.shouyun.PdaShouYunActivity
|
import com.sixin.module_p.ui.shouyun.PdaShouYunActivity
|
||||||
@@ -21,87 +22,97 @@ import dev.DevUtils
|
|||||||
* 某项没配 [ActionBean.key] 对应的权限串时不显示。所以新页面适配完之后
|
* 某项没配 [ActionBean.key] 对应的权限串时不显示。所以新页面适配完之后
|
||||||
* **必须回来这里加一行**，否则手机端首页根本没有入口。
|
* **必须回来这里加一行**，否则手机端首页根本没有入口。
|
||||||
*
|
*
|
||||||
|
* 分组与组内顺序按 documents/5.5寸首页新样式/home.html 设计稿；设计稿没画的入口追加到
|
||||||
|
* 所属分组末尾并沿用旧图标。入口集合、权限串、跳转与改版前完全一致（过滤见 [filterByAuth]）。
|
||||||
|
*
|
||||||
* 两类跳转：
|
* 两类跳转：
|
||||||
* - 带 [ActionBean.route] → 通用 ARouter 跳转（module_p 不依赖 module_gjc 等业务模块，
|
* - 带 [ActionBean.route] → 通用 ARouter 跳转（module_p 不依赖 module_gjc 等业务模块，
|
||||||
* 跨模块只能走路由）。**5.5 寸适配页一律用这种，加一行即可。**
|
* 跨模块只能走路由）。**5.5 寸适配页一律用这种，加一行即可。**
|
||||||
* - 不带 route → 落到 [onItemClick] 的 when 分支（module_p 内部的 PDA 专用页面）
|
* - 不带 route → 落到 [onItemClick] 的 when 分支（module_p 内的 PDA 专用页面）
|
||||||
*/
|
*/
|
||||||
class GjViewModel : BaseViewModel() {
|
class GjViewModel : BaseViewModel() {
|
||||||
|
|
||||||
val actionList = listOf(
|
val groups = listOf(
|
||||||
// ===== module_p 内的 PDA 专用页面（无 route，走 when 分支） =====
|
PdaMenuGroup(
|
||||||
ActionBean("普货收运", R.drawable.gjc_shou_yun_icon, Constant.AuthName.GjcAppDomExpCheckin),
|
"国际出港", listOf(
|
||||||
ActionBean("板箱组装", R.drawable.img_bxzz, Constant.AuthName.GjcBanXListActivity),
|
ActionBean(
|
||||||
ActionBean("板箱过磅", R.drawable.gjc_fu_bang_icon, Constant.AuthName.GjcFuBangActivity),
|
"出港计重",
|
||||||
ActionBean("进港理货", R.drawable.img_jglh, Constant.AuthName.GjjTallyListActivity),
|
R.drawable.img_pda_menu_gjc_weighing,
|
||||||
|
Constant.AuthName.GjcCheckWeighing,
|
||||||
// ===== 5.5 寸手机版已适配页面（图标复用 Pad 端同款，跳转走 ARouter） =====
|
ARouterConstants.ACTIVITY_URL_GJC_WEIGHING_LIST
|
||||||
ActionBean(
|
),
|
||||||
"出港移库",
|
ActionBean(
|
||||||
R.drawable.gjc_yi_ku_icon,
|
"出港运抵",
|
||||||
Constant.AuthName.GjcYiKuListActivity,
|
R.drawable.img_pda_menu_gjc_arrive,
|
||||||
ARouterConstants.ACTIVITY_URL_INT_EXP_MOVE
|
Constant.AuthName.GjcIntExpArrive,
|
||||||
),
|
ARouterConstants.ACTIVITY_URL_INT_EXP_ARRIVE
|
||||||
ActionBean(
|
),
|
||||||
"出库交接",
|
ActionBean(
|
||||||
R.drawable.img_gjc_chuku_jiaojie,
|
"出库交接",
|
||||||
Constant.AuthName.GjcIntExpOutHandover,
|
R.drawable.img_pda_menu_gjc_out_handover,
|
||||||
ARouterConstants.ACTIVITY_URL_INT_EXP_OUT_HANDOVER
|
Constant.AuthName.GjcIntExpOutHandover,
|
||||||
),
|
ARouterConstants.ACTIVITY_URL_INT_EXP_OUT_HANDOVER
|
||||||
ActionBean(
|
),
|
||||||
"出港计重",
|
ActionBean(
|
||||||
R.drawable.img_gjc_chugangjizhong,
|
"出港移库",
|
||||||
Constant.AuthName.GjcCheckWeighing,
|
R.drawable.img_pda_menu_gjc_move,
|
||||||
ARouterConstants.ACTIVITY_URL_GJC_WEIGHING_LIST
|
Constant.AuthName.GjcYiKuListActivity,
|
||||||
),
|
ARouterConstants.ACTIVITY_URL_INT_EXP_MOVE
|
||||||
ActionBean(
|
),
|
||||||
"出港运抵",
|
ActionBean(
|
||||||
R.drawable.img_gjc_chugang_diyun,
|
"出港仓库",
|
||||||
Constant.AuthName.GjcIntExpArrive,
|
R.drawable.img_pda_menu_gjc_storage,
|
||||||
ARouterConstants.ACTIVITY_URL_INT_EXP_ARRIVE
|
Constant.AuthName.GjcIntExpStorageUse,
|
||||||
),
|
ARouterConstants.ACTIVITY_URL_INT_EXP_STORAGE_USE
|
||||||
ActionBean(
|
),
|
||||||
"出港查询",
|
ActionBean(
|
||||||
R.drawable.gjc_query_icon,
|
"出港查询",
|
||||||
Constant.AuthName.GjcQueryListActivity,
|
R.drawable.img_pda_menu_gjc_query,
|
||||||
ARouterConstants.ACTIVITY_URL_GJC_QUERY_LIST
|
Constant.AuthName.GjcQueryListActivity,
|
||||||
),
|
ARouterConstants.ACTIVITY_URL_GJC_QUERY_LIST
|
||||||
ActionBean(
|
),
|
||||||
"出港仓库",
|
// ===== 设计稿未覆盖：module_p 内的 PDA 专用页面（无 route，走 when 分支），沿用旧图标 =====
|
||||||
R.drawable.gjc_cang_ku_icon,
|
ActionBean("普货收运", R.drawable.gjc_shou_yun_icon, Constant.AuthName.GjcAppDomExpCheckin),
|
||||||
Constant.AuthName.GjcIntExpStorageUse,
|
ActionBean("板箱组装", R.drawable.img_bxzz, Constant.AuthName.GjcBanXListActivity),
|
||||||
ARouterConstants.ACTIVITY_URL_INT_EXP_STORAGE_USE
|
ActionBean("板箱过磅", R.drawable.gjc_fu_bang_icon, Constant.AuthName.GjcFuBangActivity),
|
||||||
),
|
)
|
||||||
ActionBean(
|
),
|
||||||
"进港仓库",
|
PdaMenuGroup(
|
||||||
R.drawable.gjc_cang_ku_icon, // Pad 端进港仓库菜单同样复用出港仓库图标
|
"国际进港", listOf(
|
||||||
Constant.AuthName.GjjWareHouseActivity,
|
ActionBean("进港理货", R.drawable.img_pda_menu_gjj_tally, Constant.AuthName.GjjTallyListActivity),
|
||||||
ARouterConstants.ACTIVITY_URL_GJJ_WARE_HOUSE
|
ActionBean(
|
||||||
),
|
"提取出库",
|
||||||
ActionBean(
|
R.drawable.img_pda_menu_gjj_pick_up,
|
||||||
"进港查询",
|
Constant.AuthName.IntImpPickUpDLV,
|
||||||
R.drawable.gjj_query_icon,
|
ARouterConstants.ACTIVITY_URL_INT_IMP_PICK_UP_DLV
|
||||||
Constant.AuthName.GjjQueryListActivity,
|
),
|
||||||
ARouterConstants.ACTIVITY_URL_GJJ_QUERY_LIST
|
ActionBean(
|
||||||
),
|
"进港仓库",
|
||||||
ActionBean(
|
R.drawable.img_pda_menu_gjj_storage,
|
||||||
"提取出库",
|
Constant.AuthName.GjjWareHouseActivity,
|
||||||
R.drawable.gjj_chu_ku_icon,
|
ARouterConstants.ACTIVITY_URL_GJJ_WARE_HOUSE
|
||||||
Constant.AuthName.IntImpPickUpDLV,
|
),
|
||||||
ARouterConstants.ACTIVITY_URL_INT_IMP_PICK_UP_DLV
|
ActionBean(
|
||||||
),
|
"进港查询",
|
||||||
// ULD管理属综合管理业务（Pad 端在「综合管理」菜单组），手机端首页暂无综合 Tab，挂在国际 Tab 下
|
R.drawable.img_pda_menu_gjj_query,
|
||||||
ActionBean(
|
Constant.AuthName.GjjQueryListActivity,
|
||||||
"ULD管理",
|
ARouterConstants.ACTIVITY_URL_GJJ_QUERY_LIST
|
||||||
com.lukouguoji.module_base.R.mipmap.cargo, // 图标复用 Pad 端同款（在 module_base，直接引用）
|
),
|
||||||
Constant.AuthName.ComprehensiveUld, // 权限串与 Pad 端菜单一致
|
)
|
||||||
ARouterConstants.ACTIVITY_URL_ULD_LIST
|
),
|
||||||
),
|
PdaMenuGroup(
|
||||||
).filter { SharedPreferenceUtil.getString(Constant.Share.authList).contains(it.key) }
|
"综合管理", listOf(
|
||||||
|
ActionBean(
|
||||||
fun onItemClick(position: Int) {
|
"ULD管理",
|
||||||
val bean = actionList.getOrNull(position) ?: return
|
R.drawable.img_pda_menu_uld,
|
||||||
|
Constant.AuthName.ComprehensiveUld, // 权限串与 Pad 端菜单一致
|
||||||
|
ARouterConstants.ACTIVITY_URL_ULD_LIST
|
||||||
|
),
|
||||||
|
)
|
||||||
|
),
|
||||||
|
).filterByAuth()
|
||||||
|
|
||||||
|
fun onItemClick(bean: ActionBean) {
|
||||||
// 配了路由的直接跳（5.5 寸适配页走这条）
|
// 配了路由的直接跳（5.5 寸适配页走这条）
|
||||||
if (bean.route.isNotEmpty()) {
|
if (bean.route.isNotEmpty()) {
|
||||||
ARouter.getInstance().build(bean.route).navigation()
|
ARouter.getInstance().build(bean.route).navigation()
|
||||||
|
|||||||
@@ -2,14 +2,9 @@ package com.sixin.module_p.ui.enter.gn
|
|||||||
|
|
||||||
import androidx.fragment.app.Fragment
|
import androidx.fragment.app.Fragment
|
||||||
import com.lukouguoji.module_base.base.BaseBindingFragment
|
import com.lukouguoji.module_base.base.BaseBindingFragment
|
||||||
import com.lukouguoji.module_base.base.CommonAdapter
|
|
||||||
import com.lukouguoji.module_base.interfaces.IOnItemClickListener
|
|
||||||
import com.lukouguoji.module_base.ktx.addOnItemClickListener
|
|
||||||
import com.lukouguoji.module_base.ktx.loge
|
|
||||||
import com.lukouguoji.module_base.ktx.refresh
|
|
||||||
import com.sixin.module_p.R
|
import com.sixin.module_p.R
|
||||||
import com.sixin.module_p.databinding.FragmentGnBinding
|
import com.sixin.module_p.databinding.FragmentGnBinding
|
||||||
import com.sixin.module_p.ui.enter.gj.GjViewHolder
|
import com.sixin.module_p.ui.enter.PdaMenuRenderer
|
||||||
|
|
||||||
class GnFragment : BaseBindingFragment<FragmentGnBinding, GnViewModel>() {
|
class GnFragment : BaseBindingFragment<FragmentGnBinding, GnViewModel>() {
|
||||||
override fun layoutId(): Int {
|
override fun layoutId(): Int {
|
||||||
@@ -23,16 +18,9 @@ class GnFragment : BaseBindingFragment<FragmentGnBinding, GnViewModel>() {
|
|||||||
override fun initOnViewCreated() {
|
override fun initOnViewCreated() {
|
||||||
binding.viewModel = viewModel
|
binding.viewModel = viewModel
|
||||||
|
|
||||||
binding.rv.adapter =
|
PdaMenuRenderer.render(binding.llMenu, viewModel.groups) {
|
||||||
CommonAdapter(requireContext(), R.layout.item_pda_action, GjViewHolder::class.java)
|
viewModel.onItemClick(it)
|
||||||
|
}
|
||||||
binding.rv.addOnItemClickListener(object : IOnItemClickListener {
|
|
||||||
override fun onItemClick(position: Int, type: Int) {
|
|
||||||
viewModel.onItemClick(position)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
binding.rv.refresh(viewModel.actionList)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
companion object {
|
companion object {
|
||||||
|
|||||||
@@ -5,11 +5,12 @@ import com.alibaba.android.arouter.launcher.ARouter
|
|||||||
import com.lukouguoji.module_base.base.BaseViewModel
|
import com.lukouguoji.module_base.base.BaseViewModel
|
||||||
import com.lukouguoji.module_base.bean.ActionBean
|
import com.lukouguoji.module_base.bean.ActionBean
|
||||||
import com.lukouguoji.module_base.common.Constant
|
import com.lukouguoji.module_base.common.Constant
|
||||||
import com.lukouguoji.module_base.db.perference.SharedPreferenceUtil
|
|
||||||
import com.lukouguoji.module_base.ktx.logd
|
import com.lukouguoji.module_base.ktx.logd
|
||||||
import com.lukouguoji.module_base.ktx.loge
|
import com.lukouguoji.module_base.ktx.loge
|
||||||
import com.lukouguoji.module_base.router.ARouterConstants
|
import com.lukouguoji.module_base.router.ARouterConstants
|
||||||
import com.sixin.module_p.R
|
import com.sixin.module_p.R
|
||||||
|
import com.sixin.module_p.ui.enter.PdaMenuGroup
|
||||||
|
import com.sixin.module_p.ui.enter.filterByAuth
|
||||||
import com.sixin.module_p.ui.enter.gn.document.PdaDocumentHandoverActivity
|
import com.sixin.module_p.ui.enter.gn.document.PdaDocumentHandoverActivity
|
||||||
import com.sixin.module_p.ui.gnc.cunfang.list.PdaGncCunFangListActivity
|
import com.sixin.module_p.ui.gnc.cunfang.list.PdaGncCunFangListActivity
|
||||||
import com.sixin.module_p.ui.gnc.fubang.add.PdaGncFuBangAddActivity
|
import com.sixin.module_p.ui.gnc.fubang.add.PdaGncFuBangAddActivity
|
||||||
@@ -20,65 +21,53 @@ import com.sixin.module_p.ui.goods.transport.list.PdaGoodsTransportListActivity
|
|||||||
import com.sixin.module_p.ui.goods.transportLog.list.PdaTransportLogActivity
|
import com.sixin.module_p.ui.goods.transportLog.list.PdaTransportLogActivity
|
||||||
import dev.DevUtils
|
import dev.DevUtils
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 手持端首页「国内业务」Tab
|
||||||
|
*
|
||||||
|
* 菜单是手写清单 + authList 权限过滤（同 [com.sixin.module_p.ui.enter.gj.GjViewModel]）。
|
||||||
|
* 分组与组内顺序按 documents/5.5寸首页新样式/domestic.html 设计稿；入口集合、权限串、
|
||||||
|
* 跳转与改版前完全一致（过滤见 [filterByAuth]）。
|
||||||
|
*/
|
||||||
class GnViewModel : BaseViewModel() {
|
class GnViewModel : BaseViewModel() {
|
||||||
|
|
||||||
val actionList = listOf(
|
val groups = listOf(
|
||||||
ActionBean(
|
PdaMenuGroup(
|
||||||
"出港收运",
|
"国内出港", listOf(
|
||||||
com.lukouguoji.module_base.R.drawable.img_gnc_shouyun,
|
ActionBean("出港收运", R.drawable.img_pda_menu_gnc_shou_yun, Constant.AuthName.AppDomExpCheckin),
|
||||||
Constant.AuthName.AppDomExpCheckin
|
ActionBean("出港复磅", R.drawable.img_pda_menu_gnc_fu_bang, Constant.AuthName.AppDomExpWeighting),
|
||||||
|
ActionBean("出港存放", R.drawable.img_pda_menu_gnc_cun_fang, Constant.AuthName.AppDomExpDeposit),
|
||||||
|
ActionBean("单证交接", R.drawable.img_pda_menu_document_handover, Constant.AuthName.DocumentHandover),
|
||||||
|
ActionBean("货物转运", R.drawable.img_pda_menu_goods_transport, Constant.AuthName.ComprehensiveTransfer),
|
||||||
|
ActionBean("转运记录", R.drawable.img_pda_menu_transport_log, Constant.AuthName.TransportLog),
|
||||||
|
)
|
||||||
),
|
),
|
||||||
ActionBean("出港复磅", R.drawable.gnc_fubang, Constant.AuthName.AppDomExpWeighting),
|
PdaMenuGroup(
|
||||||
ActionBean(
|
"国内进港", listOf(
|
||||||
"出港存放",
|
ActionBean("进港卸机", R.drawable.img_pda_menu_gnj_xie_ji, Constant.AuthName.MonitorInPack),
|
||||||
com.lukouguoji.module_base.R.drawable.img_gnc_cunfang,
|
ActionBean(
|
||||||
Constant.AuthName.AppDomExpDeposit
|
"进港移库",
|
||||||
|
R.drawable.img_pda_menu_gnj_move,
|
||||||
|
Constant.AuthName.GnjYiKu, // 权限串与 Pad 端菜单一致（AppDomImpMove）
|
||||||
|
ARouterConstants.ACTIVITY_URL_GNJ_MOVE_STASH_LIST // 与 Pad 首页菜单同一跳转页（app 模块，走路由）
|
||||||
|
),
|
||||||
|
)
|
||||||
),
|
),
|
||||||
ActionBean(
|
PdaMenuGroup(
|
||||||
"进港卸机",
|
"综合管理", listOf(
|
||||||
com.lukouguoji.module_base.R.drawable.img_gnc_xieji,
|
ActionBean("事故签证", R.drawable.img_pda_menu_accident_visa, Constant.AuthName.ComprehensiveAccidentVisa),
|
||||||
Constant.AuthName.MonitorInPack
|
)
|
||||||
),
|
),
|
||||||
ActionBean(
|
).filterByAuth()
|
||||||
"货物转运",
|
|
||||||
com.lukouguoji.module_base.R.drawable.img_gnc_huowuzhuanyun,
|
|
||||||
Constant.AuthName.ComprehensiveTransfer
|
|
||||||
),
|
|
||||||
ActionBean(
|
|
||||||
"转运记录",
|
|
||||||
com.lukouguoji.module_base.R.mipmap.transport_log,
|
|
||||||
Constant.AuthName.TransportLog
|
|
||||||
),
|
|
||||||
ActionBean(
|
|
||||||
"事故签证",
|
|
||||||
R.mipmap.mit_accident_visa,
|
|
||||||
Constant.AuthName.ComprehensiveAccidentVisa
|
|
||||||
),
|
|
||||||
ActionBean(
|
|
||||||
"单证交接",
|
|
||||||
R.mipmap.gnc_document_handover,
|
|
||||||
Constant.AuthName.DocumentHandover
|
|
||||||
),
|
|
||||||
ActionBean(
|
|
||||||
"进港移库",
|
|
||||||
R.drawable.gnj_yi_ku_icon, // 图标复制自 module_gnj（module_p 看不到业务模块资源）
|
|
||||||
Constant.AuthName.GnjYiKu, // 权限串与 Pad 端菜单一致（AppDomImpMove）
|
|
||||||
ARouterConstants.ACTIVITY_URL_GNJ_MOVE_STASH_LIST // 与 Pad 首页菜单同一跳转页（app 模块，走路由）
|
|
||||||
),
|
|
||||||
)
|
|
||||||
.filter { SharedPreferenceUtil.getString(Constant.Share.authList).contains(it.key) }
|
|
||||||
|
|
||||||
|
|
||||||
fun onItemClick(position: Int) {
|
fun onItemClick(bean: ActionBean) {
|
||||||
val bean = actionList.getOrNull(position) ?: return
|
|
||||||
|
|
||||||
// 配了路由的直接跳（5.5 寸适配页走这条，与 GjViewModel 同模式）
|
// 配了路由的直接跳（5.5 寸适配页走这条，与 GjViewModel 同模式）
|
||||||
if (bean.route.isNotEmpty()) {
|
if (bean.route.isNotEmpty()) {
|
||||||
ARouter.getInstance().build(bean.route).navigation()
|
ARouter.getInstance().build(bean.route).navigation()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
when (val title = actionList[position].title) {
|
when (val title = bean.title) {
|
||||||
"出港收运" -> {
|
"出港收运" -> {
|
||||||
GncUnShouYunActivity.start(DevUtils.getTopActivity())
|
GncUnShouYunActivity.start(DevUtils.getTopActivity())
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
package com.sixin.module_p.ui.enter.home
|
package com.sixin.module_p.ui.enter.home
|
||||||
|
|
||||||
import android.widget.LinearLayout
|
import android.graphics.Typeface
|
||||||
|
import android.widget.TextView
|
||||||
import androidx.fragment.app.Fragment
|
import androidx.fragment.app.Fragment
|
||||||
import androidx.recyclerview.widget.LinearLayoutManager
|
|
||||||
import com.lukouguoji.module_base.base.BaseBindingFragment
|
import com.lukouguoji.module_base.base.BaseBindingFragment
|
||||||
import com.lukouguoji.module_base.base.CommonAdapter
|
import com.lukouguoji.module_base.base.CommonAdapter
|
||||||
import com.sixin.module_p.R
|
import com.sixin.module_p.R
|
||||||
@@ -25,9 +25,24 @@ class HomeFragment : BaseBindingFragment<FragmentPdaHomeBinding, HomeViewModel>(
|
|||||||
CommonAdapter(requireContext(), R.layout.item_pda_home, HomeViewHolder::class.java)
|
CommonAdapter(requireContext(), R.layout.item_pda_home, HomeViewHolder::class.java)
|
||||||
viewModel.pageModel.bindSmartRefreshLayout(binding.srl, binding.rv, viewModel, this)
|
viewModel.pageModel.bindSmartRefreshLayout(binding.srl, binding.rv, viewModel, this)
|
||||||
|
|
||||||
|
// 分段按钮选中态加粗（设计稿 font-weight 500，选择器表达不了字重）
|
||||||
|
viewModel.countryType.observe(viewLifecycleOwner) {
|
||||||
|
setMedium(binding.tvScopeGn, it != true)
|
||||||
|
setMedium(binding.tvScopeGj, it == true)
|
||||||
|
}
|
||||||
|
viewModel.type.observe(viewLifecycleOwner) {
|
||||||
|
setMedium(binding.tvDirArrival, it == HomeViewModel.TYPE_ARRIVAL)
|
||||||
|
setMedium(binding.tvDirLeave, it == HomeViewModel.TYPE_LEAVE)
|
||||||
|
}
|
||||||
|
|
||||||
viewModel.refresh()
|
viewModel.refresh()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private fun setMedium(tv: TextView, medium: Boolean) {
|
||||||
|
tv.typeface = if (medium) Typeface.create("sans-serif-medium", Typeface.NORMAL)
|
||||||
|
else Typeface.DEFAULT
|
||||||
|
}
|
||||||
|
|
||||||
companion object {
|
companion object {
|
||||||
fun newInstance(): Fragment {
|
fun newInstance(): Fragment {
|
||||||
return HomeFragment()
|
return HomeFragment()
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
package com.sixin.module_p.ui.enter.home
|
package com.sixin.module_p.ui.enter.home
|
||||||
|
|
||||||
import android.graphics.Color
|
|
||||||
import android.view.View
|
import android.view.View
|
||||||
import com.lukouguoji.module_base.base.BaseViewHolder
|
import com.lukouguoji.module_base.base.BaseViewHolder
|
||||||
import com.lukouguoji.module_base.bean.FlightBean
|
import com.lukouguoji.module_base.bean.FlightBean
|
||||||
@@ -10,12 +9,6 @@ class HomeViewHolder(view: View) : BaseViewHolder<FlightBean, ItemPdaHomeBinding
|
|||||||
|
|
||||||
override fun onBind(item: Any?, position: Int) {
|
override fun onBind(item: Any?, position: Int) {
|
||||||
binding.bean = getItemBean(item)
|
binding.bean = getItemBean(item)
|
||||||
|
|
||||||
if (position % 2 == 0) {
|
|
||||||
binding.ll.setBackgroundColor(Color.parseColor("#8c8c8c"))
|
|
||||||
} else {
|
|
||||||
binding.ll.setBackgroundColor(Color.parseColor("#41cea5"))
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -3,6 +3,7 @@ package com.sixin.module_p.ui.enter.home
|
|||||||
import android.app.DatePickerDialog
|
import android.app.DatePickerDialog
|
||||||
import androidx.lifecycle.LifecycleOwner
|
import androidx.lifecycle.LifecycleOwner
|
||||||
import androidx.lifecycle.MutableLiveData
|
import androidx.lifecycle.MutableLiveData
|
||||||
|
import androidx.lifecycle.Transformations
|
||||||
import androidx.lifecycle.observe
|
import androidx.lifecycle.observe
|
||||||
import com.lukouguoji.module_base.base.BasePageViewModel
|
import com.lukouguoji.module_base.base.BasePageViewModel
|
||||||
import com.lukouguoji.module_base.http.net.NetApply
|
import com.lukouguoji.module_base.http.net.NetApply
|
||||||
@@ -12,6 +13,7 @@ import com.lukouguoji.module_base.ktx.toRequestBody
|
|||||||
import com.sixin.module_p.ui.gnc.shouyun.dialog.PdaDaiShouYunFilterDialogModel
|
import com.sixin.module_p.ui.gnc.shouyun.dialog.PdaDaiShouYunFilterDialogModel
|
||||||
import dev.DevUtils
|
import dev.DevUtils
|
||||||
import dev.utils.common.DateUtils
|
import dev.utils.common.DateUtils
|
||||||
|
import java.util.Calendar
|
||||||
|
|
||||||
class HomeViewModel : BasePageViewModel() {
|
class HomeViewModel : BasePageViewModel() {
|
||||||
|
|
||||||
@@ -19,8 +21,12 @@ class HomeViewModel : BasePageViewModel() {
|
|||||||
// 日期
|
// 日期
|
||||||
val date = MutableLiveData(DateUtils.formatDate(DateUtils.getCurrentTime(), "yyyy-MM-dd"))
|
val date = MutableLiveData(DateUtils.formatDate(DateUtils.getCurrentTime(), "yyyy-MM-dd"))
|
||||||
|
|
||||||
// 类型
|
// 日期卡片的「10月」/「20」（设计稿 .date-picker 两行显示）
|
||||||
val type = MutableLiveData(TYPE_LEAVE)
|
val dateMonth = Transformations.map(date) { "${parseDate(it).get(Calendar.MONTH) + 1}月" }
|
||||||
|
val dateDay = Transformations.map(date) { parseDate(it).get(Calendar.DAY_OF_MONTH).toString() }
|
||||||
|
|
||||||
|
// 类型（设计稿默认「进港」= 到达）
|
||||||
|
val type = MutableLiveData(TYPE_ARRIVAL)
|
||||||
|
|
||||||
// 航班类型- 0:国内, 1:国际
|
// 航班类型- 0:国内, 1:国际
|
||||||
val countryType = MutableLiveData(false)
|
val countryType = MutableLiveData(false)
|
||||||
@@ -28,7 +34,7 @@ class HomeViewModel : BasePageViewModel() {
|
|||||||
private val datePicker by lazy {
|
private val datePicker by lazy {
|
||||||
DatePickerDialog(getTopActivity()).apply {
|
DatePickerDialog(getTopActivity()).apply {
|
||||||
setOnDateSetListener { _, year, month, dayOfMonth ->
|
setOnDateSetListener { _, year, month, dayOfMonth ->
|
||||||
date.value = "${year}-${month + 1}-${dayOfMonth}"
|
date.value = formatDate(Calendar.getInstance().apply { set(year, month, dayOfMonth) })
|
||||||
refresh()
|
refresh()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -69,10 +75,35 @@ class HomeViewModel : BasePageViewModel() {
|
|||||||
configModel.show()
|
configModel.show()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 国内 / 国际 切换（countryType 的 observer 负责刷新）
|
||||||
|
*/
|
||||||
|
fun onCountryTypeChange(isGj: Boolean) {
|
||||||
|
if (countryType.value != isGj) countryType.value = isGj
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 日期前后翻一天（设计稿日期两侧的 ‹ ›）
|
||||||
|
*/
|
||||||
|
fun onDateStep(offset: Int) {
|
||||||
|
date.value = formatDate(parseDate(date.value).apply { add(Calendar.DAY_OF_MONTH, offset) })
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
private fun parseDate(value: String?): Calendar =
|
||||||
|
DateUtils.getCalendar(DateUtils.parseDate(value, "yyyy-MM-dd") ?: java.util.Date())
|
||||||
|
|
||||||
|
private fun formatDate(calendar: Calendar): String =
|
||||||
|
DateUtils.formatDate(calendar.time, "yyyy-MM-dd")
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 日期点击
|
* 日期点击
|
||||||
*/
|
*/
|
||||||
fun onDateClick() {
|
fun onDateClick() {
|
||||||
|
// 从当前选中日期打开（‹ › 翻日后不再是今天）
|
||||||
|
parseDate(date.value).let {
|
||||||
|
datePicker.updateDate(it.get(Calendar.YEAR), it.get(Calendar.MONTH), it.get(Calendar.DAY_OF_MONTH))
|
||||||
|
}
|
||||||
datePicker.show()
|
datePicker.show()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
5
module_p/src/main/res/color/phone_home_segment_text.xml
Normal file
5
module_p/src/main/res/color/phone_home_segment_text.xml
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<selector xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
<item android:color="@android:color/white" android:state_selected="true" />
|
||||||
|
<item android:color="@color/phone_home_text_secondary" />
|
||||||
|
</selector>
|
||||||
5
module_p/src/main/res/color/phone_home_tab_tint.xml
Normal file
5
module_p/src/main/res/color/phone_home_tab_tint.xml
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<selector xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
<item android:color="@color/phone_home_primary" android:state_selected="true" />
|
||||||
|
<item android:color="@color/phone_home_text_hint" />
|
||||||
|
</selector>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gjc_arrive.png
Normal file
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gjc_arrive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gjc_move.png
Normal file
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gjc_move.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gjc_query.png
Normal file
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gjc_query.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gjj_query.png
Normal file
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gjj_query.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gjj_tally.png
Normal file
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gjj_tally.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gnj_move.png
Normal file
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gnj_move.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gnj_xie_ji.png
Normal file
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_gnj_xie_ji.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_uld.png
Normal file
BIN
module_p/src/main/res/drawable-nodpi/img_pda_menu_uld.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
5
module_p/src/main/res/drawable/bg_phone_home_badge.xml
Normal file
5
module_p/src/main/res/drawable/bg_phone_home_badge.xml
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
|
||||||
|
<solid android:color="@color/phone_home_badge" />
|
||||||
|
<corners android:radius="999dp" />
|
||||||
|
</shape>
|
||||||
6
module_p/src/main/res/drawable/bg_phone_home_card.xml
Normal file
6
module_p/src/main/res/drawable/bg_phone_home_card.xml
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
|
||||||
|
<solid android:color="@android:color/white" />
|
||||||
|
<stroke android:width="1dp" android:color="@color/phone_home_border" />
|
||||||
|
<corners android:radius="10dp" />
|
||||||
|
</shape>
|
||||||
6
module_p/src/main/res/drawable/bg_phone_home_date.xml
Normal file
6
module_p/src/main/res/drawable/bg_phone_home_date.xml
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
|
||||||
|
<solid android:color="@android:color/white" />
|
||||||
|
<stroke android:width="1dp" android:color="@color/phone_home_border" />
|
||||||
|
<corners android:radius="6dp" />
|
||||||
|
</shape>
|
||||||
4
module_p/src/main/res/drawable/bg_phone_home_fab.xml
Normal file
4
module_p/src/main/res/drawable/bg_phone_home_fab.xml
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
|
||||||
|
<solid android:color="@color/phone_home_fab_bg" />
|
||||||
|
</shape>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
|
||||||
|
<solid android:color="@color/phone_home_group_bg" />
|
||||||
|
<stroke android:width="1dp" android:color="@color/phone_home_border" />
|
||||||
|
<corners android:radius="999dp" />
|
||||||
|
</shape>
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<selector xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
<item android:state_selected="true">
|
||||||
|
<shape android:shape="rectangle">
|
||||||
|
<solid android:color="@color/phone_home_primary" />
|
||||||
|
<corners android:radius="999dp" />
|
||||||
|
</shape>
|
||||||
|
</item>
|
||||||
|
<item android:drawable="@android:color/transparent" />
|
||||||
|
</selector>
|
||||||
14
module_p/src/main/res/drawable/bg_phone_home_tab_bar.xml
Normal file
14
module_p/src/main/res/drawable/bg_phone_home_tab_bar.xml
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- 底部 Tab 栏：白底 + 顶部 1dp 描边 -->
|
||||||
|
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
<item>
|
||||||
|
<shape android:shape="rectangle">
|
||||||
|
<solid android:color="@color/phone_home_border" />
|
||||||
|
</shape>
|
||||||
|
</item>
|
||||||
|
<item android:top="1dp">
|
||||||
|
<shape android:shape="rectangle">
|
||||||
|
<solid android:color="@android:color/white" />
|
||||||
|
</shape>
|
||||||
|
</item>
|
||||||
|
</layer-list>
|
||||||
6
module_p/src/main/res/drawable/bg_phone_home_tile.xml
Normal file
6
module_p/src/main/res/drawable/bg_phone_home_tile.xml
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- 宫格图标圆角裁剪轮廓（圆角 = 边长 × 0.267），白底用于投影 -->
|
||||||
|
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
|
||||||
|
<solid android:color="@android:color/white" />
|
||||||
|
<corners android:radius="15.9dp" />
|
||||||
|
</shape>
|
||||||
11
module_p/src/main/res/drawable/ic_phone_home_bell.xml
Normal file
11
module_p/src/main/res/drawable/ic_phone_home_bell.xml
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Material Design Icons: mdi:bell-outline -->
|
||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="24dp"
|
||||||
|
android:height="24dp"
|
||||||
|
android:viewportWidth="24"
|
||||||
|
android:viewportHeight="24">
|
||||||
|
<path
|
||||||
|
android:fillColor="#FFFFFFFF"
|
||||||
|
android:pathData="M10 21h4c0 1.1-.9 2-2 2s-2-.9-2-2m11-2v1H3v-1l2-2v-6c0-3.1 2-5.8 5-6.7V4c0-1.1.9-2 2-2s2 .9 2 2v.3c3 .9 5 3.6 5 6.7v6zm-4-8c0-2.8-2.2-5-5-5s-5 2.2-5 5v7h10z" />
|
||||||
|
</vector>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Material Design Icons: mdi:chevron-left -->
|
||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="24dp"
|
||||||
|
android:height="24dp"
|
||||||
|
android:viewportWidth="24"
|
||||||
|
android:viewportHeight="24">
|
||||||
|
<path
|
||||||
|
android:fillColor="#FFFFFFFF"
|
||||||
|
android:pathData="M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z" />
|
||||||
|
</vector>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Material Design Icons: mdi:chevron-right -->
|
||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="24dp"
|
||||||
|
android:height="24dp"
|
||||||
|
android:viewportWidth="24"
|
||||||
|
android:viewportHeight="24">
|
||||||
|
<path
|
||||||
|
android:fillColor="#FFFFFFFF"
|
||||||
|
android:pathData="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z" />
|
||||||
|
</vector>
|
||||||
11
module_p/src/main/res/drawable/ic_phone_home_settings.xml
Normal file
11
module_p/src/main/res/drawable/ic_phone_home_settings.xml
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Material Design Icons: mdi:cog（设计稿 settings-fab 内联 SVG） -->
|
||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="24dp"
|
||||||
|
android:height="24dp"
|
||||||
|
android:viewportWidth="24"
|
||||||
|
android:viewportHeight="24">
|
||||||
|
<path
|
||||||
|
android:fillColor="#FFFFFFFF"
|
||||||
|
android:pathData="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" />
|
||||||
|
</vector>
|
||||||
11
module_p/src/main/res/drawable/ic_phone_home_tab_earth.xml
Normal file
11
module_p/src/main/res/drawable/ic_phone_home_tab_earth.xml
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Material Design Icons: mdi:earth -->
|
||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="24dp"
|
||||||
|
android:height="24dp"
|
||||||
|
android:viewportWidth="24"
|
||||||
|
android:viewportHeight="24">
|
||||||
|
<path
|
||||||
|
android:fillColor="#FFFFFFFF"
|
||||||
|
android:pathData="M17.9 17.39c-.26-.8-1.01-1.39-1.9-1.39h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41a7.984 7.984 0 0 1 2.9 12.8M11 19.93c-3.95-.49-7-3.85-7-7.93c0-.62.08-1.22.21-1.79L9 15v1a2 2 0 0 0 2 2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2" />
|
||||||
|
</vector>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- 首页 Tab：选中实心 mdi:home，未选中描边 mdi:home-outline（同设计稿） -->
|
||||||
|
<selector xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
<item android:drawable="@drawable/ic_phone_home_tab_home_filled" android:state_selected="true" />
|
||||||
|
<item android:drawable="@drawable/ic_phone_home_tab_home_outline" />
|
||||||
|
</selector>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Material Design Icons: mdi:home -->
|
||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="24dp"
|
||||||
|
android:height="24dp"
|
||||||
|
android:viewportWidth="24"
|
||||||
|
android:viewportHeight="24">
|
||||||
|
<path
|
||||||
|
android:fillColor="#FFFFFFFF"
|
||||||
|
android:pathData="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z" />
|
||||||
|
</vector>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Material Design Icons: mdi:home-outline -->
|
||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="24dp"
|
||||||
|
android:height="24dp"
|
||||||
|
android:viewportWidth="24"
|
||||||
|
android:viewportHeight="24">
|
||||||
|
<path
|
||||||
|
android:fillColor="#FFFFFFFF"
|
||||||
|
android:pathData="m12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81zM12 3L2 12h3v8h6v-6h2v6h6v-8h3" />
|
||||||
|
</vector>
|
||||||
40
module_p/src/main/res/drawable/ic_phone_home_tab_intl.xml
Normal file
40
module_p/src/main/res/drawable/ic_phone_home_tab_intl.xml
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!--
|
||||||
|
国际 Tab 组合图标（地球 + 右上角飞机），构图取自设计稿 .tab-icon-stack：
|
||||||
|
- mdi:earth 16 单位贴左下 (0,2)-(16,18)；mdi:airplane 16 单位 (10,0)-(26,16) 再绕 (18.5,8.5) 旋转 -14°
|
||||||
|
- viewport 裁到两者可见区域的并集 (1.33,1.38)-(23.44,17.38)，这样 ImageView 居中 = 视觉居中
|
||||||
|
- 尺寸按单个图形 16dp 换算（16 单位 → 16dp），与其余 Tab 图标同大
|
||||||
|
-->
|
||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="22.11dp"
|
||||||
|
android:height="16dp"
|
||||||
|
android:viewportWidth="22.11"
|
||||||
|
android:viewportHeight="16">
|
||||||
|
<group
|
||||||
|
android:translateX="-1.33"
|
||||||
|
android:translateY="-1.38">
|
||||||
|
<group
|
||||||
|
android:pivotX="12"
|
||||||
|
android:pivotY="12"
|
||||||
|
android:scaleX="0.6667"
|
||||||
|
android:scaleY="0.6667"
|
||||||
|
android:translateX="-4"
|
||||||
|
android:translateY="-2">
|
||||||
|
<path
|
||||||
|
android:fillColor="#FFFFFFFF"
|
||||||
|
android:pathData="M17.9 17.39c-.26-.8-1.01-1.39-1.9-1.39h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41a7.984 7.984 0 0 1 2.9 12.8M11 19.93c-3.95-.49-7-3.85-7-7.93c0-.62.08-1.22.21-1.79L9 15v1a2 2 0 0 0 2 2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2" />
|
||||||
|
</group>
|
||||||
|
<group
|
||||||
|
android:pivotX="12"
|
||||||
|
android:pivotY="12"
|
||||||
|
android:rotation="-14"
|
||||||
|
android:scaleX="0.6667"
|
||||||
|
android:scaleY="0.6667"
|
||||||
|
android:translateX="5.894"
|
||||||
|
android:translateY="-3.864">
|
||||||
|
<path
|
||||||
|
android:fillColor="#FFFFFFFF"
|
||||||
|
android:pathData="M20.56 3.91c.59.59.59 1.54 0 2.12l-3.89 3.89l2.12 9.19l-1.41 1.42l-3.88-7.43L9.6 17l.36 2.47l-1.07 1.06l-1.76-3.18l-3.19-1.77L5 14.5l2.5.37L11.37 11L3.94 7.09l1.42-1.41l9.19 2.12l3.89-3.89c.56-.58 1.56-.58 2.12 0" />
|
||||||
|
</group>
|
||||||
|
</group>
|
||||||
|
</vector>
|
||||||
11
module_p/src/main/res/drawable/ic_phone_home_tab_mine.xml
Normal file
11
module_p/src/main/res/drawable/ic_phone_home_tab_mine.xml
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Material Design Icons: mdi:account-circle-outline -->
|
||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="24dp"
|
||||||
|
android:height="24dp"
|
||||||
|
android:viewportWidth="24"
|
||||||
|
android:viewportHeight="24">
|
||||||
|
<path
|
||||||
|
android:fillColor="#FFFFFFFF"
|
||||||
|
android:pathData="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2M7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.5.88 4.93 1.78A7.9 7.9 0 0 1 12 20c-1.86 0-3.57-.64-4.93-1.72m11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33A7.93 7.93 0 0 1 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.5-1.64 4.83M12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6m0 5a1.5 1.5 0 0 1-1.5-1.5A1.5 1.5 0 0 1 12 8a1.5 1.5 0 0 1 1.5 1.5A1.5 1.5 0 0 1 12 11" />
|
||||||
|
</vector>
|
||||||
@@ -1,6 +1,11 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!--
|
||||||
|
手持端首页容器：四个 Tab 的 ViewPager2 + 右上角消息铃铛 + 底部 Tab 栏
|
||||||
|
样式按 documents/5.5寸首页新样式/ 设计稿（小屏紧凑档：导航 46dp、Tab 栏 58dp）
|
||||||
|
Tab 选中态通过 android:selected 下发到子 View，图标/文字颜色走 phone_home_tab_tint 选择器
|
||||||
|
Tab 图标：16dp（与设计稿实际图形同大），与文字水平居中（设计稿 iconify 图标实际只有 16px 且偏在 24px 盒子左上角，按需求不照搬）
|
||||||
|
-->
|
||||||
<layout xmlns:android="http://schemas.android.com/apk/res/android"
|
<layout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
|
||||||
xmlns:tools="http://schemas.android.com/tools">
|
xmlns:tools="http://schemas.android.com/tools">
|
||||||
|
|
||||||
<data>
|
<data>
|
||||||
@@ -13,60 +18,67 @@
|
|||||||
<RelativeLayout
|
<RelativeLayout
|
||||||
android:layout_width="match_parent"
|
android:layout_width="match_parent"
|
||||||
android:layout_height="match_parent"
|
android:layout_height="match_parent"
|
||||||
android:background="@color/backgroud_gray"
|
android:background="@color/phone_home_bg"
|
||||||
tools:context=".ui.enter.PDAEnterActivity">
|
tools:context=".ui.enter.PDAEnterActivity">
|
||||||
|
|
||||||
<RelativeLayout
|
<androidx.viewpager2.widget.ViewPager2
|
||||||
|
android:id="@+id/vp"
|
||||||
android:layout_width="match_parent"
|
android:layout_width="match_parent"
|
||||||
android:layout_height="match_parent"
|
android:layout_height="match_parent"
|
||||||
android:layout_marginBottom="50dp">
|
android:layout_above="@id/ll_tab" />
|
||||||
|
|
||||||
<androidx.viewpager2.widget.ViewPager2
|
<!--
|
||||||
android:id="@+id/vp"
|
消息铃铛（四个 Tab 共用一处、位置固定）：按设计稿 domestic.html / home.html 的 .nav-bell——
|
||||||
android:layout_width="match_parent"
|
34dp 按钮距右 12dp、垂直居中于 46dp 导航栏，16dp 图形距按钮左上 4.5dp；角标相对按钮 right:-2dp / top:0，
|
||||||
android:layout_height="match_parent" />
|
所以容器比按钮宽 2dp、右边距 10dp。dashboard.html 的铃铛位置略有不同（右 8dp），按多数统一，不随 Tab 切换
|
||||||
|
-->
|
||||||
|
<FrameLayout
|
||||||
|
android:id="@+id/fl_message"
|
||||||
|
android:layout_width="36dp"
|
||||||
|
android:layout_height="34dp"
|
||||||
|
android:layout_alignParentEnd="true"
|
||||||
|
android:layout_marginTop="6dp"
|
||||||
|
android:layout_marginEnd="10dp"
|
||||||
|
android:onClick="@{() -> viewModel.onMessageClick()}">
|
||||||
|
|
||||||
<RelativeLayout
|
<ImageView
|
||||||
android:layout_width="44dp"
|
android:id="@+id/iv_message"
|
||||||
android:layout_height="44dp"
|
android:layout_width="34dp"
|
||||||
android:layout_alignParentRight="true"
|
android:layout_height="34dp"
|
||||||
android:layout_marginRight="10dp"
|
android:paddingStart="4.5dp"
|
||||||
android:onClick="@{() -> viewModel.onMessageClick()}">
|
android:paddingTop="4.5dp"
|
||||||
|
android:paddingEnd="13.5dp"
|
||||||
|
android:paddingBottom="13.5dp"
|
||||||
|
android:src="@drawable/ic_phone_home_bell"
|
||||||
|
tools:ignore="ContentDescription" />
|
||||||
|
|
||||||
<ImageView
|
<TextView
|
||||||
android:layout_width="35dp"
|
android:id="@+id/tv_message"
|
||||||
android:layout_height="35dp"
|
android:layout_width="wrap_content"
|
||||||
android:layout_centerInParent="true"
|
android:layout_height="15dp"
|
||||||
android:layout_marginRight="10dp"
|
android:layout_gravity="top|end"
|
||||||
android:padding="5dp"
|
android:background="@drawable/bg_phone_home_badge"
|
||||||
android:src="@drawable/img_message_svg" />
|
android:gravity="center"
|
||||||
|
android:includeFontPadding="false"
|
||||||
|
android:minWidth="24dp"
|
||||||
|
android:paddingHorizontal="4dp"
|
||||||
|
android:textColor="@android:color/white"
|
||||||
|
android:textSize="11sp"
|
||||||
|
android:textStyle="bold"
|
||||||
|
android:visibility="gone"
|
||||||
|
tools:text="341"
|
||||||
|
tools:visibility="visible" />
|
||||||
|
|
||||||
<TextView
|
</FrameLayout>
|
||||||
android:id="@+id/tv_message"
|
|
||||||
shape_bg_color="@{@color/red}"
|
|
||||||
shape_radius="@{10}"
|
|
||||||
android:layout_width="wrap_content"
|
|
||||||
android:layout_height="20dp"
|
|
||||||
android:layout_alignParentRight="true"
|
|
||||||
android:layout_marginTop="5dp"
|
|
||||||
android:background="@color/red"
|
|
||||||
android:gravity="center"
|
|
||||||
android:minWidth="20dp"
|
|
||||||
android:paddingHorizontal="3dp"
|
|
||||||
android:text="2"
|
|
||||||
android:textColor="@color/white"
|
|
||||||
android:textSize="11sp"
|
|
||||||
android:visibility="gone" />
|
|
||||||
|
|
||||||
</RelativeLayout>
|
|
||||||
|
|
||||||
</RelativeLayout>
|
|
||||||
|
|
||||||
<LinearLayout
|
<LinearLayout
|
||||||
|
android:id="@+id/ll_tab"
|
||||||
android:layout_width="match_parent"
|
android:layout_width="match_parent"
|
||||||
android:layout_height="50dp"
|
android:layout_height="58dp"
|
||||||
android:layout_alignParentBottom="true"
|
android:layout_alignParentBottom="true"
|
||||||
android:background="@color/white">
|
android:background="@drawable/bg_phone_home_tab_bar"
|
||||||
|
android:paddingTop="1dp"
|
||||||
|
android:paddingBottom="4dp">
|
||||||
|
|
||||||
<LinearLayout
|
<LinearLayout
|
||||||
android:layout_width="0dp"
|
android:layout_width="0dp"
|
||||||
@@ -74,20 +86,20 @@
|
|||||||
android:layout_weight="1"
|
android:layout_weight="1"
|
||||||
android:gravity="center"
|
android:gravity="center"
|
||||||
android:onClick="@{()->viewModel.onIndexChanged(0)}"
|
android:onClick="@{()->viewModel.onIndexChanged(0)}"
|
||||||
android:orientation="vertical">
|
android:orientation="vertical"
|
||||||
|
android:selected="@{viewModel.index == 0}">
|
||||||
|
|
||||||
<ImageView
|
<ImageView
|
||||||
android:layout_width="25dp"
|
android:layout_width="16dp"
|
||||||
android:layout_height="25dp"
|
android:layout_height="16dp"
|
||||||
android:src="@{viewModel.index == 0 ? @drawable/img_pda_tab_1_s : @drawable/img_pda_tab_1_n}"
|
android:src="@drawable/ic_phone_home_tab_home"
|
||||||
tools:src="@drawable/img_pda_tab_1_s" />
|
android:tint="@color/phone_home_tab_tint"
|
||||||
|
tools:ignore="ContentDescription" />
|
||||||
|
|
||||||
<TextView
|
<TextView
|
||||||
android:layout_width="wrap_content"
|
android:id="@+id/tv_tab_home"
|
||||||
android:layout_height="wrap_content"
|
style="@style/PhoneHomeTabLabel"
|
||||||
android:text="首页"
|
android:text="首页" />
|
||||||
android:textColor="@{viewModel.index == 0 ? @color/colorPrimary : @color/text_gray}"
|
|
||||||
android:textSize="12sp" />
|
|
||||||
|
|
||||||
</LinearLayout>
|
</LinearLayout>
|
||||||
|
|
||||||
@@ -97,20 +109,20 @@
|
|||||||
android:layout_weight="1"
|
android:layout_weight="1"
|
||||||
android:gravity="center"
|
android:gravity="center"
|
||||||
android:onClick="@{()->viewModel.onIndexChanged(1)}"
|
android:onClick="@{()->viewModel.onIndexChanged(1)}"
|
||||||
android:orientation="vertical">
|
android:orientation="vertical"
|
||||||
|
android:selected="@{viewModel.index == 1}">
|
||||||
|
|
||||||
<ImageView
|
<ImageView
|
||||||
android:layout_width="25dp"
|
android:layout_width="16dp"
|
||||||
android:layout_height="25dp"
|
android:layout_height="16dp"
|
||||||
android:src="@{viewModel.index == 1 ? @drawable/img_pda_tab_2_s : @drawable/img_pda_tab_2_n}"
|
android:src="@drawable/ic_phone_home_tab_earth"
|
||||||
tools:src="@drawable/img_pda_tab_2_s" />
|
android:tint="@color/phone_home_tab_tint"
|
||||||
|
tools:ignore="ContentDescription" />
|
||||||
|
|
||||||
<TextView
|
<TextView
|
||||||
android:layout_width="wrap_content"
|
android:id="@+id/tv_tab_gn"
|
||||||
android:layout_height="wrap_content"
|
style="@style/PhoneHomeTabLabel"
|
||||||
android:text="国内"
|
android:text="国内" />
|
||||||
android:textColor="@{viewModel.index == 1 ? @color/colorPrimary : @color/text_gray}"
|
|
||||||
android:textSize="12sp" />
|
|
||||||
</LinearLayout>
|
</LinearLayout>
|
||||||
|
|
||||||
<LinearLayout
|
<LinearLayout
|
||||||
@@ -119,20 +131,20 @@
|
|||||||
android:layout_weight="1"
|
android:layout_weight="1"
|
||||||
android:gravity="center"
|
android:gravity="center"
|
||||||
android:onClick="@{()->viewModel.onIndexChanged(2)}"
|
android:onClick="@{()->viewModel.onIndexChanged(2)}"
|
||||||
android:orientation="vertical">
|
android:orientation="vertical"
|
||||||
|
android:selected="@{viewModel.index == 2}">
|
||||||
|
|
||||||
<ImageView
|
<ImageView
|
||||||
android:layout_width="25dp"
|
android:layout_width="wrap_content"
|
||||||
android:layout_height="25dp"
|
android:layout_height="16dp"
|
||||||
android:src="@{viewModel.index == 2 ? @drawable/img_pda_tab_3_s : @drawable/img_pda_tab_3_n}"
|
android:src="@drawable/ic_phone_home_tab_intl"
|
||||||
tools:src="@drawable/img_pda_tab_3_s" />
|
android:tint="@color/phone_home_tab_tint"
|
||||||
|
tools:ignore="ContentDescription" />
|
||||||
|
|
||||||
<TextView
|
<TextView
|
||||||
android:layout_width="wrap_content"
|
android:id="@+id/tv_tab_gj"
|
||||||
android:layout_height="wrap_content"
|
style="@style/PhoneHomeTabLabel"
|
||||||
android:text="国际"
|
android:text="国际" />
|
||||||
android:textColor="@{viewModel.index == 2 ? @color/colorPrimary : @color/text_gray}"
|
|
||||||
android:textSize="12sp" />
|
|
||||||
</LinearLayout>
|
</LinearLayout>
|
||||||
|
|
||||||
<LinearLayout
|
<LinearLayout
|
||||||
@@ -141,20 +153,20 @@
|
|||||||
android:layout_weight="1"
|
android:layout_weight="1"
|
||||||
android:gravity="center"
|
android:gravity="center"
|
||||||
android:onClick="@{()->viewModel.onIndexChanged(3)}"
|
android:onClick="@{()->viewModel.onIndexChanged(3)}"
|
||||||
android:orientation="vertical">
|
android:orientation="vertical"
|
||||||
|
android:selected="@{viewModel.index == 3}">
|
||||||
|
|
||||||
<ImageView
|
<ImageView
|
||||||
android:layout_width="25dp"
|
android:layout_width="16dp"
|
||||||
android:layout_height="25dp"
|
android:layout_height="16dp"
|
||||||
android:src="@{viewModel.index == 3 ? @drawable/img_pda_tab_4_s : @drawable/img_pda_tab_4_n}"
|
android:src="@drawable/ic_phone_home_tab_mine"
|
||||||
tools:src="@drawable/img_pda_tab_4_s" />
|
android:tint="@color/phone_home_tab_tint"
|
||||||
|
tools:ignore="ContentDescription" />
|
||||||
|
|
||||||
<TextView
|
<TextView
|
||||||
android:layout_width="wrap_content"
|
android:id="@+id/tv_tab_mine"
|
||||||
android:layout_height="wrap_content"
|
style="@style/PhoneHomeTabLabel"
|
||||||
android:text="我的"
|
android:text="我的" />
|
||||||
android:textColor="@{viewModel.index == 3 ? @color/colorPrimary : @color/text_gray}"
|
|
||||||
android:textSize="12sp" />
|
|
||||||
</LinearLayout>
|
</LinearLayout>
|
||||||
|
|
||||||
</LinearLayout>
|
</LinearLayout>
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<layout xmlns:android="http://schemas.android.com/apk/res/android"
|
<!-- 手持端首页「国际」Tab（设计稿 documents/5.5寸首页新样式/home.html），分组宫格由 PdaMenuRenderer 渲染 -->
|
||||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
<layout xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
xmlns:tools="http://schemas.android.com/tools">
|
|
||||||
|
|
||||||
<data>
|
<data>
|
||||||
|
|
||||||
@@ -13,31 +12,29 @@
|
|||||||
<LinearLayout
|
<LinearLayout
|
||||||
android:layout_width="match_parent"
|
android:layout_width="match_parent"
|
||||||
android:layout_height="match_parent"
|
android:layout_height="match_parent"
|
||||||
android:background="@color/backgroud_gray"
|
android:background="@color/phone_home_bg"
|
||||||
android:orientation="vertical">
|
android:orientation="vertical">
|
||||||
|
|
||||||
<RelativeLayout
|
<TextView
|
||||||
android:layout_width="match_parent"
|
style="@style/PhoneHomeNavBar"
|
||||||
android:layout_height="44dp"
|
android:text="国际业务" />
|
||||||
android:background="@color/colorPrimary">
|
|
||||||
|
|
||||||
<TextView
|
<androidx.core.widget.NestedScrollView
|
||||||
android:layout_width="wrap_content"
|
android:layout_width="match_parent"
|
||||||
|
android:layout_height="0dp"
|
||||||
|
android:layout_weight="1"
|
||||||
|
android:overScrollMode="never"
|
||||||
|
android:scrollbars="none">
|
||||||
|
|
||||||
|
<!-- 底部 8dp 留白（设计稿最后一组 section 的 pb-2） -->
|
||||||
|
<LinearLayout
|
||||||
|
android:id="@+id/ll_menu"
|
||||||
|
android:layout_width="match_parent"
|
||||||
android:layout_height="wrap_content"
|
android:layout_height="wrap_content"
|
||||||
android:layout_centerInParent="true"
|
android:orientation="vertical"
|
||||||
android:text="国际业务"
|
android:paddingBottom="8dp" />
|
||||||
android:textColor="@color/white"
|
|
||||||
android:textSize="18sp" />
|
|
||||||
|
|
||||||
</RelativeLayout>
|
</androidx.core.widget.NestedScrollView>
|
||||||
|
|
||||||
<androidx.recyclerview.widget.RecyclerView
|
|
||||||
android:id="@+id/rv"
|
|
||||||
android:layout_width="match_parent"
|
|
||||||
tools:listitem="@layout/item_pda_action"
|
|
||||||
android:layout_height="match_parent"
|
|
||||||
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
|
|
||||||
app:spanCount="2" />
|
|
||||||
|
|
||||||
</LinearLayout>
|
</LinearLayout>
|
||||||
</layout>
|
</layout>
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<layout xmlns:android="http://schemas.android.com/apk/res/android"
|
<!-- 手持端首页「国内」Tab（设计稿 documents/5.5寸首页新样式/domestic.html），分组宫格由 PdaMenuRenderer 渲染 -->
|
||||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
<layout xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
xmlns:tools="http://schemas.android.com/tools">
|
|
||||||
|
|
||||||
<data>
|
<data>
|
||||||
|
|
||||||
@@ -13,31 +12,29 @@
|
|||||||
<LinearLayout
|
<LinearLayout
|
||||||
android:layout_width="match_parent"
|
android:layout_width="match_parent"
|
||||||
android:layout_height="match_parent"
|
android:layout_height="match_parent"
|
||||||
android:background="@color/backgroud_gray"
|
android:background="@color/phone_home_bg"
|
||||||
android:orientation="vertical">
|
android:orientation="vertical">
|
||||||
|
|
||||||
<RelativeLayout
|
<TextView
|
||||||
android:layout_width="match_parent"
|
style="@style/PhoneHomeNavBar"
|
||||||
android:layout_height="44dp"
|
android:text="国内业务" />
|
||||||
android:background="@color/colorPrimary">
|
|
||||||
|
|
||||||
<TextView
|
<androidx.core.widget.NestedScrollView
|
||||||
android:layout_width="wrap_content"
|
android:layout_width="match_parent"
|
||||||
|
android:layout_height="0dp"
|
||||||
|
android:layout_weight="1"
|
||||||
|
android:overScrollMode="never"
|
||||||
|
android:scrollbars="none">
|
||||||
|
|
||||||
|
<!-- 底部 8dp 留白（设计稿最后一组 section 的 pb-2） -->
|
||||||
|
<LinearLayout
|
||||||
|
android:id="@+id/ll_menu"
|
||||||
|
android:layout_width="match_parent"
|
||||||
android:layout_height="wrap_content"
|
android:layout_height="wrap_content"
|
||||||
android:layout_centerInParent="true"
|
android:orientation="vertical"
|
||||||
android:text="国内业务"
|
android:paddingBottom="8dp" />
|
||||||
android:textColor="@color/white"
|
|
||||||
android:textSize="18sp" />
|
|
||||||
|
|
||||||
</RelativeLayout>
|
</androidx.core.widget.NestedScrollView>
|
||||||
|
|
||||||
<androidx.recyclerview.widget.RecyclerView
|
|
||||||
android:id="@+id/rv"
|
|
||||||
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
|
|
||||||
app:spanCount="2"
|
|
||||||
tools:listitem="@layout/item_pda_action"
|
|
||||||
android:layout_width="match_parent"
|
|
||||||
android:layout_height="match_parent" />
|
|
||||||
|
|
||||||
</LinearLayout>
|
</LinearLayout>
|
||||||
</layout>
|
</layout>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user