Merge branch 'master' of http://git.fmode.cn:3000/19870581353/travel-flatform

travel-platform-web/travel-web/angular.json

@@ -30,7 +30,7 @@
               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
             ]
           },
           "configurations": {
@@ -88,8 +88,9 @@
               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
             ]
+
           }
         }
       }

travel-platform-web/travel-web/package-lock.json

@@ -3371,7 +3371,7 @@
     },
     "node_modules/@types/swiper": {
       "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/@types/swiper/-/swiper-5.4.3.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/swiper/-/swiper-5.4.3.tgz",
       "integrity": "sha512-hJXpVeANf+XQXgbvmuFZdsnaSOKqOEZcaLDnHhZOJDRow+lfboatwubW+Ay9XiHobMGyEomkgpXSYRlDVn4gMQ==",
       "license": "MIT"
     },

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

@@ -35,6 +35,11 @@ export const MOBILE_ROUTES: Routes = [
         path: 'development',
         loadComponent: () => import('./page-crm-development/page-crm-development').then(m => m.PageCrmDevelopment),
         title: '功能开发中'
+      },
+      {
+        path: 'news',
+        loadComponent: () => import('./page-crm-home-news/page-crm-home-news').then(m => m.PageCrmHomeNews),
+        title: '新闻'
       }
     ]
   }

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

@@ -0,0 +1,98 @@
+<div class="news-container">
+  <article class="news-article">
+    <header class="news-header">
+      <h1 class="news-title">智慧旅游解决方案：AI+AR技术助力江西景区数字化升级</h1>
+      <div class="news-meta">
+        <span class="news-date">2023年11月15日</span>
+        <span class="news-author">记者：李智慧</span>
+        <span class="news-source">来源：科技旅游报</span>
+      </div>
+      <div class="news-tags">
+        <span class="tag">智慧旅游</span>
+        <span class="tag">AI技术</span>
+        <span class="tag">AR应用</span>
+        <span class="tag">江西景区</span>
+      </div>
+    </header>
+
+    <div class="news-content">
+      <figure class="news-image">
+        <img src="/assets/images/traveldiagram.webp" style="width:80%" alt="智慧旅游解决方案示意图">
+        <figcaption>智慧旅游解决方案将AI导览与AR实景增强技术完美结合</figcaption>
+      </figure>
+
+      <section class="news-section">
+        <p class="lead">【导语】在数字化浪潮席卷各行各业的今天，旅游业也迎来了智能化升级的重大机遇。近日，江西省文旅局宣布将全面引入"智慧旅游解决方案"，整合AI导览、AR实景增强等前沿技术，为省内景区提供全方位的数字化升级方案。</p>
+      </section>
+
+      <section class="news-section">
+        <h2 class="section-title">AI导览：个性化旅游体验</h2>
+        <p>据项目负责人介绍，AI导览系统将成为此次升级的核心部分。通过自然语言处理技术，游客可以随时与智能助手进行对话，获取景点介绍、路线规划、餐饮推荐等个性化服务。</p>
+        <p>"不同于传统的电子导览，我们的AI系统能够学习游客的偏好，实时调整推荐内容。"技术总监王明表示，"比如系统发现游客对历史文化感兴趣，就会自动增加相关景点的深度讲解。"</p>
+      </section>
+
+      <section class="news-section">
+        <h2 class="section-title">AR实景：穿越时空的旅游体验</h2>
+        <p>另一大亮点是AR(增强现实)技术的应用。游客通过手机或专用设备，可以看到历史场景重现、文物复原等增强内容。</p>
+        <div class="news-highlight">
+          <p>"在庐山，游客可以通过AR看到李白当年写《望庐山瀑布》时的场景；在滕王阁，可以看到历代重建过程的三维展示。"江西省文旅局副局长张华在发布会上演示了AR功能。</p>
+        </div>
+      </section>
+
+      <section class="news-section">
+        <h2 class="section-title">数字化升级：从管理到服务</h2>
+        <p>智慧旅游解决方案不仅面向游客，也为景区管理提供了数字化工具。包括：</p>
+        <ul class="feature-list">
+          <li>实时客流监控与预警系统</li>
+          <li>智能停车引导</li>
+          <li>电子票务一体化</li>
+          <li>商户数字化管理平台</li>
+        </ul>
+        <p>婺源景区作为首批试点单位，已经完成了基础设施改造。景区负责人表示："系统上线后，游客满意度提升了35%，管理效率提高了50%。"</p>
+      </section>
+
+      <section class="news-section">
+        <h2 class="section-title">未来展望：打造智慧旅游生态圈</h2>
+        <p>据悉，该项目还将拓展至旅游全产业链，包括：</p>
+        <div class="feature-grid">
+          <div class="feature-item">
+            <i class="icon icon-hotel"></i>
+            <h3>智慧酒店</h3>
+            <p>人脸识别入住，智能客房控制</p>
+          </div>
+          <div class="feature-item">
+            <i class="icon icon-transport"></i>
+            <h3>智慧交通</h3>
+            <p>景区接驳车智能调度</p>
+          </div>
+          <div class="feature-item">
+            <i class="icon icon-shopping"></i>
+            <h3>智慧商业</h3>
+            <p>AR商品展示，无感支付</p>
+          </div>
+        </div>
+        <p>江西省计划在未来三年内，将全省4A级以上景区全部纳入智慧旅游体系，打造全国领先的数字化旅游示范区。</p>
+      </section>
+
+      <footer class="news-footer">
+        <div class="related-news">
+          <h3>相关阅读</h3>
+          <ul>
+            <li><a href="#">全国智慧旅游发展指数报告发布</a></li>
+            <li><a href="#">AR技术在文化遗产保护中的应用</a></li>
+            <li><a href="#">江西省推出"云游江西"数字平台</a></li>
+          </ul>
+        </div>
+        <div class="news-comments">
+          <button class="comment-btn">发表评论</button>
+          <span class="view-count">阅读量：12,345</span>
+        </div>
+      </footer>
+    </div>
+  </article>
+</div>
+<section class="under-home-news">
+      <div class="container">
+        <button (click)="goBack()" class="back-link">返回</button>
+      </div>
+</section>

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

@@ -0,0 +1,307 @@
+
+/* 新浪新闻风格样式 */
+.news-container {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 15px 10px;
+  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
+  color: #222;
+  line-height: 1.8;
+  background: #fff;
+}
+
+.news-article {
+  background: #fff;
+}
+
+.news-header {
+  padding-bottom: 15px;
+  border-bottom: 1px solid #e8e8e8;
+  margin-bottom: 20px;
+}
+
+.news-title {
+  font-size: 26px;
+  font-weight: 700;
+  margin: 0 0 15px 0;
+  color: #222;
+  line-height: 1.4;
+  text-align: left;
+}
+
+.news-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  font-size: 14px;
+  color: #707070;
+  margin-bottom: 15px;
+  
+  span {
+    position: relative;
+    padding-right: 15px;
+    
+    &:not(:last-child):after {
+      content: "";
+      position: absolute;
+      right: 7px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 1px;
+      height: 12px;
+      background: #ddd;
+    }
+  }
+}
+
+.news-tags {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.tag {
+  background: #f5f5f5;
+  color: #5079d9;
+  padding: 3px 8px;
+  border-radius: 2px;
+  font-size: 12px;
+}
+
+.news-content {
+  font-size: 18px;
+  color: #222;
+  
+  p {
+    margin: 0 0 25px 0;
+    text-align: justify;
+    word-break: break-word;
+  }
+}
+
+.news-image {
+  margin: 20px 0;
+  text-align: center;
+  
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+  }
+  
+  figcaption {
+    font-size: 14px;
+    color: #707070;
+    margin-top: 8px;
+    text-align: center;
+    line-height: 1.5;
+    padding: 0 10px;
+  }
+}
+
+.news-section {
+  margin-bottom: 25px;
+}
+
+.section-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #222;
+  margin: 35px 0 20px;
+  line-height: 1.4;
+}
+
+.lead {
+  font-size: 18px;
+  color: #222;
+  margin: 0 0 25px 0;
+  line-height: 1.8;
+}
+
+.news-highlight {
+  background: #f8f8f8;
+  border-left: 3px solid #5079d9;
+  padding: 15px;
+  margin: 20px 0;
+  font-size: 16px;
+  color: #444;
+  line-height: 1.8;
+}
+
+.feature-list {
+  margin: 20px 0;
+  padding-left: 22px;
+  
+  li {
+    margin-bottom: 12px;
+    position: relative;
+    list-style-type: disc;
+    color: #444;
+    line-height: 1.8;
+    
+    &::marker {
+      color: #5079d9;
+    }
+  }
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  margin: 25px 0;
+  
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.feature-item {
+  background: #f9f9f9;
+  padding: 15px;
+  border-radius: 4px;
+  
+  h3 {
+    font-size: 16px;
+    margin: 10px 0 8px;
+    color: #222;
+    font-weight: 600;
+  }
+  
+  p {
+    font-size: 14px;
+    color: #666;
+    margin: 0;
+    line-height: 1.6;
+  }
+  
+  .icon {
+    font-size: 24px;
+    color: #5079d9;
+  }
+}
+
+.news-footer {
+  margin-top: 40px;
+  border-top: 1px solid #e8e8e8;
+  padding-top: 20px;
+}
+
+.related-news {
+  margin-bottom: 25px;
+  
+  h3 {
+    font-size: 16px;
+    margin-bottom: 15px;
+    color: #222;
+    font-weight: 600;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+  
+  li {
+    margin-bottom: 12px;
+    padding-left: 15px;
+    position: relative;
+    line-height: 1.6;
+    
+    &::before {
+      content: "•";
+      position: absolute;
+      left: 0;
+      color: #5079d9;
+      font-weight: bold;
+    }
+    
+    a {
+      color: #5079d9;
+      text-decoration: none;
+      font-size: 15px;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.news-comments {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 20px;
+  border-top: 1px solid #e8e8e8;
+  margin-top: 20px;
+}
+
+.comment-btn {
+  background: #f5f5f5;
+  color: #5079d9;
+  border: 1px solid #d9d9d9;
+  padding: 6px 15px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  
+  &:hover {
+    background: #e8e8e8;
+  }
+}
+
+.view-count {
+  font-size: 14px;
+  color: #999;
+}
+
+/* 新浪特色样式 */
+.news-content {
+  p {
+    text-indent: 2em;
+  }
+  
+  .lead, .news-highlight p, .feature-item p {
+    text-indent: 0;
+  }
+}
+
+/* 适配移动端 */
+@media (max-width: 640px) {
+  .news-container {
+    padding: 10px;
+  }
+  
+  .news-title {
+    font-size: 22px;
+  }
+  
+  .news-content {
+    font-size: 16px;
+    
+    p {
+      margin-bottom: 20px;
+    }
+  }
+  
+  .section-title {
+    font-size: 20px;
+    margin: 25px 0 15px;
+  }
+  
+  .feature-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.back-link {
+    /* 尺寸调整 */
+    padding: 1.2rem 2.4rem;
+    min-width: 140px;
+    font-size: 1.1rem;
+    }

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

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

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

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Location } from '@angular/common'; // 必须导入Location服务
+import { RouterModule } from '@angular/router';
+
+@Component({
+    selector: 'page-crm-home-news',
+    standalone: true,
+    imports: [RouterModule], // 确保导入RouterModule
+  templateUrl: './page-crm-home-news.html',
+})
+export class PageCrmHomeNews {
+    constructor(private location: Location) { } // 注入Location服务
+
+    // 新增goBack方法
+    goBack() {
+        this.location.back(); // 使用Angular的Location服务返回上一页
+    }
+}

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

@@ -35,7 +35,7 @@
         <div class="card-content">
           <h3 class="card-title">智慧旅游解决方案</h3>
           <p class="card-desc">整合AI导览、AR实景增强等技术，为江西景区提供全方位的数字化升级方案。</p>
-          <a href="#" class="card-link">了解更多 →</a>
+          <a href="#" class="card-link" routerLink="/mobile/news">了解更多 →</a>
         </div>
       </div>
     </div>

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

@@ -39,17 +39,17 @@
     &-title {
       font-family: "Noto Serif SC", serif;
       font-size: 3rem;
-      color: var(--primary-blue);
+      color: #2F7DAD;
       margin-bottom: 1rem;
-      margin-left: -130px;
+      margin-left: -110px;
       text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
     }
     
     &-subtitle {
       font-size: 1.2rem;
-      color: var(--secondary-gray);
+      color: #6D6D6D;
       margin-bottom: 2rem;
-      margin-left: -130px;
+      margin-left: -110px;
       margin-right: 150px;
       line-height: 1.8;
     }
@@ -57,7 +57,7 @@
     &-btn {
       display: inline-block;
       padding: 0.8rem 2rem;
-      background-color: rgb(230, 218, 168)/*var(--primary-gold)*/;
+      background-color: #D4B16A/*var(--primary-gold)*/;
       color: white;
       text-decoration: none;
       border-radius: 30px;
@@ -97,14 +97,14 @@
   /* 数智动态区 */
   .dynamic-section {
     padding: 4rem 10%;
-    background-color: white;
+    background-color: #f1f4f1db;
     position: relative;
   }
   
   .section-title {
     font-family: "Noto Serif SC", serif;
     font-size: 2.2rem;
-    color: var(--primary-blue);
+    color: #2F7DAD;
     text-align: center;
     margin-bottom: 3rem;
     position: relative;
@@ -114,7 +114,7 @@
       display: block;
       width: 80px;
       height: 3px;
-      background: linear-gradient(to right, var(--primary-blue), var(--primary-green));
+      background: linear-gradient(to right, #2F7DAD, #5B8C5A);
       margin: 1rem auto 0;
     }
   }
@@ -162,19 +162,19 @@
   
   .card-title {
     font-size: 1.3rem;
-    color: var(--primary-blue);
+    color: #2F7DAD;
     margin-bottom: 0.8rem;
   }
   
   .card-desc {
-    color: var(--secondary-gray);
+    color: #6D6D6D;
     margin-bottom: 1.5rem;
     font-size: 0.95rem;
   }
   
   .card-link {
     display: inline-block;
-    color: var(--primary-gold);
+    color: #D4B16A;
     text-decoration: none;
     font-weight: bold;
     position: relative;
@@ -186,7 +186,7 @@
       left: 0;
       width: 100%;
       height: 1px;
-      background-color: var(--primary-gold);
+      background-color: #D4B16A;
       transition: transform 0.3s ease;
       transform-origin: right;
       transform: scaleX(0);
@@ -201,7 +201,7 @@
   /* 共创展示区 */
   .co-creation-section {
     padding: 4rem 10%;
-    background-color: #f5f9f5;
+    background-color: rgba(199, 223, 174, 0.407);
     position: relative;
   }
   
@@ -222,7 +222,7 @@
     }
     
     &::-webkit-scrollbar-thumb {
-      background: var(--primary-gold);
+      background: #D4B16A;
       border-radius: 3px;
     }
   }
@@ -251,7 +251,7 @@
     padding: 1.5rem;
     
     p {
-      color: var(--secondary-gray);
+      color: #6D6D6D;
       font-size: 0.95rem;
       line-height: 1.6;
     }
@@ -259,12 +259,12 @@
   
   .cc-title {
     font-size: 1.2rem;
-    color: var(--primary-green);
+    color: #5B8C5A;
     margin-bottom: 0.5rem;
   }
   
   .cc-author {
-    color: var(--secondary-gray);
+    color: #6D6D6D;
     font-size: 0.9rem;
     margin-bottom: 1rem;
   }
@@ -272,7 +272,8 @@
   /* 协会智能体 - 优化后的样式 */
 .ai-section {
   padding: 5rem 10%;
-  background: linear-gradient(135deg, #2F7DAD, #1a5c87); /* 直接使用颜色值代替darken函数 */
+  // background: linear-gradient(135deg, #2F7DAD, #1a5c87); /* 直接使用颜色值代替darken函数 */
+  background: linear-gradient(to right, #2F7DAD, #5B8C5A);
   color: white;
   text-align: center;
   position: relative;
@@ -301,7 +302,7 @@
     font-family: "Noto Serif SC", serif;
     font-size: 2.5rem;
     margin-bottom: 1.5rem;
-    color: var(--primary-gold);
+    color: #D4B16A;
     text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
   }
 
@@ -315,7 +316,7 @@
 
   .banner-btn {
     margin-bottom: 3rem;
-    background-color: var(--primary-gold);
+    background-color: #D4B16A;
     border: none;
     font-size: 1rem;
     padding: 0.8rem 2.5rem;
@@ -376,7 +377,7 @@
   .ai-icon {
     font-size: 2.8rem;
     margin-bottom: 1.2rem;
-    color: var(--primary-gold);
+    color: #D4B16A;
     display: inline-block;
     transition: transform 0.3s ease;
   }
@@ -417,7 +418,7 @@
         font-family: "Noto Serif SC", serif;
         font-size: 1.2rem;
         margin-bottom: 1.5rem;
-        color: var(--primary-gold);
+        color: #D4B16A;
       }
     }
     
@@ -433,7 +434,7 @@
           transition: color 0.3s ease;
           
           &:hover {
-            color: var(--primary-gold);
+            color: #D4B16A;
           }
         }
       }

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

@@ -25,7 +25,7 @@ body {
 }
 
 /* 主色调定义 */
-:root {
+:host {
     --primary-blue: #2F7DAD;  /* 天青瓷 */
     --primary-green: #5B8C5A; /* 香樟绿 */
     --primary-gold: #D4B16A; /* 庐金 */

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

@@ -1,8 +1,13 @@
-<div class="platform-container">
-  <!-- 水墨装饰元素 -->
-  <div class="ink-mountain no-flash"></div>
-  <div class="ink-water no-flash"></div>
-  
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap"
+  rel="stylesheet">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
+
+<!-- 水墨装饰元素 -->
+<div class="ink-mountain no-flash"></div>
+<div class="ink-water no-flash"></div>
+
+<div class="container">
   <div class="main-content">
     <!-- 侧边导航 -->
     <aside class="sidebar no-flash">
@@ -33,7 +38,7 @@
         </li>
       </ul>
     </aside>
-    
+
     <!-- 主内容区 -->
     <main class="content-area no-flash">
       <div class="content-header">
@@ -42,40 +47,20 @@
           文化资源库
         </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 *ngFor="let stat of stats" class="stat-card">
+            <h3>{{stat.title}}</h3>
+            <p>{{stat.value}}</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 *ngFor="let slide of slides" class="swiper-slide" [style.background-image]="'url(' + slide.image + ')'">
             <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>
+              <h3 class="slide-title">{{slide.title}}</h3>
+              <p>{{slide.description}}</p>
             </div>
           </div>
         </div>
@@ -83,89 +68,29 @@
         <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 *ngFor="let module of modules" class="module-card no-flash">
+          <div class="card-header" [style.background]="module.bgColor">
+            <i [class]="module.icon + ' card-icon'"></i>
+            <h3 class="card-title">{{module.title}}</h3>
+            <p class="card-subtitle">{{module.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>
+              <li *ngFor="let feature of module.features">
+                <i [class]="feature.icon"></i> {{feature.text}}
+              </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>
+              <button class="btn btn-primary" [style.background]="module.bgColor">
+                <i [class]="module.btnPrimary.icon"></i> {{module.btnPrimary.text}}
+              </button>
+              <button class="btn btn-outline" [style.border-color]="module.bgColor" [style.color]="module.bgColor">
+                <i [class]="module.btnOutline.icon"></i> {{module.btnOutline.text}}
+              </button>
             </div>
           </div>
         </div>
@@ -173,3 +98,42 @@
     </main>
   </div>
 </div>
+
+<footer class="no-flash">
+  <div class="footer-content">
+    <div class="footer-section">
+      <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-section">
+      <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-section">
+      <h3>联系我们</h3>
+      <ul>
+        <li><i class="fas fa-map-marker-alt"></i> 江西省南昌市红谷滩区</li>
+        <li><i class="fas fa-phone"></i> 0791-88888888</li>
+        <li><i class="fas fa-envelope"></i> contact&#64;ganpowl.com</li>
+        <li><i class="fas fa-weixin"></i> 赣鄱文链官方公众号</li>
+      </ul>
+    </div>
+  </div>
+  <div class="copyright">
+    &copy; 2023 赣鄱文链数字文旅平台 - 传承江西文化，智创文旅未来
+  </div>
+</footer>
+
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

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

@@ -1,10 +1,27 @@
 :host {
-  display: block;
-  width: 100%;
-  height: 100%;
+  --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;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.platform-container {
+:host {
+  display: block;
   font-family: 'Noto Serif SC', serif;
   background: linear-gradient(to bottom, #e0f7fa, #f5f5f5);
   color: var(--ink-dark);
@@ -14,7 +31,7 @@
   display: flex;
   flex-direction: column;
   will-change: transform;
-
+  
   &::before {
     content: "";
     position: absolute;
@@ -29,22 +46,6 @@
   }
 }
 
-: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;
@@ -103,54 +104,54 @@
   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;
+  
+  &::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;
+  }
+  
+  &:hover {
+    background: rgba(47, 125, 173, 0.2);
+    transform: translateX(5px);
+  }
+  
+  &:hover::before {
+    left: 100%;
+  }
+  
+  &.active {
+    background: var(--primary-blue);
+    color: white;
+    box-shadow: 0 4px 12px rgba(47, 125, 173, 0.3);
+  }
+  
+  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);
+  
+  li {
+    margin-bottom: 5px;
+  }
+  
+  a {
+    padding: 8px 15px;
+    background: rgba(212, 175, 55, 0.05);
+    border-left: 3px solid var(--primary-gold);
+  }
 }
 
 /* 内容区域 */
@@ -209,26 +210,26 @@
   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);
+  
+  h3 {
+    font-size: 0.9rem;
+    font-weight: 400;
+    margin-bottom: 5px;
+    opacity: 0.9;
+  }
+  
+  p {
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+  
+  &:nth-child(2) {
+    background: linear-gradient(to right, var(--accent), #b33939);
+  }
+  
+  &:nth-child(3) {
+    background: linear-gradient(to right, var(--primary-gold), #b8860b);
+  }
 }
 
 /* 功能模块展示 */
@@ -251,11 +252,11 @@
   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);
+  
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
+  }
 }
 
 .card-header {
@@ -263,18 +264,18 @@
   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;
+  
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -15px;
+    left: 20px;
+    width: 30px;
+    height: 30px;
+    background: var(--primary-blue);
+    transform: rotate(45deg);
+    z-index: 1;
+  }
 }
 
 .card-icon {
@@ -308,24 +309,24 @@
 .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;
+  
+  li {
+    padding: 8px 0;
+    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    i {
+      color: var(--primary-gold);
+      margin-right: 10px;
+      min-width: 20px;
+      text-align: center;
+    }
+  }
 }
 
 .card-actions {
@@ -346,30 +347,30 @@
   align-items: center;
   gap: 8px;
   will-change: transform;
-}
-
-.btn:active {
-  transform: scale(0.98);
+  
+  &: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);
+  
+  &: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);
+  
+  &:hover {
+    background: rgba(47, 125, 173, 0.1);
+  }
 }
 
 /* 水墨山水装饰元素 */
@@ -417,16 +418,16 @@
   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);
+  
+  &::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 {
@@ -442,13 +443,66 @@
   font-weight: 700;
 }
 
-/* 防止动画闪烁 */
-.no-flash {
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -webkit-perspective: 1000;
-  perspective: 1000;
-  transform: translate3d(0,0,0);
+/* 页脚 */
+footer {
+  margin-top: 50px;
+  padding: 30px 0;
+  text-align: center;
+  color: var(--ink-light);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(5px);
+  will-change: transform;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  flex-wrap: wrap;
+}
+
+.footer-section {
+  flex: 1;
+  text-align: left;
+  min-width: 250px;
+  margin-bottom: 20px;
+  
+  h3 {
+    margin-bottom: 15px;
+    color: var(--primary-blue);
+    font-size: 1.2rem;
+  }
+  
+  ul {
+    list-style: none;
+  }
+  
+  li {
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  
+  a {
+    color: var(--ink-light);
+    text-decoration: none;
+    transition: color var(--animation-speed) ease;
+    
+    &:hover {
+      color: var(--primary-blue);
+    }
+  }
+}
+
+.copyright {
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px dashed rgba(0, 0, 0, 0.1);
+  font-size: 0.9rem;
 }
 
 /* 缩放比例优化 */
@@ -513,6 +567,11 @@
   .content-title {
     font-size: 1.8rem;
   }
+  
+  .footer-content {
+    flex-direction: column;
+    gap: 30px;
+  }
 }
 
 @media (max-width: 480px) {
@@ -531,4 +590,48 @@
   .slide-title {
     font-size: 1.5rem;
   }
+}
+
+/* 防止动画闪烁 */
+.no-flash {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-perspective: 1000;
+  perspective: 1000;
+  transform: translate3d(0,0,0);
+}
+/* 轮播图导航按钮样式 */
+.swiper-button-next,
+.swiper-button-prev {
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  transition: all var(--animation-speed) ease;
+  backdrop-filter: blur(5px);
+  
+  &::after {
+    content: '';
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: var(--primary-gold);
+  }
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.5);
+    transform: scale(1.1);
+  }
+}
+
+.swiper-button-next::after {
+  content: '→';
+}
+
+.swiper-button-prev::after {
+  content: '←';
+}
+
+.swiper-button-disabled {
+  opacity: 0.3 !important;
+  cursor: not-allowed;
 }

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

@@ -8,34 +8,15 @@ describe('PageCrmPlatform', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [PageCrmPlatform]
-    }).compileComponents();
-
+    })
+    .compileComponents();
+    
     fixture = TestBed.createComponent(PageCrmPlatform);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it('应该创建组件', () => {
+  it('should create', () => {
     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,9 +1,34 @@
-import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
-// 引入Swiper 11
 import Swiper from 'swiper';
-import { Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules';
+
+// 添加这些导入
+import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+
+
+interface PlatformModule {
+  title: string;
+  subtitle: string;
+  icon: string;
+  features: { icon: string; text: string }[];
+  bgColor: string;
+  btnPrimary: { text: string; icon: string };
+  btnOutline: { text: string; icon: string };
+}
+
+interface Slide {
+  image: string;
+  title: string;
+  description: string;
+}
+
+interface StatCard {
+  title: string;
+  value: string;
+}
 
 @Component({
   selector: 'app-page-crm-platform',
@@ -13,55 +38,140 @@ import { Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules';
   styleUrls: ['./page-crm-platform.scss']
 })
 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
-        },
-        
-      });
+  stats: StatCard[] = [
+    { title: '资源总数', value: '24,685' },
+    { title: '本月新增', value: '1,243' },
+    { title: '活跃用户', value: '3,842' }
+  ];
+
+  modules: PlatformModule[] = [
+    {
+      title: '多模态采集中心',
+      subtitle: '全方位采集文化资源数据',
+      icon: 'fas fa-microphone-alt',
+      features: [
+        { icon: 'fas fa-comments', text: 'AI访谈工具（语伴科技）' },
+        { icon: 'fas fa-cube', text: '3D扫描建模' },
+        { icon: 'fas fa-cloud-upload-alt', text: 'MCP融合上传' },
+        { icon: 'fas fa-vr-cardboard', text: '沉浸式数据采集' }
+      ],
+      bgColor: 'var(--primary-blue)',
+      btnPrimary: { text: '开始采集', icon: 'fas fa-play' },
+      btnOutline: { text: '了解更多', icon: 'fas fa-info-circle' }
+    },
+    {
+      title: '分类知识图谱',
+      subtitle: '构建江西文化知识体系',
+      icon: 'fas fa-sitemap',
+      features: [
+        { icon: 'fas fa-landmark', text: '红色文化数字馆' },
+        { icon: 'fas fa-tint', text: '水文化研究中心' },
+        { icon: 'fas fa-dragon', text: '非遗传承数据库' },
+        { icon: 'fas fa-graduation-cap', text: '水利水电大学专区' }
+      ],
+      bgColor: 'var(--red-culture)',
+      btnPrimary: { text: '探索图谱', icon: 'fas fa-project-diagram' },
+      btnOutline: { text: '文化百科', icon: 'fas fa-book' }
+    },
+    {
+      title: '数字文创工坊',
+      subtitle: '创新文化内容生产平台',
+      icon: 'fas fa-paint-brush',
+      features: [
+        { icon: 'fas fa-robot', text: 'AIGC内容生成' },
+        { icon: 'fas fa-building', text: 'BIM建筑建模' },
+        { icon: 'fas fa-hands', text: '非遗技艺孪生' },
+        { icon: 'fas fa-palette', text: '赣鄱风格设计' }
+      ],
+      bgColor: 'var(--primary-gold)',
+      btnPrimary: { text: '开始创作', icon: 'fas fa-magic' },
+      btnOutline: { text: '作品展示', icon: 'fas fa-gift' }
+    },
+    {
+      title: '智慧文旅系统',
+      subtitle: '科技赋能文旅体验',
+      icon: 'fas fa-map-marked-alt',
+      features: [
+        { icon: 'fas fa-vr-cardboard', text: 'XR场景重现' },
+        { icon: 'fas fa-mobile-alt', text: 'AR智能导览' },
+        { icon: 'fas fa-route', text: '旅游动线策划器' },
+        { icon: 'fas fa-tree', text: '生态旅游规划' }
+      ],
+      bgColor: 'var(--heritage)',
+      btnPrimary: { text: '体验导览', icon: 'fas fa-play-circle' },
+      btnOutline: { text: '探索路线', icon: 'fas fa-compass' }
     }
+  ];
 
-    // 优化模块卡片悬停效果
-    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');
-      });
+  slides: Slide[] = [
+    {
+      image: 'assets/images/red.webp',
+      title: '红色文化数字馆',
+      description: '探索江西丰富的革命历史资源，数字化保存红色记忆'
+    },
+    {
+      image: 'assets/images/feiyi.png',
+      title: '非遗传承数据库',
+      description: '记录与保护江西非物质文化遗产，传承千年技艺'
+    },
+    {
+      image: 'assets/images/water.png',
+      title: '水文化研究中心',
+      description: '聚焦鄱阳湖流域水文化研究，展现江西水韵之美'
+    }
+  ];
+
+  ngAfterViewInit() {
+    new Swiper('.swiper-container', {
+      // 启用导航模块
+      modules: [Navigation, Pagination, Autoplay],
+
+      // 基本配置
+      direction: 'horizontal',
+      loop: true,
+      speed: 600,
+
+      // 分页器配置
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        dynamicBullets: true
+      },
+
+      // 导航按钮配置（关键修复）
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+        disabledClass: 'swiper-button-disabled' // 添加禁用状态类
+      },
+
+      // 自动播放配置
+      autoplay: {
+        delay: 5000,
+        disableOnInteraction: false,
+      },
+
+      // 效果配置
+      effect: 'fade',
+      fadeEffect: {
+        crossFade: true
+      },
+
+      // 键盘控制
+      keyboard: {
+        enabled: true,
+        onlyInViewport: true,
+      },
+
+      // 触摸控制
+      grabCursor: true,
+
+      // 响应式配置
+      breakpoints: {
+        480: {
+          effect: 'slide'
+        }
+      }
     });
   }
-}
+}

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

@@ -4,110 +4,140 @@
     <div class="banner-content">
         <h1 class="banner-title">数智支撑系统</h1>
         <p class="banner-subtitle">为江西文旅数字化提供坚实技术底座，融合前沿技术构建安全、智能、高效的文旅数字基础设施</p>
-        <div class="banner-pattern"></div>
+        <div class="banner-buttons">
+            <button class="btn-primary" routerLink="/mobile/development">立即体验</button>
+            <button class="btn-outline" routerLink="/mobile/development">观看演示视频 ▶</button>
+        </div>
     </div>
+    <div class="banner-pattern"></div>
 </section>
 
 <!-- 智能中台 - 添加点击跳转 -->
 <section class="section" id="intelligence">
-    <h2 class="section-title">智能中台</h2>
+    <div class="section-header">
+        <h2 class="section-title">智能中台</h2>
+        <p class="section-description">基于人工智能和大数据技术构建的文旅智能核心，为各类应用提供智能化支持</p>
+    </div>
     <div class="module-container">
         <div class="module-card" routerLink="/mobile/development">
             <div class="module-header">
-                <div class="module-icon">🧠</div>
+                <div class="module-icon">
+                    <img src="assets/images/ai-brain.png" alt="AI大脑图标" style="width: 150%;height: auto;">
+                </div>
                 <h3 class="module-title">大模型引擎</h3>
-                <p>文旅专用AI大脑</p>
+                <p class="module-subtitle">文旅专用AI大脑</p>
             </div>
             <div class="module-body">
                 <ul class="feature-list">
                     <li class="feature-item">
                         <div class="feature-icon">📚</div>
                         <div>
-                            <div>赣鄱文化知识库</div>
-                            <div class="feature-desc">集成江西历史、非遗等专业知识</div>
+                            <h4>赣鄱文化知识库</h4>
+                            <div class="feature-desc">集成江西历史、非遗等专业知识，覆盖2000+文化实体</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">💬</div>
                         <div>
-                            <div>智能对话系统</div>
-                            <div class="feature-desc">支持多轮自然语言交互</div>
+                            <h4>智能对话系统</h4>
+                            <div class="feature-desc">支持多轮自然语言交互，准确率高达92%</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">🎨</div>
                         <div>
-                            <div>创意生成引擎</div>
-                            <div class="feature-desc">自动生成文旅宣传内容</div>
+                            <h4>创意生成引擎</h4>
+                            <div class="feature-desc">自动生成文旅宣传内容，每日可产出500+创意</div>
                         </div>
                     </li>
                 </ul>
+                <div class="module-stats">
+                    <div class="stat-item">
+                        <div class="stat-value">95%</div>
+                        <div class="stat-label">准确率</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">2000+</div>
+                        <div class="stat-label">文化实体</div>
+                    </div>
+                </div>
             </div>
         </div>
         
         <div class="module-card" routerLink="/mobile/development">
             <div class="module-header">
-                <div class="module-icon">🕸️</div>
+                <div class="module-icon">
+                    <img src="assets/images/knowledge-graph.png" alt="知识图谱图标" style="width: 70%;height: auto;">
+                </div>
                 <h3 class="module-title">知识图谱管理</h3>
-                <p>文化元素关联网络</p>
+                <p class="module-subtitle">文化元素关联网络</p>
             </div>
             <div class="module-body">
                 <ul class="feature-list">
                     <li class="feature-item">
                         <div class="feature-icon">🔗</div>
                         <div>
-                            <div>实体关系挖掘</div>
-                            <div class="feature-desc">发现文化元素间隐藏关联</div>
+                            <h4>实体关系挖掘</h4>
+                            <div class="feature-desc">发现文化元素间隐藏关联，已建立10万+关系连接</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">📊</div>
                         <div>
-                            <div>可视化分析</div>
-                            <div class="feature-desc">三维展示文化元素网络</div>
+                            <h4>可视化分析</h4>
+                            <div class="feature-desc">三维展示文化元素网络，支持交互式探索</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">🔄</div>
                         <div>
-                            <div>动态更新机制</div>
-                            <div class="feature-desc">实时吸收新研究成果</div>
+                            <h4>动态更新机制</h4>
+                            <div class="feature-desc">实时吸收新研究成果，每日更新100+节点</div>
                         </div>
                     </li>
                 </ul>
+                <div class="knowledge-graph-preview">
+                    <img src="assets/images/knowledge-graph-sample.jpg" alt="知识图谱示例">
+                    <p class="preview-caption">江西非遗文化知识图谱示例</p>
+                </div>
             </div>
         </div>
         
         <div class="module-card" routerLink="/mobile/development">
             <div class="module-header">
-                <div class="module-icon">📱</div>
+                <div class="module-icon">
+                    <img src="assets/images/multi-device.png" alt="多终端图标" style="width: 100%;height: auto;">
+                </div>
                 <h3 class="module-title">多终端适配</h3>
-                <p>全渠道无缝体验</p>
+                <p class="module-subtitle">全渠道无缝体验</p>
             </div>
             <div class="module-body">
                 <ul class="feature-list">
                     <li class="feature-item">
                         <div class="feature-icon">🖥️</div>
                         <div>
-                            <div>Web端适配</div>
-                            <div class="feature-desc">响应式设计支持各种屏幕尺寸</div>
+                            <h4>Web端适配</h4>
+                            <div class="feature-desc">响应式设计支持各种屏幕尺寸，从手机到4K大屏</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">📲</div>
                         <div>
-                            <div>移动端优化</div>
-                            <div class="feature-desc">轻量化设计提升移动体验</div>
+                            <h4>移动端优化</h4>
+                            <div class="feature-desc">轻量化设计提升移动体验，加载速度提升60%</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">🔄</div>
                         <div>
-                            <div>多端数据同步</div>
-                            <div class="feature-desc">用户数据实时跨平台同步</div>
+                            <h4>多端数据同步</h4>
+                            <div class="feature-desc">用户数据实时跨平台同步，延迟低于500ms</div>
                         </div>
                     </li>
                 </ul>
+                <div class="device-showcase">
+                    <img src="assets/images/device-mockup.png" alt="多设备展示" class="devices-image">
+                </div>
             </div>
         </div>
     </div>
@@ -115,35 +145,43 @@
 
 <!-- 数据治理 - 添加点击跳转 -->
 <section class="section" id="data">
-    <h2 class="section-title">数据治理</h2>
+    <div class="section-header">
+        <h2 class="section-title">数据治理</h2>
+        <p class="section-description">确保文旅数据质量与安全，构建可信赖的数据资产</p>
+    </div>
     <div class="module-container">
         <div class="module-card" routerLink="/mobile/development">
             <div class="module-header">
-                <div class="module-icon">🧹</div>
+                <div class="module-icon">
+                    <img src="assets/images/data-clean.png" alt="数据清洗图标" style="width: 80%;height: auto;">
+                </div>
                 <h3 class="module-title">AI清洗工具</h3>
-                <p>数据质量保障</p>
+                <p class="module-subtitle">数据质量保障</p>
             </div>
             <div class="module-body">
+                <div class="data-cleaning-demo">
+                    <img src="assets/images/data-cleaning-demo.png" alt="数据清洗演示">
+                </div>
                 <ul class="feature-list">
                     <li class="feature-item">
                         <div class="feature-icon">🔍</div>
                         <div>
-                            <div>智能纠错</div>
-                            <div class="feature-desc">自动识别并修正数据错误</div>
+                            <h4>智能纠错</h4>
+                            <div class="feature-desc">自动识别并修正数据错误，准确识别15类常见错误</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">🧩</div>
                         <div>
-                            <div>缺失值填充</div>
-                            <div class="feature-desc">基于上下文智能补全数据</div>
+                            <h4>缺失值填充</h4>
+                            <div class="feature-desc">基于上下文智能补全数据，填充准确率达89%</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">📈</div>
                         <div>
-                            <div>质量评估</div>
-                            <div class="feature-desc">生成数据质量评分报告</div>
+                            <h4>质量评估</h4>
+                            <div class="feature-desc">生成数据质量评分报告，包含20+评估维度</div>
                         </div>
                     </li>
                 </ul>
@@ -152,31 +190,37 @@
         
         <div class="module-card" routerLink="/mobile/development">
             <div class="module-header">
-                <div class="module-icon">⛓️</div>
+                <div class="module-icon">
+                    <img src="assets/images/blockchain.png" alt="区块链图标" style="width: 75%;height: auto;">
+                </div>
                 <h3 class="module-title">区块链存证</h3>
-                <p>数据不可篡改</p>
+                <p class="module-subtitle">数据不可篡改</p>
             </div>
             <div class="module-body">
+                <div class="blockchain-explainer">
+                    <img src="assets/images/blockchain-process.png" alt="区块链存证流程">
+                    <p class="explainer-text">文旅数据上链存证流程示意图</p>
+                </div>
                 <ul class="feature-list">
                     <li class="feature-item">
                         <div class="feature-icon">🔏</div>
                         <div>
-                            <div>数字指纹</div>
-                            <div class="feature-desc">为每份数据生成唯一哈希</div>
+                            <h4>数字指纹</h4>
+                            <div class="feature-desc">为每份数据生成唯一哈希，已存证50万+数据</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">📅</div>
                         <div>
-                            <div>时间戳认证</div>
-                            <div class="feature-desc">精确记录数据创建时间</div>
+                            <h4>时间戳认证</h4>
+                            <div class="feature-desc">精确记录数据创建时间，误差小于1秒</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">🔗</div>
                         <div>
-                            <div>跨链验证</div>
-                            <div class="feature-desc">支持多区块链网络验证</div>
+                            <h4>跨链验证</h4>
+                            <div class="feature-desc">支持多区块链网络验证，已接入3大主流链</div>
                         </div>
                     </li>
                 </ul>
@@ -185,31 +229,37 @@
         
         <div class="module-card" routerLink="/mobile/development">
             <div class="module-header" style="background:linear-gradient(135deg, var(--secondary-red), #d86b70)">
-                <div class="module-icon">🚫</div>
+                <div class="module-icon">
+                    <img src="assets/images/content-filter.png" alt="内容过滤图标" style="width: 75%;height: auto;">
+                </div>
                 <h3 class="module-title">敏感词过滤</h3>
-                <p>内容安全防护</p>
+                <p class="module-subtitle">内容安全防护</p>
             </div>
             <div class="module-body">
+                <div class="filter-dashboard">
+                    <img src="assets/images/filter-dashboard.jpg" alt="敏感词过滤仪表盘">
+                    <p class="dashboard-stats">今日已过滤1,243条敏感内容</p>
+                </div>
                 <ul class="feature-list">
                     <li class="feature-item">
                         <div class="feature-icon">🛡️</div>
                         <div>
-                            <div>多层级过滤</div>
-                            <div class="feature-desc">从关键词到语义理解</div>
+                            <h4>多层级过滤</h4>
+                            <div class="feature-desc">从关键词到语义理解，覆盖5级敏感程度</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">🌐</div>
                         <div>
-                            <div>方言识别</div>
-                            <div class="feature-desc">支持江西方言敏感词识别</div>
+                            <h4>方言识别</h4>
+                            <div class="feature-desc">支持江西方言敏感词识别，覆盖赣语等3大方言</div>
                         </div>
                     </li>
                     <li class="feature-item">
                         <div class="feature-icon">📝</div>
                         <div>
-                            <div>智能替换</div>
-                            <div class="feature-desc">自动替换为合规表达</div>
+                            <h4>智能替换</h4>
+                            <div class="feature-desc">自动替换为合规表达，保留原意同时确保安全</div>
                         </div>
                     </li>
                 </ul>
@@ -220,95 +270,300 @@
 
 <!-- 权限管理 - 添加点击跳转 -->
 <section class="section" id="permission">
-    <h2 class="section-title">权限管理系统</h2>
+    <div class="section-header">
+        <h2 class="section-title">权限管理系统</h2>
+        <p class="section-description">精细化权限控制，满足不同用户群体的需求</p>
+    </div>
     
     <div class="permission-tabs">
-        <button class="tab-btn" [class.active]="isActive('government')" (click)="changeTab('government')">政府级权限</button>
-        <button class="tab-btn" [class.active]="isActive('university')" (click)="changeTab('university')">高校级权限</button>
-        <button class="tab-btn" [class.active]="isActive('public')" (click)="changeTab('public')">公众级权限</button>
+        <button class="tab-btn" [class.active]="isActive('government')" (click)="changeTab('government')">
+            <img src="assets/images/government.png" alt="政府图标">
+            政府级权限
+        </button>
+        <button class="tab-btn" [class.active]="isActive('university')" (click)="changeTab('university')">
+            <img src="assets/images/university.png" alt="高校图标" style="width: 1.75em;height: auto;">
+            高校级权限
+        </button>
+        <button class="tab-btn" [class.active]="isActive('public')" (click)="changeTab('public')">
+            <img src="assets/images/public.png" alt="公众图标" style="width: 2.5em;height: auto;">
+            公众级权限
+        </button>
     </div>
     
     <div class="tab-content" [class.active]="isActive('government')">
-        <h3>数据监管权限</h3>
-        <p class="tab-desc">为政府部门提供全面的数据监管能力，确保文旅数据安全合规</p>
+        <div class="tab-header">
+            <h3>数据监管权限</h3>
+            <p class="tab-desc">为政府部门提供全面的数据监管能力，确保文旅数据安全合规</p>
+        </div>
         
         <div class="permission-features">
             <div class="permission-feature">
                 <h4>数据审计追踪</h4>
-                <p class="feature-desc">完整记录数据访问、修改历史，支持时间点回溯与责任人追踪</p>
+                <p class="feature-desc">完整记录数据访问、修改历史，支持时间点回溯与责任人追踪，审计日志保留5年以上</p>
+                <a routerLink="/mobile/development" class="feature-link">查看示例报告 →</a>
             </div>
             
             <div class="permission-feature">
                 <h4>合规性检查</h4>
-                <p class="feature-desc">自动检测数据存储、传输是否符合国家及地方数据安全法规</p>
+                <p class="feature-desc">自动检测数据存储、传输是否符合国家及地方数据安全法规，支持20+合规标准</p>
+                <a routerLink="/mobile/development" class="feature-link">了解合规标准 →</a>
             </div>
             
             <div class="permission-feature">
                 <h4>敏感数据监控</h4>
-                <p class="feature-desc">实时监控敏感数据访问行为，异常操作即时预警</p>
+                <p class="feature-desc">实时监控敏感数据访问行为，异常操作即时预警，响应时间小于30秒</p>
+                <a routerLink="/mobile/development" class="feature-link">查看监控演示 →</a>
             </div>
         </div>
     </div>
     
     <div class="tab-content" [class.active]="isActive('university')">
-        <h3>教研权限</h3>
-        <p class="tab-desc">为高校和研究机构提供文旅数据研究分析工具与权限</p>
+        <div class="tab-header">
+            <h3>教研权限</h3>
+            <p class="tab-desc">为高校和研究机构提供文旅数据研究分析工具与权限</p>
+        </div>
         
         <div class="permission-features">
             <div class="permission-feature">
                 <h4>数据集下载</h4>
-                <p class="feature-desc">授权访问脱敏后的文旅数据集，支持多种格式导出</p>
+                <p class="feature-desc">授权访问脱敏后的文旅数据集，支持CSV、JSON、Excel等多种格式导出，每月更新</p>
+                <a routerLink="/mobile/development" class="feature-link">浏览数据集 →</a>
             </div>
             
             <div class="permission-feature">
                 <h4>分析工具集成</h4>
-                <p class="feature-desc">提供专业数据分析工具接口，支持Python、R等语言调用</p>
+                <p class="feature-desc">提供专业数据分析工具接口，支持Python、R等语言调用，包含50+预置分析模型</p>
+                <a routerLink="/mobile/development" class="feature-link">查看API文档 →</a>
             </div>
             
             <div class="permission-feature">
                 <h4>协作研究空间</h4>
-                <p class="feature-desc">创建团队协作环境，共享研究笔记与分析成果</p>
+                <p class="feature-desc">创建团队协作环境，共享研究笔记与分析成果，支持10人同时在线协作</p>
+                <a routerLink="/mobile/development" class="feature-link">创建研究空间 →</a>
             </div>
         </div>
     </div>
     
     <div class="tab-content" [class.active]="isActive('public')">
-        <h3>创作权限</h3>
-        <p class="tab-desc">为公众用户提供文旅内容创作工具与分享平台</p>
+        <div class="tab-header">
+            <h3>创作权限</h3>
+            <p class="tab-desc">为公众用户提供文旅内容创作工具与分享平台</p>
+        </div>
         
         <div class="permission-features">
             <div class="permission-feature">
                 <h4>素材库访问</h4>
-                <p class="feature-desc">提供免费文旅素材库，包括图片、视频、音频等资源</p>
+                <p class="feature-desc">提供免费文旅素材库，包括10,000+高清图片、500+视频、200+音频资源</p>
+                <a routerLink="/mobile/development" class="feature-link">浏览素材库 →</a>
             </div>
             
             <div class="permission-feature">
                 <h4>在线创作工具</h4>
-                <p class="feature-desc">内置简易视频剪辑、图文排版等创作工具</p>
+                <p class="feature-desc">内置简易视频剪辑、图文排版等创作工具，无需专业技能即可制作精美内容</p>
+                <a routerLink="/mobile/development" class="feature-link">试用创作工具 →</a>
             </div>
             
             <div class="permission-feature">
                 <h4>内容审核系统</h4>
-                <p class="feature-desc">AI辅助内容审核，确保创作内容符合规范</p>
+                <p class="feature-desc">AI辅助内容审核，确保创作内容符合规范，平均审核时间3分钟</p>
+                <a routerLink="/mobile/development" class="feature-link">查看审核标准 →</a>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- 客户案例 - 新增部分 -->
+<section class="section" id="cases">
+    <div class="section-header">
+        <h2 class="section-title">成功案例</h2>
+        <p class="section-description">数智支撑系统在江西文旅场景中的实际应用</p>
+    </div>
+    
+    <div class="case-studies">
+        <div class="case-card">
+            <div class="case-image">
+                <img src="assets/images/case-lushan.jpg" alt="庐山智慧景区案例" style="width: 100%;height: auto;">
+                <div class="case-tag">智慧景区</div>
+            </div>
+            <div class="case-content">
+                <h3>庐山智慧景区建设</h3>
+                <p class="case-desc">应用数智支撑系统实现景区客流预测准确率提升40%，游客满意度提高25%</p>
+                <div class="case-stats">
+                    <div class="stat-item">
+                        <div class="stat-value">40%</div>
+                        <div class="stat-label">预测准确率提升</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">25%</div>
+                        <div class="stat-label">满意度提高</div>
+                    </div>
+                </div>
+                <a routerLink="/mobile/development" class="case-link">查看详情 →</a>
+            </div>
+        </div>
+        
+        <div class="case-card">
+            <div class="case-image">
+                <img src="assets/images/case-intangible.jpg" alt="非遗数字化案例" style="width: 100%;height: auto;">
+                <div class="case-tag">非遗保护</div>
+            </div>
+            <div class="case-content">
+                <h3>江西非遗数字化工程</h3>
+                <p class="case-desc">通过知识图谱技术关联200+非遗项目，建立完整的数字档案系统</p>
+                <div class="case-stats">
+                    <div class="stat-item">
+                        <div class="stat-value">200+</div>
+                        <div class="stat-label">非遗项目</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">5000+</div>
+                        <div class="stat-label">数字资源</div>
+                    </div>
+                </div>
+                <a routerLink="/mobile/development" class="case-link">查看详情 →</a>
+            </div>
+        </div>
+        
+        <div class="case-card">
+            <div class="case-image">
+                <img src="assets/images/case-redtourism.jpg" alt="红色旅游案例" style="width: 100%;height: auto;">
+                <div class="case-tag">红色旅游</div>
+            </div>
+            <div class="case-content">
+                <h3>井冈山红色旅游数字平台</h3>
+                <p class="case-desc">利用大模型引擎提供智能讲解服务，游客停留时间延长35%</p>
+                <div class="case-stats">
+                    <div class="stat-item">
+                        <div class="stat-value">35%</div>
+                        <div class="stat-label">停留时间延长</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">80%</div>
+                        <div class="stat-label">讲解覆盖率</div>
+                    </div>
+                </div>
+                <a routerLink="/mobile/development" class="case-link">查看详情 →</a>
             </div>
         </div>
     </div>
 </section>
 
+<!-- 联系我们 - 新增部分 -->
+<section class="section" id="contact">
+    <div class="contact-container">
+        <div class="contact-info">
+            <h2>联系我们</h2>
+            <p class="contact-description">如果您对我们的数智支撑系统感兴趣，或有任何疑问，欢迎随时联系我们</p>
+            
+            <div class="contact-methods">
+                <div class="contact-method">
+                    <img src="assets/images/phone.png" alt="电话图标">
+                    <div>
+                        <h4>电话咨询</h4>
+                        <p>0791-12345678</p>
+                        <p>工作日 9:00-17:30</p>
+                    </div>
+                </div>
+                
+                <div class="contact-method">
+                    <img src="assets/images/email.png" alt="邮件图标">
+                    <div>
+                        <h4>邮件联系</h4>
+                        <p>digital&#64;jxwhly.org</p>
+                        <p>24小时内回复</p>
+                    </div>
+                </div>
+                
+                <div class="contact-method">
+                    <img src="assets/images/address.png" alt="地址图标">
+                    <div>
+                        <h4>实地拜访</h4>
+                        <p>江西省南昌市红谷滩区赣江中大道</p>
+                        <p>需提前预约</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="contact-form">
+            <h3>在线咨询</h3>
+            <form>
+                <div class="form-group">
+                    <label for="name">姓名</label>
+                    <input type="text" id="name" placeholder="请输入您的姓名">
+                </div>
+                <div class="form-group">
+                    <label for="organization">单位/机构</label>
+                    <input type="text" id="organization" placeholder="请输入您的单位或机构名称">
+                </div>
+                <div class="form-group">
+                    <label for="phone">联系电话</label>
+                    <input type="tel" id="phone" placeholder="请输入您的联系电话">
+                </div>
+                <div class="form-group">
+                    <label for="message">咨询内容</label>
+                    <textarea id="message" rows="4" placeholder="请简要描述您的需求或问题"></textarea>
+                </div>
+                <button type="submit" class="submit-btn" onclick="alert('提交成功！')">提交咨询</button>
+            </form>
+        </div>
+    </div>
+</section>
+
 <!-- 页脚 - 添加社交媒体图标 -->
 <footer class="footer">
-    <div class="footer-links">
-        <a routerLink="/about">关于协会</a>
-        <a routerLink="/membership">会员服务</a>
-        <a routerLink="/cooperation">项目合作</a>
-        <a routerLink="/contact">联系我们</a>
-    </div>
-    <div class="social-media">
-        <a href="#" class="social-icon wechat">微信</a>
-        <a href="#" class="social-icon weibo">微博</a>
-        <a href="#" class="social-icon douyin">抖音</a>
+    <div class="footer-content">
+        <div class="footer-about">
+            <p class="about-text">江西省文化和旅游研究推广协会致力于推动江西文旅产业数字化转型升级，打造具有江西特色的数字文旅生态体系。</p>
+            <div class="qrcode">
+                <img src="assets/images/wechat-qrcode.jpg" alt="微信公众号二维码">
+                <p>扫码关注公众号</p>
+            </div>
+        </div>
+        
+        <div class="footer-links">
+            <div class="link-group">
+                <h4>快速链接</h4>
+                <ul>
+                    <li><a routerLink="/home">首页</a></li>
+                    <li><a routerLink="/news">新闻动态</a></li>
+                    <li><a routerLink="/policy">政策法规</a></li>
+                    <li><a routerLink="/members">会员中心</a></li>
+                </ul>
+            </div>
+            
+            <div class="link-group">
+                <h4>数智平台</h4>
+                <ul>
+                    <li><a routerLink="/digital-platform">平台介绍</a></li>
+                    <li><a routerLink="/solutions">解决方案</a></li>
+                    <li><a routerLink="/cases">成功案例</a></li>
+                    <li><a routerLink="/api">开发者中心</a></li>
+                </ul>
+            </div>
+            
+            <div class="link-group">
+                <h4>资源中心</h4>
+                <ul>
+                    <li><a routerLink="/materials">素材库</a></li>
+                    <li><a routerLink="/reports">研究报告</a></li>
+                    <li><a routerLink="/tools">工具下载</a></li>
+                    <li><a routerLink="/training">培训资料</a></li>
+                </ul>
+            </div>
+        </div>
     </div>
+    
     <div class="footer-bottom">
-        <p>© 2023 江西省文化和旅游研究推广协会 | 赣ICP备XXXXXXXX号</p>
+        <div class="social-media">
+            <a routerLink="/mobile/development" class="social-icon wechat">微信</a>
+            <a routerLink="/mobile/development" class="social-icon weibo">微博</a>
+            <a routerLink="/mobile/development" class="social-icon douyin">抖音</a>
+            <a routerLink="/mobile/development" class="social-icon toutiao">头条</a>
+        </div>
+        <div class="copyright">
+            <p>© 2023 江西省文化和旅游研究推广协会 | 赣ICP备XXXXXXXX号 | 赣公网安备XXXXXXXX号</p>
+            <p>地址：江西省南昌市红谷滩区赣江中大道 | 邮编：330000</p>
+        </div>
     </div>
 </footer>

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

@@ -1,22 +1,29 @@
-/* 全局样式 */
+/* page-crm-system.scss */
+/* 全局样式 - 添加平滑滚动和字体定义 */
 :host {
   display: block;
-  font-family: "阿里巴巴普惠体", sans-serif;
+  font-family: "阿里巴巴普惠体", "PingFang SC", "Microsoft YaHei", sans-serif;
   background-color: #f8f4e8;
   color: #333;
   line-height: 1.6;
+  scroll-behavior: smooth;
 }
 
-/* 主色调定义 */
+/* 主色调定义 - 扩展调色板 */
 :host {
-  --primary-blue: #2F7DAD;  /* 天青瓷 */
-  --primary-green: #5B8C5A; /* 香樟绿 */
-  --primary-gold: #D4B16A; /* 庐金 */
-  --secondary-gray: #6D6D6D; /* 婺源黛瓦灰 */
-  --secondary-red: #C53D43;  /* 井冈山鹃红 */
+  --primary-blue: #2F7DAD;
+  --primary-green: #5B8C5A;
+  --primary-gold: #D4B16A;
+  --secondary-gray: #6D6D6D;
+  --secondary-red: #C53D43;
+  --light-bg: #f9f9f9;
+  --card-shadow: 0 8px 24px rgba(0,0,0,0.1);
+  --section-padding: 4rem 10%;
+  --border-radius: 8px;
+  --transition: all 0.3s ease;
 }
 
-/* 导航栏 */
+/* 导航栏 - 添加logo和搜索框样式 */
 .navbar {
   background: linear-gradient(90deg, var(--primary-blue), var(--primary-green));
   height: 80px;
@@ -25,50 +32,99 @@
   justify-content: space-between;
   padding: 0 5%;
   box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  
+  .logo-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    
+    .logo-img {
+      height: 50px;
+      width: auto;
+    }
+    
+    .logo-text {
+      font-size: 1.5rem;
+      color: white;
+      font-weight: bold;
+      text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
+    }
+  }
+  
+  .nav-links {
+    display: flex;
+    gap: 1.5rem;
+    
+    a {
+      color: white;
+      text-decoration: none;
+      padding: 0.5rem 1rem;
+      transition: var(--transition);
+      position: relative;
+      font-size: 1.1rem;
+      
+      &:hover, &.active {
+        background-color: rgba(255,255,255,0.2);
+        border-radius: var(--border-radius);
+      }
+      
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: -5px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 2px;
+        background-color: var(--primary-gold);
+        transition: width 0.3s;
+      }
+      
+      &:hover::after, &.active::after {
+        width: 70%;
+      }
+    }
+  }
+  
+  .search-box {
+    display: flex;
+    align-items: center;
+    background: rgba(255,255,255,0.2);
+    border-radius: 30px;
+    padding: 0.5rem 1rem;
+    
+    input {
+      background: transparent;
+      border: none;
+      color: white;
+      padding: 0.3rem 0.5rem;
+      width: 200px;
+      
+      &::placeholder {
+        color: rgba(255,255,255,0.7);
+      }
+      
+      &:focus {
+        outline: none;
+      }
+    }
+    
+    .search-btn {
+      background: none;
+      border: none;
+      color: white;
+      cursor: pointer;
+      font-size: 1.2rem;
+    }
+  }
 }
 
-.logo {
-  font-size: 2rem;
-  color: white;
-  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-}
-
-.nav-links {
-  display: flex;
-  gap: 2rem;
-}
-
-.nav-links a {
-  color: white;
-  text-decoration: none;
-  padding: 0.5rem 1rem;
-  transition: all 0.3s;
-  position: relative;
-}
-
-.nav-links a:hover {
-  background-color: rgba(255,255,255,0.2);
-}
-
-.nav-links a::after {
-  content: "";
-  position: absolute;
-  bottom: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0;
-  height: 2px;
-  background-color: var(--primary-gold);
-  transition: width 0.3s;
-}
-
-.nav-links a:hover::after {
-  width: 70%;
-}
-
-/* Banner区域 */
+/* Banner区域 - 增强视觉效果 */
 .support-banner {
-  height: 350px;
+  height: 500px;
   background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
   display: flex;
   align-items: center;
@@ -77,383 +133,918 @@
   color: white;
   position: relative;
   overflow: hidden;
-}
-
-.banner-content {
-  position: relative;
-  z-index: 2;
-  max-width: 800px;
-  padding: 0 2rem;
-}
-
-.banner-title {
-  font-size: 2.8rem;
-  margin-bottom: 1.5rem;
-  text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
-}
-
-.banner-subtitle {
-  font-size: 1.2rem;
-  margin-bottom: 2rem;
-  line-height: 1.8;
-}
-
-/* 主内容区 */
-.section {
-  padding: 4rem 10%;
-}
-
-.section-title {
-  font-size: 2.2rem;
-  color: var(--primary-blue);
-  text-align: center;
   margin-bottom: 3rem;
-  position: relative;
+  
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="rgba(255,255,255,0.05)"><path d="M30,30 Q50,10 70,30 T90,50 T70,70 T50,90 T30,70 T10,50 T30,30 Z"></path></svg>');
+    background-size: 80px;
+    animation: movePattern 60s linear infinite;
+  }
+  
+  .banner-content {
+    position: relative;
+    z-index: 2;
+    max-width: 1200px;
+    padding: 0 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+    .banner-title {
+      font-size: 3.5rem;
+      margin-bottom: 1.5rem;
+      text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
+      font-weight: bold;
+      animation: fadeInUp 1s ease-out;
+    }
+    
+    .banner-subtitle {
+      font-size: 1.5rem;
+      margin-bottom: 2.5rem;
+      line-height: 1.8;
+      max-width: 800px;
+      animation: fadeInUp 1s ease-out 0.2s forwards;
+      opacity: 0;
+    }
+    
+    .banner-buttons {
+      display: flex;
+      gap: 1.5rem;
+      margin-bottom: 3rem;
+      animation: fadeInUp 1s ease-out 0.4s forwards;
+      opacity: 0;
+      
+      .btn-primary {
+        background-color: var(--primary-gold);
+        color: #333;
+        border: none;
+        padding: 0.8rem 2rem;
+        border-radius: 30px;
+        font-size: 1.1rem;
+        font-weight: bold;
+        cursor: pointer;
+        transition: var(--transition);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        
+        &:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 6px 16px rgba(0,0,0,0.2);
+        }
+      }
+      
+      .btn-outline {
+        background: transparent;
+        color: white;
+        border: 2px solid white;
+        padding: 0.8rem 2rem;
+        border-radius: 30px;
+        font-size: 1.1rem;
+        font-weight: bold;
+        cursor: pointer;
+        transition: var(--transition);
+        
+        &:hover {
+          background: rgba(255,255,255,0.1);
+          transform: translateY(-3px);
+        }
+      }
+    }
+    
+    .banner-image {
+      width: 80%;
+      max-width: 900px;
+      animation: fadeInUp 1s ease-out 0.6s forwards;
+      opacity: 0;
+      
+      img {
+        width: 100%;
+        height: auto;
+        border-radius: var(--border-radius);
+        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
+      }
+    }
+  }
 }
 
-.section-title::after {
-  content: "";
-  display: block;
-  width: 80px;
-  height: 3px;
-  background: linear-gradient(to right, var(--primary-blue), var(--primary-green));
-  margin: 1rem auto 0;
+/* 主内容区 - 增强版式设计 */
+.section {
+  padding: var(--section-padding);
+  
+  .section-header {
+    text-align: center;
+    margin-bottom: 3rem;
+    
+    .section-title {
+      font-size: 2.5rem;
+      color: var(--primary-blue);
+      margin-bottom: 1rem;
+      position: relative;
+      display: inline-block;
+      
+      &::after {
+        content: "";
+        display: block;
+        width: 80px;
+        height: 4px;
+        background: linear-gradient(to right, var(--primary-blue), var(--primary-green));
+        margin: 1rem auto 0;
+        border-radius: 2px;
+      }
+    }
+    
+    .section-description {
+      font-size: 1.2rem;
+      color: var(--secondary-gray);
+      max-width: 800px;
+      margin: 0 auto;
+      line-height: 1.8;
+    }
+  }
 }
 
-/* 模块卡片 */
+/* 模块卡片 - 增强交互效果 */
 .module-container {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
   gap: 2rem;
   justify-content: center;
 }
 
+/* 模块卡片 - 增强交互效果 */
 .module-card {
-  flex: 1 1 300px;
-  max-width: 350px;
   background: white;
-  border-radius: 8px;
+  border-radius: var(--border-radius);
   overflow: hidden;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
-  transition: all 0.3s;
-}
-
-.module-card:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
-}
-
-.module-header {
-  background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
-  color: white;
-  padding: 1.5rem;
-  text-align: center;
-}
-
-.module-icon {
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
-}
-
-.module-title {
-  font-size: 1.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.module-body {
-  padding: 1.5rem;
-}
-
-.feature-list {
-  list-style: none;
-}
-
-.feature-item {
+  box-shadow: var(--card-shadow);
+  transition: var(--transition);
   display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  padding: 0.8rem;
-  border-radius: 6px;
-  transition: all 0.3s;
-}
-
-.feature-item:hover {
-  background-color: rgba(47, 125, 173, 0.1);
-}
-
-.feature-icon {
-  width: 40px;
-  height: 40px;
-  background-color: rgba(47, 125, 173, 0.1);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 1rem;
-  color: var(--primary-blue);
-  font-size: 1.2rem;
-}
-
-.feature-desc {
-  font-size: 0.9rem;
-  color: var(--secondary-gray);
+  flex-direction: column;
+  height: 100%;
+  
+  &:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
+  }
+  
+  .module-header {
+    background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
+    color: white;
+    padding: 1.5rem;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    
+    &::before {
+      content: "";
+      position: absolute;
+      top: -50%;
+      right: -50%;
+      width: 100%;
+      height: 200%;
+      background: rgba(255,255,255,0.1);
+      transform: rotate(30deg);
+      transition: var(--transition);
+    }
+    
+    &:hover::before {
+      right: 100%;
+    }
+    
+    .module-icon {
+      width: 60px;
+      height: 60px;
+      margin: 0 auto 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255,255,255,0.2);
+      border-radius: 50%;
+      
+      img {
+        width: 60%;
+        height: auto;
+      }
+    }
+    
+    .module-title {
+      font-size: 1.5rem;
+      margin-bottom: 0.5rem;
+      font-weight: bold;
+    }
+    
+    .module-subtitle {
+      font-size: 0.9rem;
+      opacity: 0.9;
+    }
+  }
+  
+  .module-body {
+    padding: 1.5rem;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    
+    .feature-list {
+      list-style: none;
+      margin-bottom: 1.5rem;
+      
+      .feature-item {
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: 1rem;
+        padding: 0.8rem;
+        border-radius: 6px;
+        transition: var(--transition);
+        background: rgba(47, 125, 173, 0.05);
+        
+        &:hover {
+          background: rgba(47, 125, 173, 0.1);
+          transform: translateX(5px);
+        }
+        
+        .feature-icon {
+          width: 36px;
+          height: 36px;
+          background-color: rgba(47, 125, 173, 0.1);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 1rem;
+          color: var(--primary-blue);
+          font-size: 1rem;
+          flex-shrink: 0;
+        }
+        
+        h4 {
+          margin: 0 0 0.3rem;
+          font-size: 1rem;
+          color: var(--primary-blue);
+        }
+        
+        .feature-desc {
+          font-size: 0.9rem;
+          color: var(--secondary-gray);
+          line-height: 1.5;
+        }
+      }
+    }
+    
+    .module-stats {
+      display: flex;
+      justify-content: space-around;
+      margin-top: auto;
+      padding-top: 1rem;
+      border-top: 1px solid rgba(0,0,0,0.05);
+      
+      .stat-item {
+        text-align: center;
+        
+        .stat-value {
+          font-size: 1.8rem;
+          font-weight: bold;
+          color: var(--primary-blue);
+          line-height: 1;
+        }
+        
+        .stat-label {
+          font-size: 0.8rem;
+          color: var(--secondary-gray);
+        }
+      }
+    }
+    
+    .knowledge-graph-preview,
+    .device-showcase,
+    .data-cleaning-demo,
+    .blockchain-explainer,
+    .filter-dashboard {
+      margin: 1rem 0;
+      border-radius: var(--border-radius);
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+      
+      img {
+        width: 100%;
+        height: auto;
+        display: block;
+        transition: var(--transition);
+        
+        &:hover {
+          transform: scale(1.02);
+        }
+      }
+      
+      .preview-caption,
+      .explainer-text,
+      .dashboard-stats {
+        text-align: center;
+        font-size: 0.8rem;
+        color: var(--secondary-gray);
+        padding: 0.5rem;
+        background: var(--light-bg);
+      }
+    }
+  }
 }
 
-/* 权限管理 */
+/* 权限管理 - 增强标签页效果 */
 .permission-tabs {
   display: flex;
   justify-content: center;
   margin-bottom: 2rem;
   flex-wrap: wrap;
-}
-
-.tab-btn {
-  padding: 0.8rem 2rem;
-  background: none;
-  border: none;
-  border-bottom: 3px solid transparent;
-  font-size: 1.1rem;
-  color: var(--secondary-gray);
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.tab-btn.active {
-  color: var(--primary-blue);
-  border-bottom-color: var(--primary-blue);
-  font-weight: bold;
+  gap: 1rem;
+  
+  .tab-btn {
+    padding: 0.8rem 2rem;
+    background: none;
+    border: none;
+    border-bottom: 3px solid transparent;
+    font-size: 1.1rem;
+    color: var(--secondary-gray);
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    
+    img {
+      width: 20px;
+      height: auto;
+    }
+    
+    &.active {
+      color: var(--primary-blue);
+      border-bottom-color: var(--primary-blue);
+      font-weight: bold;
+      background: rgba(47, 125, 173, 0.05);
+    }
+    
+    &:hover:not(.active) {
+      background: rgba(47, 125, 173, 0.1);
+    }
+  }
 }
 
 .tab-content {
   display: none;
   background: white;
   padding: 2rem;
-  border-radius: 8px;
+  border-radius: var(--border-radius);
   box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  
+  &.active {
+    display: block;
+    animation: fadeIn 0.5s;
+  }
+  
+  .tab-header {
+    margin-bottom: 2rem;
+    text-align: center;
+    
+    h3 {
+      font-size: 1.8rem;
+      color: var(--primary-blue);
+      margin-bottom: 0.5rem;
+    }
+    
+    .tab-desc {
+      font-size: 1.1rem;
+      color: var(--secondary-gray);
+      max-width: 800px;
+      margin: 0 auto;
+    }
+  }
+  
+  .permission-features {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1.5rem;
+    
+    .permission-feature {
+      background-color: white;
+      padding: 1.5rem;
+      border-radius: var(--border-radius);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+      transition: var(--transition);
+      border-top: 4px solid var(--primary-blue);
+      
+      &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+      }
+      
+      .feature-image {
+        margin-bottom: 1rem;
+        border-radius: var(--border-radius);
+        overflow: hidden;
+        
+        img {
+          width: 100%;
+          height: auto;
+          display: block;
+          transition: var(--transition);
+          
+          &:hover {
+            transform: scale(1.05);
+          }
+        }
+      }
+      
+      h4 {
+        font-size: 1.2rem;
+        color: var(--primary-blue);
+        margin-bottom: 0.8rem;
+      }
+      
+      .feature-desc {
+        font-size: 0.95rem;
+        color: var(--secondary-gray);
+        margin-bottom: 1.2rem;
+        line-height: 1.6;
+      }
+      
+      .feature-link {
+        display: inline-block;
+        color: var(--primary-blue);
+        font-size: 0.9rem;
+        text-decoration: none;
+        font-weight: bold;
+        transition: var(--transition);
+        
+        &:hover {
+          color: var(--primary-green);
+          transform: translateX(5px);
+        }
+      }
+    }
+  }
 }
 
-.tab-content.active {
-  display: block;
-  animation: fadeIn 0.5s;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.tab-desc {
-  margin-bottom: 1.5rem;
-  color: var(--secondary-gray);
-}
-
-.permission-features {
+/* 客户案例 - 新增样式 */
+.case-studies {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 2rem;
+  
+  .case-card {
+    background: white;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: var(--card-shadow);
+    transition: var(--transition);
+    
+    &:hover {
+      transform: translateY(-10px);
+      box-shadow: 0 12px 32px rgba(0,0,0,0.15);
+    }
+    
+    .case-image {
+      position: relative;
+      height: 200px;
+      overflow: hidden;
+      
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: var(--transition);
+      }
+      
+      &:hover img {
+        transform: scale(1.1);
+      }
+      
+      .case-tag {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        background: var(--primary-gold);
+        color: #333;
+        padding: 0.3rem 0.8rem;
+        border-radius: 30px;
+        font-size: 0.8rem;
+        font-weight: bold;
+      }
+    }
+    
+    .case-content {
+      padding: 1.5rem;
+      
+      h3 {
+        font-size: 1.3rem;
+        color: var(--primary-blue);
+        margin-bottom: 0.8rem;
+      }
+      
+      .case-desc {
+        font-size: 0.95rem;
+        color: var(--secondary-gray);
+        margin-bottom: 1.5rem;
+        line-height: 1.6;
+      }
+      
+      .case-stats {
+        display: flex;
+        justify-content: space-around;
+        margin-bottom: 1.5rem;
+        
+        .stat-item {
+          text-align: center;
+          
+          .stat-value {
+            font-size: 1.8rem;
+            font-weight: bold;
+            color: var(--primary-blue);
+            line-height: 1;
+          }
+          
+          .stat-label {
+            font-size: 0.8rem;
+            color: var(--secondary-gray);
+          }
+        }
+      }
+      
+      .case-link {
+        display: inline-block;
+        color: var(--primary-blue);
+        font-weight: bold;
+        text-decoration: none;
+        transition: var(--transition);
+        
+        &:hover {
+          color: var(--primary-green);
+          transform: translateX(5px);
+        }
+      }
+    }
+  }
 }
 
-.permission-feature {
-  background-color: rgba(47, 125, 173, 0.05);
-  padding: 1.2rem;
-  border-radius: 8px;
-  border-left: 4px solid var(--primary-blue);
+/* 联系我们 - 新增样式 */
+.contact-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  background: white;
+  border-radius: var(--border-radius);
+  box-shadow: var(--card-shadow);
+  overflow: hidden;
+  
+  .contact-info {
+    padding: 2rem;
+    background: linear-gradient(135deg, rgba(47, 125, 173, 0.1), rgba(91, 140, 90, 0.1));
+    
+    h2 {
+      font-size: 2rem;
+      color: var(--primary-blue);
+      margin-bottom: 1.5rem;
+    }
+    
+    .contact-description {
+      font-size: 1.1rem;
+      color: var(--secondary-gray);
+      margin-bottom: 2rem;
+      line-height: 1.8;
+    }
+    
+    .contact-methods {
+      .contact-method {
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+        
+        img {
+          width: 40px;
+          height: auto;
+        }
+        
+        h4 {
+          font-size: 1.1rem;
+          color: var(--primary-blue);
+          margin-bottom: 0.3rem;
+        }
+        
+        p {
+          font-size: 0.95rem;
+          color: var(--secondary-gray);
+          margin: 0;
+          line-height: 1.6;
+        }
+      }
+    }
+  }
+  
+  .contact-form {
+    padding: 2rem;
+    
+    h3 {
+      font-size: 1.5rem;
+      color: var(--primary-blue);
+      margin-bottom: 1.5rem;
+    }
+    
+    .form-group {
+      margin-bottom: 1.2rem;
+      
+      label {
+        display: block;
+        font-size: 0.9rem;
+        color: var(--secondary-gray);
+        margin-bottom: 0.5rem;
+      }
+      
+      input, textarea {
+        width: 100%;
+        padding: 0.8rem;
+        border: 1px solid #ddd;
+        border-radius: var(--border-radius);
+        font-size: 1rem;
+        transition: var(--transition);
+        
+        &:focus {
+          outline: none;
+          border-color: var(--primary-blue);
+          box-shadow: 0 0 0 2px rgba(47, 125, 173, 0.2);
+        }
+      }
+      
+      textarea {
+        resize: vertical;
+        min-height: 100px;
+      }
+    }
+    
+    .submit-btn {
+      background: var(--primary-blue);
+      color: white;
+      border: none;
+      padding: 0.8rem 2rem;
+      border-radius: var(--border-radius);
+      font-size: 1rem;
+      font-weight: bold;
+      cursor: pointer;
+      transition: var(--transition);
+      width: 100%;
+      
+      &:hover {
+        background: var(--primary-green);
+        transform: translateY(-2px);
+      }
+    }
+  }
 }
 
-/* 页脚 */
+/* 页脚 - 增强样式 */
 .footer {
   background-color: #2a2a2a;
   color: white;
-  padding: 3rem 10% 2rem;
-  text-align: center;
+  padding: 3rem 10% 0;
+  
+  .footer-content {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 3rem;
+    margin-bottom: 2rem;
+    
+    .footer-about {
+      .footer-logo {
+        width: 150px;
+        height: auto;
+        margin-bottom: 1.5rem;
+      }
+      
+      .about-text {
+        font-size: 0.95rem;
+        color: #ccc;
+        line-height: 1.8;
+        margin-bottom: 1.5rem;
+      }
+      
+      .qrcode {
+        text-align: center;
+        
+        img {
+          width: 120px;
+          height: auto;
+          margin-bottom: 0.5rem;
+        }
+        
+        p {
+          font-size: 0.8rem;
+          color: #999;
+        }
+      }
+    }
+    
+    .footer-links {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 2rem;
+      
+      .link-group {
+        h4 {
+          font-size: 1.1rem;
+          color: white;
+          margin-bottom: 1.2rem;
+          position: relative;
+          padding-bottom: 0.5rem;
+          
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 40px;
+            height: 2px;
+            background: var(--primary-gold);
+          }
+        }
+        
+        ul {
+          list-style: none;
+          
+          li {
+            margin-bottom: 0.8rem;
+            
+            a {
+              color: #ccc;
+              text-decoration: none;
+              font-size: 0.9rem;
+              transition: var(--transition);
+              
+              &:hover {
+                color: var(--primary-gold);
+                padding-left: 5px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  .footer-bottom {
+    padding: 2rem 0;
+    border-top: 1px solid #444;
+    
+    .social-media {
+      display: flex;
+      justify-content: center;
+      gap: 1.5rem;
+      margin-bottom: 1.5rem;
+      
+      .social-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        text-decoration: none;
+        font-size: 0.8rem;
+        transition: var(--transition);
+        
+        &.wechat { background-color: #07C160; }
+        &.weibo { background-color: #E6162D; }
+        &.douyin { background-color: #000; }
+        &.toutiao { background-color: #FF4D4F; }
+        
+        &:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        }
+      }
+    }
+    
+    .copyright {
+      text-align: center;
+      font-size: 0.8rem;
+      color: #999;
+      line-height: 1.6;
+    }
+  }
 }
 
-.footer-links {
-  display: flex;
-  justify-content: center;
-  gap: 2rem;
-  margin-bottom: 2rem;
-  flex-wrap: wrap;
+/* 动画效果 */
+@keyframes movePattern {
+  0% { background-position: 0 0; }
+  100% { background-position: 1000px 1000px; }
 }
 
-.footer-links a {
-  color: #ccc;
-  text-decoration: none;
-  transition: color 0.3s;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.footer-links a:hover {
-  color: var(--primary-gold);
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
-.footer-bottom {
-  padding-top: 2rem;
-  border-top: 1px solid #444;
-  color: #999;
-  font-size: 0.9rem;
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .contact-container {
+    grid-template-columns: 1fr;
+  }
+  
+  .footer-content {
+    grid-template-columns: 1fr;
+  }
 }
 
-/* 响应式设计 */
-@media (max-width: 768px) {
+@media (max-width: 992px) {
   .navbar {
-    height: auto;
     flex-direction: column;
+    height: auto;
     padding: 1rem;
-  }
-  
-  .nav-links {
-    margin-top: 1rem;
-    flex-wrap: wrap;
-    justify-content: center;
+    
+    .nav-links {
+      margin: 1rem 0;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    
+    .search-box {
+      margin-top: 1rem;
+      width: 100%;
+      
+      input {
+        width: 100%;
+      }
+    }
   }
   
   .support-banner {
     height: auto;
-    padding: 3rem 1rem;
+    padding: 4rem 1rem;
+    
+    .banner-image {
+      width: 100%;
+    }
   }
   
-  .banner-title {
-    font-size: 2.2rem;
-  }
-  
-  .section {
-    padding: 2rem 5%;
+  .footer-links {
+    grid-template-columns: repeat(2, 1fr) !important;
   }
 }
 
-/* page-crm-system.scss */
-/* 全局样式 - 添加平滑滚动 */
-:host {
-  display: block;
-  font-family: "阿里巴巴普惠体", sans-serif;
-  background-color: #f8f4e8;
-  color: #333;
-  line-height: 1.6;
-  scroll-behavior: smooth;
-}
-
-/* 主色调定义 - 添加更多变量 */
-:host {
-  --primary-blue: #2F7DAD;
-  --primary-green: #5B8C5A;
-  --primary-gold: #D4B16A;
-  --secondary-gray: #6D6D6D;
-  --secondary-red: #C53D43;
-  --light-bg: #f9f9f9;
-  --card-shadow: 0 8px 24px rgba(0,0,0,0.1);
-}
-
-/* Banner区域 - 添加背景图案和动画 */
-.support-banner {
-  height: 350px;
-  background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  color: white;
-  position: relative;
-  overflow: hidden;
-  
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="rgba(255,255,255,0.05)"><path d="M30,30 Q50,10 70,30 T90,50 T70,70 T50,90 T30,70 T10,50 T30,30 Z"></path></svg>');
-    background-size: 80px;
-    animation: movePattern 60s linear infinite;
-  }
-}
-
-@keyframes movePattern {
-  0% { background-position: 0 0; }
-  100% { background-position: 1000px 1000px; }
-}
-
-.banner-content {
-  position: relative;
-  z-index: 2;
-  max-width: 800px;
-  padding: 0 2rem;
-  animation: fadeInUp 1s ease-out;
-}
-
-/* 模块卡片 - 添加点击效果 */
-.module-card {
-  cursor: pointer;
-  transition: transform 0.3s, box-shadow 0.3s;
-  
-  &:active {
-    transform: scale(0.98);
+@media (max-width: 768px) {
+  .module-container,
+  .case-studies {
+    grid-template-columns: 1fr;
   }
-}
-
-/* 权限标签 - 添加悬停效果 */
-.tab-btn {
-  transition: all 0.3s;
   
-  &:hover:not(.active) {
-    background-color: rgba(47, 125, 173, 0.1);
+  .permission-tabs {
+    flex-direction: column;
+    
+    .tab-btn {
+      width: 100%;
+      justify-content: center;
+    }
   }
-}
-
-/* 页脚 - 添加社交媒体图标样式 */
-.social-media {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  margin: 1.5rem 0;
-}
-
-.social-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  text-decoration: none;
-  font-size: 0.8rem;
-  transition: transform 0.3s;
-  
-  &.wechat { background-color: #07C160; }
-  &.weibo { background-color: #E6162D; }
-  &.douyin { background-color: #000; }
   
-  &:hover {
-    transform: translateY(-5px);
+  .footer-links {
+    grid-template-columns: 1fr !important;
   }
 }
 
-/* 动画效果 */
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
+@media (max-width: 576px) {
+  :host {
+    --section-padding: 3rem 5%;
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  
+  .banner-title {
+    font-size: 2.5rem !important;
   }
-}
-
-/* 响应式设计 - 优化移动端体验 */
-@media (max-width: 768px) {
-  .module-card {
-    flex: 1 1 100%;
+  
+  .banner-subtitle {
+    font-size: 1.2rem !important;
   }
   
-  .permission-tabs {
+  .banner-buttons {
     flex-direction: column;
-    align-items: center;
+    gap: 1rem !important;
   }
   
-  .tab-btn {
-    width: 100%;
-    text-align: center;
+  .section-title {
+    font-size: 2rem !important;
   }
 }