fix:bi

travel-platform-web/travel-web/src/crm/mobile/page-crm-business/page-vibration-monitor.component.html

@@ -20,7 +20,7 @@
         </div>
         <h3 class="feature-title">智能知识图谱</h3>
         <p class="feature-desc">通过知识图谱技术可视化展示协会组织架构，实现关系网络智能分析，支持动态探索与交互查询。</p>
-        <a href="#organization1" class="btn" >立即体验</a>
+      <a [routerLink]="['.']" fragment="organization1" class="btn">立即体验</a>
       </div>
       
       <div class="feature-card animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
@@ -29,7 +29,7 @@
         </div>
         <h3 class="feature-title">AR名片系统</h3>
         <p class="feature-desc">创新性的AR技术展示协会领导信息，扫描即可获取立体名片，支持语音介绍与联系方式一键保存。</p>
-        <a href="#leaders" class="btn">查看领导</a>
+        <a [routerLink]="['.']" fragment="leaders" class="btn">查看领导</a>
       </div>
       
       <div class="feature-card animate__animated animate__fadeInUp" style="animation-delay: 0.4s;">
@@ -38,7 +38,8 @@
         </div>
         <h3 class="feature-title">AI+文旅课程</h3>
         <p class="feature-desc">微专业中心提供的智能学习系统，个性化推荐课程，AI助教实时答疑，学习路径智能规划。</p>
-        <a href="#courses" class="btn">开始学习</a>
+        <a [routerLink]="['.']" fragment="courses" class="btn">开始学习</a>
+
       </div>
     </div>
   </section>

travel-platform-web/travel-web/src/crm/mobile/page-crm-business/page-vibration-monitor.component.ts

@@ -1,28 +1,73 @@
 // page-vibration-monitor.component.ts
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Swiper } from 'swiper';
 import { Navigation, Pagination, Autoplay } from 'swiper/modules';
 import * as echarts from 'echarts';
-import { RouterModule } from '@angular/router';
+import { Router, RouterModule, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-page-vibration-monitor',
- // standalone: true,
-  imports: [CommonModule, FormsModule,RouterModule],
+  // standalone: true,
+  imports: [CommonModule, FormsModule, RouterModule],
   templateUrl: './page-vibration-monitor.component.html',
   styleUrls: ['./page-vibration-monitor.component.scss']
 })
-export class PageVibrationMonitorComponent implements AfterViewInit {
+export class PageVibrationMonitorComponent implements AfterViewInit, OnInit {
   searchQuery = '';
   
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.setupFragmentNavigation();
+  }
+
   ngAfterViewInit(): void {
     this.initKnowledgeGraph();
     this.initSwiper();
     this.setupEventListeners();
-    //jia
-    
+  }
+
+  private setupFragmentNavigation(): void {
+    // 监听路由变化，处理片段导航
+    this.router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe((event: NavigationEnd) => {
+        const fragment = this.getFragmentFromUrl(event.url);
+        if (fragment) {
+          setTimeout(() => {
+            this.scrollToFragment(fragment);
+          }, 0);
+        }
+      });
+
+    // 初始加载时检查URL中的片段
+    const initialFragment = this.getFragmentFromUrl(this.router.url);
+    if (initialFragment) {
+      setTimeout(() => {
+        this.scrollToFragment(initialFragment);
+      }, 500); // 稍长延迟确保所有内容已加载
+    }
+  }
+
+  private getFragmentFromUrl(url: string): string | null {
+    const hashIndex = url.indexOf('#');
+    return hashIndex !== -1 ? url.substring(hashIndex + 1) : null;
+  }
+
+  private scrollToFragment(fragment: string): void {
+    const element = document.getElementById(fragment);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+      
+      // 添加高亮效果
+      element.classList.add('fragment-highlight');
+      setTimeout(() => {
+        element.classList.remove('fragment-highlight');
+      }, 2000);
+    }
   }
 
   private initKnowledgeGraph(): void {
@@ -155,4 +200,4 @@ export class PageVibrationMonitorComponent implements AfterViewInit {
       }, 1000);
     }
   }
-}
+}