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

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

@@ -33,7 +33,7 @@ interface StatCard {
 @Component({
   selector: 'app-page-crm-platform',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule,RouterModule],
   templateUrl: './page-crm-platform.html',
   styleUrls: ['./page-crm-platform.scss']
 })

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;
   }
 }