|
|
@@ -1,20 +1,68 @@
|
|
|
-<div class="mobile-container">
|
|
|
- <!-- 路由插槽 -->
|
|
|
- <div class="router-outlet">
|
|
|
- <router-outlet></router-outlet>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 底部导航栏 -->
|
|
|
- <nav mat-tab-nav-bar class="bottom-nav">
|
|
|
- <a
|
|
|
- mat-tab-link
|
|
|
- *ngFor="let link of navLinks"
|
|
|
- [routerLink]="link.path"
|
|
|
- routerLinkActive="active"
|
|
|
- #rla="routerLinkActive"
|
|
|
- [active]="rla.isActive">
|
|
|
- <mat-icon>{{link.icon}}</mat-icon>
|
|
|
- <span>{{link.label}}</span>
|
|
|
- </a>
|
|
|
- </nav>
|
|
|
-</div>
|
|
|
+<!-- src/app/modules/travel/mobile/components/nav-mobile-menu/nav-mobile-menu.component.html -->
|
|
|
+<nav class="mobile-nav">
|
|
|
+ <div class="mobile-nav-container">
|
|
|
+ <!-- 菜单按钮 (移动端汉堡菜单) -->
|
|
|
+ <button class="mobile-nav-toggle" (click)="toggleMenu()" aria-expanded="isMenuOpen">
|
|
|
+ <span class="sr-only">菜单</span>
|
|
|
+ <span class="hamburger" [class.active]="isMenuOpen"></span>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <!-- 品牌Logo/名称 -->
|
|
|
+ <div class="mobile-nav-brand">
|
|
|
+ <a routerLink="/mobile/home">Travel App</a >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主菜单 -->
|
|
|
+ <div class="mobile-nav-menu" [class.active]="isMenuOpen">
|
|
|
+ <ul class="mobile-nav-list">
|
|
|
+ <li class="mobile-nav-item">
|
|
|
+ <a routerLink="/mobile/home"
|
|
|
+ routerLinkActive="active"
|
|
|
+ [routerLinkActiveOptions]="{exact: true}">
|
|
|
+ <i class="icon-home"></i>
|
|
|
+ <span>首页</span>
|
|
|
+ </a >
|
|
|
+ </li>
|
|
|
+ <li class="mobile-nav-item">
|
|
|
+ <a routerLink="/mobile/platform" routerLinkActive="active">
|
|
|
+ <i class="icon-platform"></i>
|
|
|
+ <span>平台</span>
|
|
|
+ </a >
|
|
|
+ </li>
|
|
|
+ <li class="mobile-nav-item">
|
|
|
+ <a routerLink="/mobile/business" routerLinkActive="active">
|
|
|
+ <i class="icon-business"></i>
|
|
|
+ <span>业务</span>
|
|
|
+ </a >
|
|
|
+ </li>
|
|
|
+ <li class="mobile-nav-item">
|
|
|
+ <a routerLink="/mobile/member" routerLinkActive="active">
|
|
|
+ <i class="icon-member"></i>
|
|
|
+ <span>会员</span>
|
|
|
+ </a >
|
|
|
+ </li>
|
|
|
+ <li class="mobile-nav-item">
|
|
|
+ <a routerLink="/mobile/system" routerLinkActive="active">
|
|
|
+ <i class="icon-system"></i>
|
|
|
+ <span>系统</span>
|
|
|
+ </a >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 用户操作区域 -->
|
|
|
+ <div class="mobile-nav-actions">
|
|
|
+ <button class="mobile-nav-action">
|
|
|
+ <i class="icon-search"></i>
|
|
|
+ </button>
|
|
|
+ <button class="mobile-nav-action">
|
|
|
+ <i class="icon-user"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</nav>
|
|
|
+
|
|
|
+<!-- 路由插槽 -->
|
|
|
+<div class="mobile-content">
|
|
|
+ <router-outlet></router-outlet>
|
|
|
+</div>
|
