feat:new

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

@@ -12,7 +12,7 @@ export const routes: Routes = [
       },
       {
         path: 'dynamic',
-        loadComponent: () => import('../modules/pc-home/pages/page-dynamic/page-dynamic').then(m => m.PageDynamic)
+        loadComponent: () => import('../modules/pc-home/pages/page-dynamic/page-dynamic.component').then(m => m.PageDynamicComponent)
       },
        {
         path: 'creation',
@@ -20,7 +20,11 @@ export const routes: Routes = [
       },
       {
         path: 'association',
-        loadComponent: () => import('../modules/pc-home/pages/page-association/page-association').then(m => m.PageAssociation)
+        loadComponent: () => import('../modules/pc-home/pages/page-association/page-association.component').then(m => m.PageAssociationComponent)
+      },
+      {
+        path: 'us',
+        loadComponent: () => import('../modules/pc-home/pages/page-about-us/page-about-us').then(m => m.PageAboutUs)
       },
       {
         path: '',

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 → travel-web/src/modules/pc-home/pages/page-association/page-association.component.html

@@ -1,4 +1,3 @@
-
 <!-- 页面标题 -->
 <div class="page-header">
   <h1 class="page-title">协会核心业务</h1>
@@ -17,17 +16,37 @@
         <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">
-      <div class="leader-card" *ngFor="let leader of leaders">
+      <div class="leader-card">
+        <div class="leader-img"></div>
+        <div class="leader-info">
+          <div class="ar-tag">AR名片</div>
+          <h3 class="leader-name">张明远</h3>
+          <p class="leader-title">协会主席 · 江西文化研究专家</p>
+          <p class="leader-desc">负责协会全面工作，主管学术研究、对外交流。曾主持国家级文化研究项目5项，出版专著8部。</p>
+        </div>
+      </div>
+      
+      <div class="leader-card">
+        <div class="leader-img"></div>
+        <div class="leader-info">
+          <div class="ar-tag">AR名片</div>
+          <h3 class="leader-name">李红梅</h3>
+          <p class="leader-title">常务副主席 · 非遗保护专家</p>
+          <p class="leader-desc">分管会员服务、人才培养工作。致力于江西非物质文化遗产保护与数字化传承20余年。</p>
+        </div>
+      </div>
+      
+      <div class="leader-card">
         <div class="leader-img"></div>
         <div class="leader-info">
           <div class="ar-tag">AR名片</div>
-          <h3 class="leader-name">{{leader.name}}</h3>
-          <p class="leader-title">{{leader.title}}</p>
-          <p class="leader-desc">{{leader.description}}</p>
+          <h3 class="leader-name">王建国</h3>
+          <p class="leader-title">秘书长 · 数字技术专家</p>
+          <p class="leader-desc">分管技术研发、平台建设工作。主持开发多个省级文化数字化平台，获国家专利3项。</p>
         </div>
       </div>
     </div>
@@ -35,8 +54,8 @@
   
   <div class="constitution-container">
     <div class="search-box">
-      <input type="text" class="search-input" [(ngModel)]="searchTerm" placeholder="输入关键词检索协会章程 (如：红色文化、会员权利...)">
-      <button class="search-btn" (click)="highlightText()"><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>
@@ -87,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">
@@ -103,42 +122,22 @@
           <div class="version-card">
             <h5 class="version-title">2021版</h5>
             <div class="version-content">
-              <p>1. 数字资源采集应遵循真实性原则，确保<span class="diff-highlight" 
-                 (mouseenter)="highlightDifferences('diff-highlight')"
-                 (mouseleave)="resetHighlights()">内容准确</span>。</p>
-              <p>2. 图像采集分辨率不低于<span class="diff-highlight"
-                 (mouseenter)="highlightDifferences('diff-highlight')"
-                 (mouseleave)="resetHighlights()">300dpi</span>。</p>
-              <p>3. 音频采集采样率不低于<span class="diff-highlight"
-                 (mouseenter)="highlightDifferences('diff-highlight')"
-                 (mouseleave)="resetHighlights()">44.1kHz</span>。</p>
-              <p>4. 视频采集分辨率不低于<span class="diff-highlight"
-                 (mouseenter)="highlightDifferences('diff-highlight')"
-                 (mouseleave)="resetHighlights()">1080p</span>。</p>
-              <p>5. 三维模型采集精度不低于<span class="diff-highlight"
-                 (mouseenter)="highlightDifferences('diff-highlight')"
-                 (mouseleave)="resetHighlights()">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"
-                 (mouseenter)="highlightDifferences('new-highlight')"
-                 (mouseleave)="resetHighlights()">内容准确且完整呈现文化背景</span>。</p>
-              <p>2. 图像采集分辨率不低于<span class="new-highlight"
-                 (mouseenter)="highlightDifferences('new-highlight')"
-                 (mouseleave)="resetHighlights()">600dpi，重要文物需达1200dpi</span>。</p>
-              <p>3. 音频采集采样率不低于<span class="new-highlight"
-                 (mouseenter)="highlightDifferences('new-highlight')"
-                 (mouseleave)="resetHighlights()">48kHz，推荐使用96kHz</span>。</p>
-              <p>4. 视频采集分辨率不低于<span class="new-highlight"
-                 (mouseenter)="highlightDifferences('new-highlight')"
-                 (mouseleave)="resetHighlights()">4K，重要场景需8K</span>。</p>
-              <p>5. 三维模型采集精度不低于<span class="new-highlight"
-                 (mouseenter)="highlightDifferences('new-highlight')"
-                 (mouseleave)="resetHighlights()">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,7 +182,7 @@
         <p>已上线课程</p>
         
         <div class="courses">
-          <div class="course-card" *ngFor="let course of courses">
+          <div *ngFor="let course of courses" class="course-card">
             <div class="course-img"></div>
             <div class="course-content">
               <h5 class="course-title">{{course.title}}</h5>
@@ -228,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 → travel-web/src/modules/pc-home/pages/page-association/page-association.component.scss

@@ -1,5 +1,4 @@
-/* Styles remain the same as in your original CSS */
-:root {
+:host {
   --wood-primary: #8B4513;   /* 木质主色 */
   --wood-secondary: #A0522D; /* 木质辅色 */
   --wood-light: #DEB887;     /* 木质亮色 */
@@ -25,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)), 
@@ -475,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;
@@ -674,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.component.ts

@@ -0,0 +1,217 @@
+import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as echarts from 'echarts';
+
+@Component({
+  selector: 'app-page-association.component',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './page-association.component.html',
+  styleUrls: ['./page-association.component.scss']
+})
+export class PageAssociationComponent implements AfterViewInit {
+  @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();
+  }
+
+  initOrgChart(): void {
+    const orgChart = echarts.init(this.orgChartElement.nativeElement);
+    orgChart.setOption({
+      tooltip: {
+        trigger: 'item',
+        triggerOn: 'mousemove'
+      },
+      series: [
+        {
+          type: 'tree',
+          data: [{
+            name: '协会主席',
+            children: [{
+              name: '常务副主席',
+              children: [
+                { name: '会员服务部' },
+                { name: '人才培养部' }
+              ]
+            }, {
+              name: '秘书长',
+              children: [
+                { name: '技术研发中心' },
+                { name: '平台建设部' }
+              ]
+            }, {
+              name: '学术委员会',
+              children: [
+                { name: '红色文化研究所' },
+                { name: '非遗研究中心' },
+                { name: '数字技术实验室' }
+              ]
+            }]
+          }],
+          top: '5%',
+          left: '10%',
+          bottom: '5%',
+          right: '20%',
+          symbolSize: 20,
+          symbol: 'circle',
+          orient: 'vertical',
+          expandAndCollapse: true,
+          initialTreeDepth: 2,
+          lineStyle: {
+            width: 2,
+            color: '#8B4513'
+          },
+          label: {
+            position: 'top',
+            verticalAlign: 'middle',
+            align: 'middle',
+            fontSize: 14,
+            fontWeight: 'bold',
+            color: '#8B4513'
+          },
+          itemStyle: {
+            color: '#DEB887',
+            borderColor: '#8B4513',
+            borderWidth: 2
+          },
+          emphasis: {
+            itemStyle: {
+              color: '#e8c34d',
+              borderColor: '#8B4513'
+            }
+          },
+          leaves: {
+            label: {
+              position: 'right',
+              verticalAlign: 'middle',
+              align: 'left'
+            },
+            itemStyle: {
+              color: '#f0e6d2',
+              borderColor: '#8B4513'
+            }
+          }
+        }
+      ]
+    });
+    
+    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}`;
+        }
+      },
+      visualMap: {
+        show: false,
+        min: 0,
+        max: 100,
+        inRange: {
+          color: ['#DEB887', '#A0522D', '#8B0000']
+        }
+      },
+      calendar: {
+        top: 30,
+        left: 30,
+        right: 30,
+        cellSize: ['auto', 20],
+        range: '2023-06',
+        itemStyle: {
+          borderWidth: 1,
+          borderColor: '#e8e0d0'
+        },
+        dayLabel: {
+          color: '#8B4513'
+        },
+        monthLabel: {
+          color: '#8B4513',
+          fontWeight: 'bold'
+        },
+        yearLabel: { show: false }
+      },
+      series: {
+        type: 'heatmap',
+        coordinateSystem: 'calendar',
+        data: [
+          ['2023-06-05', 35, '数字文化论坛', '南昌'],
+          ['2023-06-08', 65, '非遗保护研讨会', '景德镇'],
+          ['2023-06-12', 45, '青年学者交流会', '九江'],
+          ['2023-06-15', 85, '红色文化数字展', '井冈山'],
+          ['2023-06-18', 25, '会员技术培训', '赣州'],
+          ['2023-06-22', 75, '数字艺术创作大赛', '南昌'],
+          ['2023-06-25', 55, '智慧旅游研讨会', '上饶'],
+          ['2023-06-28', 95, '年度学术大会', '南昌']
+        ].map((item) => ({
+          value: [item[0], item[1], item[1], item[2], item[3]]
+        }))
+      }
+    });
+    
+    window.addEventListener('resize', () => academicCalendar.resize());
+  }
+
+  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;
+      }
+    }
+  }
+
+  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-association/page-association.spec.ts

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

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

@@ -1,12 +0,0 @@
-
-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 {}

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-dynamic/page-dynamic.component.html

@@ -0,0 +1,318 @@
+<!-- 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.component.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.component.ts

@@ -0,0 +1,128 @@
+// page-dynamic.component.ts
+import { Component, AfterViewInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-page-dynamic',
+  standalone: true,
+  templateUrl: './page-dynamic.component.html',
+  styleUrls: ['./page-dynamic.component.scss'],
+  imports: [FormsModule]
+})
+export class PageDynamicComponent 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-dynamic/page-dynamic.html

@@ -1,2 +0,0 @@
-<p>page-dynamic works!</p>
-<h1>你好</h1>

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

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

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

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

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>