Преглед изворни кода

Merge branch 'master' of http://git.fmode.cn:3000/19870581353/travel-flatform

0235473 пре 4 дана
родитељ
комит
751939b7f0

+ 19 - 70
travel-platform-web/travel-web/src/crm/mobile/nav-mobile-menu/nav-mobile-menu.html

@@ -1,71 +1,20 @@
-<!-- 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 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>
-<button routerLink='/crm/mobile/menu'>
-    导航到话术主页
-</button>

+ 34 - 0
travel-platform-web/travel-web/src/crm/mobile/nav-mobile-menu/nav-mobile-menu.scss

@@ -0,0 +1,34 @@
+.mobile-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  
+  .router-outlet {
+    flex: 1;
+    overflow-y: auto;
+  }
+  
+  .bottom-nav {
+    display: flex;
+    justify-content: space-around;
+    background: white;
+    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
+    
+    a {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 8px 0;
+      text-decoration: none;
+      color: #666;
+      
+      mat-icon {
+        margin-bottom: 4px;
+      }
+      
+      &.active {
+        color: #3f51b5;
+      }
+    }
+  }
+}