travel-platform-web/travel-web/src/crm/mobile/page-crm-platform/page-crm-platform.html

@@ -1,8 +1,3 @@
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap"
-  rel="stylesheet">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
-
 <!-- 水墨装饰元素 -->
 <div class="ink-mountain no-flash"></div>
 <div class="ink-water no-flash"></div>
@@ -14,26 +9,26 @@
       <h2 class="sidebar-title">数智共创平台</h2>
       <ul class="module-nav">
         <li>
-          <a href="#" class="active"><i class="fas fa-database"></i> 文化资源库</a>
+          <a href="#cultural-resource-library" class="active"><i class="fas fa-database"></i> 文化资源库</a>
           <ul class="sub-nav">
-            <li><a href="#"><i class="fas fa-microphone-alt"></i> 多模态采集中心</a></li>
-            <li><a href="#"><i class="fas fa-sitemap"></i> 分类知识图谱</a></li>
+            <li><a href="#multimodal-collection"><i class="fas fa-microphone-alt"></i> 多模态采集中心</a></li>
+            <li><a href="#knowledge-graph"><i class="fas fa-sitemap"></i> 分类知识图谱</a></li>
           </ul>
         </li>
         <li>
-          <a href="#"><i class="fas fa-brain"></i> 智慧应用中心</a>
+          <a href="#smart-app-center"><i class="fas fa-brain"></i> 智慧应用中心</a>
           <ul class="sub-nav">
-            <li><a href="#"><i class="fas fa-paint-brush"></i> 数字文创工坊</a></li>
-            <li><a href="#"><i class="fas fa-map-marked-alt"></i> 智慧文旅系统</a></li>
-            <li><a href="#"><i class="fas fa-egg"></i> IP孵化平台</a></li>
+            <li><a href="#digital-workshop"><i class="fas fa-paint-brush"></i> 数字文创工坊</a></li>
+            <li><a href="#smart-tourism"><i class="fas fa-map-marked-alt"></i> 智慧文旅系统</a></li>
+            <li><a href="#ip-incubation"><i class="fas fa-egg"></i> IP孵化平台</a></li>
           </ul>
         </li>
         <li>
-          <a href="#"><i class="fas fa-users"></i> 共创社区</a>
+          <a href="#co-creation-community"><i class="fas fa-users"></i> 共创社区</a>
           <ul class="sub-nav">
-            <li><a href="#"><i class="fas fa-graduation-cap"></i> 高校联盟</a></li>
-            <li><a href="#"><i class="fas fa-landmark"></i> 政府协作</a></li>
-            <li><a href="#"><i class="fas fa-edit"></i> 全民创作</a></li>
+            <li><a href="#university-alliance"><i class="fas fa-graduation-cap"></i> 高校联盟</a></li>
+            <li><a href="#gov-collab"><i class="fas fa-landmark"></i> 政府协作</a></li>
+            <li><a href="#public-creation"><i class="fas fa-edit"></i> 全民创作</a></li>
           </ul>
         </li>
       </ul>
@@ -41,6 +36,8 @@
 
     <!-- 主内容区 -->
     <main class="content-area no-flash">
+      <!-- 文化资源库 -->
+      <div class="section-anchor" id="cultural-resource-library"></div>
       <div class="content-header">
         <h1 class="content-title">
           <i class="fas fa-database content-title-icon"></i>
@@ -71,25 +68,215 @@
 
       <!-- 功能模块网格 -->
       <div class="module-grid">
-        <!-- 循环模块卡片 -->
-        <div *ngFor="let module of modules" class="module-card no-flash">
-          <div class="card-header" [style.background]="module.bgColor">
-            <i [class]="module.icon + ' card-icon'"></i>
-            <h3 class="card-title">{{module.title}}</h3>
-            <p class="card-subtitle">{{module.subtitle}}</p>
+        <!-- 多模态采集中心 -->
+        <div class="module-card no-flash" id="multimodal-collection">
+          <div class="card-header" [style.background]="modules[0].bgColor">
+            <i [class]="modules[0].icon + ' card-icon'"></i>
+            <h3 class="card-title">{{modules[0].title}}</h3>
+            <p class="card-subtitle">{{modules[0].subtitle}}</p>
+          </div>
+          <div class="card-body">
+            <ul class="card-features">
+              <li *ngFor="let feature of modules[0].features">
+                <i [class]="feature.icon"></i> {{feature.text}}
+              </li>
+            </ul>
+            <div class="card-actions">
+              <button class="btn btn-primary" [style.background]="modules[0].bgColor">
+                <i [class]="modules[0].btnPrimary.icon"></i> {{modules[0].btnPrimary.text}}
+              </button>
+              <button class="btn btn-outline" [style.border-color]="modules[0].bgColor" [style.color]="modules[0].bgColor">
+                <i [class]="modules[0].btnOutline.icon"></i> {{modules[0].btnOutline.text}}
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 分类知识图谱 -->
+        <div class="module-card no-flash" id="knowledge-graph">
+          <div class="card-header" [style.background]="modules[1].bgColor">
+            <i [class]="modules[1].icon + ' card-icon'"></i>
+            <h3 class="card-title">{{modules[1].title}}</h3>
+            <p class="card-subtitle">{{modules[1].subtitle}}</p>
+          </div>
+          <div class="card-body">
+            <ul class="card-features">
+              <li *ngFor="let feature of modules[1].features">
+                <i [class]="feature.icon"></i> {{feature.text}}
+              </li>
+            </ul>
+            <div class="card-actions">
+              <button class="btn btn-primary" [style.background]="modules[1].bgColor">
+                <i [class]="modules[1].btnPrimary.icon"></i> {{modules[1].btnPrimary.text}}
+              </button>
+              <button class="btn btn-outline" [style.border-color]="modules[1].bgColor" [style.color]="modules[1].bgColor">
+                <i [class]="modules[1].btnOutline.icon"></i> {{modules[1].btnOutline.text}}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 智慧应用中心 -->
+      <div class="section-anchor" id="smart-app-center"></div>
+      <div class="section-header">
+        <h1 class="section-title">
+          <i class="fas fa-brain section-title-icon"></i>
+          智慧应用中心
+        </h1>
+      </div>
+      
+      <div class="module-grid">
+        <!-- 数字文创工坊 -->
+        <div class="module-card no-flash" id="digital-workshop">
+          <div class="card-header" [style.background]="modules[2].bgColor">
+            <i [class]="modules[2].icon + ' card-icon'"></i>
+            <h3 class="card-title">{{modules[2].title}}</h3>
+            <p class="card-subtitle">{{modules[2].subtitle}}</p>
+          </div>
+          <div class="card-body">
+            <ul class="card-features">
+              <li *ngFor="let feature of modules[2].features">
+                <i [class]="feature.icon"></i> {{feature.text}}
+              </li>
+            </ul>
+            <div class="card-actions">
+              <button class="btn btn-primary" [style.background]="modules[2].bgColor">
+                <i [class]="modules[2].btnPrimary.icon"></i> {{modules[2].btnPrimary.text}}
+              </button>
+              <button class="btn btn-outline" [style.border-color]="modules[2].bgColor" [style.color]="modules[2].bgColor">
+                <i [class]="modules[2].btnOutline.icon"></i> {{modules[2].btnOutline.text}}
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 智慧文旅系统 -->
+        <div class="module-card no-flash" id="smart-tourism">
+          <div class="card-header" [style.background]="modules[3].bgColor">
+            <i [class]="modules[3].icon + ' card-icon'"></i>
+            <h3 class="card-title">{{modules[3].title}}</h3>
+            <p class="card-subtitle">{{modules[3].subtitle}}</p>
+          </div>
+          <div class="card-body">
+            <ul class="card-features">
+              <li *ngFor="let feature of modules[3].features">
+                <i [class]="feature.icon"></i> {{feature.text}}
+              </li>
+            </ul>
+            <div class="card-actions">
+              <button class="btn btn-primary" [style.background]="modules[3].bgColor">
+                <i [class]="modules[3].btnPrimary.icon"></i> {{modules[3].btnPrimary.text}}
+              </button>
+              <button class="btn btn-outline" [style.border-color]="modules[3].bgColor" [style.color]="modules[3].bgColor">
+                <i [class]="modules[3].btnOutline.icon"></i> {{modules[3].btnOutline.text}}
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- IP孵化平台 -->
+        <div class="module-card no-flash" id="ip-incubation">
+          <div class="card-header" [style.background]="modules[4].bgColor">
+            <i [class]="modules[4].icon + ' card-icon'"></i>
+            <h3 class="card-title">{{modules[4].title}}</h3>
+            <p class="card-subtitle">{{modules[4].subtitle}}</p>
+          </div>
+          <div class="card-body">
+            <ul class="card-features">
+              <li *ngFor="let feature of modules[4].features">
+                <i [class]="feature.icon"></i> {{feature.text}}
+              </li>
+            </ul>
+            <div class="card-actions">
+              <button class="btn btn-primary" [style.background]="modules[4].bgColor">
+                <i [class]="modules[4].btnPrimary.icon"></i> {{modules[4].btnPrimary.text}}
+              </button>
+              <button class="btn btn-outline" [style.border-color]="modules[4].bgColor" [style.color]="modules[4].bgColor">
+                <i [class]="modules[4].btnOutline.icon"></i> {{modules[4].btnOutline.text}}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 共创社区 -->
+      <div class="section-anchor" id="co-creation-community"></div>
+      <div class="section-header">
+        <h1 class="section-title">
+          <i class="fas fa-users section-title-icon"></i>
+          共创社区
+        </h1>
+      </div>
+      
+      <div class="module-grid">
+        <!-- 高校联盟 -->
+        <div class="module-card no-flash" id="university-alliance">
+          <div class="card-header" [style.background]="modules[5].bgColor">
+            <i [class]="modules[5].icon + ' card-icon'"></i>
+            <h3 class="card-title">{{modules[5].title}}</h3>
+            <p class="card-subtitle">{{modules[5].subtitle}}</p>
           </div>
           <div class="card-body">
             <ul class="card-features">
-              <li *ngFor="let feature of module.features">
+              <li *ngFor="let feature of modules[5].features">
                 <i [class]="feature.icon"></i> {{feature.text}}
               </li>
             </ul>
             <div class="card-actions">
-              <button class="btn btn-primary" [style.background]="module.bgColor">
-                <i [class]="module.btnPrimary.icon"></i> {{module.btnPrimary.text}}
+              <button class="btn btn-primary" [style.background]="modules[5].bgColor">
+                <i [class]="modules[5].btnPrimary.icon"></i> {{modules[5].btnPrimary.text}}
               </button>
-              <button class="btn btn-outline" [style.border-color]="module.bgColor" [style.color]="module.bgColor">
-                <i [class]="module.btnOutline.icon"></i> {{module.btnOutline.text}}
+              <button class="btn btn-outline" [style.border-color]="modules[5].bgColor" [style.color]="modules[5].bgColor">
+                <i [class]="modules[5].btnOutline.icon"></i> {{modules[5].btnOutline.text}}
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 政府协作 -->
+        <div class="module-card no-flash" id="gov-collab">
+          <div class="card-header" [style.background]="modules[6].bgColor">
+            <i [class]="modules[6].icon + ' card-icon'"></i>
+            <h3 class="card-title">{{modules[6].title}}</h3>
+            <p class="card-subtitle">{{modules[6].subtitle}}</p>
+          </div>
+          <div class="card-body">
+            <ul class="card-features">
+              <li *ngFor="let feature of modules[6].features">
+                <i [class]="feature.icon"></i> {{feature.text}}
+              </li>
+            </ul>
+            <div class="card-actions">
+              <button class="btn btn-primary" [style.background]="modules[6].bgColor">
+                <i [class]="modules[6].btnPrimary.icon"></i> {{modules[6].btnPrimary.text}}
+              </button>
+              <button class="btn btn-outline" [style.border-color]="modules[6].bgColor" [style.color]="modules[6].bgColor">
+                <i [class]="modules[6].btnOutline.icon"></i> {{modules[6].btnOutline.text}}
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 全民创作 -->
+        <div class="module-card no-flash" id="public-creation">
+          <div class="card-header" [style.background]="modules[7].bgColor">
+            <i [class]="modules[7].icon + ' card-icon'"></i>
+            <h3 class="card-title">{{modules[7].title}}</h3>
+            <p class="card-subtitle">{{modules[7].subtitle}}</p>
+          </div>
+          <div class="card-body">
+            <ul class="card-features">
+              <li *ngFor="let feature of modules[7].features">
+                <i [class]="feature.icon"></i> {{feature.text}}
+              </li>
+            </ul>
+            <div class="card-actions">
+              <button class="btn btn-primary" [style.background]="modules[7].bgColor">
+                <i [class]="modules[7].btnPrimary.icon"></i> {{modules[7].btnPrimary.text}}
+              </button>
+              <button class="btn btn-outline" [style.border-color]="modules[7].bgColor" [style.color]="modules[7].bgColor">
+                <i [class]="modules[7].btnOutline.icon"></i> {{modules[7].btnOutline.text}}
               </button>
             </div>
           </div>
@@ -134,6 +321,4 @@
   <div class="copyright">
     &copy; 2023 赣鄱文链数字文旅平台 - 传承江西文化，智创文旅未来
   </div>
-</footer>
-
-<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+</footer>

travel-platform-web/travel-web/src/crm/mobile/page-crm-platform/page-crm-platform.scss

@@ -1,3 +1,4 @@
+
 :host {
   --primary-blue: #2F7DAD;  /* 天青瓷 */
   --primary-green: #5B8C5A; /* 香樟绿 */
@@ -11,6 +12,10 @@
   --mountain-color: #a5d6a7;
   --red-culture: #b71c1c;
   --heritage: #5d4037;
+  --community-color: #8e44ad;
+  --university-color: #3498db;
+  --gov-color: #27ae60;
+  --public-color: #e67e22;
   --animation-speed: 0.4s;
 }
 
@@ -47,7 +52,7 @@
 }
 
 .container {
-  max-width: 1400px;
+  max-width: 1450px;
   margin: 0 auto;
   padding: 20px;
   flex: 1;
@@ -72,6 +77,8 @@
   height: fit-content;
   flex-shrink: 0;
   will-change: transform;
+  position: sticky;
+  top: 20px;
 }
 
 .sidebar-title {
@@ -86,55 +93,55 @@
 
 .module-nav {
   list-style: none;
-}
-
-.module-nav li {
-  margin-bottom: 8px;
-}
-
-.module-nav a {
-  display: block;
-  padding: 12px 15px;
-  background: rgba(47, 125, 173, 0.1);
-  border-radius: 8px;
-  color: var(--dark);
-  text-decoration: none;
-  transition: all var(--animation-speed) ease;
-  position: relative;
-  overflow: hidden;
-  font-weight: 500;
-  will-change: transform;
   
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.15), transparent);
-    transition: left var(--animation-speed) ease;
-  }
-  
-  &:hover {
-    background: rgba(47, 125, 173, 0.2);
-    transform: translateX(5px);
-  }
-  
-  &:hover::before {
-    left: 100%;
-  }
-  
-  &.active {
-    background: var(--primary-blue);
-    color: white;
-    box-shadow: 0 4px 12px rgba(47, 125, 173, 0.3);
+  li {
+    margin-bottom: 8px;
   }
   
-  i {
-    margin-right: 10px;
-    width: 20px;
-    text-align: center;
+  a {
+    display: block;
+    padding: 12px 15px;
+    background: rgba(47, 125, 173, 0.1);
+    border-radius: 8px;
+    color: var(--dark);
+    text-decoration: none;
+    transition: all var(--animation-speed) ease;
+    position: relative;
+    overflow: hidden;
+    font-weight: 500;
+    will-change: transform;
+    
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.15), transparent);
+      transition: left var(--animation-speed) ease;
+    }
+    
+    &:hover {
+      background: rgba(47, 125, 173, 0.2);
+      transform: translateX(5px);
+    }
+    
+    &:hover::before {
+      left: 100%;
+    }
+    
+    &.active {
+      background: var(--primary-blue);
+      color: white;
+      box-shadow: 0 4px 12px rgba(47, 125, 173, 0.3);
+    }
+    
+    i {
+      margin-right: 10px;
+      width: 20px;
+      text-align: center;
+    }
   }
 }
 
@@ -505,6 +512,32 @@ footer {
   font-size: 0.9rem;
 }
 
+/* 新增部分样式 */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 40px 0 25px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid var(--water-color);
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.section-title {
+  font-family: 'Ma Shan Zheng', cursive;
+  font-size: 2.2rem;
+  color: var(--primary-blue);
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.section-title-icon {
+  color: var(--primary-gold);
+  font-size: 1.8rem;
+}
+
 /* 缩放比例优化 */
 @media screen and (min-width: 1600px) {
   .container {
@@ -600,6 +633,7 @@ footer {
   perspective: 1000;
   transform: translate3d(0,0,0);
 }
+
 /* 轮播图导航按钮样式 */
 .swiper-button-next,
 .swiper-button-prev {
@@ -614,7 +648,7 @@ footer {
     content: '';
     font-size: 1.2rem;
     font-weight: bold;
-    color: var(--primary-gold);
+    color: white;
   }
   
   &:hover {
@@ -634,4 +668,11 @@ footer {
 .swiper-button-disabled {
   opacity: 0.3 !important;
   cursor: not-allowed;
+}
+
+/* 新增部分标识 */
+.section-anchor {
+  position: relative;
+  top: -80px;
+  visibility: hidden;
 }

travel-platform-web/travel-web/src/crm/mobile/page-crm-platform/page-crm-platform.ts

@@ -1,13 +1,11 @@
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, Renderer2, ElementRef, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import Swiper from 'swiper';
-
-// 添加这些导入
 import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import { Swiper } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
-
+import 'swiper/css/autoplay';
 
 interface PlatformModule {
   title: string;
@@ -100,6 +98,62 @@ export class PageCrmPlatform implements AfterViewInit {
       bgColor: 'var(--heritage)',
       btnPrimary: { text: '体验导览', icon: 'fas fa-play-circle' },
       btnOutline: { text: '探索路线', icon: 'fas fa-compass' }
+    },
+    {
+      title: 'IP孵化平台',
+      subtitle: '文化IP创新与商业化',
+      icon: 'fas fa-egg',
+      features: [
+        { icon: 'fas fa-lightbulb', text: 'IP价值评估系统' },
+        { icon: 'fas fa-sync-alt', text: 'IP生态转化模型' },
+        { icon: 'fas fa-chart-line', text: '市场潜力分析' },
+        { icon: 'fas fa-handshake', text: '商业对接平台' }
+      ],
+      bgColor: 'var(--community-color)',
+      btnPrimary: { text: '孵化项目', icon: 'fas fa-rocket' },
+      btnOutline: { text: 'IP商城', icon: 'fas fa-store' }
+    },
+    {
+      title: '高校联盟',
+      subtitle: '学术研究与人才培养',
+      icon: 'fas fa-graduation-cap',
+      features: [
+        { icon: 'fas fa-flask', text: '联合研究项目' },
+        { icon: 'fas fa-user-graduate', text: '人才实训基地' },
+        { icon: 'fas fa-book-open', text: '课程共建计划' },
+        { icon: 'fas fa-trophy', text: '创新竞赛平台' }
+      ],
+      bgColor: 'var(--university-color)',
+      btnPrimary: { text: '加入联盟', icon: 'fas fa-user-plus' },
+      btnOutline: { text: '合作院校', icon: 'fas fa-school' }
+    },
+    {
+      title: '政府协作',
+      subtitle: '政策支持与资源整合',
+      icon: 'fas fa-landmark',
+      features: [
+        { icon: 'fas fa-file-contract', text: '政策申报指南' },
+        { icon: 'fas fa-hand-holding-usd', text: '专项扶持资金' },
+        { icon: 'fas fa-network-wired', text: '区域协作平台' },
+        { icon: 'fas fa-chart-pie', text: '文化资源统筹' }
+      ],
+      bgColor: 'var(--gov-color)',
+      btnPrimary: { text: '政策查询', icon: 'fas fa-file-alt' },
+      btnOutline: { text: '协作申请', icon: 'fas fa-hands-helping' }
+    },
+    {
+      title: '全民创作',
+      subtitle: '大众参与的文化创新',
+      icon: 'fas fa-edit',
+      features: [
+        { icon: 'fas fa-cloud-upload-alt', text: 'UGC内容平台' },
+        { icon: 'fas fa-trophy', text: '创作竞赛活动' },
+        { icon: 'fas fa-coins', text: '创作激励计划' },
+        { icon: 'fas fa-store', text: '作品交易市场' }
+      ],
+      bgColor: 'var(--public-color)',
+      btnPrimary: { text: '开始创作', icon: 'fas fa-pencil-alt' },
+      btnOutline: { text: '优秀作品', icon: 'fas fa-medal' }
     }
   ];
 
@@ -121,57 +175,95 @@ export class PageCrmPlatform implements AfterViewInit {
     }
   ];
 
-  ngAfterViewInit() {
-    new Swiper('.swiper-container', {
-      // 启用导航模块
-      modules: [Navigation, Pagination, Autoplay],
-
-      // 基本配置
-      direction: 'horizontal',
-      loop: true,
-      speed: 600,
-
-      // 分页器配置
-      pagination: {
-        el: '.swiper-pagination',
-        clickable: true,
-        dynamicBullets: true
-      },
+  private swiper?: Swiper;
 
-      // 导航按钮配置（关键修复）
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-        disabledClass: 'swiper-button-disabled' // 添加禁用状态类
-      },
+  constructor(private renderer: Renderer2, private el: ElementRef) {}
 
-      // 自动播放配置
-      autoplay: {
-        delay: 5000,
-        disableOnInteraction: false,
-      },
-
-      // 效果配置
-      effect: 'fade',
-      fadeEffect: {
-        crossFade: true
-      },
+  ngAfterViewInit() {
+    this.initSwiper();
+    this.setupNavigation();
+  }
 
-      // 键盘控制
-      keyboard: {
-        enabled: true,
-        onlyInViewport: true,
-      },
+ private initSwiper() {
+  // 确保元素存在
+  const swiperEl = this.el.nativeElement.querySelector('.swiper-container');
+  if (!swiperEl) return;
 
-      // 触摸控制
-      grabCursor: true,
+  this.swiper = new Swiper(swiperEl, {
+    modules: [Navigation, Pagination, Autoplay],
+    direction: 'horizontal',
+    loop: true,
+    speed: 600,
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true,
+      dynamicBullets: true
+    },
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+      disabledClass: 'swiper-button-disabled'
+    },
+    autoplay: {
+      delay: 5000,
+      disableOnInteraction: false,
+    },
+    effect: 'fade',
+    fadeEffect: {
+      crossFade: true
+    },
+    keyboard: {
+      enabled: true,
+      onlyInViewport: true,
+    },
+    grabCursor: true,
+    // 添加这些关键参数
+    observer: true,
+    observeParents: true,
+    observeSlideChildren: true,
+    
+    breakpoints: {
+      480: {
+        effect: 'slide'
+      }
+    }
+  });
+}
 
-      // 响应式配置
-      breakpoints: {
-        480: {
-          effect: 'slide'
+  private setupNavigation() {
+    const navLinks = this.el.nativeElement.querySelectorAll('.module-nav a, .sub-nav a');
+    navLinks.forEach((link: HTMLElement) => {
+      this.renderer.listen(link, 'click', (event) => {
+        event.preventDefault();
+        
+        // 移除所有活动状态
+        navLinks.forEach((l: HTMLElement) => l.classList.remove('active'));
+        
+        // 设置当前活动状态
+        link.classList.add('active');
+        
+        // 处理父菜单活动状态
+        const parentLi = link.closest('li');
+        if (parentLi && parentLi.parentElement?.classList.contains('module-nav')) {
+          const parentLink = parentLi.querySelector('a');
+          if (parentLink) {
+            parentLink.classList.add('active');
+          }
         }
-      }
+        
+        // 获取目标锚点
+        const targetId = link.getAttribute('href');
+        if (targetId && targetId.startsWith('#')) {
+          const targetElement = document.querySelector(targetId);
+          if (targetElement) {
+            // 平滑滚动
+            targetElement.scrollIntoView({ 
+              behavior: 'smooth', 
+              block: 'start'
+            });
+          }
+        }
+      });
     });
   }
-}
+}