travel-web/src/app/app.routes.ts

@@ -9,6 +9,7 @@ export const routes: Routes = [
       {
         path: 'home',
         loadComponent: () => import('../modules/pc-home/pages/page-home/page-home').then(m => m.PageHome)
+
       },
       {
         path: 'dynamic',
@@ -22,6 +23,10 @@ export const routes: Routes = [
         path: 'association',
         loadComponent: () => import('../modules/pc-home/pages/page-association/page-association').then(m => m.PageAssociation)
       },
+      {
+        path: 'us',
+        loadComponent: () => import('../modules/pc-home/pages/page-about-us/page-about-us').then(m => m.PageAboutUs)
+      },
       {
         path: '',
         redirectTo: 'home',

travel-web/src/app/app.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import '@fortawesome/fontawesome-free/css/all.min.css';
 
 @Component({
   selector: 'app-root',

travel-web/src/modules/pc-home/pages/page-about-us/page-about-us.html

@@ -0,0 +1 @@
+<p>page-about-us works!</p>

travel-web/src/modules/pc-home/pages/page-banner/page-banner.spec.ts → travel-web/src/modules/pc-home/pages/page-about-us/page-about-us.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PageBanner } from './page-banner';
+import { PageAboutUs } from './page-about-us';
 
-describe('PageBanner', () => {
-  let component: PageBanner;
-  let fixture: ComponentFixture<PageBanner>;
+describe('PageAboutUs', () => {
+  let component: PageAboutUs;
+  let fixture: ComponentFixture<PageAboutUs>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PageBanner]
+      imports: [PageAboutUs]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PageBanner);
+    fixture = TestBed.createComponent(PageAboutUs);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

travel-web/src/modules/pc-home/pages/page-about-us/page-about-us.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-about-us',
+  imports: [],
+  templateUrl: './page-about-us.html',
+  styleUrl: './page-about-us.scss'
+})
+export class PageAboutUs {
+
+}

travel-web/src/modules/pc-home/pages/page-association/page-association.html

@@ -1,4 +1,3 @@
-
 <!-- 页面标题 -->
 <div class="page-header">
   <h1 class="page-title">协会核心业务</h1>
@@ -17,7 +16,7 @@
         <i class="fas fa-sitemap"></i>
         <h3>组织架构</h3>
       </div>
-      <div class="org-body" id="orgChart"></div>
+      <div class="org-body" #orgChart></div>
     </div>
     
     <div class="leaders-container">
@@ -55,8 +54,8 @@
   
   <div class="constitution-container">
     <div class="search-box">
-      <input type="text" class="search-input" placeholder="输入关键词检索协会章程 (如：红色文化、会员权利...)">
-      <button class="search-btn"><i class="fas fa-search"></i> 智能检索</button>
+      <input #searchInput type="text" class="search-input" placeholder="输入关键词检索协会章程 (如：红色文化、会员权利...)" (keyup.enter)="highlightSearch(searchInput.value)">
+      <button class="search-btn" (click)="highlightSearch(searchInput.value)"><i class="fas fa-search"></i> 智能检索</button>
     </div>
     <div class="constitution-content">
       <h3>江西省数字文化发展协会章程</h3>
@@ -107,7 +106,7 @@
         <i class="fas fa-calendar-alt"></i>
         <h3>学术日历</h3>
       </div>
-      <div class="calendar-body" id="academicCalendar"></div>
+      <div class="calendar-body" #academicCalendar></div>
     </div>
     
     <div class="standards-container">
@@ -123,22 +122,22 @@
           <div class="version-card">
             <h5 class="version-title">2021版</h5>
             <div class="version-content">
-              <p>1. 数字资源采集应遵循真实性原则，确保<span class="diff-highlight">内容准确</span>。</p>
-              <p>2. 图像采集分辨率不低于<span class="diff-highlight">300dpi</span>。</p>
-              <p>3. 音频采集采样率不低于<span class="diff-highlight">44.1kHz</span>。</p>
-              <p>4. 视频采集分辨率不低于<span class="diff-highlight">1080p</span>。</p>
-              <p>5. 三维模型采集精度不低于<span class="diff-highlight">0.5mm</span>。</p>
+              <p>1. 数字资源采集应遵循真实性原则，确保<span class="diff-highlight" (mousedown)="highlightVersion($event, 'diff')">内容准确</span>。</p>
+              <p>2. 图像采集分辨率不低于<span class="diff-highlight" (mousedown)="highlightVersion($event, 'diff')">300dpi</span>。</p>
+              <p>3. 音频采集采样率不低于<span class="diff-highlight" (mousedown)="highlightVersion($event, 'diff')">44.1kHz</span>。</p>
+              <p>4. 视频采集分辨率不低于<span class="diff-highlight" (mousedown)="highlightVersion($event, 'diff')">1080p</span>。</p>
+              <p>5. 三维模型采集精度不低于<span class="diff-highlight" (mousedown)="highlightVersion($event, 'diff')">0.5mm</span>。</p>
             </div>
           </div>
           
           <div class="version-card">
             <h5 class="version-title">2023版</h5>
             <div class="version-content">
-              <p>1. 数字资源采集应遵循真实性、完整性原则，确保<span class="new-highlight">内容准确且完整呈现文化背景</span>。</p>
-              <p>2. 图像采集分辨率不低于<span class="new-highlight">600dpi，重要文物需达1200dpi</span>。</p>
-              <p>3. 音频采集采样率不低于<span class="new-highlight">48kHz，推荐使用96kHz</span>。</p>
-              <p>4. 视频采集分辨率不低于<span class="new-highlight">4K，重要场景需8K</span>。</p>
-              <p>5. 三维模型采集精度不低于<span class="new-highlight">0.1mm，重要结构需达0.01mm</span>。</p>
+              <p>1. 数字资源采集应遵循真实性、完整性原则，确保<span class="new-highlight" (mousedown)="highlightVersion($event, 'new')">内容准确且完整呈现文化背景</span>。</p>
+              <p>2. 图像采集分辨率不低于<span class="new-highlight" (mousedown)="highlightVersion($event, 'new')">600dpi，重要文物需达1200dpi</span>。</p>
+              <p>3. 音频采集采样率不低于<span class="new-highlight" (mousedown)="highlightVersion($event, 'new')">48kHz，推荐使用96kHz</span>。</p>
+              <p>4. 视频采集分辨率不低于<span class="new-highlight" (mousedown)="highlightVersion($event, 'new')">4K，重要场景需8K</span>。</p>
+              <p>5. 三维模型采集精度不低于<span class="new-highlight" (mousedown)="highlightVersion($event, 'new')">0.1mm，重要结构需达0.01mm</span>。</p>
             </div>
           </div>
         </div>
@@ -183,50 +182,14 @@
         <p>已上线课程</p>
         
         <div class="courses">
-          <div class="course-card">
-            <div class="course-img"></div>
-            <div class="course-content">
-              <h5 class="course-title">江西古建筑数字化保护</h5>
-              <p>学习古建筑三维扫描、数字建模与修复技术</p>
-              <div class="course-meta">
-                <span><i class="fas fa-clock"></i> 32课时</span>
-                <span><i class="fas fa-user-graduate"></i> 已报名 1,245人</span>
-              </div>
-            </div>
-          </div>
-          
-          <div class="course-card">
-            <div class="course-img"></div>
-            <div class="course-content">
-              <h5 class="course-title">非遗技艺数字化传承</h5>
-              <p>探索传统技艺的数字化记录与创新应用</p>
-              <div class="course-meta">
-                <span><i class="fas fa-clock"></i> 24课时</span>
-                <span><i class="fas fa-user-graduate"></i> 已报名 986人</span>
-              </div>
-            </div>
-          </div>
-          
-          <div class="course-card">
-            <div class="course-img"></div>
-            <div class="course-content">
-              <h5 class="course-title">红色文化XR应用开发</h5>
-              <p>利用XR技术重现江西革命历史场景</p>
-              <div class="course-meta">
-                <span><i class="fas fa-clock"></i> 40课时</span>
-                <span><i class="fas fa-user-graduate"></i> 已报名 1,532人</span>
-              </div>
-            </div>
-          </div>
-          
-          <div class="course-card">
+          <div *ngFor="let course of courses" class="course-card">
             <div class="course-img"></div>
             <div class="course-content">
-              <h5 class="course-title">智慧旅游系统设计</h5>
-              <p>学习旅游动线策划与智能导览系统开发</p>
+              <h5 class="course-title">{{course.title}}</h5>
+              <p>{{course.description}}</p>
               <div class="course-meta">
-                <span><i class="fas fa-clock"></i> 28课时</span>
-                <span><i class="fas fa-user-graduate"></i> 已报名 875人</span>
+                <span><i class="fas fa-clock"></i> {{course.duration}}</span>
+                <span><i class="fas fa-user-graduate"></i> 已报名 {{course.students}}</span>
               </div>
             </div>
           </div>
@@ -264,7 +227,7 @@
       <ul>
         <li><i class="fas fa-map-marker-alt"></i> 江西省南昌市红谷滩区</li>
         <li><i class="fas fa-phone"></i> 0791-87654321</li>
-        <li><i class="fas fa-envelope"></i> association jxculture.cn</li>
+        <li><i class="fas fa-envelope"></i> contact&#64;jxculture.cn</li>
         <li><i class="fab fa-weixin"></i> 江西文化协会</li>
       </ul>
     </div>

travel-web/src/modules/pc-home/pages/page-association/page-association.scss

@@ -1,4 +1,4 @@
-:root {
+:host {
   --wood-primary: #8B4513;   /* 木质主色 */
   --wood-secondary: #A0522D; /* 木质辅色 */
   --wood-light: #DEB887;     /* 木质亮色 */
@@ -24,93 +24,6 @@ body {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f5f2e9"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23e8e0d022" stroke-width="1"/></svg>');
 }
 
-/* 顶部导航 - 书院风格 */
-.header {
-  background: linear-gradient(135deg, var(--wood-primary) 0%, var(--wood-secondary) 100%);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  padding: 0.8rem 5%;
-  border-bottom: 3px solid var(--wood-light);
-}
-
-.nav-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-}
-
-.logo-icon {
-  width: 50px;
-  height: 50px;
-  background: var(--wood-light);
-  border-radius: 50%;
-  position: relative;
-  margin-right: 12px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--wood-primary);
-  font-size: 24px;
-  border: 2px solid var(--wood-secondary);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.logo-text {
-  font-size: 1.8rem;
-  font-weight: bold;
-  color: var(--wood-light);
-  letter-spacing: 1px;
-  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-}
-
-.logo-subtext {
-  font-size: 0.9rem;
-  color: #f0e6d2;
-  margin-top: -4px;
-  letter-spacing: 3px;
-}
-
-.nav-links {
-  display: flex;
-  gap: 2rem;
-}
-
-.nav-links a {
-  text-decoration: none;
-  color: #f0e6d2;
-  font-weight: 500;
-  position: relative;
-  padding: 0.5rem 0;
-  transition: all 0.3s ease;
-  font-size: 1.1rem;
-}
-
-.nav-links a:hover {
-  color: var(--gold-yellow);
-}
-
-.nav-links a::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 0;
-  height: 2px;
-  background: var(--gold-yellow);
-  transition: width 0.3s ease;
-}
-
-.nav-links a:hover::after {
-  width: 100%;
-}
-
 /* 页面标题 */
 .page-header {
   background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
@@ -474,6 +387,14 @@ body {
   font-weight: bold;
 }
 
+.diff-highlight.active-highlight {
+  background-color: rgba(255, 0, 0, 0.2);
+}
+
+.new-highlight.active-highlight {
+  background-color: rgba(0, 128, 0, 0.2);
+}
+
 /* 人才培养 */
 .training-container {
   display: flex;
@@ -673,10 +594,6 @@ body {
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .nav-links {
-    display: none;
-  }
-  
   .section-content, .versions, .training-container {
     flex-direction: column;
   }

travel-web/src/modules/pc-home/pages/page-association/page-association.ts

@@ -1,32 +1,53 @@
-
-//import { Component } from '@angular/core';
-//import { CommonModule } from '@angular/common';
-
-//@Component({
-  //selector: 'app-page-association',
-  //standalone: true,
-  //imports: [CommonModule],
-  //templateUrl: './page-association.html',
-  //styleUrls: ['./page-association.scss']
-//})
-//export class PageAssociation {}
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import * as echarts from 'echarts';
 
 @Component({
   selector: 'app-page-association',
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './page-association.html',
   styleUrls: ['./page-association.scss']
 })
 export class PageAssociation implements AfterViewInit {
-  ngAfterViewInit() {
-    this.initCharts();
-    this.setupEventListeners();
+  @ViewChild('orgChart') orgChartElement!: ElementRef;
+  @ViewChild('academicCalendar') academicCalendarElement!: ElementRef;
+
+  // 课程数据
+  courses = [
+    { 
+      title: '江西古建筑数字化保护', 
+      description: '学习古建筑三维扫描、数字建模与修复技术',
+      duration: '32课时',
+      students: '1,245人'
+    },
+    { 
+      title: '非遗技艺数字化传承', 
+      description: '探索传统技艺的数字化记录与创新应用',
+      duration: '24课时',
+      students: '986人'
+    },
+    { 
+      title: '红色文化XR应用开发', 
+      description: '利用XR技术重现江西革命历史场景',
+      duration: '40课时',
+      students: '1,532人'
+    },
+    { 
+      title: '智慧旅游系统设计', 
+      description: '学习旅游动线策划与智能导览系统开发',
+      duration: '28课时',
+      students: '875人'
+    }
+  ];
+
+  ngAfterViewInit(): void {
+    this.initOrgChart();
+    this.initAcademicCalendar();
   }
 
-  initCharts() {
-    // Initialize organization chart
-    const orgChart = echarts.init(document.getElementById('orgChart'));
+  initOrgChart(): void {
+    const orgChart = echarts.init(this.orgChartElement.nativeElement);
     orgChart.setOption({
       tooltip: {
         trigger: 'item',
@@ -105,14 +126,15 @@ export class PageAssociation implements AfterViewInit {
       ]
     });
     
-    // Initialize academic calendar
-    const academicCalendar = echarts.init(document.getElementById('academicCalendar'));
+    window.addEventListener('resize', () => orgChart.resize());
+  }
+
+  initAcademicCalendar(): void {
+    const academicCalendar = echarts.init(this.academicCalendarElement.nativeElement);
     academicCalendar.setOption({
       tooltip: {
         formatter: function(params: any) {
-          return params.name + '<br/>' + 
-                 '热度: ' + params.value[2] + '<br/>' +
-                 '地点: ' + params.data.location;
+          return `${params.name}<br/>热度: ${params.value[2]}<br/>地点: ${params.data.location}`;
         }
       },
       visualMap: {
@@ -154,62 +176,42 @@ export class PageAssociation implements AfterViewInit {
           ['2023-06-22', 75, '数字艺术创作大赛', '南昌'],
           ['2023-06-25', 55, '智慧旅游研讨会', '上饶'],
           ['2023-06-28', 95, '年度学术大会', '南昌']
-        ].map(function (item) {
-          return {
-            value: (item[0], item[1], item[1], item[2], item[3])
-          };
-        })
+        ].map((item) => ({
+          value: [item[0], item[1], item[1], item[2], item[3]]
+        }))
       }
     });
-
-    // Handle window resize
-    window.addEventListener('resize', function() {
-      orgChart.resize();
-      academicCalendar.resize();
-    });
+    
+    window.addEventListener('resize', () => academicCalendar.resize());
   }
 
-  setupEventListeners() {
-    // Simulate constitution search highlight effect
-    const searchBtn = document.querySelector('.search-btn');
-    if (searchBtn) {
-      searchBtn.addEventListener('click', () => {
-        const searchInput = document.querySelector('.search-input') as HTMLInputElement;
-        if (searchInput && searchInput.value) {
-          const content = document.querySelector('.constitution-content');
-          if (content) {
-            const text = content.innerHTML;
-            const regex = new RegExp(searchInput.value, 'gi');
-            const highlighted = text.replace(regex, match => 
-              `<span class="highlight">${match}</span>`
-            );
-            content.innerHTML = highlighted;
-          }
-        }
-      });
+  highlightSearch(searchTerm: string): void {
+    if (searchTerm) {
+      const content = document.querySelector('.constitution-content');
+      if (content) {
+        const text = content.innerHTML;
+        const regex = new RegExp(searchTerm, 'gi');
+        const highlighted = text.replace(regex, match => 
+          `<span class="highlight">${match}</span>`
+        );
+        content.innerHTML = highlighted;
+      }
     }
+  }
 
-    // Simulate version difference highlight
-    const diffElements = document.querySelectorAll('.diff-highlight, .new-highlight');
-    //diffElements.forEach(el => {
-    //  el.addEventListener('mouseenter', function() {
-    //    const allDiff = document.querySelectorAll('.diff-highlight');
-    //    const allNew = document.querySelectorAll('.new-highlight');
-        
-        //if (this.classList.contains('diff-highlight')) {
-        //  allDiff.forEach((e: HTMLElement) => e.style.backgroundColor = 'rgba(255,0,0,0.2)');
-        //} else {
-        //  allNew.forEach((e: HTMLElement) => e.style.backgroundColor = 'rgba(0,128,0,0.2)');
-        //}
-      //});
-      
-      //el.addEventListener('mouseleave', function() {
-      //  const allDiff = document.querySelectorAll('.diff-highlight');
-      //  const allNew = document.querySelectorAll('.new-highlight');
-        
-      //  allDiff.forEach((e: HTMLElement) => e.style.backgroundColor = 'rgba(255,0,0,0.1)');
-      //  allNew.forEach((e: HTMLElement) => e.style.backgroundColor = 'rgba(0,128,0,0.1)');
-      //});
-    //});
+  highlightVersion(event: MouseEvent, type: 'diff' | 'new'): void {
+    const elements = document.querySelectorAll(`.${type}-highlight`);
+    elements.forEach(el => {
+      el.classList.add('active-highlight');
+    });
+    
+    const handler = () => {
+      elements.forEach(el => {
+        el.classList.remove('active-highlight');
+      });
+      document.removeEventListener('mouseup', handler);
+    };
+    
+    document.addEventListener('mouseup', handler);
   }
 }

travel-web/src/modules/pc-home/pages/page-banner/page-banner.html

@@ -1 +0,0 @@
-<p>page-banner works!</p>

travel-web/src/modules/pc-home/pages/page-banner/page-banner.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-banner',
-  imports: [],
-  templateUrl: './page-banner.html',
-  styleUrl: './page-banner.scss'
-})
-export class PageBanner {
-
-}

travel-web/src/modules/pc-home/pages/page-co-creation/page-co-creation.ts

@@ -2,9 +2,10 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-page-co-creation',
+   imports: [],
   templateUrl: './page-co-creation.html',
-  styleUrls: ['./page-co-creation.scss']
+  styleUrl: './page-co-creation.scss'
 })
 export class PageCoCreation {
-  // You can add component logic here if needed
+  
 }

travel-web/src/modules/pc-home/pages/page-dynamic/page-dynamic.html

@@ -1,2 +1,318 @@
-<p>page-dynamic works!</p>
-<h1>你好</h1>
+<!-- page-dynamic.component.html -->
+<section class="banner-section">
+  <div class="banner-bg"></div>
+  <div class="banner-content">
+    <h1 class="banner-title">会员服务智能化升级</h1>
+    <p class="banner-subtitle">OCR智能注册 · VR风采展示 · 智能匹配对接 · 共创空间 · 荣誉奖励体系</p>
+    <button class="ocr-btn" style="animation-delay: 0.5s;">立即体验会员服务</button>
+  </div>
+</section>
+
+<!-- 会员门户 -->
+<section class="member-portal">
+  <div class="section-header">
+    <h2 class="section-title">会员门户</h2>
+    <p class="section-desc">智能化的会员服务体系，融合江西文化元素，提供便捷高效的会员服务体验</p>
+  </div>
+  
+  <div class="services-container">
+    <!-- 智能注册 -->
+    <div class="service-card">
+      <div class="service-header">
+        <div class="service-icon">
+          <i class="fas fa-id-card"></i>
+        </div>
+        <h3 class="service-title">智能注册</h3>
+      </div>
+      <div class="service-body">
+        <div class="ocr-gate">
+          <div class="gate-arch"></div>
+          <div class="gate-pillar left"></div>
+          <div class="gate-pillar right"></div>
+          <div class="lantern left" [class.active]="activeLanterns"></div>
+          <div class="lantern right" [class.active]="activeLanterns"></div>
+          <div class="ocr-content">
+            <p>上传证件照片进行OCR智能识别</p>
+            <button class="ocr-btn" (click)="onOcrClick()" [disabled]="isProcessing">
+              {{ isProcessing ? '识别中...' : 
+                 isOcrSuccess === true ? '已认证' : 
+                 isOcrSuccess === false ? '识别失败，重试' : 
+                 '上传证件' }}
+            </button>
+          </div>
+        </div>
+        <p>采用南昌万寿宫牌坊造型设计，识别成功时灯笼亮起，失败时显示碎瓷动画效果</p>
+      </div>
+    </div>
+    
+    <!-- 会员风采 -->
+    <div class="service-card">
+      <div class="service-header">
+        <div class="service-icon">
+          <i class="fas fa-vr-cardboard"></i>
+        </div>
+        <h3 class="service-title">会员风采</h3>
+      </div>
+      <div class="service-body">
+        <div class="vr-showcase">
+          <div class="drying-rack">
+            <div class="achievement-item floating" style="animation-delay: 0s;">
+              <i class="fas fa-award"></i>
+            </div>
+            <div class="achievement-item floating" style="animation-delay: 0.2s;">
+              <i class="fas fa-medal"></i>
+            </div>
+            <div class="achievement-item floating" style="animation-delay: 0.4s;">
+              <i class="fas fa-trophy"></i>
+            </div>
+            <div class="achievement-item floating" style="animation-delay: 0.6s;">
+              <i class="fas fa-star"></i>
+            </div>
+          </div>
+        </div>
+        <p>采用婺源晒秋场景，成就物品以辣椒/玉米形式悬挂展示，支持手势"晾晒"操作</p>
+      </div>
+    </div>
+    
+    <!-- 单位对接 -->
+    <div class="service-card">
+      <div class="service-header">
+        <div class="service-icon">
+          <i class="fas fa-handshake"></i>
+        </div>
+        <h3 class="service-title">单位对接</h3>
+      </div>
+      <div class="service-body">
+        <div class="migration-map">
+          <div class="crane" style="top: 20%; left: 20%;">
+            <i class="fas fa-dove"></i>
+          </div>
+          <div class="crane" style="top: 30%; left: 40%;">
+            <i class="fas fa-dove"></i>
+          </div>
+          <div class="crane" style="top: 25%; left: 60%;">
+            <i class="fas fa-dove"></i>
+          </div>
+          <div class="crane" style="top: 40%; left: 30%;">
+            <i class="fas fa-dove"></i>
+          </div>
+          <div class="crane main-crane" style="top: 50%; left: 50%;">
+            <i class="fas fa-dove"></i>
+          </div>
+          <div class="crane" style="top: 45%; left: 70%;">
+            <i class="fas fa-dove"></i>
+          </div>
+          <div class="crane" style="top: 60%; left: 20%;">
+            <i class="fas fa-dove"></i>
+          </div>
+          <div class="crane" style="top: 70%; left: 40%;">
+            <i class="fas fa-dove"></i>
+          </div>
+          <div class="crane" style="top: 65%; left: 60%;">
+            <i class="fas fa-dove"></i>
+          </div>
+        </div>
+        <p>采用候鸟迁徙路线图概念，匹配度高的单位以白鹤群聚呈现，生成青花瓷开片纹关系图谱</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- 共创空间 -->
+<section class="creative-space">
+  <div class="section-header">
+    <h2 class="section-title">共创空间</h2>
+    <p class="section-desc">创新协作平台，融合江西传统文化元素，打造高效共创环境</p>
+  </div>
+  
+  <div class="space-grid">
+    <!-- 项目众包 -->
+    <div class="space-card">
+      <div class="space-header">
+        <i class="fas fa-tasks space-icon"></i>
+        <h3 class="space-title">项目众包</h3>
+      </div>
+      <div class="space-body">
+        <p>以景德镇陶市为原型设计任务大厅，各类任务以陶瓷器皿形式展示</p>
+        
+        <div class="ceramic-items">
+          <div class="ceramic-item vase">
+            <i class="fas fa-book" style="font-size: 2rem; color: var(--primary-blue);"></i>
+            <span style="margin-top: 10px;">传记任务</span>
+          </div>
+          <div class="ceramic-item bowl">
+            <i class="fas fa-paint-brush" style="font-size: 2rem; color: var(--primary-blue);"></i>
+            <span style="margin-top: 10px;">IP设计</span>
+          </div>
+        </div>
+        
+        <p>接单成功时触发"陶轮旋转"动画效果，增强交互体验</p>
+        
+        <button class="ocr-btn" style="width: 100%; margin-top: 1.5rem; background: var(--mountain-green);">
+          查看项目任务
+        </button>
+      </div>
+    </div>
+    
+    <!-- 资源交易所 -->
+    <div class="space-card">
+      <div class="space-header">
+        <i class="fas fa-exchange-alt space-icon"></i>
+        <h3 class="space-title">资源交易所</h3>
+      </div>
+      <div class="space-body">
+        <p>数据确权证书采用萍乡春锣造型设计，体现江西特色</p>
+        
+        <div style="width: 100%; height: 150px; background: url('https://images.unsplash.com/photo-1518895944437-3fefb0f6c0e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover; border-radius: 10px; margin: 1.5rem 0; position: relative;">
+          <div style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.8); padding: 0.5rem 1rem; border-radius: 20px; font-weight: bold; color: var(--primary-blue);">
+            文化数据确权证书
+          </div>
+        </div>
+        
+        <p>交易过程可视化"樟树药材炮制"步骤，清晰展示交易流程</p>
+      </div>
+    </div>
+    
+    <!-- 协同创作 -->
+    <div class="space-card">
+      <div class="space-header">
+        <i class="fas fa-users space-icon"></i>
+        <h3 class="space-title">协同创作</h3>
+      </div>
+      <div class="space-body">
+        <p>编辑工具面板设计为江西木雕工具箱样式，体现传统工艺与现代技术的结合</p>
+        
+        <div style="display: flex; justify-content: space-around; margin: 1.5rem 0;">
+          <div style="text-align: center;">
+            <div style="width: 60px; height: 60px; background: #f8f6f0; border: 2px solid var(--gold-yellow); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
+              <i class="fas fa-user" style="color: var(--ceramic-red); font-size: 1.5rem;"></i>
+            </div>
+            <span style="display: block; margin-top: 10px;">编辑者A</span>
+          </div>
+          <div style="text-align: center;">
+            <div style="width: 60px; height: 60px; background: #f8f6f0; border: 2px solid var(--gold-yellow); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
+              <i class="fas fa-user" style="color: var(--primary-blue); font-size: 1.5rem;"></i>
+            </div>
+            <span style="display: block; margin-top: 10px;">编辑者B</span>
+          </div>
+          <div style="text-align: center;">
+            <div style="width: 60px; height: 60px; background: #f8f6f0; border: 2px solid var(--gold-yellow); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
+              <i class="fas fa-user" style="color: var(--mountain-green); font-size: 1.5rem;"></i>
+            </div>
+            <span style="display: block; margin-top: 10px;">编辑者C</span>
+          </div>
+        </div>
+        
+        <p>多人协作时显示不同赣傩面具光标，增强协作体验识别度</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- 奖励体系 -->
+<section class="reward-system">
+  <div class="section-header">
+    <h2 class="section-title">奖励体系</h2>
+    <p class="section-desc">创新奖励机制，激发会员创作热情，展示优秀成果</p>
+  </div>
+  
+  <div class="terrace-form">
+    <h3 style="color: var(--primary-blue); margin-bottom: 1.5rem; text-align: center;">奖项申报系统</h3>
+    
+    <div class="form-group">
+      <label class="form-label">奖项名称</label>
+      <input type="text" class="form-input" placeholder="请输入奖项名称" [(ngModel)]="formData.awardName">
+      <div class="ripple"></div>
+    </div>
+    
+    <div class="form-group">
+      <label class="form-label">申报单位/个人</label>
+      <input type="text" class="form-input" placeholder="请输入申报单位或个人名称" [(ngModel)]="formData.applicant">
+      <div class="ripple"></div>
+    </div>
+    
+    <div class="form-group">
+      <label class="form-label">项目描述</label>
+      <textarea class="form-input" rows="3" placeholder="请描述申报项目内容" [(ngModel)]="formData.description"></textarea>
+      <div class="ripple"></div>
+    </div>
+    
+    <div class="form-group">
+      <label class="form-label">上传证明材料</label>
+      <input type="file" class="form-input" (change)="onFileSelected($event)">
+      <div class="ripple"></div>
+    </div>
+    
+    <button class="ocr-btn" style="width: 100%; background: var(--gold-yellow); color: var(--dark-charcoal);" 
+            (click)="submitForm()">
+      提交申报
+    </button>
+    
+    <p style="text-align: center; margin-top: 1rem; color: #666;">AI辅助输入时推荐内容带"赣江涟漪"动效，提升用户体验</p>
+  </div>
+  
+  <div class="section-header" style="padding-top: 3rem;">
+    <h3 class="section-title">三维荣誉墙</h3>
+  </div>
+  
+  <div class="pavilion-honor">
+    <div class="pavilion-model">
+      <div class="honor-item" style="top: 20px; left: 50px;">2023金奖</div>
+      <div class="honor-item" style="top: 60px; right: 40px;">2022创新奖</div>
+      <div class="honor-item" style="bottom: 80px; left: 30px;">2023银奖</div>
+      <div class="honor-item" style="bottom: 40px; right: 60px;">2022贡献奖</div>
+      <div class="honor-item" style="top: 100px; left: 100px;">2023最佳设计</div>
+    </div>
+  </div>
+  
+  <p style="text-align: center; margin-top: 1rem; color: #666;">鼠标滑动控制滕王阁楼层旋转查看不同年份奖项，沉浸式体验江西文化</p>
+</section>
+
+<!-- 页脚 -->
+<footer class="footer">
+  <div class="footer-content">
+    <div class="footer-column">
+      <h3>网站导航</h3>
+      <ul>
+        <li><a href="#">首页</a></li>
+        <li><a href="#">数智共创平台</a></li>
+        <li><a href="#">协会核心业务</a></li>
+        <li><a href="#">会员服务</a></li>
+        <li><a href="#">支撑系统</a></li>
+      </ul>
+    </div>
+    <div class="footer-column">
+      <h3>资源中心</h3>
+      <ul>
+        <li><a href="#">文化资源库</a></li>
+        <li><a href="#">智慧应用中心</a></li>
+        <li><a href="#">共创社区</a></li>
+        <li><a href="#">数字文创展廊</a></li>
+        <li><a href="#">学术研究成果</a></li>
+      </ul>
+    </div>
+    <div class="footer-column">
+      <h3>联系我们</h3>
+      <ul>
+        <li><i class="fas fa-map-marker-alt"></i> 江西省南昌市红谷滩区</li>
+        <li><i class="fas fa-phone"></i> 0791-12345678</li>
+        <li><i class="fas fa-envelope"></i> contact&#64;jxculture.cn</li>
+        <li><i class="fab fa-weixin"></i> 江西数字文化</li>
+      </ul>
+    </div>
+    <div class="footer-column">
+      <h3>关注我们</h3>
+      <div style="display: flex; gap: 1rem; margin-top: 1rem;">
+        <div style="width: 100px; height: 100px; background: #555; display: flex; justify-content: center; align-items: center; color: #aaa;">
+          微信公众号
+        </div>
+        <div style="width: 100px; height: 100px; background: #555; display: flex; justify-content: center; align-items: center; color: #aaa;">
+          微博
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="copyright">
+    © 2023 江西数字文化发展协会 版权所有 | 赣ICP备12345678号
+  </div>
+</footer>

travel-web/src/modules/pc-home/pages/page-dynamic/page-dynamic.scss

@@ -0,0 +1,629 @@
+/* page-dynamic.component.scss */
+:host {
+  --primary-blue: #2a5daa;   /* 青花蓝 */
+  --gold-yellow: #e8c34d;    /* 稻穗金 */
+  --porcelain-white: #f8f9fa; /* 瓷白 */
+  --dark-charcoal: #333;     /* 墨黑 */
+  --mountain-green: #4a6b3d; /* 山林绿 */
+  --river-blue: #4a86e8;     /* 赣江蓝 */
+  --ceramic-red: #c73e3a;    /* 陶瓷红 */
+}
+
+/* Banner区域 */
+.banner-section {
+  padding: 1.5rem 5%;
+  margin-top: 1rem;
+  position: relative;
+  height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.banner-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1579033462043-0f11a7862f7d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80') center/cover;
+  z-index: -1;
+}
+
+.banner-content {
+  text-align: center;
+  color: white;
+  max-width: 800px;
+  padding: 2rem;
+  z-index: 2;
+}
+
+.banner-title {
+  font-size: 3.5rem;
+  font-weight: bold;
+  margin-bottom: 1.5rem;
+  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
+  animation: fadeInDown 1s ease;
+}
+
+.banner-subtitle {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+  opacity: 0.9;
+  animation: fadeInUp 1s ease;
+}
+
+/* 会员门户区域 */
+.section-header {
+  text-align: center;
+  padding: 3rem 5% 2rem;
+}
+
+.section-title {
+  font-size: 2.5rem;
+  color: var(--primary-blue);
+  margin-bottom: 1rem;
+  position: relative;
+  display: inline-block;
+}
+
+.section-title::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: var(--gold-yellow);
+  border-radius: 2px;
+}
+
+.section-desc {
+  font-size: 1.2rem;
+  color: #555;
+  max-width: 800px;
+  margin: 0 auto 2rem;
+}
+
+.services-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 3rem;
+  padding: 0 5% 5rem;
+}
+
+.service-card {
+  background: white;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  width: 100%;
+  max-width: 400px;
+}
+
+.service-card:hover {
+  transform: translateY(-15px);
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
+}
+
+.service-header {
+  padding: 1.8rem;
+  background: linear-gradient(90deg, var(--primary-blue), var(--river-blue));
+  color: white;
+  text-align: center;
+}
+
+.service-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.service-title {
+  font-size: 1.8rem;
+  font-weight: bold;
+}
+
+.service-body {
+  padding: 2rem;
+}
+
+/* OCR注册区域 */
+.ocr-gate {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  background: linear-gradient(to bottom, #e9e5d8, #f8f6f0);
+  border: 3px solid var(--gold-yellow);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+}
+
+.gate-arch {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 30px;
+  background: var(--ceramic-red);
+  border-radius: 50% 50% 0 0;
+}
+
+.gate-pillar {
+  position: absolute;
+  bottom: 0;
+  width: 20px;
+  height: 180px;
+  background: var(--ceramic-red);
+}
+
+.gate-pillar.left {
+  left: 20%;
+}
+
+.gate-pillar.right {
+  right: 20%;
+}
+
+.lantern {
+  position: absolute;
+  top: 25px;
+  width: 25px;
+  height: 35px;
+  background: var(--gold-yellow);
+  border-radius: 50%;
+  opacity: 0.4;
+  transition: all 0.5s ease;
+}
+
+.lantern.left {
+  left: 20%;
+}
+
+.lantern.right {
+  right: 20%;
+}
+
+.lantern.active {
+  opacity: 1;
+  background: #ff6b6b;
+  box-shadow: 0 0 20px #ff6b6b;
+}
+
+.ocr-content {
+  z-index: 2;
+  text-align: center;
+}
+
+.ocr-btn {
+  background: var(--primary-blue);
+  color: white;
+  border: none;
+  padding: 0.8rem 2rem;
+  border-radius: 30px;
+  font-size: 1.1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 1rem;
+  font-weight: bold;
+}
+
+.ocr-btn:hover {
+  background: var(--river-blue);
+  transform: scale(1.05);
+}
+
+.ceramic-shard {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: all 1s ease;
+}
+
+/* VR展示区 */
+.vr-showcase {
+  width: 100%;
+  height: 300px;
+  background: url('https://images.unsplash.com/photo-1551649001-7a2482d98d09?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80') center/cover;
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 1.5rem;
+}
+
+.drying-rack {
+  position: absolute;
+  top: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 180px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="10" viewBox="0 0 200 10"><rect width="200" height="3" fill="%23d4a017" rx="1.5"/></svg>') repeat;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.achievement-item {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background: var(--gold-yellow);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  color: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+.achievement-item:hover {
+  transform: translateY(-10px);
+}
+
+/* 单位对接 */
+.migration-map {
+  width: 100%;
+  height: 300px;
+  background: linear-gradient(to bottom, #e6f7ff, #f0f8ff);
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+}
+
+.crane {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  background: white;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.8rem;
+  color: var(--dark-charcoal);
+  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+  transition: all 0.5s ease;
+  cursor: pointer;
+}
+
+.crane:hover {
+  transform: scale(1.2);
+  z-index: 10;
+}
+
+.crane.hovered {
+  transform: scale(1.3);
+  z-index: 10;
+}
+
+.crane.main-crane {
+  background: var(--gold-yellow);
+  color: white;
+  transform: scale(1.3);
+}
+
+/* 共创空间 */
+.creative-space {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e6f7ff 100%);
+  padding: 5rem 5%;
+}
+
+.space-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2.5rem;
+  margin-top: 2rem;
+}
+
+.space-card {
+  background: white;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+}
+
+.space-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
+}
+
+.space-header {
+  padding: 1.5rem;
+  background: linear-gradient(90deg, var(--mountain-green), #5d8c5a);
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.space-icon {
+  font-size: 2rem;
+}
+
+.space-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.space-body {
+  padding: 2rem;
+}
+
+.ceramic-items {
+  display: flex;
+  justify-content: space-around;
+  margin: 1.5rem 0;
+}
+
+.ceramic-item {
+  width: 80px;
+  height: 100px;
+  background: #f8f6f0;
+  border: 2px solid var(--gold-yellow);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.ceramic-item.vase {
+  height: 120px;
+  border-radius: 40% 40% 10px 10px;
+}
+
+.ceramic-item.bowl {
+  border-radius: 50% 50% 10px 10px;
+}
+
+.ceramic-item:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+}
+
+/* 奖励体系 */
+.reward-system {
+  padding: 5rem 5%;
+  background: linear-gradient(135deg, #fff9f0 0%, #fff 100%);
+}
+
+.terrace-form {
+  background: white;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+  margin-top: 2rem;
+}
+
+.form-group {
+  margin-bottom: 1.8rem;
+  position: relative;
+  padding: 1.2rem;
+  background: var(--porcelain-white);
+  border-radius: 8px;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
+  transition: all 0.3s ease;
+}
+
+.form-group:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: bold;
+  color: var(--primary-blue);
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.8rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+}
+
+.form-input:focus {
+  border-color: var(--river-blue);
+  box-shadow: 0 0 0 3px rgba(74, 134, 232, 0.1);
+  outline: none;
+}
+
+.ripple {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--river-blue);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s ease;
+}
+
+.form-input:focus ~ .ripple {
+  transform: scaleX(1);
+}
+
+/* 滕王阁荣誉墙 */
+.pavilion-honor {
+  width: 100%;
+  height: 400px;
+  background: linear-gradient(to bottom, #e6f7ff, #d1e8ff);
+  border-radius: 15px;
+  margin-top: 3rem;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pavilion-model {
+  width: 300px;
+  height: 300px;
+  background: url('https://images.unsplash.com/photo-1600857062241-98c0a9e0f6f5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/contain no-repeat;
+  position: relative;
+  transition: transform 0.1s ease;
+}
+
+.honor-item {
+  position: absolute;
+  width: 80px;
+  height: 50px;
+  background: white;
+  border: 2px solid var(--gold-yellow);
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  color: var(--primary-blue);
+  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.honor-item:hover {
+  transform: scale(1.1);
+  z-index: 10;
+}
+
+/* 页脚 */
+.footer {
+  background: var(--dark-charcoal);
+  color: white;
+  padding: 3rem 5% 2rem;
+}
+
+.footer-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3rem;
+  margin-bottom: 2rem;
+}
+
+.footer-column {
+  flex: 1;
+  min-width: 200px;
+}
+
+.footer-column h3 {
+  color: var(--gold-yellow);
+  margin-bottom: 1.5rem;
+  position: relative;
+  padding-bottom: 0.5rem;
+}
+
+.footer-column h3::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 40px;
+  height: 2px;
+  background: var(--gold-yellow);
+}
+
+.footer-column ul {
+  list-style: none;
+}
+
+.footer-column ul li {
+  margin-bottom: 0.8rem;
+}
+
+.footer-column a {
+  color: #ddd;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-column a:hover {
+  color: var(--gold-yellow);
+}
+
+.copyright {
+  text-align: center;
+  padding-top: 2rem;
+  border-top: 1px solid #444;
+  color: #aaa;
+  font-size: 0.9rem;
+}
+
+/* 动画效果 */
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
+}
+
+.floating {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .banner-title {
+    font-size: 2.5rem;
+  }
+  
+  .banner-subtitle {
+    font-size: 1.2rem;
+  }
+  
+  .services-container {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .space-grid {
+    grid-template-columns: 1fr;
+  }
+}

travel-web/src/modules/pc-home/pages/page-dynamic/page-dynamic.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PageDynamic } from './page-dynamic';
+import {  PageDynamic } from './page-dynamic';
 
 describe('PageDynamic', () => {
   let component: PageDynamic;

travel-web/src/modules/pc-home/pages/page-dynamic/page-dynamic.ts

@@ -1,11 +1,128 @@
-import { Component } from '@angular/core';
+// page-dynamic.component.ts
+import { Component, AfterViewInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-page-dynamic',
-  imports: [],
+  standalone: true,
   templateUrl: './page-dynamic.html',
-  styleUrl: './page-dynamic.scss'
+  styleUrls: ['./page-dynamic.scss'],
+  imports: [FormsModule]
 })
-export class PageDynamic {
+export class PageDynamic implements AfterViewInit {
+  isOcrSuccess: boolean | null = null;
+  activeLanterns = false;
+  isProcessing = false;
+  formData = {
+    awardName: '',
+    applicant: '',
+    description: '',
+    document: null as File | null
+  };
 
+  ngAfterViewInit() {
+    this.initCraneInteraction();
+    this.initPavilionInteraction();
+  }
+
+  onOcrClick() {
+    this.isProcessing = true;
+    this.activeLanterns = false;
+    this.isOcrSuccess = null;
+
+    // 模拟OCR处理过程
+    setTimeout(() => {
+      this.isProcessing = false;
+      const isSuccess = Math.random() > 0.3;
+      this.isOcrSuccess = isSuccess;
+      this.activeLanterns = isSuccess;
+      
+      if (!isSuccess) {
+        this.createCeramicShards();
+      }
+    }, 1500);
+  }
+
+  createCeramicShards() {
+    const gate = document.querySelector('.ocr-gate');
+    if (!gate) return;
+
+    for (let i = 0; i < 8; i++) {
+      const shard = document.createElement('div');
+      shard.classList.add('ceramic-shard');
+      shard.style.setProperty('--angle', `${Math.random() * 360}deg`);
+      shard.style.setProperty('--distance', `${50 + Math.random() * 100}px`);
+      gate.appendChild(shard);
+
+      setTimeout(() => {
+        shard.style.opacity = '1';
+        shard.style.transform = `translate(
+          calc(var(--distance) * cos(var(--angle))), 
+          calc(var(--distance) * sin(var(--angle)))
+        ) rotate(var(--angle))`;
+      }, 10);
+
+      setTimeout(() => {
+        shard.remove();
+      }, 1000);
+    }
+  }
+
+  initCraneInteraction() {
+    const cranes = document.querySelectorAll('.crane');
+    cranes.forEach(crane => {
+      crane.addEventListener('mouseenter', () => {
+        if (!crane.classList.contains('main-crane')) {
+          crane.classList.add('hovered');
+        }
+      });
+      
+      crane.addEventListener('mouseleave', () => {
+        crane.classList.remove('hovered');
+      });
+    });
+  }
+
+  initPavilionInteraction() {
+  const pavilion = document.querySelector('.pavilion-model');
+  if (!pavilion) return;
+
+  // 使用类型断言明确指定事件类型
+  pavilion.addEventListener('mousemove', (e: Event) => {
+    const mouseEvent = e as MouseEvent; // 类型断言
+    const rect = pavilion.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    
+    const rotateY = (mouseEvent.clientX - centerX) / 20;
+    const rotateX = (centerY - mouseEvent.clientY) / 20;
+    
+    (pavilion as HTMLElement).style.transform = 
+      `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+  });
+  
+  pavilion.addEventListener('mouseleave', () => {
+    (pavilion as HTMLElement).style.transform = 
+      'perspective(1000px) rotateX(0) rotateY(0)';
+  });
 }
+
+onFileSelected(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      this.formData.document = input.files[0];
+    }
+  }
+
+  submitForm() {
+    console.log('Form submitted:', this.formData);
+    // 实际应用中这里会发送数据到服务器
+    alert('奖项申报已提交！');
+    this.formData = {
+      awardName: '',
+      applicant: '',
+      description: '',
+      document: null
+    };
+  }
+}

travel-web/src/modules/pc-home/pages/page-home/page-home.html

@@ -1,7 +1,8 @@
+<!-- page-home.component.html -->
 <!-- Banner区域 -->
 <section class="banner-section">
   <!-- Swiper轮播图 -->
-  <div class="swiper-container">
+  <div class="swiper-container" #swiperContainer>
     <div class="swiper-wrapper">
       <div class="swiper-slide">
         <img src="public/images/yunhai.jpg" alt="庐山云海奇观">
@@ -63,25 +64,9 @@
         <h3>新闻动态</h3>
       </div>
       <div class="card-body">
-        <div class="news-item">
-          <div class="news-date">06-25</div>
-          <div class="news-title">"数字赋能非遗传承"研讨会在南昌成功举办</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-22</div>
-          <div class="news-title">江西文旅厅推出"云游江西"智慧旅游平台</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-18</div>
-          <div class="news-title">景德镇陶瓷数字化博物馆正式对外开放</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-15</div>
-          <div class="news-title">赣南采茶戏数字化保护工程启动</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-12</div>
-          <div class="news-title">庐山智慧景区建设取得阶段性成果</div>
+        <div class="news-item" *ngFor="let item of news">
+          <div class="news-date">{{item.date}}</div>
+          <div class="news-title">{{item.title}}</div>
         </div>
       </div>
     </div>
@@ -92,25 +77,9 @@
         <h3>文件传达</h3>
       </div>
       <div class="card-body">
-        <div class="news-item">
-          <div class="news-date">06-24</div>
-          <div class="news-title">《江西省数字文化产业发展规划》正式发布</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-20</div>
-          <div class="news-title">关于征集2023年度文化数字化项目的通知</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-17</div>
-          <div class="news-title">非遗数字化保护技术标准（试行版）</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-10</div>
-          <div class="news-title">文化数据资产登记与交易管理办法</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-05</div>
-          <div class="news-title">智慧旅游景区建设指南（2023版）</div>
+        <div class="news-item" *ngFor="let item of files">
+          <div class="news-date">{{item.date}}</div>
+          <div class="news-title">{{item.title}}</div>
         </div>
       </div>
     </div>
@@ -121,25 +90,9 @@
         <h3>学术前沿</h3>
       </div>
       <div class="card-body">
-        <div class="news-item">
-          <div class="news-date">06-23</div>
-          <div class="news-title">基于知识图谱的江西红色文化资源挖掘研究</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-19</div>
-          <div class="news-title">VR技术在古村落数字化保护中的应用探索</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-16</div>
-          <div class="news-title">区块链在非遗传承人认证体系中的实践</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-11</div>
-          <div class="news-title">AIGC在地方文化IP创作中的创新应用</div>
-        </div>
-        <div class="news-item">
-          <div class="news-date">06-08</div>
-          <div class="news-title">数字孪生技术在历史文化建筑保护中的实践</div>
+        <div class="news-item" *ngFor="let item of research">
+          <div class="news-date">{{item.date}}</div>
+          <div class="news-title">{{item.title}}</div>
         </div>
       </div>
     </div>
@@ -161,7 +114,7 @@
       </div>
       <div class="showcase-body">
         <p>展示由AI生成的文化创意作品，融合江西传统元素与现代设计</p>
-        <div class="chart-container" id="galleryChart"></div>
+        <div class="chart-container" #galleryChart></div>
       </div>
     </div>
     
@@ -173,12 +126,7 @@
       <div class="showcase-body">
         <p>最新文旅IP孵化排行，助力乡村振兴与文化传播</p>
         <ul class="ip-list">
-          <li>景德镇陶瓷青年计划</li>
-          <li>婺源油菜花艺术节</li>
-          <li>庐山云雾茶文化IP</li>
-          <li>赣南脐橙助农计划</li>
-          <li>鄱阳湖生态旅游IP</li>
-          <li>井冈山红色研学IP</li>
+          <li *ngFor="let ip of ipList">{{ip}}</li>
         </ul>
       </div>
     </div>
@@ -190,7 +138,7 @@
       </div>
       <div class="showcase-body">
         <p>沉浸式体验江西文化遗产，360°全景展示</p>
-        <div class="chart-container" id="xrChart"></div>
+        <div class="chart-container" #xrChart></div>
       </div>
     </div>
   </div>
@@ -226,7 +174,7 @@
         <h3>数据看板</h3>
       </div>
       <div class="dashboard-body">
-        <div class="chart-container" id="dashboardChart"></div>
+        <div class="chart-container" #dashboardChart></div>
       </div>
     </div>
   </div>
@@ -260,7 +208,7 @@
       <ul>
         <li><i class="fas fa-map-marker-alt"></i> 江西省南昌市红谷滩区</li>
         <li><i class="fas fa-phone"></i> 0791-12345678</li>
-        <li><i class="fas fa-envelope"></i> contact jxculture.cn</li>
+        <li><i class="fas fa-envelope"></i> contact&#64;jxculture.cn</li>
         <li><i class="fab fa-weixin"></i> 江西数字文化</li>
       </ul>
     </div>

travel-web/src/modules/pc-home/pages/page-home/page-home.scss

@@ -1,5 +1,5 @@
-// 定义CSS变量
-:root {
+/* page-home.component.scss */
+:host {
   --primary-blue: #2a5daa;   /* 青花蓝 */
   --gold-yellow: #e8c34d;    /* 稻穗金 */
   --porcelain-white: #f8f9fa; /* 瓷白 */
@@ -8,7 +8,22 @@
   --river-blue: #4a86e8;     /* 赣江蓝 */
 }
 
-/* Banner区域 - 修复轮播图问题 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
+  background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%);
+  color: var(--dark-charcoal);
+  line-height: 1.6;
+  overflow-x: hidden;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,20 Q40,5 60,20 T100,20 L100,80 L0,80 L0,20 Z" fill="none" stroke="%232a5daa22" stroke-width="0.5"/></svg>');
+}
+
+/* Banner区域 */
 .banner-section {
   padding: 1.5rem 5%;
   margin-top: 1rem;

travel-web/src/modules/pc-home/pages/page-home/page-home.ts

@@ -1,24 +1,87 @@
-import { Component, AfterViewInit } from '@angular/core';
+// page-home.component.ts
+import { Component, AfterViewInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
 import Swiper from 'swiper';
 import * as echarts from 'echarts';
 
 @Component({
   selector: 'app-page-home',
+  standalone: true,
+  imports: [],
   templateUrl: './page-home.html',
   styleUrls: ['./page-home.scss']
 })
-export class PageHome implements AfterViewInit {
+export class PageHome implements AfterViewInit, OnDestroy {
+  @ViewChild('swiperContainer') swiperContainer!: ElementRef;
+  @ViewChild('galleryChart') galleryChart!: ElementRef;
+  @ViewChild('xrChart') xrChart!: ElementRef;
+  @ViewChild('dashboardChart') dashboardChart!: ElementRef;
+
+  private swiper: any;
+  private galleryChartInstance: any;
+  private xrChartInstance: any;
+  private dashboardChartInstance: any;
+
+  // 示例数据 - 实际应用中可以从服务获取
+  news = [
+    { date: '06-25', title: '"数字赋能非遗传承"研讨会在南昌成功举办' },
+    { date: '06-22', title: '江西文旅厅推出"云游江西"智慧旅游平台' },
+    { date: '06-18', title: '景德镇陶瓷数字化博物馆正式对外开放' },
+    { date: '06-15', title: '赣南采茶戏数字化保护工程启动' },
+    { date: '06-12', title: '庐山智慧景区建设取得阶段性成果' }
+  ];
+
+  files = [
+    { date: '06-24', title: '《江西省数字文化产业发展规划》正式发布' },
+    { date: '06-20', title: '关于征集2023年度文化数字化项目的通知' },
+    { date: '06-17', title: '非遗数字化保护技术标准（试行版）' },
+    { date: '06-10', title: '文化数据资产登记与交易管理办法' },
+    { date: '06-05', title: '智慧旅游景区建设指南（2023版）' }
+  ];
+
+  research = [
+    { date: '06-23', title: '基于知识图谱的江西红色文化资源挖掘研究' },
+    { date: '06-19', title: 'VR技术在古村落数字化保护中的应用探索' },
+    { date: '06-16', title: '区块链在非遗传承人认证体系中的实践' },
+    { date: '06-11', title: 'AIGC在地方文化IP创作中的创新应用' },
+    { date: '06-08', title: '数字孪生技术在历史文化建筑保护中的实践' }
+  ];
+
+  ipList = [
+    '景德镇陶瓷青年计划',
+    '婺源油菜花艺术节',
+    '庐山云雾茶文化IP',
+    '赣南脐橙助农计划',
+    '鄱阳湖生态旅游IP',
+    '井冈山红色研学IP'
+  ];
 
   ngAfterViewInit(): void {
     this.initSwiper();
     this.initCharts();
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  ngOnDestroy(): void {
+    if (this.swiper) {
+      this.swiper.destroy();
+    }
+    if (this.galleryChartInstance) {
+      this.galleryChartInstance.dispose();
+    }
+    if (this.xrChartInstance) {
+      this.xrChartInstance.dispose();
+    }
+    if (this.dashboardChartInstance) {
+      this.dashboardChartInstance.dispose();
+    }
+    window.removeEventListener('resize', this.handleResize);
   }
 
   private initSwiper(): void {
-    const swiper = new Swiper('.swiper-container', {
+    this.swiper = new Swiper(this.swiperContainer.nativeElement, {
       loop: true,
       autoplay: {
-        delay: 2000,
+        delay: 5000,
         disableOnInteraction: false,
       },
       pagination: {
@@ -30,42 +93,29 @@ export class PageHome implements AfterViewInit {
         prevEl: '.swiper-button-prev',
       },
       on: {
-        init: function() {
-          // let el:any = this.el
-          // el.addEventListener('mouseenter', function() {
-          //   swiper.autoplay.stop();
-          // });
-          // el.addEventListener('mouseleave', function() {
-          //   swiper.autoplay.start();
-          // });
+        init: () => {
+          this.swiperContainer.nativeElement.addEventListener('mouseenter', () => {
+            this.swiper.autoplay.stop();
+          });
+          this.swiperContainer.nativeElement.addEventListener('mouseleave', () => {
+            this.swiper.autoplay.start();
+          });
         }
       }
     });
   }
 
   private initCharts(): void {
-    // 数字文创展廊图表
-    const galleryChart = echarts.init(document.getElementById('galleryChart'));
-    galleryChart.setOption({
-      tooltip: {
-        trigger: 'axis'
-      },
-      legend: {
-        data: ['作品数量', '用户访问量']
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-      },
+    this.galleryChartInstance = echarts.init(this.galleryChart.nativeElement);
+    this.galleryChartInstance.setOption({
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['作品数量', '用户访问量'] },
+      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
       xAxis: {
         type: 'category',
         data: ['陶瓷', '书画', '剪纸', '刺绣', '竹编', '漆器']
       },
-      yAxis: {
-        type: 'value'
-      },
+      yAxis: { type: 'value' },
       series: [
         {
           name: '作品数量',
@@ -73,8 +123,8 @@ export class PageHome implements AfterViewInit {
           data: [45, 32, 28, 36, 22, 18],
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {offset: 0, color: '#2a5daa'},
-              {offset: 1, color: '#4a86e8'}
+              { offset: 0, color: '#2a5daa' },
+              { offset: 1, color: '#4a86e8' }
             ])
           }
         },
@@ -84,88 +134,46 @@ export class PageHome implements AfterViewInit {
           data: [120, 85, 92, 108, 75, 60],
           symbol: 'circle',
           symbolSize: 8,
-          lineStyle: {
-            color: '#e8c34d',
-            width: 3
-          },
-          itemStyle: {
-            color: '#e8c34d',
-            borderColor: '#fff',
-            borderWidth: 2
-          }
+          lineStyle: { color: '#e8c34d', width: 3 },
+          itemStyle: { color: '#e8c34d', borderColor: '#fff', borderWidth: 2 }
         }
       ]
     });
 
-    // XR云展厅图表
-    const xrChart = echarts.init(document.getElementById('xrChart'));
-    xrChart.setOption({
-      tooltip: {
-        trigger: 'item'
-      },
-      legend: {
-        orient: 'horizontal',
-        bottom: 'bottom'
-      },
-      series: [
-        {
-          name: '访问来源',
-          type: 'pie',
-          radius: ['40%', '70%'],
-          avoidLabelOverlap: false,
-          itemStyle: {
-            borderRadius: 10,
-            borderColor: '#fff',
-            borderWidth: 2
-          },
-          label: {
-            show: false,
-            position: 'center'
-          },
-          emphasis: {
-            label: {
-              show: true,
-              fontSize: '18',
-              fontWeight: 'bold'
-            }
-          },
-          labelLine: {
-            show: false
-          },
-          data: [
-            { value: 1048, name: '景德镇陶瓷馆' },
-            { value: 735, name: '庐山云海' },
-            { value: 580, name: '婺源古村落' },
-            { value: 484, name: '井冈山革命博物馆' },
-            { value: 300, name: '滕王阁' }
-          ]
-        }
-      ]
+    this.xrChartInstance = echarts.init(this.xrChart.nativeElement);
+    this.xrChartInstance.setOption({
+      tooltip: { trigger: 'item' },
+      legend: { orient: 'horizontal', bottom: 'bottom' },
+      series: [{
+        name: '访问来源',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
+        label: { show: false, position: 'center' },
+        emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold' } },
+        labelLine: { show: false },
+        data: [
+          { value: 1048, name: '景德镇陶瓷馆' },
+          { value: 735, name: '庐山云海' },
+          { value: 580, name: '婺源古村落' },
+          { value: 484, name: '井冈山革命博物馆' },
+          { value: 300, name: '滕王阁' }
+        ]
+      }]
     });
 
-    // 数据看板图表
-    const dashboardChart = echarts.init(document.getElementById('dashboardChart'));
-    dashboardChart.setOption({
-      tooltip: {
-        trigger: 'axis'
-      },
-      legend: {
-        data: ['会员数量', '项目数量', '资源总量']
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-      },
+    this.dashboardChartInstance = echarts.init(this.dashboardChart.nativeElement);
+    this.dashboardChartInstance.setOption({
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['会员数量', '项目数量', '资源总量'] },
+      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
       xAxis: {
         type: 'category',
         boundaryGap: false,
         data: ['1月', '2月', '3月', '4月', '5月', '6月']
       },
-      yAxis: {
-        type: 'value'
-      },
+      yAxis: { type: 'value' },
       series: [
         {
           name: '会员数量',
@@ -173,21 +181,14 @@ export class PageHome implements AfterViewInit {
           stack: 'Total',
           data: [120, 132, 201, 234, 290, 330],
           smooth: true,
-          lineStyle: {
-            width: 3,
-            color: '#2a5daa'
-          },
+          lineStyle: { width: 3, color: '#2a5daa' },
           symbol: 'circle',
           symbolSize: 8,
-          itemStyle: {
-            color: '#2a5daa',
-            borderColor: '#fff',
-            borderWidth: 2
-          },
+          itemStyle: { color: '#2a5daa', borderColor: '#fff', borderWidth: 2 },
           areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {offset: 0, color: 'rgba(42, 93, 170, 0.5)'},
-              {offset: 1, color: 'rgba(42, 93, 170, 0.1)'}
+              { offset: 0, color: 'rgba(42, 93, 170, 0.5)' },
+              { offset: 1, color: 'rgba(42, 93, 170, 0.1)' }
             ])
           }
         },
@@ -197,21 +198,14 @@ export class PageHome implements AfterViewInit {
           stack: 'Total',
           data: [45, 52, 70, 83, 95, 115],
           smooth: true,
-          lineStyle: {
-            width: 3,
-            color: '#e8c34d'
-          },
+          lineStyle: { width: 3, color: '#e8c34d' },
           symbol: 'circle',
           symbolSize: 8,
-          itemStyle: {
-            color: '#e8c34d',
-            borderColor: '#fff',
-            borderWidth: 2
-          },
+          itemStyle: { color: '#e8c34d', borderColor: '#fff', borderWidth: 2 },
           areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {offset: 0, color: 'rgba(232, 195, 77, 0.5)'},
-              {offset: 1, color: 'rgba(232, 195, 77, 0.1)'}
+              { offset: 0, color: 'rgba(232, 195, 77, 0.5)' },
+              { offset: 1, color: 'rgba(232, 195, 77, 0.1)' }
             ])
           }
         },
@@ -221,32 +215,24 @@ export class PageHome implements AfterViewInit {
           stack: 'Total',
           data: [320, 382, 491, 574, 663, 795],
           smooth: true,
-          lineStyle: {
-            width: 3,
-            color: '#4a6b3d'
-          },
+          lineStyle: { width: 3, color: '#4a6b3d' },
           symbol: 'circle',
           symbolSize: 8,
-          itemStyle: {
-            color: '#4a6b3d',
-            borderColor: '#fff',
-            borderWidth: 2
-          },
+          itemStyle: { color: '#4a6b3d', borderColor: '#fff', borderWidth: 2 },
           areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {offset: 0, color: 'rgba(74, 107, 61, 0.5)'},
-              {offset: 1, color: 'rgba(74, 107, 61, 0.1)'}
+              { offset: 0, color: 'rgba(74, 107, 61, 0.5)' },
+              { offset: 1, color: 'rgba(74, 107, 61, 0.1)' }
             ])
           }
         }
       ]
     });
+  }
 
-    // 响应窗口大小变化
-    window.addEventListener('resize', function() {
-      galleryChart.resize();
-      xrChart.resize();
-      dashboardChart.resize();
-    });
+  private handleResize = () => {
+    if (this.galleryChartInstance) this.galleryChartInstance.resize();
+    if (this.xrChartInstance) this.xrChartInstance.resize();
+    if (this.dashboardChartInstance) this.dashboardChartInstance.resize();
   }
 }

travel-web/src/modules/shared/nav-pc-top-menu/nav-pc-top-menu.html

@@ -15,7 +15,7 @@
             <a routerLink="/association">协会业务</a>
             <a routerLink="/dynamic">会员服务</a>
             <a>支撑系统</a>
-            <a>关于我们</a>
+            <a routerLink="/us">关于我们</a>
         </nav>
     </div>
 </header>