travel-web/angular.json

@@ -30,7 +30,9 @@
               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+               "node_modules/swiper/swiper-bundle.min.css",
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
             ]
           },
           "configurations": {

travel-web/package-lock.json

@@ -14,7 +14,10 @@
         "@angular/forms": "^20.0.0",
         "@angular/platform-browser": "^20.0.0",
         "@angular/router": "^20.0.0",
+        "@fortawesome/fontawesome-free": "^6.7.2",
+        "echarts": "^5.6.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.2.10",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
       },
@@ -1212,6 +1215,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@inquirer/checkbox": {
       "version": "4.1.8",
       "resolved": "https://registry.npmmirror.com/@inquirer/checkbox/-/checkbox-4.1.8.tgz",
@@ -4334,6 +4346,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -8090,6 +8118,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.2.10.tgz",
+      "integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tar": {
       "version": "6.2.1",
       "resolved": "https://registry.npmmirror.com/tar/-/tar-6.2.1.tgz",
@@ -8902,6 +8949,21 @@
       "resolved": "https://registry.npmmirror.com/zone.js/-/zone.js-0.15.1.tgz",
       "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
       "license": "MIT"
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }

travel-web/package.json

@@ -26,7 +26,10 @@
     "@angular/forms": "^20.0.0",
     "@angular/platform-browser": "^20.0.0",
     "@angular/router": "^20.0.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "echarts": "^5.6.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.2.10",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },

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

@@ -1,5 +1,32 @@
 import { Routes } from '@angular/router';
+import { NavPcTopMenu } from '../modules/shared/nav-pc-top-menu/nav-pc-top-menu';
 
 export const routes: Routes = [
-    
-];
+    {
+    path: '',
+    component: NavPcTopMenu,
+    children: [
+      {
+        path: 'home',
+        loadComponent: () => import('../modules/pc-home/pages/page-home/page-home').then(m => m.PageHome)
+      },
+      {
+        path: 'dynamic',
+        loadComponent: () => import('../modules/pc-home/pages/page-dynamic/page-dynamic').then(m => m.PageDynamic)
+      },
+       {
+        path: 'creation',
+        loadComponent: () => import('../modules/pc-home/pages/page-co-creation/page-co-creation').then(m => m.PageCoCreation)
+      },
+      {
+        path: 'association',
+        loadComponent: () => import('../modules/pc-home/pages/page-association/page-association').then(m => m.PageAssociation)
+      },
+      {
+        path: '',
+        redirectTo: 'home',
+        pathMatch: 'full'
+      }
+    ]
+  }
+];

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageBanner } from './page-banner';
+
+describe('PageBanner', () => {
+  let component: PageBanner;
+  let fixture: ComponentFixture<PageBanner>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PageBanner]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PageBanner);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+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.html

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

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageCoCreation } from './page-co-creation';
+
+describe('PageCoCreation', () => {
+  let component: PageCoCreation;
+  let fixture: ComponentFixture<PageCoCreation>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PageCoCreation]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PageCoCreation);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+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/pc-home/pages/page-home/page-home.html

@@ -0,0 +1,282 @@
+<!-- Banner区域 -->
+<section class="banner-section">
+  <!-- Swiper轮播图 -->
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide">
+        <img src="assets/images/photo-1542662565-7e4b66bae529.avif" alt="庐山云海奇观">
+        <div class="slide-content">
+          <h2 class="slide-title">庐山云海奇观</h2>
+          <p class="slide-desc">世界文化遗产，云雾缭绕的人间仙境，感受江西自然之美</p>
+        </div>
+      </div>
+      <div class="swiper-slide">
+        <img src="assets/images/ee99f721632543cbb69b3be4fe13f5e3~tplv-tb4s082cfz-aigc_resize_2400_2400.webp" alt="景德镇陶瓷艺术">
+        <div class="slide-content">
+          <h2 class="slide-title">景德镇陶瓷艺术</h2>
+          <p class="slide-desc">千年瓷都，感受青花瓷的独特魅力与精湛工艺</p>
+        </div>
+      </div>
+      <div class="swiper-slide">
+        <img src="assets/images/photo-1605000797499-95a51c5269ae.avif" alt="婺源油菜花海">
+        <div class="slide-content">
+          <h2 class="slide-title">婺源油菜花海</h2>
+          <p class="slide-desc">中国最美乡村，金黄花海与徽派建筑的完美融合</p>
+        </div>
+      </div>
+    </div>
+    <!-- 添加分页器 -->
+    <div class="swiper-pagination"></div>
+    <!-- 添加导航按钮 -->
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+  </div>
+  
+  <!-- 快速入口 -->
+  <div class="quick-access">
+    <div class="access-card floating">
+      <i class="access-icon fas fa-user-plus"></i>
+      <div class="access-title">会员申报</div>
+    </div>
+    <div class="access-card floating" style="animation-delay: 0.2s;">
+      <i class="access-icon fas fa-hands-helping"></i>
+      <div class="access-title">共创平台</div>
+    </div>
+    <div class="access-card floating" style="animation-delay: 0.4s;">
+      <i class="access-icon fas fa-calendar-check"></i>
+      <div class="access-title">活动报名</div>
+    </div>
+  </div>
+</section>
+
+<!-- 数智动态区 -->
+<section class="content-section">
+  <div class="section-title">
+    <h2>数智动态</h2>
+    <div class="decor"></div>
+  </div>
+  
+  <div class="cards-container">
+    <div class="card">
+      <div class="card-header">
+        <i class="fas fa-newspaper"></i>
+        <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>
+      </div>
+    </div>
+    
+    <div class="card">
+      <div class="card-header">
+        <i class="fas fa-file-contract"></i>
+        <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>
+      </div>
+    </div>
+    
+    <div class="card">
+      <div class="card-header">
+        <i class="fas fa-graduation-cap"></i>
+        <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>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- 共创展示区 -->
+<section class="content-section">
+  <div class="section-title">
+    <h2>共创展示</h2>
+    <div class="decor"></div>
+  </div>
+  
+  <div class="showcase">
+    <div class="showcase-card">
+      <div class="showcase-header">
+        <i class="fas fa-palette"></i>
+        <h3>数字文创展廊</h3>
+      </div>
+      <div class="showcase-body">
+        <p>展示由AI生成的文化创意作品，融合江西传统元素与现代设计</p>
+        <div class="chart-container" id="galleryChart"></div>
+      </div>
+    </div>
+    
+    <div class="showcase-card">
+      <div class="showcase-header">
+        <i class="fas fa-crown"></i>
+        <h3>文旅IP孵化榜</h3>
+      </div>
+      <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>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="showcase-card">
+      <div class="showcase-header">
+        <i class="fas fa-vr-cardboard"></i>
+        <h3>XR云展厅</h3>
+      </div>
+      <div class="showcase-body">
+        <p>沉浸式体验江西文化遗产，360°全景展示</p>
+        <div class="chart-container" id="xrChart"></div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- 协会智能体 -->
+<section class="content-section">
+  <div class="section-title">
+    <h2>协会智能体</h2>
+    <div class="decor"></div>
+  </div>
+  
+  <div class="assistant-section">
+    <div class="ai-assistant">
+      <div class="ai-header">
+        <i class="fas fa-dove"></i>
+        <h3>AI客服助手</h3>
+      </div>
+      <div class="ai-body">
+        <div class="crane-icon">
+          <i class="fas fa-dove"></i>
+        </div>
+        <p>您好！我是赣鄱小鹤，24小时为您服务</p>
+        <button style="margin-top: 1.5rem; background: var(--mountain-green); color: white; border: none; padding: 0.8rem 2rem; border-radius: 30px; cursor: pointer; font-weight: bold; transition: all 0.3s ease;">
+          开始咨询
+        </button>
+      </div>
+    </div>
+    
+    <div class="dashboard">
+      <div class="showcase-header">
+        <i class="fas fa-chart-line"></i>
+        <h3>数据看板</h3>
+      </div>
+      <div class="dashboard-body">
+        <div class="chart-container" id="dashboardChart"></div>
+      </div>
+    </div>
+  </div>
+</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 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-home/page-home.scss

@@ -0,0 +1,477 @@
+// 定义CSS变量
+:root {
+  --primary-blue: #2a5daa;   /* 青花蓝 */
+  --gold-yellow: #e8c34d;    /* 稻穗金 */
+  --porcelain-white: #f8f9fa; /* 瓷白 */
+  --dark-charcoal: #333;     /* 墨黑 */
+  --mountain-green: #4a6b3d; /* 山林绿 */
+  --river-blue: #4a86e8;     /* 赣江蓝 */
+}
+
+/* Banner区域 - 修复轮播图问题 */
+.banner-section {
+  padding: 1.5rem 5%;
+  margin-top: 1rem;
+}
+
+.swiper-container {
+  width: 100%;
+  height: 400px;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  position: relative;
+}
+
+.swiper-slide {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.swiper-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.slide-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 2rem;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  color: white;
+  z-index: 10;
+}
+
+.slide-title {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.slide-desc {
+  max-width: 600px;
+}
+
+.quick-access {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-top: 2rem;
+  flex-wrap: wrap;
+}
+
+.access-card {
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.access-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, var(--primary-blue), var(--river-blue));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: -1;
+}
+
+.access-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 15px 30px rgba(42, 93, 170, 0.25);
+  color: white;
+}
+
+.access-card:hover::before {
+  opacity: 1;
+}
+
+.access-card:hover .access-icon {
+  color: white;
+  transform: scale(1.1);
+}
+
+.access-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: var(--primary-blue);
+  transition: all 0.3s ease;
+}
+
+.access-title {
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+/* 内容区域 */
+.content-section {
+  padding: 3rem 5%;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.section-title h2 {
+  font-size: 1.8rem;
+  color: var(--primary-blue);
+  position: relative;
+  padding-left: 1rem;
+}
+
+.section-title h2::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 24px;
+  background: var(--gold-yellow);
+  border-radius: 2px;
+}
+
+.section-title .decor {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(to right, var(--gold-yellow), transparent);
+  margin-left: 1rem;
+}
+
+.cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  justify-content: center;
+}
+
+.card {
+  flex: 1;
+  min-width: 300px;
+  max-width: 400px;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+}
+
+.card-header {
+  padding: 1.5rem;
+  background: var(--primary-blue);
+  color: white;
+  display: flex;
+  align-items: center;
+}
+
+.card-header i {
+  font-size: 1.5rem;
+  margin-right: 0.8rem;
+}
+
+.card-body {
+  padding: 1.5rem;
+}
+
+.news-item {
+  padding: 1rem 0;
+  border-bottom: 1px solid #eee;
+  display: flex;
+}
+
+.news-item:last-child {
+  border-bottom: none;
+}
+
+.news-date {
+  min-width: 70px;
+  background: var(--porcelain-white);
+  padding: 0.3rem;
+  border-radius: 4px;
+  text-align: center;
+  margin-right: 1rem;
+  font-size: 0.9rem;
+  color: var(--primary-blue);
+  font-weight: bold;
+}
+
+.news-title {
+  font-weight: 500;
+}
+
+/* 展示区 */
+.showcase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.showcase-card {
+  flex: 1;
+  min-width: 300px;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+}
+
+.showcase-header {
+  padding: 1.2rem;
+  background: linear-gradient(90deg, var(--primary-blue), var(--river-blue));
+  color: white;
+  display: flex;
+  align-items: center;
+}
+
+.showcase-body {
+  padding: 1.5rem;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-container {
+  width: 100%;
+  height: 200px;
+  margin-top: 1rem;
+}
+
+.ip-list {
+  list-style: none;
+  margin-top: 1rem;
+}
+
+.ip-list li {
+  padding: 0.8rem 0;
+  border-bottom: 1px dashed #eee;
+  display: flex;
+  align-items: center;
+}
+
+.ip-list li::before {
+  content: '•';
+  color: var(--gold-yellow);
+  font-size: 1.5rem;
+  margin-right: 0.8rem;
+}
+
+/* 协会智能体 */
+.assistant-section {
+  display: flex;
+  gap: 2rem;
+  margin-top: 2rem;
+  flex-wrap: wrap;
+}
+
+.ai-assistant {
+  flex: 2;
+  min-width: 300px;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+}
+
+.ai-header {
+  padding: 1.2rem;
+  background: linear-gradient(90deg, var(--mountain-green), #5d8c5a);
+  color: white;
+  display: flex;
+  align-items: center;
+}
+
+.ai-body {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.crane-icon {
+  width: 120px;
+  height: 120px;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 4rem;
+  color: var(--mountain-green);
+  margin-bottom: 1.5rem;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.dashboard {
+  flex: 3;
+  min-width: 300px;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+}
+
+.dashboard-body {
+  padding: 1.5rem;
+  height: 300px;
+}
+
+/* 页脚 */
+.footer {
+  background: var(--dark-charcoal);
+  color: white;
+  padding: 3rem 5% 2rem;
+  margin-top: 3rem;
+}
+
+.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 float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
+}
+
+.floating {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .swiper-container {
+    height: 350px;
+  }
+}
+
+@media (max-width: 992px) {
+  .swiper-container {
+    height: 300px;
+  }
+  
+  .access-card {
+    width: 160px;
+    height: 160px;
+  }
+}
+
+@media (max-width: 768px) {
+  .swiper-container {
+    height: 250px;
+  }
+  
+  .access-card {
+    width: 140px;
+    height: 140px;
+  }
+  
+  .card {
+    min-width: 100%;
+  }
+  
+  .slide-title {
+    font-size: 1.5rem;
+  }
+  
+  .slide-desc {
+    font-size: 0.9rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .swiper-container {
+    height: 200px;
+  }
+  
+  .access-card {
+    width: 120px;
+    height: 120px;
+  }
+  
+  .access-icon {
+    font-size: 2.5rem;
+  }
+  
+  .access-title {
+    font-size: 1rem;
+  }
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageHome } from './page-home';
+
+describe('PageHome', () => {
+  let component: PageHome;
+  let fixture: ComponentFixture<PageHome>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PageHome]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PageHome);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,252 @@
+import { Component, AfterViewInit } from '@angular/core';
+import Swiper from 'swiper';
+import * as echarts from 'echarts';
+
+@Component({
+  selector: 'app-page-home',
+  templateUrl: './page-home.html',
+  styleUrls: ['./page-home.scss']
+})
+export class PageHome implements AfterViewInit {
+
+  ngAfterViewInit(): void {
+    this.initSwiper();
+    this.initCharts();
+  }
+
+  private initSwiper(): void {
+    const swiper = new Swiper('.swiper-container', {
+      loop: true,
+      autoplay: {
+        delay: 2000,
+        disableOnInteraction: false,
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',
+        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();
+          // });
+        }
+      }
+    });
+  }
+
+  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
+      },
+      xAxis: {
+        type: 'category',
+        data: ['陶瓷', '书画', '剪纸', '刺绣', '竹编', '漆器']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [
+        {
+          name: '作品数量',
+          type: 'bar',
+          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'}
+            ])
+          }
+        },
+        {
+          name: '用户访问量',
+          type: 'line',
+          data: [120, 85, 92, 108, 75, 60],
+          symbol: 'circle',
+          symbolSize: 8,
+          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: '滕王阁' }
+          ]
+        }
+      ]
+    });
+
+    // 数据看板图表
+    const dashboardChart = echarts.init(document.getElementById('dashboardChart'));
+    dashboardChart.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'
+      },
+      series: [
+        {
+          name: '会员数量',
+          type: 'line',
+          stack: 'Total',
+          data: [120, 132, 201, 234, 290, 330],
+          smooth: true,
+          lineStyle: {
+            width: 3,
+            color: '#2a5daa'
+          },
+          symbol: 'circle',
+          symbolSize: 8,
+          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)'}
+            ])
+          }
+        },
+        {
+          name: '项目数量',
+          type: 'line',
+          stack: 'Total',
+          data: [45, 52, 70, 83, 95, 115],
+          smooth: true,
+          lineStyle: {
+            width: 3,
+            color: '#e8c34d'
+          },
+          symbol: 'circle',
+          symbolSize: 8,
+          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)'}
+            ])
+          }
+        },
+        {
+          name: '资源总量',
+          type: 'line',
+          stack: 'Total',
+          data: [320, 382, 491, 574, 663, 795],
+          smooth: true,
+          lineStyle: {
+            width: 3,
+            color: '#4a6b3d'
+          },
+          symbol: 'circle',
+          symbolSize: 8,
+          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)'}
+            ])
+          }
+        }
+      ]
+    });
+
+    // 响应窗口大小变化
+    window.addEventListener('resize', function() {
+      galleryChart.resize();
+      xrChart.resize();
+      dashboardChart.resize();
+    });
+  }
+}

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

@@ -0,0 +1,23 @@
+<header class="header">
+    <div class="nav-container">
+        <div class="logo">
+            <div class="logo-icon">
+                <i class="fas fa-mountain"></i>
+            </div>
+            <div>
+                <div class="logo-text">赣鄱文化云</div>
+                <div class="logo-subtext">JIANGXI DIGITAL CULTURE</div>
+            </div>
+        </div>
+        <nav class="nav-links">
+            <a routerLink="/home">首页</a>
+            <a routerLink="/creation">数智共创</a>
+            <a>协会业务</a>
+            <a>会员服务</a>
+            <a>支撑系统</a>
+            <a>关于我们</a>
+        </nav>
+    </div>
+</header>
+
+<router-outlet></router-outlet>

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

@@ -0,0 +1,105 @@
+.header {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    padding: 0.8rem 5%;
+}
+
+.nav-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+}
+
+.logo-icon {
+    width: 50px;
+    height: 50px;
+    background: #2a5daa;
+    border-radius: 50%;
+    position: relative;
+    margin-right: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: 24px;
+    box-shadow: 0 4px 8px rgba(42, 93, 170, 0.3);
+}
+
+.logo-text {
+    font-size: 1.8rem;
+    font-weight: bold;
+    background: linear-gradient(45deg, #2a5daa, #4a86e8);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    letter-spacing: 1px;
+}
+
+.logo-subtext {
+    font-size: 0.9rem;
+    color: #2a5daa;
+    margin-top: -4px;
+    letter-spacing: 3px;
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+}
+
+.nav-links a {
+    text-decoration: none;
+    color: #333;
+    font-weight: 500;
+    position: relative;
+    padding: 0.5rem 0;
+    transition: all 0.3s ease;
+}
+
+.nav-links a:hover {
+    color: #2a5daa;
+}
+
+.nav-links a::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: #2a5daa;
+    transition: width 0.3s ease;
+}
+
+.nav-links a:hover::after {
+    width: 100%;
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+    .nav-links {
+        display: none;
+    }
+    
+    .logo-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
+    }
+    
+    .logo-text {
+        font-size: 1.5rem;
+    }
+    
+    .logo-subtext {
+        font-size: 0.8rem;
+    }
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavPcTopMenu } from './nav-pc-top-menu';
+
+describe('NavPcTopMenu', () => {
+  let component: NavPcTopMenu;
+  let fixture: ComponentFixture<NavPcTopMenu>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavPcTopMenu]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NavPcTopMenu);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,14 @@
+
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-nav-pc-top-menu',
+  standalone: true,
+  imports: [RouterModule],
+  templateUrl: './nav-pc-top-menu.html',
+  styleUrls: ['./nav-pc-top-menu.scss']
+})
+export class NavPcTopMenu {
+
+}

江西省数智创享平台/ppt.html

@@ -1,936 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>赣智云旅 - 江西文旅数智创享平台</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/serif.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/highlight/monokai.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
-    <script>mermaid.initialize({startOnLoad:true, theme: 'forest'});</script>
-    <style>
-        :root {
-            --primary-color: #2a5caa;
-            --secondary-color: #d4b15f;
-            --accent-color: #e53935;
-            --dark-color: #1a3a6b;
-            --light-color: #f5f5f5;
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: linear-gradient(135deg, #1a3a6b 0%, #0d1c33 100%);
-            color: #333;
-            overflow: hidden;
-        }
-        
-        .reveal {
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M40,80 Q100,20 160,80 Q100,140 40,80Z" fill="none" stroke="%232a5caa" stroke-width="0.5" opacity="0.1"/></svg>');
-            background-size: 300px;
-        }
-        
-        .reveal .slides {
-            text-align: left;
-        }
-        
-        .slide-background {
-            background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
-        }
-        
-        .slide-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 40px;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-        
-        h1, h2, h3, h4 {
-            font-family: 'Ma Shan Zheng', cursive;
-            color: var(--dark-color);
-            margin-bottom: 1rem;
-        }
-        
-        h1 {
-            font-size: 4rem;
-            text-shadow: 3px 3px 6px rgba(0,0,0,0.2);
-            color: var(--primary-color);
-            margin-bottom: 0.5rem;
-        }
-        
-        h2 {
-            font-size: 2.8rem;
-            color: var(--accent-color);
-            border-bottom: 3px solid var(--secondary-color);
-            padding-bottom: 0.5rem;
-            margin-bottom: 1.5rem;
-        }
-        
-        h3 {
-            font-size: 2rem;
-            color: var(--dark-color);
-        }
-        
-        p {
-            font-size: 1.4rem;
-            line-height: 1.8;
-            margin-bottom: 1.5rem;
-        }
-        
-        .slogan {
-            font-size: 2.2rem;
-            text-align: center;
-            color: var(--secondary-color);
-            background: var(--dark-color);
-            padding: 15px 30px;
-            border-radius: 50px;
-            display: inline-block;
-            margin: 20px auto;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
-        }
-        
-        /* 封面页样式 */
-        .cover-page {
-            background: linear-gradient(135deg, #0d2b5b 0%, #1a478a 100%);
-            text-align: center;
-            color: white;
-        }
-        
-        .cover-page .slide-content {
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><path d="M100,200 Q200,50 300,200 Q200,350 100,200Z" fill="none" stroke="%23d4b15f" stroke-width="2" opacity="0.3"/></svg>');
-            background-size: 80%;
-            background-position: center;
-            background-repeat: no-repeat;
-        }
-        
-        .cover-page h1 {
-            color: white;
-            font-size: 4.5rem;
-            text-shadow: 0 0 20px rgba(212, 177, 95, 0.8);
-            margin-top: -2rem;
-        }
-        
-        .cover-page h2 {
-            color: var(--secondary-color);
-            border: none;
-            font-size: 2.5rem;
-            margin-top: 1rem;
-        }
-        
-        .cover-logo {
-            width: 220px;
-            height: 220px;
-            background: radial-gradient(circle, #d4b15f 0%, #2a5caa 70%);
-            border-radius: 50%;
-            margin: 30px auto;
-            position: relative;
-            box-shadow: 0 0 40px rgba(212, 177, 95, 0.6);
-            border: 5px solid rgba(255,255,255,0.2);
-        }
-        
-        .cover-logo::before {
-            content: "赣";
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-family: 'Ma Shan Zheng', cursive;
-            font-size: 8rem;
-            color: white;
-        }
-        
-        .cover-logo::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20,50 Q50,20 80,50 Q50,80 20,50Z" fill="none" stroke="white" stroke-width="0.8" opacity="0.5"/></svg>');
-            border-radius: 50%;
-            animation: rotate 30s linear infinite;
-        }
-        
-        @keyframes rotate {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        
-        /* 目录页样式 */
-        .toc-page .mermaid {
-            height: 500px;
-            margin-top: 20px;
-        }
-        
-        .toc-icons {
-            display: flex;
-            justify-content: space-around;
-            margin-top: 30px;
-        }
-        
-        .toc-icon {
-            width: 120px;
-            text-align: center;
-        }
-        
-        .icon-circle {
-            width: 100px;
-            height: 100px;
-            border-radius: 50%;
-            margin: 0 auto 15px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 2.5rem;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-        }
-        
-        .icon-1 { background: linear-gradient(135deg, #e53935, #c62828); }
-        .icon-2 { background: linear-gradient(135deg, #2a5caa, #1a3a6b); }
-        .icon-3 { background: linear-gradient(135deg, #43a047, #2e7d32); }
-        .icon-4 { background: linear-gradient(135deg, #d4b15f, #b8860b); }
-        
-        /* 痛点页样式 */
-        .pain-points table {
-            width: 100%;
-            border-collapse: collapse;
-            margin: 30px 0;
-            font-size: 1.3rem;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-        }
-        
-        .pain-points th {
-            background: var(--dark-color);
-            color: white;
-            padding: 15px;
-            text-align: center;
-        }
-        
-        .pain-points td {
-            padding: 15px;
-            text-align: center;
-            border-bottom: 1px solid #ddd;
-        }
-        
-        .pain-points tr:nth-child(even) {
-            background-color: #f2f2f2;
-        }
-        
-        .pain-points .highlight {
-            color: var(--accent-color);
-            font-weight: bold;
-        }
-        
-        .heatmap {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 40px;
-        }
-        
-        .heatmap-bar {
-            width: 60px;
-            background: linear-gradient(to top, var(--primary-color), #1a3a6b);
-            border-radius: 5px 5px 0 0;
-            position: relative;
-        }
-        
-        .heatmap-bar::after {
-            content: attr(data-label);
-            position: absolute;
-            bottom: -30px;
-            left: 50%;
-            transform: translateX(-50%);
-            font-size: 1.1rem;
-            white-space: nowrap;
-        }
-        
-        /* 黄金定位页样式 */
-        .pyramid-container {
-            display: flex;
-            justify-content: center;
-            margin-top: 50px;
-        }
-        
-        .pyramid {
-            position: relative;
-            width: 400px;
-            height: 300px;
-        }
-        
-        .pyramid-layer {
-            position: absolute;
-            width: 0;
-            height: 0;
-            border-left: 150px solid transparent;
-            border-right: 150px solid transparent;
-            border-bottom: 100px solid var(--secondary-color);
-            opacity: 0.8;
-        }
-        
-        .layer-1 {
-            top: 0;
-            border-bottom-color: #d4b15f;
-        }
-        
-        .layer-2 {
-            top: 70px;
-            border-bottom-width: 90px;
-            border-left-width: 130px;
-            border-right-width: 130px;
-            border-bottom-color: #2a5caa;
-        }
-        
-        .layer-3 {
-            top: 140px;
-            border-bottom-width: 80px;
-            border-left-width: 110px;
-            border-right-width: 110px;
-            border-bottom-color: #e53935;
-        }
-        
-        .pyramid-label {
-            position: absolute;
-            left: 50%;
-            transform: translateX(-50%);
-            color: white;
-            font-weight: bold;
-            font-size: 1.4rem;
-            text-align: center;
-            width: 200px;
-        }
-        
-        .label-1 { top: 35px; }
-        .label-2 { top: 105px; }
-        .label-3 { top: 180px; }
-        
-        /* 功能页样式 */
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 30px;
-            margin-top: 30px;
-        }
-        
-        .feature-card {
-            background: white;
-            border-radius: 10px;
-            padding: 25px;
-            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
-            transition: transform 0.3s ease;
-            border-top: 5px solid var(--secondary-color);
-        }
-        
-        .feature-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 12px 25px rgba(0,0,0,0.15);
-        }
-        
-        .feature-card h3 {
-            color: var(--primary-color);
-            margin-bottom: 15px;
-            display: flex;
-            align-items: center;
-        }
-        
-        .feature-card h3 i {
-            margin-right: 10px;
-            font-size: 1.8rem;
-        }
-        
-        .feature-detail {
-            margin: 15px 0;
-            padding-left: 10px;
-            border-left: 3px solid var(--secondary-color);
-        }
-        
-        /* 技术架构页样式 */
-        .architecture {
-            display: flex;
-            justify-content: center;
-            margin-top: 40px;
-        }
-        
-        .tech-column {
-            width: 250px;
-            margin: 0 20px;
-            text-align: center;
-        }
-        
-        .tech-icon {
-            width: 120px;
-            height: 120px;
-            background: white;
-            border-radius: 50%;
-            margin: 0 auto 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 3rem;
-            color: var(--primary-color);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-            border: 5px solid var(--light-color);
-        }
-        
-        .dna-container {
-            height: 150px;
-            margin: 20px 0;
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .dna-strand {
-            position: absolute;
-            left: 50%;
-            width: 5px;
-            height: 100%;
-            background: var(--secondary-color);
-            transform: translateX(-50%);
-        }
-        
-        .dna-node {
-            position: absolute;
-            width: 20px;
-            height: 20px;
-            background: var(--primary-color);
-            border-radius: 50%;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-        
-        /* 商业模式页样式 */
-        .quadrant-chart {
-            width: 600px;
-            height: 600px;
-            margin: 30px auto;
-            position: relative;
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%23d4b15f" stroke-width="0.5" opacity="0.2"/></svg>');
-            background-size: 100%;
-        }
-        
-        .axis {
-            position: absolute;
-            background: var(--dark-color);
-        }
-        
-        .x-axis {
-            width: 100%;
-            height: 2px;
-            top: 50%;
-            left: 0;
-        }
-        
-        .y-axis {
-            width: 2px;
-            height: 100%;
-            top: 0;
-            left: 50%;
-        }
-        
-        .quadrant {
-            position: absolute;
-            width: 50%;
-            height: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            padding: 20px;
-            font-weight: bold;
-            font-size: 1.4rem;
-        }
-        
-        .quadrant-1 { top: 0; left: 50%; background: rgba(42, 92, 170, 0.1); }
-        .quadrant-2 { top: 0; left: 0; background: rgba(212, 177, 95, 0.1); }
-        .quadrant-3 { top: 50%; left: 0; background: rgba(229, 57, 53, 0.1); }
-        .quadrant-4 { top: 50%; left: 50%; background: rgba(67, 160, 71, 0.1); }
-        
-        .chart-point {
-            position: absolute;
-            width: 20px;
-            height: 20px;
-            background: var(--accent-color);
-            border-radius: 50%;
-            transform: translate(-50%, -50%);
-            box-shadow: 0 0 10px rgba(229, 57, 53, 0.5);
-        }
-        
-        .point-label {
-            position: absolute;
-            font-size: 1.1rem;
-            white-space: nowrap;
-        }
-        
-        /* 未来愿景页样式 */
-        .future-vision {
-            text-align: center;
-        }
-        
-        .vision-container {
-            display: flex;
-            justify-content: space-around;
-            margin-top: 50px;
-        }
-        
-        .vision-item {
-            width: 30%;
-            perspective: 1000px;
-        }
-        
-        .vision-card {
-            height: 250px;
-            position: relative;
-            transform-style: preserve-3d;
-            transition: transform 1s;
-        }
-        
-        .vision-item:hover .vision-card {
-            transform: rotateY(180deg);
-        }
-        
-        .vision-front, .vision-back {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            backface-visibility: hidden;
-            border-radius: 15px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-        }
-        
-        .vision-front {
-            background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
-            color: white;
-            font-size: 2rem;
-        }
-        
-        .vision-back {
-            background: white;
-            transform: rotateY(180deg);
-            font-size: 1.2rem;
-            color: var(--dark-color);
-            text-align: center;
-        }
-        
-        /* 封底页样式 */
-        .end-page {
-            background: linear-gradient(135deg, #1a3a6b 0%, #0d1c33 100%);
-            text-align: center;
-            color: white;
-        }
-        
-        .end-page h2 {
-            color: var(--secondary-color);
-            border: none;
-            font-size: 3rem;
-            margin-top: 2rem;
-        }
-        
-        .cta-buttons {
-            display: flex;
-            justify-content: center;
-            gap: 50px;
-            margin: 50px 0;
-        }
-        
-        .cta-button {
-            padding: 20px 40px;
-            font-size: 1.5rem;
-            border-radius: 10px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-weight: bold;
-            border: none;
-            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
-        }
-        
-        .gov-button {
-            background: linear-gradient(135deg, #d4b15f, #b8860b);
-            color: var(--dark-color);
-        }
-        
-        .public-button {
-            background: linear-gradient(135deg, #2a5caa, #1a478a);
-            color: white;
-        }
-        
-        .cta-button:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 12px 25px rgba(0,0,0,0.4);
-        }
-        
-        .crane-icon {
-            font-size: 5rem;
-            margin: 30px 0;
-            color: var(--secondary-color);
-            animation: float 3s ease-in-out infinite;
-        }
-        
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-20px); }
-            100% { transform: translateY(0px); }
-        }
-        
-        .footer-note {
-            position: absolute;
-            bottom: 20px;
-            right: 20px;
-            font-size: 1.1rem;
-            color: rgba(255,255,255,0.7);
-        }
-    </style>
-</head>
-<body>
-    <div class="reveal">
-        <div class="slides">
-            <!-- 封面页 -->
-            <section class="cover-page" data-background-color="#1a3a6b">
-                <div class="slide-content">
-                    <div class="cover-logo"></div>
-                    <h1>赣智云旅</h1>
-                    <h2>千年文脉的数字化新生</h2>
-                    <h3>用AI重构江西文旅新生态</h3>
-                    <div class="slogan">智汇江西，云览千年文旅新境</div>
-                </div>
-            </section>
-            
-            <!-- 目录页 -->
-            <section>
-                <div class="slide-content">
-                    <h2>平台架构全景图</h2>
-                    <div class="mermaid">
-                        graph TD
-                        A[痛点撕裂] --> B[破局之道]
-                        B --> C[技术重器]
-                        C --> D[未来图景]
-                    </div>
-                    
-                    <div class="toc-icons">
-                        <div class="toc-icon">
-                            <div class="icon-circle icon-1">💔</div>
-                            <div>痛点</div>
-                        </div>
-                        <div class="toc-icon">
-                            <div class="icon-circle icon-2">🕊️</div>
-                            <div>破局</div>
-                        </div>
-                        <div class="toc-icon">
-                            <div class="icon-circle icon-3">⚙️</div>
-                            <div>技术</div>
-                        </div>
-                        <div class="toc-icon">
-                            <div class="icon-circle icon-4">🔮</div>
-                            <div>未来</div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-            
-            <!-- 痛点页 -->
-            <section class="pain-points">
-                <div class="slide-content">
-                    <h2>江西文旅发展痛点分析</h2>
-                    <table>
-                        <tr>
-                            <th>痛点维度</th>
-                            <th>传统模式</th>
-                            <th>赣智云旅</th>
-                            <th>差距值</th>
-                        </tr>
-                        <tr>
-                            <td>资源利用率</td>
-                            <td>31%</td>
-                            <td>89%</td>
-                            <td class="highlight">+187%</td>
-                        </tr>
-                        <tr>
-                            <td>游客停留时长</td>
-                            <td>2.1小时</td>
-                            <td>4.8小时</td>
-                            <td class="highlight">+129%</td>
-                        </tr>
-                        <tr>
-                            <td>非遗传承效率</td>
-                            <td>1项/年</td>
-                            <td>5项/年</td>
-                            <td class="highlight">+400%</td>
-                        </tr>
-                        <tr>
-                            <td>文化传播广度</td>
-                            <td>省内为主</td>
-                            <td>全球覆盖</td>
-                            <td class="highlight">+300%</td>
-                        </tr>
-                    </table>
-                    
-                    <div class="heatmap">
-                        <div class="heatmap-bar" style="height: 100px;" data-label="南昌"></div>
-                        <div class="heatmap-bar" style="height: 180px;" data-label="九江"></div>
-                        <div class="heatmap-bar" style="height: 150px;" data-label="景德镇"></div>
-                        <div class="heatmap-bar" style="height: 70px;" data-label="萍乡"></div>
-                        <div class="heatmap-bar" style="height: 60px;" data-label="新余"></div>
-                        <div class="heatmap-bar" style="height: 120px;" data-label="鹰潭"></div>
-                        <div class="heatmap-bar" style="height: 80px;" data-label="赣州"></div>
-                        <div class="heatmap-bar" style="height: 50px;" data-label="吉安"></div>
-                        <div class="heatmap-bar" style="height: 90px;" data-label="宜春"></div>
-                        <div class="heatmap-bar" style="height: 40px;" data-label="抚州"></div>
-                        <div class="heatmap-bar" style="height: 110px;" data-label="上饶"></div>
-                    </div>
-                </div>
-            </section>
-            
-            <!-- 黄金定位页 -->
-            <section>
-                <div class="slide-content">
-                    <h2>价值定位金字塔</h2>
-                    <div class="pyramid-container">
-                        <div class="pyramid">
-                            <div class="pyramid-layer layer-1"></div>
-                            <div class="pyramid-layer layer-2"></div>
-                            <div class="pyramid-layer layer-3"></div>
-                            
-                            <div class="pyramid-label label-1">"千年"文化新生</div>
-                            <div class="pyramid-label label-2">"云览"沉浸体验</div>
-                            <div class="pyramid-label label-3">"智汇"技术底座</div>
-                        </div>
-                    </div>
-                    
-                    <div style="text-align: center; margin-top: 50px;">
-                        <p>以数字科技为基座，打造沉浸式文化体验，实现赣鄱千年文脉的数字化新生</p>
-                    </div>
-                </div>
-            </section>
-            
-            <!-- 功能页 -->
-            <section>
-                <div class="slide-content">
-                    <h2>三大核心功能驱动</h2>
-                    <div class="features-grid">
-                        <div class="feature-card">
-                            <h3><i>📍</i> 革命足迹AR</h3>
-                            <div class="feature-detail">
-                                <strong>优势：</strong> 时空叠加技术
-                            </div>
-                            <div class="feature-detail">
-                                <strong>效益：</strong> 红色教育增效300%
-                            </div>
-                            <div class="feature-detail">
-                                <strong>验证：</strong> 井冈山试点数据
-                            </div>
-                        </div>
-                        
-                        <div class="feature-card">
-                            <h3><i>🏺</i> 非遗云工坊</h3>
-                            <div class="feature-detail">
-                                <strong>优势：</strong> 3D肌理扫描
-                            </div>
-                            <div class="feature-detail">
-                                <strong>效益：</strong> 工艺复原精度0.1mm
-                            </div>
-                            <div class="feature-detail">
-                                <strong>验证：</strong> 央视报道画面
-                            </div>
-                        </div>
-                        
-                        <div class="feature-card">
-                            <h3><i>📜</i> 诗词全息镜</h3>
-                            <div class="feature-detail">
-                                <strong>优势：</strong> 古人数字孪生
-                            </div>
-                            <div class="feature-detail">
-                                <strong>效益：</strong> 研学转化率+65%
-                            </div>
-                            <div class="feature-detail">
-                                <strong>验证：</strong> 滕王阁实景视频
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-            
-            <!-- 技术架构页 -->
-            <section>
-                <div class="slide-content">
-                    <h2>技术架构神经中枢</h2>
-                    <div class="architecture">
-                        <div class="tech-column">
-                            <div class="tech-icon">🧠</div>
-                            <h3>AI决策脑</h3>
-                            <p>智能内容生成、游客行为分析、资源优化配置</p>
-                            
-                            <div class="dna-container">
-                                <div class="dna-strand"></div>
-                                <div class="dna-node" style="top: 20px;"></div>
-                                <div class="dna-node" style="top: 50px;"></div>
-                                <div class="dna-node" style="top: 80px;"></div>
-                                <div class="dna-node" style="top: 110px;"></div>
-                                <div class="dna-node" style="top: 140px;"></div>
-                            </div>
-                        </div>
-                        
-                        <div class="tech-column">
-                            <div class="tech-icon">⛓️</div>
-                            <h3>区块链脊柱</h3>
-                            <p>数字版权保护、文旅资产确权、交易透明可信</p>
-                            
-                            <div class="dna-container">
-                                <div class="dna-strand"></div>
-                                <div class="dna-node" style="top: 30px;"></div>
-                                <div class="dna-node" style="top: 60px;"></div>
-                                <div class="dna-node" style="top: 90px;"></div>
-                                <div class="dna-node" style="top: 120px;"></div>
-                            </div>
-                        </div>
-                        
-                        <div class="tech-column">
-                            <div class="tech-icon">👓</div>
-                            <h3>XR神经网</h3>
-                            <p>混合现实体验、沉浸式交互、云端渲染</p>
-                            
-                            <div class="dna-container">
-                                <div class="dna-strand"></div>
-                                <div class="dna-node" style="top: 40px;"></div>
-                                <div class="dna-node" style="top: 70px;"></div>
-                                <div class="dna-node" style="top: 100px;"></div>
-                                <div class="dna-node" style="top: 130px;"></div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div style="text-align: center; margin-top: 30px;">
-                        <p>文化基因库：红色DNA | 非遗DNA | 山水DNA</p>
-                    </div>
-                </div>
-            </section>
-            
-            <!-- 商业模式页 -->
-            <section>
-                <div class="slide-content">
-                    <h2>四维商业价值矩阵</h2>
-                    <div class="quadrant-chart">
-                        <div class="axis x-axis"></div>
-                        <div class="axis y-axis"></div>
-                        
-                        <div class="quadrant quadrant-1">数字藏品</div>
-                        <div class="quadrant quadrant-2">智慧景区</div>
-                        <div class="quadrant quadrant-3">IP授权</div>
-                        <div class="quadrant quadrant-4">数据银行</div>
-                        
-                        <div class="chart-point" style="top: 30%; left: 70%;"></div>
-                        <div class="point-label" style="top: 30%; left: 75%;">AR导览分成</div>
-                        
-                        <div class="chart-point" style="top: 20%; left: 20%;"></div>
-                        <div class="point-label" style="top: 20%; left: 10%;">非遗数字授权</div>
-                        
-                        <div class="chart-point" style="top: 70%; left: 30%;"></div>
-                        <div class="point-label" style="top: 70%; left: 35%;">文旅数据服务</div>
-                    </div>
-                </div>
-            </section>
-            
-            <!-- 未来愿景页 -->
-            <section class="future-vision">
-                <div class="slide-content">
-                    <h2>2030数字文旅愿景</h2>
-                    <div class="vision-container">
-                        <div class="vision-item">
-                            <div class="vision-card">
-                                <div class="vision-front">
-                                    <div>景德镇瓷器<br>云端重组</div>
-                                </div>
-                                <div class="vision-back">
-                                    全球艺术家协同创作，数字陶瓷艺术品交易平台
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="vision-item">
-                            <div class="vision-card">
-                                <div class="vision-front">
-                                    <div>鄱阳湖候鸟<br>数据迁徙</div>
-                                </div>
-                                <div class="vision-back">
-                                    生态大数据可视化，候鸟迁徙全球直播
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="vision-item">
-                            <div class="vision-card">
-                                <div class="vision-front">
-                                    <div>井冈山火炬<br>点燃元宇宙</div>
-                                </div>
-                                <div class="vision-back">
-                                    红色教育元宇宙，革命精神全球传播
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div style="margin-top: 50px; font-size: 2rem; color: var(--primary-color); font-weight: bold;">
-                        文化永生，赣鄱永续
-                    </div>
-                </div>
-            </section>
-            
-            <!-- 封底页 -->
-            <section class="end-page" data-background-color="#0d1c33">
-                <div class="slide-content">
-                    <div class="crane-icon">🕊️</div>
-                    <h2>智汇江西，云览千年</h2>
-                    
-                    <div class="cta-buttons">
-                        <button class="cta-button gov-button">战略合作</button>
-                        <button class="cta-button public-button">云游江西</button>
-                    </div>
-                    
-                    <div class="footer-note">
-                        文化数字化战略工程 · 江西文旅厅重点项目
-                    </div>
-                </div>
-            </section>
-        </div>
-    </div>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/highlight/highlight.min.js"></script>
-    <script>
-        Reveal.initialize({
-            controls: true,
-            progress: true,
-            center: true,
-            hash: true,
-            transition: 'convex',
-            plugins: [ RevealMarkdown, RevealHighlight ],
-            width: 1200,
-            height: 700,
-            margin: 0.1,
-            minScale: 0.2,
-            maxScale: 2.0
-        });
-        
-        // 动态更新DNA节点位置
-        setInterval(() => {
-            document.querySelectorAll('.dna-node').forEach(node => {
-                const currentTop = parseInt(node.style.top);
-                const newTop = (currentTop + 10) % 150;
-                node.style.top = `${newTop}px`;
-            });
-        }, 500);
-    </script>
-</body>
-</html>