feat:association

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

@@ -21,13 +21,33 @@
     </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">{{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">负责协会全面工作，主管学术研究、对外交流。曾主持国家级文化研究项目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">王建国</h3>
+          <p class="leader-title">秘书长 · 数字技术专家</p>
+          <p class="leader-desc">分管技术研发、平台建设工作。主持开发多个省级文化数字化平台，获国家专利3项。</p>
         </div>
       </div>
     </div>
@@ -35,8 +55,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 type="text" class="search-input" placeholder="输入关键词检索协会章程 (如：红色文化、会员权利...)">
+      <button class="search-btn"><i class="fas fa-search"></i> 智能检索</button>
     </div>
     <div class="constitution-content">
       <h3>江西省数字文化发展协会章程</h3>
@@ -103,42 +123,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">内容准确</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>
             </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">内容准确且完整呈现文化背景</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>
             </div>
           </div>
         </div>
@@ -183,14 +183,50 @@
         <p>已上线课程</p>
         
         <div class="courses">
-          <div class="course-card" *ngFor="let course of 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 class="course-img"></div>
             <div class="course-content">
-              <h5 class="course-title">{{course.title}}</h5>
-              <p>{{course.description}}</p>
+              <h5 class="course-title">智慧旅游系统设计</h5>
+              <p>学习旅游动线策划与智能导览系统开发</p>
               <div class="course-meta">
-                <span><i class="fas fa-clock"></i> {{course.duration}}</span>
-                <span><i class="fas fa-user-graduate"></i> 已报名 {{course.students}}</span>
+                <span><i class="fas fa-clock"></i> 28课时</span>
+                <span><i class="fas fa-user-graduate"></i> 已报名 875人</span>
               </div>
             </div>
           </div>

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

@@ -1,4 +1,3 @@
-/* Styles remain the same as in your original CSS */
 :root {
   --wood-primary: #8B4513;   /* 木质主色 */
   --wood-secondary: #A0522D; /* 木质辅色 */

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

@@ -1,12 +1,215 @@
 
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+//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 * as echarts from 'echarts';
 
 @Component({
   selector: 'app-page-association',
-  standalone: true,
-  imports: [CommonModule],
   templateUrl: './page-association.html',
   styleUrls: ['./page-association.scss']
 })
-export class PageAssociation {}
+export class PageAssociation implements AfterViewInit {
+  ngAfterViewInit() {
+    this.initCharts();
+    this.setupEventListeners();
+  }
+
+  initCharts() {
+    // Initialize organization chart
+    const orgChart = echarts.init(document.getElementById('orgChart'));
+    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'
+            }
+          }
+        }
+      ]
+    });
+    
+    // Initialize academic calendar
+    const academicCalendar = echarts.init(document.getElementById('academicCalendar'));
+    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(function (item) {
+          return {
+            value: (item[0], item[1], item[1], item[2], item[3])
+          };
+        })
+      }
+    });
+
+    // Handle window resize
+    window.addEventListener('resize', function() {
+      orgChart.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;
+          }
+        }
+      });
+    }
+
+    // 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)');
+      //});
+    //});
+  }
+}