3 Commits 5578df4427 ... 21c9c4a0eb

Author SHA1 Message Date
  HK 21c9c4a0eb Merge branch 'master' of http://git.fmode.cn:3000/19870581353/travel-flatform 2 months ago
  HK 576b5d1283 feat:page-crm-development 2 months ago
  0235474 0e837040e3 feat:page-crm-development 2 months ago

+ 5 - 0
travel-platform-web/travel-web/src/crm/mobile/mobile.routes.ts

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

+ 0 - 0
travel-platform-web/travel-web/src/crm/mobile/page-crm-development/page-crm-development.html


+ 0 - 0
travel-platform-web/travel-web/src/crm/mobile/page-crm-development/page-crm-development.scss


+ 14 - 0
travel-platform-web/travel-web/src/crm/mobile/page-crm-development/page-crm-development.spec.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';  // 添加这行导入
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'page-crm-development',
+  imports: [
+    RouterModule // 新增路由导航模块
+  ],
+  templateUrl: './page-crm-development.html',
+  styleUrl: './page-crm-development.scss'
+})
+export class PageCrmdevelopment {
+
+}

+ 100 - 0
travel-platform-web/travel-web/src/crm/mobile/page-crm-development/page-crm-development.ts

@@ -0,0 +1,100 @@
+import { Component } from '@angular/core';
+import { Location } from '@angular/common'; // 必须导入Location服务
+import { RouterModule } from '@angular/router';
+
+@Component({
+    selector: 'page-crm-development',
+    standalone: true,
+    imports: [RouterModule], // 确保导入RouterModule
+    template: `
+    <section class="under-development">
+      <div class="container">
+        <h1>功能开发中</h1>
+        <p>我们正在全力开发此功能,即将为您呈现更优质的服务体验</p>
+        <div class="construction-icon">🚧</div>
+        <button (click)="goBack()" class="back-link">返回</button>
+      </div>
+    </section>
+  `,
+    styles: [`
+    .under-development {
+      min-height: 70vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 2rem;
+      background-color: #f9f9f9;
+    }
+    .container {
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    h1 {
+      color: #2F7DAD;
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+    }
+    p {
+      font-size: 1.2rem;
+      color: #555;
+      margin-bottom: 2rem;
+    }
+    .construction-icon {
+      font-size: 5rem;
+      margin: 2rem 0;
+      animation: bounce 2s infinite;
+    }
+    .home-link {
+      display: inline-block;
+      padding: 0.8rem 1.5rem;
+      background-color: #2F7DAD;
+      color: white;
+      text-decoration: none;
+      border-radius: 4px;
+      transition: background-color 0.3s;
+    }
+    .home-link:hover {
+      background-color: #1a5a8a;
+    }
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-20px); }
+    }
+    .back-link {
+      /* 尺寸调整 */
+      padding: 1.2rem 2.4rem;
+      min-width: 140px;
+      font-size: 1.1rem;
+  
+      /* 视觉增强 */
+      border-radius: 8px; /* 更大的圆角 */
+      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+      transition: all 0.3s ease;
+  
+      /* 交互效果 */
+      &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 8px rgba(0,0,0,0.15);
+    }
+  
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+  
+    /* 移动端适配 */
+    @media (max-width: 768px) {
+      padding: 1.4rem 2.6rem;
+    }
+}
+  `]
+})
+export class PageCrmDevelopment {
+    constructor(private location: Location) { } // 注入Location服务
+
+    // 新增goBack方法
+    goBack() {
+        this.location.back(); // 使用Angular的Location服务返回上一页
+    }
+}

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

@@ -1,109 +1,151 @@
-<!-- page-crm-home.html -->
-<section class="crm-home">
-  <!-- 智能Banner系统 -->
-  <section class="banner" id="home">
-    <div class="banner-content">
-      <h1 class="banner-title">三色映赣鄱,水墨链古今</h1>
-      <p class="banner-subtitle">江西省文化和旅游研究推广协会,以数字科技传承赣派文化,用创新设计演绎江西山水,打造虚实共生的文旅新体验。</p>
-      <a href="#platform" class="banner-btn">探索数智平台</a>
-    </div>
-    <div class="banner-bg"></div>
-  </section>
-  
-  <!-- 数智动态区 -->
-  <section class="dynamic-section" id="platform">
-    <h2 class="section-title">数智动态</h2>
-    <div class="dynamic-grid">
-      <div class="dynamic-card">
-        <div class="card-img" style="background-image: url('assets/images/digital-heritage.webp');"></div>
-        <div class="card-content">
-          <h3 class="card-title">数字非遗保护工程</h3>
-          <p class="card-desc">运用3D扫描与VR技术,对江西传统手工艺进行数字化存档与展示,让非遗文化永续传承。</p>
-          <a href="#" class="card-link">了解更多 →</a>
-        </div>
+<!-- 智能Banner系统 -->
+<section class="banner" id="home">
+  <div class="banner-content">
+    <h1 class="banner-title">三色映赣鄱,水墨链古今</h1>
+    <p class="banner-subtitle">江西省文化和旅游研究推广协会,以数字科技传承赣派文化,用创新设计演绎江西山水,打造虚实共生的文旅新体验。</p>
+    <a href="#platform" class="banner-btn">探索数智平台</a>
+  </div>
+  <div class="banner-bg"></div>
+</section>
+
+<!-- 数智动态区 -->
+<section class="dynamic-section" id="platform">
+  <h2 class="section-title">数智动态</h2>
+  <div class="dynamic-grid">
+    <div class="dynamic-card">
+      <div class="card-img" style="background-image: url('digital-heritage.jpg');"></div>
+      <div class="card-content">
+        <h3 class="card-title">数字非遗保护工程</h3>
+        <p class="card-desc">运用3D扫描与VR技术,对江西传统手工艺进行数字化存档与展示,让非遗文化永续传承。</p>
+        <a href="#" class="card-link">了解更多 →</a>
       </div>
-      <div class="dynamic-card">
-        <div class="card-img" style="background-image: url('assets/images/cultural-map.webp');"></div>
-        <div class="card-content">
-          <h3 class="card-title">江西文化基因图谱</h3>
-          <p class="card-desc">通过大数据分析,绘制江西文化元素关联网络,揭示赣鄱文化的深层结构与演变脉络。</p>
-          <a href="#" class="card-link">了解更多 →</a>
-        </div>
+    </div>
+    <div class="dynamic-card">
+      <div class="card-img" style="background-image: url('cultural-map.jpg');"></div>
+      <div class="card-content">
+        <h3 class="card-title">江西文化基因图谱</h3>
+        <p class="card-desc">通过大数据分析,绘制江西文化元素关联网络,揭示赣鄱文化的深层结构与演变脉络。</p>
+        <a href="#" class="card-link">了解更多 →</a>
       </div>
-      <div class="dynamic-card">
-        <div class="card-img" style="background-image: url('assets/images/smart-tourism.webp');"></div>
-        <div class="card-content">
-          <h3 class="card-title">智慧旅游解决方案</h3>
-          <p class="card-desc">整合AI导览、AR实景增强等技术,为江西景区提供全方位的数字化升级方案。</p>
-          <a href="#" class="card-link">了解更多 →</a>
-        </div>
+    </div>
+    <div class="dynamic-card">
+      <div class="card-img" style="background-image: url('smart-tourism.jpg');"></div>
+      <div class="card-content">
+        <h3 class="card-title">智慧旅游解决方案</h3>
+        <p class="card-desc">整合AI导览、AR实景增强等技术,为江西景区提供全方位的数字化升级方案。</p>
+        <a href="#" class="card-link">了解更多 →</a>
       </div>
     </div>
-  </section>
-  
-  <!-- 共创展示区 -->
-  <section class="co-creation-section" id="business">
-    <h2 class="section-title">共创成果展示</h2>
-    <div class="co-creation-slider">
-      <div class="co-creation-item">
-        <div class="cc-img" style="background-image: url('assets/images/co-creation1.webp');"></div>
-        <div class="cc-content">
-          <h3 class="cc-title">滕王阁AR诗词体验</h3>
-          <p class="cc-author">作者: 南昌文旅数字实验室</p>
-          <p>通过手机扫描实景,触发《滕王阁序》动态书法展示与语音朗诵,让游客沉浸式感受千年文脉。</p>
-        </div>
+  </div>
+</section>
+
+<!-- 共创展示区 -->
+<section class="co-creation-section" id="business">
+  <h2 class="section-title">共创成果展示</h2>
+  <div class="co-creation-slider">
+    <div class="co-creation-item">
+      <div class="cc-img" style="background-image: url('co-creation1.jpg');"></div>
+      <div class="cc-content">
+        <h3 class="cc-title">滕王阁AR诗词体验</h3>
+        <p class="cc-author">作者: 南昌文旅数字实验室</p>
+        <p>通过手机扫描实景,触发《滕王阁序》动态书法展示与语音朗诵,让游客沉浸式感受千年文脉。</p>
       </div>
-      <div class="co-creation-item">
-        <div class="cc-img" style="background-image: url('assets/images/co-creation2.webp');"></div>
-        <div class="cc-content">
-          <h3 class="cc-title">景德镇虚拟制瓷</h3>
-          <p class="cc-author">作者: 瓷都数字工匠团队</p>
-          <p>交互式模拟青花瓷制作全流程,从拉坯到绘彩,体验传统工艺的数字化演绎。</p>
-        </div>
+    </div>
+    <div class="co-creation-item">
+      <div class="cc-img" style="background-image: url('co-creation2.jpg');"></div>
+      <div class="cc-content">
+        <h3 class="cc-title">景德镇虚拟制瓷</h3>
+        <p class="cc-author">作者: 瓷都数字工匠团队</p>
+        <p>交互式模拟青花瓷制作全流程,从拉坯到绘彩,体验传统工艺的数字化演绎。</p>
       </div>
-      <div class="co-creation-item">
-        <div class="cc-img" style="background-image: url('assets/images/co-creation3.webp');"></div>
-        <div class="cc-content">
-          <h3 class="cc-title">井冈山红色记忆</h3>
-          <p class="cc-author">作者: 赣南数媒创新中心</p>
-          <p>基于地理位置的革命故事推送系统,在实景中叠加历史影像与互动问答。</p>
-        </div>
+    </div>
+    <div class="co-creation-item">
+      <div class="cc-img" style="background-image: url('co-creation3.jpg');"></div>
+      <div class="cc-content">
+        <h3 class="cc-title">井冈山红色记忆</h3>
+        <p class="cc-author">作者: 赣南数媒创新中心</p>
+        <p>基于地理位置的革命故事推送系统,在实景中叠加历史影像与互动问答。</p>
       </div>
-      <div class="co-creation-item">
-        <div class="cc-img" style="background-image: url('assets/images/co-creation4.webp');"></div>
-        <div class="cc-content">
-          <h3 class="cc-title">婺源四季农事历</h3>
-          <p class="cc-author">作者: 乡村数字复兴小组</p>
-          <p>可视化呈现传统农耕节律,结合气象数据提供农事活动建议与民俗体验预约。</p>
-        </div>
+    </div>
+    <div class="co-creation-item">
+      <div class="cc-img" style="background-image: url('co-creation4.jpg');"></div>
+      <div class="cc-content">
+        <h3 class="cc-title">婺源四季农事历</h3>
+        <p class="cc-author">作者: 乡村数字复兴小组</p>
+        <p>可视化呈现传统农耕节律,结合气象数据提供农事活动建议与民俗体验预约。</p>
       </div>
     </div>
-  </section>
-  
-  <!-- 协会智能体 -->
-  <section class="ai-section" id="service">
-    <div class="ai-container">
-      <h2 class="ai-title">协会智能体</h2>
-      <p class="ai-desc">我们开发的AI文化助手"赣小文",集成了江西历史文化大数据,可提供智能问答、个性化推荐、文创设计辅助等服务,是您探索赣鄱文化的数字向导。</p>
-      <a href="#" class="banner-btn">体验智能服务</a>
-      
-      <div class="ai-features">
-        <div class="ai-feature">
-          <div class="ai-icon">✍️</div>
-          <h3 class="ai-feature-title">文化问答</h3>
-          <p>解答江西历史、民俗、非遗等各类文化问题</p>
-        </div>
-        <div class="ai-feature">
-          <div class="ai-icon">🗺️</div>
-          <h3 class="ai-feature-title">行程规划</h3>
-          <p>根据兴趣定制个性化文旅路线与活动推荐</p>
-        </div>
-        <div class="ai-feature">
-          <div class="ai-icon">🎨</div>
-          <h3 class="ai-feature-title">创意辅助</h3>
-          <p>提供文创设计灵感与赣派元素数字化素材</p>
-        </div>
+  </div>
+</section>
+
+<!-- 协会智能体 -->
+<section class="ai-section" id="service">
+  <div class="ai-container">
+    <h2 class="ai-title">协会智能体</h2>
+    <p class="ai-desc">我们开发的AI文化助手"赣小文",集成了江西历史文化大数据,可提供智能问答、个性化推荐、文创设计辅助等服务,是您探索赣鄱文化的数字向导。</p>
+    <a href="#" class="banner-btn">体验智能服务</a>
+    
+    <div class="ai-features">
+      <div class="ai-feature">
+        <div class="ai-icon">✍️</div>
+        <h3 class="ai-feature-title">文化问答</h3>
+        <p>解答江西历史、民俗、非遗等各类文化问题</p>
       </div>
+      <div class="ai-feature">
+        <div class="ai-icon">🗺️</div>
+        <h3 class="ai-feature-title">行程规划</h3>
+        <p>根据兴趣定制个性化文旅路线与活动推荐</p>
+      </div>
+      <div class="ai-feature">
+        <div class="ai-icon">🎨</div>
+        <h3 class="ai-feature-title">创意辅助</h3>
+        <p>提供文创设计灵感与赣派元素数字化素材</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- 页脚 -->
+<footer class="footer">
+  <div class="footer-grid">
+    <div class="footer-col">
+      <h3>关于协会</h3>
+      <ul class="footer-links">
+        <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-col">
+      <h3>会员服务</h3>
+      <ul class="footer-links">
+        <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-col">
+      <h3>项目合作</h3>
+      <ul class="footer-links">
+        <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-col">
+      <h3>关注我们</h3>
+      <ul class="footer-links">
+        <li><a href="#">微信公众号</a></li>
+        <li><a href="#">微博</a></li>
+        <li><a href="#">抖音</a></li>
+        <li><a href="#">Bilibili</a></li>
+      </ul>
     </div>
-  </section>
-</section>
+  </div>
+  <div class="footer-bottom">
+    <p>© 2023 江西省文化和旅游研究推广协会 | 赣ICP备XXXXXXXX号 | 设计遵循"三色映赣鄱,水墨链古今"理念</p>
+  </div>
+</footer>

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

@@ -1,5 +1,27 @@
-/* page-crm-home.scss */
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
+/* 全局样式 */
+:host {
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "阿里巴巴普惠体", sans-serif;
+  }
+  
+  body {
+    background-color: #f8f4e8;
+    background-image: url('/assets/images/paper-texture.webp');
+    color: #333;
+    line-height: 1.6;
+  }
+}
+
+/* 自定义字体 - 修正路径 */
+@font-face {
+  font-family: "赣锋体";
+  src: url('/assets/fonts/ganfeng.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
 
 /* 主色调定义 */
 :root {
@@ -11,95 +33,85 @@
   --secondary-white: #F0F0F0; /* 鄱阳湖银白 */
 }
 
-.crm-home {
-  /* 全局样式 */
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: "Noto Sans SC", "阿里巴巴普惠体", sans-serif;
+/* 智能Banner区域 */
+.banner {
+  height: 500px;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(to bottom, #f8f4e8, #e8e0d0);
+  
+  .banner-content {
+    position: absolute;
+    top: 50%;
+    left: 10%;
+    transform: translateY(-50%);
+    z-index: 3;
+    max-width: 40%;
   }
   
-  /* 智能Banner区域 */
-  .banner {
-    height: 500px;
-    position: relative;
-    overflow: hidden;
-    background: linear-gradient(to bottom, #f8f4e8, #e8e0d0);
-    
-    &-content {
-      position: absolute;
-      top: 50%;
-      left: 10%;
-      transform: translateY(-50%);
-      z-index: 3;
-      max-width: 40%;
-    }
-    
-    &-title {
-      font-family: "Noto Serif SC", serif;
-      font-size: 3rem;
-      color: var(--primary-blue);
-      margin-bottom: 1rem;
-      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-    }
-    
-    &-subtitle {
-      font-size: 1.2rem;
-      color: var(--secondary-gray);
-      margin-bottom: 2rem;
-      line-height: 1.8;
-    }
+  .banner-title {
+    font-family: "赣锋体", serif;
+    font-size: 3rem;
+    color: var(--primary-blue);
+    margin-bottom: 1rem;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+  }
+  
+  .banner-subtitle {
+    font-size: 1.2rem;
+    color: var(--secondary-gray);
+    margin-bottom: 2rem;
+    line-height: 1.8;
+  }
+  
+  .banner-btn {
+    display: inline-block;
+    padding: 0.8rem 2rem;
+    background-color: var(--primary-gold);
+    color: white;
+    text-decoration: none;
+    border-radius: 30px;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     
-    &-btn {
-      display: inline-block;
-      padding: 0.8rem 2rem;
-      background-color: var(--primary-gold);
-      color: white;
-      text-decoration: none;
-      border-radius: 30px;
-      font-weight: bold;
-      transition: all 0.3s ease;
-      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-      
-      &:hover {
-        background-color: #c9a055;
-        transform: translateY(-3px);
-        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
-      }
+    &:hover {
+      background-color: #c9a055;
+      transform: translateY(-3px);
+      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
     }
+  }
+  
+  .banner-bg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 60%;
+    background: url('/assets/images/jiangxi-landscape.webp') center right no-repeat;
+    background-size: contain;
+    opacity: 0.9;
     
-    &-bg {
+    &::after {
+      content: "";
       position: absolute;
       top: 0;
+      left: 0;
       right: 0;
-      height: 100%;
-      width: 60%;
-      background: "url('assets/images/jiangxi-landscape.webp')" center right no-repeat;
-      background-size: contain;
-      opacity: 0.9;
-      
-      &::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: radial-gradient(circle at 70% 50%, transparent 30%, rgba(248,244,232,0.8));
-      }
+      bottom: 0;
+      background: radial-gradient(circle at 70% 50%, transparent 30%, rgba(248,244,232,0.8));
     }
   }
-  
-  /* 数智动态区 */
-  .dynamic-section {
-    padding: 4rem 10%;
-    background-color: white;
-    position: relative;
-  }
+}
+
+/* 数智动态区 */
+.dynamic-section {
+  padding: 4rem 10%;
+  background-color: white;
+  position: relative;
   
   .section-title {
-    font-family: "Noto Serif SC", serif;
+    font-family: "赣锋体", serif;
     font-size: 2.2rem;
     color: var(--primary-blue);
     text-align: center;
@@ -120,87 +132,87 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
-  }
-  
-  .dynamic-card {
-    background-color: white;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-    transition: all 0.3s ease;
-    position: relative;
     
-    &:hover {
-      transform: translateY(-10px);
-      box-shadow: 0 12px 24px rgba(0,0,0,0.12);
-    }
-  }
-  
-  .card-img {
-    height: 200px;
-    background-size: cover;
-    background-position: center;
-    position: relative;
-    
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.6));
-    }
-  }
-  
-  .card-content {
-    padding: 1.5rem;
-  }
-  
-  .card-title {
-    font-size: 1.3rem;
-    color: var(--primary-blue);
-    margin-bottom: 0.8rem;
-  }
-  
-  .card-desc {
-    color: var(--secondary-gray);
-    margin-bottom: 1.5rem;
-    font-size: 0.95rem;
-  }
-  
-  .card-link {
-    display: inline-block;
-    color: var(--primary-gold);
-    text-decoration: none;
-    font-weight: bold;
-    position: relative;
-    
-    &::after {
-      content: "";
-      position: absolute;
-      bottom: -2px;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: var(--primary-gold);
-      transition: transform 0.3s ease;
-      transform-origin: right;
-      transform: scaleX(0);
-    }
-    
-    &:hover::after {
-      transform-origin: left;
-      transform: scaleX(1);
+    .dynamic-card {
+      background-color: white;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+      transition: all 0.3s ease;
+      position: relative;
+      
+      &:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
+      }
+      
+      .card-img {
+        height: 200px;
+        background-size: cover;
+        background-position: center;
+        position: relative;
+        
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.6));
+        }
+      }
+      
+      .card-content {
+        padding: 1.5rem;
+        
+        .card-title {
+          font-size: 1.3rem;
+          color: var(--primary-blue);
+          margin-bottom: 0.8rem;
+        }
+        
+        .card-desc {
+          color: var(--secondary-gray);
+          margin-bottom: 1.5rem;
+          font-size: 0.95rem;
+        }
+        
+        .card-link {
+          display: inline-block;
+          color: var(--primary-gold);
+          text-decoration: none;
+          font-weight: bold;
+          position: relative;
+          
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background-color: var(--primary-gold);
+            transition: transform 0.3s ease;
+            transform-origin: right;
+            transform: scaleX(0);
+          }
+          
+          &:hover::after {
+            transform-origin: left;
+            transform: scaleX(1);
+          }
+        }
+      }
     }
   }
-  
-  /* 共创展示区 */
-  .co-creation-section {
-    padding: 4rem 10%;
-    background-color: #f5f9f5;
-    position: relative;
-  }
+}
+
+/* 共创展示区 */
+.co-creation-section {
+  padding: 4rem 10%;
+  background-color: #f5f9f5;
+  position: relative;
   
   .co-creation-slider {
     display: flex;
@@ -208,132 +220,188 @@
     overflow-x: auto;
     padding: 1rem 0;
     scroll-snap-type: x mandatory;
+    
+    .co-creation-item {
+      min-width: 300px;
+      scroll-snap-align: start;
+      background-color: white;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+      
+      .cc-img {
+        height: 180px;
+        background-size: cover;
+        background-position: center;
+      }
+      
+      .cc-content {
+        padding: 1.5rem;
+        
+        .cc-title {
+          font-size: 1.2rem;
+          color: var(--primary-green);
+          margin-bottom: 0.5rem;
+        }
+        
+        .cc-author {
+          color: var(--secondary-gray);
+          font-size: 0.9rem;
+          margin-bottom: 1rem;
+        }
+      }
+    }
   }
-  
-  .co-creation-item {
-    min-width: 300px;
-    scroll-snap-align: start;
-    background-color: white;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-  }
-  
-  .cc-img {
-    height: 180px;
-    background-size: cover;
-    background-position: center;
-  }
-  
-  .cc-content {
-    padding: 1.5rem;
-  }
-  
-  .cc-title {
-    font-size: 1.2rem;
-    color: var(--primary-green);
-    margin-bottom: 0.5rem;
-  }
-  
-  .cc-author {
-    color: var(--secondary-gray);
-    font-size: 0.9rem;
-    margin-bottom: 1rem;
-  }
-  
-  /* 协会智能体 */
-  .ai-section {
-    padding: 4rem 10%;
-    background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
-    color: white;
-    text-align: center;
-  }
+}
+
+/* 协会智能体 */
+.ai-section {
+  padding: 4rem 10%;
+  background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
+  color: white;
+  text-align: center;
   
   .ai-container {
     max-width: 800px;
     margin: 0 auto;
+    
+    .ai-title {
+      font-family: "赣锋体", serif;
+      font-size: 2.5rem;
+      margin-bottom: 1.5rem;
+    }
+    
+    .ai-desc {
+      margin-bottom: 2rem;
+      font-size: 1.1rem;
+      line-height: 1.8;
+    }
+    
+    .ai-features {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 2rem;
+      margin-top: 3rem;
+      
+      .ai-feature {
+        background-color: rgba(255,255,255,0.1);
+        padding: 1.5rem;
+        border-radius: 8px;
+        backdrop-filter: blur(5px);
+        transition: all 0.3s ease;
+        
+        &:hover {
+          background-color: rgba(255,255,255,0.2);
+          transform: translateY(-5px);
+        }
+        
+        .ai-icon {
+          font-size: 2.5rem;
+          margin-bottom: 1rem;
+          color: var(--primary-gold);
+        }
+        
+        .ai-feature-title {
+          font-size: 1.2rem;
+          margin-bottom: 0.5rem;
+        }
+      }
+    }
   }
+}
+
+/* 页脚 */
+.footer {
+  background-color: #2a2a2a;
+  color: white;
+  padding: 4rem 10% 2rem;
   
-  .ai-title {
-    font-family: "Noto Serif SC", serif;
-    font-size: 2.5rem;
-    margin-bottom: 1.5rem;
+  .footer-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 3rem;
+    margin-bottom: 3rem;
+    
+    .footer-col {
+      h3 {
+        font-size: 1.3rem;
+        margin-bottom: 1.5rem;
+        color: var(--primary-gold);
+      }
+      
+      .footer-links {
+        list-style: none;
+        
+        li {
+          margin-bottom: 0.8rem;
+          
+          a {
+            color: #ccc;
+            text-decoration: none;
+            transition: color 0.3s ease;
+            
+            &:hover {
+              color: var(--primary-gold);
+            }
+          }
+        }
+      }
+    }
   }
   
-  .ai-desc {
-    margin-bottom: 2rem;
-    font-size: 1.1rem;
-    line-height: 1.8;
+  .footer-bottom {
+    text-align: center;
+    padding-top: 2rem;
+    border-top: 1px solid #444;
+    color: #999;
+    font-size: 0.9rem;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+  .dynamic-grid {
+    grid-template-columns: repeat(2, 1fr) !important;
   }
   
   .ai-features {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 2rem;
-    margin-top: 3rem;
+    grid-template-columns: repeat(2, 1fr) !important;
   }
   
-  .ai-feature {
-    background-color: rgba(255,255,255,0.1);
-    padding: 1.5rem;
-    border-radius: 8px;
-    backdrop-filter: blur(5px);
-    transition: all 0.3s ease;
+  .footer-grid {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .banner {
+    height: auto !important;
+    padding: 3rem 1rem !important;
     
-    &:hover {
-      background-color: rgba(255,255,255,0.2);
-      transform: translateY(-5px);
+    .banner-content {
+      position: static !important;
+      transform: none !important;
+      max-width: 100% !important;
+      text-align: center !important;
+    }
+    
+    .banner-bg {
+      position: relative !important;
+      width: 100% !important;
+      height: 300px !important;
+      margin-top: 2rem !important;
     }
   }
   
-  .ai-icon {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-    color: var(--primary-gold);
-  }
-  
-  .ai-feature-title {
-    font-size: 1.2rem;
-    margin-bottom: 0.5rem;
+  .dynamic-grid {
+    grid-template-columns: 1fr !important;
   }
   
-  /* 响应式设计 */
-  @media (max-width: 1024px) {
-    .dynamic-grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
-    
-    .ai-features {
-      grid-template-columns: repeat(2, 1fr);
-    }
+  .ai-features {
+    grid-template-columns: 1fr !important;
   }
   
-  @media (max-width: 768px) {
-    .banner {
-      height: auto;
-      padding: 3rem 1rem;
-      
-      &-content {
-        position: static;
-        transform: none;
-        max-width: 100%;
-        text-align: center;
-      }
-      
-      &-bg {
-        position: relative;
-        width: 100%;
-        height: 300px;
-        margin-top: 2rem;
-      }
-    }
-    
-    .dynamic-grid {
-      grid-template-columns: 1fr;
-    }
-    
-    .ai-features {
-      grid-template-columns: 1fr;
-    }
+  .footer-grid {
+    grid-template-columns: 1fr !important;
   }
 }

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

@@ -1,16 +1,18 @@
-<!-- Banner区域 -->
+<!-- page-crm-system.html -->
+<!-- Banner区域 - 添加背景图案和动画 -->
 <section class="support-banner">
     <div class="banner-content">
         <h1 class="banner-title">数智支撑系统</h1>
         <p class="banner-subtitle">为江西文旅数字化提供坚实技术底座,融合前沿技术构建安全、智能、高效的文旅数字基础设施</p>
+        <div class="banner-pattern"></div>
     </div>
 </section>
 
-<!-- 智能中台 -->
+<!-- 智能中台 - 添加点击跳转 -->
 <section class="section" id="intelligence">
     <h2 class="section-title">智能中台</h2>
     <div class="module-container">
-        <div class="module-card">
+        <div class="module-card" routerLink="/mobile/development">
             <div class="module-header">
                 <div class="module-icon">🧠</div>
                 <h3 class="module-title">大模型引擎</h3>
@@ -43,7 +45,7 @@
             </div>
         </div>
         
-        <div class="module-card">
+        <div class="module-card" routerLink="/mobile/development">
             <div class="module-header">
                 <div class="module-icon">🕸️</div>
                 <h3 class="module-title">知识图谱管理</h3>
@@ -76,7 +78,7 @@
             </div>
         </div>
         
-        <div class="module-card">
+        <div class="module-card" routerLink="/mobile/development">
             <div class="module-header">
                 <div class="module-icon">📱</div>
                 <h3 class="module-title">多终端适配</h3>
@@ -111,11 +113,11 @@
     </div>
 </section>
 
-<!-- 数据治理 -->
+<!-- 数据治理 - 添加点击跳转 -->
 <section class="section" id="data">
     <h2 class="section-title">数据治理</h2>
     <div class="module-container">
-        <div class="module-card">
+        <div class="module-card" routerLink="/mobile/development">
             <div class="module-header">
                 <div class="module-icon">🧹</div>
                 <h3 class="module-title">AI清洗工具</h3>
@@ -148,7 +150,7 @@
             </div>
         </div>
         
-        <div class="module-card">
+        <div class="module-card" routerLink="/mobile/development">
             <div class="module-header">
                 <div class="module-icon">⛓️</div>
                 <h3 class="module-title">区块链存证</h3>
@@ -181,7 +183,7 @@
             </div>
         </div>
         
-        <div class="module-card">
+        <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>
                 <h3 class="module-title">敏感词过滤</h3>
@@ -216,7 +218,7 @@
     </div>
 </section>
 
-<!-- 权限管理 -->
+<!-- 权限管理 - 添加点击跳转 -->
 <section class="section" id="permission">
     <h2 class="section-title">权限管理系统</h2>
     
@@ -293,7 +295,7 @@
     </div>
 </section>
 
-<!-- 页脚 -->
+<!-- 页脚 - 添加社交媒体图标 -->
 <footer class="footer">
     <div class="footer-links">
         <a routerLink="/about">关于协会</a>
@@ -301,6 +303,11 @@
         <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>
     <div class="footer-bottom">
         <p>© 2023 江西省文化和旅游研究推广协会 | 赣ICP备XXXXXXXX号</p>
     </div>

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

@@ -319,4 +319,141 @@
   .section {
     padding: 2rem 5%;
   }
+}
+
+/* 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);
+  }
+}
+
+/* 权限标签 - 添加悬停效果 */
+.tab-btn {
+  transition: all 0.3s;
+  
+  &:hover:not(.active) {
+    background-color: rgba(47, 125, 173, 0.1);
+  }
+}
+
+/* 页脚 - 添加社交媒体图标样式 */
+.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);
+  }
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式设计 - 优化移动端体验 */
+@media (max-width: 768px) {
+  .module-card {
+    flex: 1 1 100%;
+  }
+  
+  .permission-tabs {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .tab-btn {
+    width: 100%;
+    text-align: center;
+  }
 }

+ 1 - 0
travel-platform-web/travel-web/src/crm/mobile/page-crm-system/page-crm-system.ts

@@ -1,3 +1,4 @@
+// page-crm-system.ts
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';