feat.new-platform

travel-platform-web/travel-web/src/crm/mobile/page-crm-platform/page-crm-platform.html

@@ -1 +1,175 @@
-<p>page-crm-platform works!数智共创平台</p>
+<div class="platform-container">
+  <!-- 水墨装饰元素 -->
+  <div class="ink-mountain no-flash"></div>
+  <div class="ink-water no-flash"></div>
+  
+  <div class="main-content">
+    <!-- 侧边导航 -->
+    <aside class="sidebar no-flash">
+      <h2 class="sidebar-title">数智共创平台</h2>
+      <ul class="module-nav">
+        <li>
+          <a href="#" class="active"><i class="fas fa-database"></i> 文化资源库</a>
+          <ul class="sub-nav">
+            <li><a href="#"><i class="fas fa-microphone-alt"></i> 多模态采集中心</a></li>
+            <li><a href="#"><i class="fas fa-sitemap"></i> 分类知识图谱</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="#"><i class="fas fa-brain"></i> 智慧应用中心</a>
+          <ul class="sub-nav">
+            <li><a href="#"><i class="fas fa-paint-brush"></i> 数字文创工坊</a></li>
+            <li><a href="#"><i class="fas fa-map-marked-alt"></i> 智慧文旅系统</a></li>
+            <li><a href="#"><i class="fas fa-egg"></i> IP孵化平台</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="#"><i class="fas fa-users"></i> 共创社区</a>
+          <ul class="sub-nav">
+            <li><a href="#"><i class="fas fa-graduation-cap"></i> 高校联盟</a></li>
+            <li><a href="#"><i class="fas fa-landmark"></i> 政府协作</a></li>
+            <li><a href="#"><i class="fas fa-edit"></i> 全民创作</a></li>
+          </ul>
+        </li>
+      </ul>
+    </aside>
+    
+    <!-- 主内容区 -->
+    <main class="content-area no-flash">
+      <div class="content-header">
+        <h1 class="content-title">
+          <i class="fas fa-database content-title-icon"></i>
+          文化资源库
+        </h1>
+        <div class="stats-container">
+          <div class="stat-card">
+            <h3>资源总数</h3>
+            <p>24,685</p>
+          </div>
+          <div class="stat-card">
+            <h3>本月新增</h3>
+            <p>1,243</p>
+          </div>
+          <div class="stat-card">
+            <h3>活跃用户</h3>
+            <p>3,842</p>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 轮播图 -->
+      <div class="swiper-container no-flash">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1602660786404-7f0d6e5e1d15?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80');">
+            <div class="slide-content">
+              <h3 class="slide-title">红色文化数字馆</h3>
+              <p>探索江西丰富的革命历史资源，数字化保存红色记忆</p>
+            </div>
+          </div>
+          <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1560841683-0b0b7c0f1d1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80');">
+            <div class="slide-content">
+              <h3 class="slide-title">非遗传承数据库</h3>
+              <p>记录与保护江西非物质文化遗产，传承千年技艺</p>
+            </div>
+          </div>
+          <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1547981609-4b6bf67a16c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80');">
+            <div class="slide-content">
+              <h3 class="slide-title">水文化研究中心</h3>
+              <p>聚焦鄱阳湖流域水文化研究，展现江西水韵之美</p>
+            </div>
+          </div>
+        </div>
+        <div class="swiper-pagination"></div>
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev"></div>
+      </div>
+      
+      <!-- 功能模块网格 -->
+      <div class="module-grid">
+        <!-- 多模态采集中心 -->
+        <div class="module-card no-flash">
+          <div class="card-header">
+            <i class="fas fa-microphone-alt card-icon"></i>
+            <h3 class="card-title">多模态采集中心</h3>
+            <p class="card-subtitle">全方位采集文化资源数据</p>
+          </div>
+          <div class="card-body">
+            <ul class="card-features">
+              <li><i class="fas fa-comments"></i> AI访谈工具（语伴科技）</li>
+              <li><i class="fas fa-cube"></i> 3D扫描建模</li>
+              <li><i class="fas fa-cloud-upload-alt"></i> MCP融合上传</li>
+              <li><i class="fas fa-vr-cardboard"></i> 沉浸式数据采集</li>
+            </ul>
+            <div class="card-actions">
+              <button class="btn btn-primary"><i class="fas fa-play"></i> 开始采集</button>
+              <button class="btn btn-outline"><i class="fas fa-info-circle"></i> 了解更多</button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 分类知识图谱 -->
+        <div class="module-card no-flash">
+          <div class="card-header" style="background: var(--red-culture);">
+            <i class="fas fa-sitemap card-icon"></i>
+            <h3 class="card-title">分类知识图谱</h3>
+            <p class="card-subtitle">构建江西文化知识体系</p>
+          </div>
+          <div class="card-body">
+            <ul class="card-features">
+              <li><i class="fas fa-landmark"></i> 红色文化数字馆</li>
+              <li><i class="fas fa-tint"></i> 水文化研究中心</li>
+              <li><i class="fas fa-dragon"></i> 非遗传承数据库</li>
+              <li><i class="fas fa-graduation-cap"></i> 水利水电大学专区</li>
+            </ul>
+            <div class="card-actions">
+              <button class="btn btn-primary" style="background: var(--red-culture);"><i class="fas fa-project-diagram"></i> 探索图谱</button>
+              <button class="btn btn-outline" style="border-color: var(--red-culture); color: var(--red-culture);"><i class="fas fa-book"></i> 文化百科</button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 数字文创工坊 -->
+        <div class="module-card no-flash">
+          <div class="card-header" style="background: var(--primary-gold);">
+            <i class="fas fa-paint-brush card-icon"></i>
+            <h3 class="card-title">数字文创工坊</h3>
+            <p class="card-subtitle">创新文化内容生产平台</p>
+          </div>
+          <div class="card-body">
+            <ul class="card-features">
+              <li><i class="fas fa-robot"></i> AIGC内容生成</li>
+              <li><i class="fas fa-building"></i> BIM建筑建模</li>
+              <li><i class="fas fa-hands"></i> 非遗技艺孪生</li>
+              <li><i class="fas fa-palette"></i> 赣鄱风格设计</li>
+            </ul>
+            <div class="card-actions">
+              <button class="btn btn-primary" style="background: var(--primary-gold);"><i class="fas fa-magic"></i> 开始创作</button>
+              <button class="btn btn-outline" style="border-color: var(--primary-gold); color: var(--primary-gold);"><i class="fas fa-gift"></i> 作品展示</button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 智慧文旅系统 -->
+        <div class="module-card no-flash">
+          <div class="card-header" style="background: var(--heritage);">
+            <i class="fas fa-map-marked-alt card-icon"></i>
+            <h3 class="card-title">智慧文旅系统</h3>
+            <p class="card-subtitle">科技赋能文旅体验</p>
+          </div>
+          <div class="card-body">
+            <ul class="card-features">
+              <li><i class="fas fa-vr-cardboard"></i> XR场景重现</li>
+              <li><i class="fas fa-mobile-alt"></i> AR智能导览</li>
+              <li><i class="fas fa-route"></i> 旅游动线策划器</li>
+              <li><i class="fas fa-tree"></i> 生态旅游规划</li>
+            </ul>
+            <div class="card-actions">
+              <button class="btn btn-primary" style="background: var(--heritage);"><i class="fas fa-play-circle"></i> 体验导览</button>
+              <button class="btn btn-outline" style="border-color: var(--heritage); color: var(--heritage);"><i class="fas fa-compass"></i> 探索路线</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</div>

travel-platform-web/travel-web/src/crm/mobile/page-crm-platform/page-crm-platform.scss

@@ -0,0 +1,534 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.platform-container {
+  font-family: 'Noto Serif SC', serif;
+  background: linear-gradient(to bottom, #e0f7fa, #f5f5f5);
+  color: var(--ink-dark);
+  min-height: 100vh;
+  position: relative;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  will-change: transform;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,50 Q25,30 50,50 T100,50" fill="none" stroke="%23a5d6a7" stroke-width="0.5" opacity="0.08"/></svg>');
+    opacity: 0.1;
+    z-index: -1;
+    background-attachment: fixed;
+  }
+}
+
+:host {
+  --primary-blue: #2F7DAD;  /* 天青瓷 */
+  --primary-green: #5B8C5A; /* 香樟绿 */
+  --primary-gold: #D4B16A;  /* 庐金 */
+  --accent: #c53d43;        /* 井冈山鹃红 */
+  --dark: #2c3e50;
+  --light: #f8f9fa;
+  --ink-dark: #0d1b2a;
+  --ink-light: #415a77;
+  --water-color: #e0f7fa;
+  --mountain-color: #a5d6a7;
+  --red-culture: #b71c1c;
+  --heritage: #5d4037;
+  --animation-speed: 0.4s;
+}
+
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+  flex: 1;
+}
+
+.main-content {
+  display: flex;
+  gap: 25px;
+  margin-top: 30px;
+  min-height: 0; /* 防止flex溢出 */
+}
+
+/* 侧边导航 */
+.sidebar {
+  width: 280px;
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  height: fit-content;
+  flex-shrink: 0;
+  will-change: transform;
+}
+
+.sidebar-title {
+  font-family: 'Ma Shan Zheng', cursive;
+  font-size: 1.8rem;
+  color: var(--primary-blue);
+  text-align: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 2px dashed var(--primary-gold);
+}
+
+.module-nav {
+  list-style: none;
+}
+
+.module-nav li {
+  margin-bottom: 8px;
+}
+
+.module-nav a {
+  display: block;
+  padding: 12px 15px;
+  background: rgba(47, 125, 173, 0.1);
+  border-radius: 8px;
+  color: var(--dark);
+  text-decoration: none;
+  transition: all var(--animation-speed) ease;
+  position: relative;
+  overflow: hidden;
+  font-weight: 500;
+  will-change: transform;
+}
+
+.module-nav a::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.15), transparent);
+  transition: left var(--animation-speed) ease;
+}
+
+.module-nav a:hover {
+  background: rgba(47, 125, 173, 0.2);
+  transform: translateX(5px);
+}
+
+.module-nav a:hover::before {
+  left: 100%;
+}
+
+.module-nav a.active {
+  background: var(--primary-blue);
+  color: white;
+  box-shadow: 0 4px 12px rgba(47, 125, 173, 0.3);
+}
+
+.module-nav a i {
+  margin-right: 10px;
+  width: 20px;
+  text-align: center;
+}
+
+.sub-nav {
+  list-style: none;
+  padding-left: 30px;
+  margin-top: 5px;
+}
+
+.sub-nav li {
+  margin-bottom: 5px;
+}
+
+.sub-nav a {
+  padding: 8px 15px;
+  background: rgba(212, 175, 55, 0.05);
+  border-left: 3px solid var(--primary-gold);
+}
+
+/* 内容区域 */
+.content-area {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  padding: 30px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  min-height: 700px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  will-change: transform;
+}
+
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid var(--water-color);
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.content-title {
+  font-family: 'Ma Shan Zheng', cursive;
+  font-size: 2.2rem;
+  color: var(--primary-blue);
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.content-title-icon {
+  color: var(--primary-gold);
+  font-size: 1.8rem;
+}
+
+.stats-container {
+  display: flex;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+.stat-card {
+  background: linear-gradient(to right, var(--primary-blue), #2a5b8c);
+  color: white;
+  padding: 12px 20px;
+  border-radius: 8px;
+  min-width: 150px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  flex: 1;
+  min-width: 140px;
+}
+
+.stat-card h3 {
+  font-size: 0.9rem;
+  font-weight: 400;
+  margin-bottom: 5px;
+  opacity: 0.9;
+}
+
+.stat-card p {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.stat-card:nth-child(2) {
+  background: linear-gradient(to right, var(--accent), #b33939);
+}
+
+.stat-card:nth-child(3) {
+  background: linear-gradient(to right, var(--primary-gold), #b8860b);
+}
+
+/* 功能模块展示 */
+.module-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 25px;
+  margin-top: 25px;
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: 20px;
+}
+
+.module-card {
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  transition: all var(--animation-speed) ease;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  position: relative;
+  will-change: transform;
+}
+
+.module-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
+}
+
+.card-header {
+  padding: 20px;
+  background: var(--primary-blue);
+  color: white;
+  position: relative;
+}
+
+.card-header::after {
+  content: "";
+  position: absolute;
+  bottom: -15px;
+  left: 20px;
+  width: 30px;
+  height: 30px;
+  background: var(--primary-blue);
+  transform: rotate(45deg);
+  z-index: 1;
+}
+
+.card-icon {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  font-size: 2rem;
+  opacity: 0.2;
+}
+
+.card-title {
+  font-size: 1.4rem;
+  margin-bottom: 5px;
+  position: relative;
+  z-index: 2;
+}
+
+.card-subtitle {
+  font-size: 0.9rem;
+  opacity: 0.8;
+  position: relative;
+  z-index: 2;
+}
+
+.card-body {
+  padding: 30px 20px 20px;
+  position: relative;
+  z-index: 2;
+}
+
+.card-features {
+  list-style: none;
+  margin-bottom: 20px;
+}
+
+.card-features li {
+  padding: 8px 0;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+}
+
+.card-features li:last-child {
+  border-bottom: none;
+}
+
+.card-features li i {
+  color: var(--primary-gold);
+  margin-right: 10px;
+  min-width: 20px;
+  text-align: center;
+}
+
+.card-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  padding: 10px 20px;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+  transition: all var(--animation-speed) ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  will-change: transform;
+}
+
+.btn:active {
+  transform: scale(0.98);
+}
+
+.btn-primary {
+  background: var(--primary-blue);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #1a6aa2;
+  box-shadow: 0 4px 12px rgba(47, 125, 173, 0.3);
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1px solid var(--primary-blue);
+  color: var(--primary-blue);
+}
+
+.btn-outline:hover {
+  background: rgba(47, 125, 173, 0.1);
+}
+
+/* 水墨山水装饰元素 */
+.ink-mountain {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 300px;
+  height: 150px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400"><path d="M0,400 Q200,250 400,300 T800,400 L800,500 L0,500 Z" fill="%232c3e50" opacity="0.05"/></svg>');
+  background-size: contain;
+  background-repeat: no-repeat;
+  z-index: -1;
+  will-change: transform;
+}
+
+.ink-water {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 250px;
+  height: 120px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 200"><path d="M0,200 Q100,150 200,180 T400,160 T600,190 T800,150 L800,300 L0,300 Z" fill="%231a6aa2" opacity="0.05"/></svg>');
+  background-size: contain;
+  background-repeat: no-repeat;
+  z-index: -1;
+  will-change: transform;
+}
+
+/* 轮播图 */
+.swiper-container {
+  width: 100%;
+  height: 300px;
+  border-radius: 12px;
+  overflow: hidden;
+  margin-top: 20px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  will-change: transform;
+}
+
+.swiper-slide {
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  align-items: flex-end;
+  padding: 30px;
+  position: relative;
+}
+
+.swiper-slide::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+}
+
+.slide-content {
+  position: relative;
+  z-index: 2;
+  color: white;
+  max-width: 70%;
+}
+
+.slide-title {
+  font-size: 1.8rem;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+/* 防止动画闪烁 */
+.no-flash {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-perspective: 1000;
+  perspective: 1000;
+  transform: translate3d(0,0,0);
+}
+
+/* 缩放比例优化 */
+@media screen and (min-width: 1600px) {
+  .container {
+    max-width: 1600px;
+  }
+  
+  .sidebar {
+    width: 320px;
+  }
+  
+  .module-grid {
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  }
+}
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .main-content {
+    gap: 20px;
+  }
+  
+  .sidebar {
+    width: 260px;
+  }
+}
+
+@media (max-width: 992px) {
+  .main-content {
+    flex-direction: column;
+  }
+  
+  .sidebar {
+    width: 100%;
+  }
+  
+  .module-grid {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .stats-container {
+    width: 100%;
+  }
+  
+  .stat-card {
+    min-width: 120px;
+    padding: 10px 15px;
+  }
+  
+  .stat-card p {
+    font-size: 1.3rem;
+  }
+  
+  .content-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .content-title {
+    font-size: 1.8rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .module-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .swiper-container {
+    height: 250px;
+  }
+  
+  .slide-content {
+    max-width: 90%;
+  }
+  
+  .slide-title {
+    font-size: 1.5rem;
+  }
+}

travel-platform-web/travel-web/src/crm/mobile/page-crm-platform/page-crm-platform.spec.ts

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { PageCrmPlatform } from './page-crm-platform';
 
 describe('PageCrmPlatform', () => {
@@ -9,15 +8,34 @@ describe('PageCrmPlatform', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [PageCrmPlatform]
-    })
-    .compileComponents();
+    }).compileComponents();
 
     fixture = TestBed.createComponent(PageCrmPlatform);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('应该创建组件', () => {
     expect(component).toBeTruthy();
   });
-});
+
+  it('应该包含侧边栏', () => {
+    const sidebar = fixture.nativeElement.querySelector('.sidebar');
+    expect(sidebar).toBeTruthy();
+  });
+
+  it('应该包含内容区域', () => {
+    const contentArea = fixture.nativeElement.querySelector('.content-area');
+    expect(contentArea).toBeTruthy();
+  });
+
+  it('应该包含轮播图', () => {
+    const swiper = fixture.nativeElement.querySelector('.swiper-container');
+    expect(swiper).toBeTruthy();
+  });
+
+  it('应该包含功能模块卡片', () => {
+    const cards = fixture.nativeElement.querySelectorAll('.module-card');
+    expect(cards.length).toBeGreaterThan(0);
+  });
+});

travel-platform-web/travel-web/src/crm/mobile/page-crm-platform/page-crm-platform.ts

@@ -1,11 +1,67 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// 引入Swiper 11
+import Swiper from 'swiper';
+import { Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules';
 
 @Component({
   selector: 'app-page-crm-platform',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './page-crm-platform.html',
-  styleUrl: './page-crm-platform.scss'
+  styleUrls: ['./page-crm-platform.scss']
 })
-export class PageCrmPlatform {
+export class PageCrmPlatform implements AfterViewInit {
+  @ViewChild('swiperContainer') swiperContainer?: ElementRef;
+
+  ngAfterViewInit(): void {
+    // 初始化轮播图
+    if (this.swiperContainer) {
+      new Swiper(this.swiperContainer.nativeElement, {
+        modules: [Navigation, Pagination, Autoplay, EffectFade],
+        loop: true,
+        autoplay: {
+          delay: 5000,
+          disableOnInteraction: false,
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+        speed: 600,
+        effect: 'fade',
+        fadeEffect: {
+          crossFade: true
+        },
+        
+      });
+    }
 
-}
+    // 优化模块卡片悬停效果
+    const cards = document.querySelectorAll('.module-card');
+    cards.forEach(card => {
+      card.addEventListener('mouseenter', () => {
+        card.classList.add('hover');
+      });
+      
+      card.addEventListener('mouseleave', () => {
+        card.classList.remove('hover');
+      });
+    });
+    
+    // 导航链接交互效果
+    const navLinks = document.querySelectorAll('.module-nav a');
+    navLinks.forEach(link => {
+      link.addEventListener('click', function(e) {
+        e.preventDefault();
+        navLinks.forEach(l => l.classList.remove('active'));
+        link.classList.add('active');
+      });
+    });
+  }
+}