feat:images-travel-diagram

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

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

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

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

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

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

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

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

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

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

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

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