|
|
@@ -1,2 +1,68 @@
|
|
|
-<p>nav-mobile-menu works!</p>
|
|
|
-<router-outlet></router-outlet>
|
|
|
+<!-- 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>
|
