new24

travel-app/src/app/page-recommend/page-recommend.component.html

@@ -0,0 +1,489 @@
+<ion-header>
+  
+  <ion-segment value="food" (ionChange)="segmentChanged($event)">
+    <ion-segment-button value="food">
+      美食
+    </ion-segment-button>
+    <ion-segment-button value="attractions">
+      景点
+    </ion-segment-button>
+    <ion-segment-button value="restaurants">
+      饭店
+    </ion-segment-button>
+    <ion-segment-button value="lodging">
+      旅店
+    </ion-segment-button>
+  </ion-segment>
+</ion-header>
+
+<ion-content>
+  <div *ngIf="selectedSegment === 'food'">
+    <!-- 在这里添加美食相关内容 -->
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/拌粉.jpg" />
+      <ion-card-header>
+        <ion-card-title>南昌拌粉</ion-card-title>
+        <ion-card-subtitle>人均3-5元</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>口味:口感爽滑,美味鲜香</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/瓦罐汤.jpg" />
+      <ion-card-header>
+        <ion-card-title>南昌瓦罐汤</ion-card-title>
+        <ion-card-subtitle>人均约5元</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>口味:鲜香浓郁，汤汁醇厚</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/白糖糕.jpg" />
+      <ion-card-header>
+        <ion-card-title>白糖糕</ion-card-title>
+        <ion-card-subtitle>人均2元/个</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>口味:甜食爱好者必选</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/水煮.jpg" />
+      <ion-card-header>
+        <ion-card-title>水煮</ion-card-title>
+        <ion-card-subtitle>人均15-20元</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <!-- 推荐指数 -->
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>辣度:</strong>
+          <span *ngFor="let chili of [1, 2, 3, 4]">
+            <ion-icon name="flame"></ion-icon>
+          </span>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/油炸.jpg" />
+      <ion-card-header>
+        <ion-card-title>油炸</ion-card-title>
+        <ion-card-subtitle>人均15-20元</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <!-- 推荐指数 -->
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>辣度:</strong>
+          <span *ngFor="let chili of [1, 2, 3, 4]">
+            <ion-icon name="flame"></ion-icon>
+          </span>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/藜蒿炒腊肉.jpg" />
+      <ion-card-header>
+        <ion-card-title>藜蒿炒腊肉</ion-card-title>
+        <ion-card-subtitle>冬季家常必备菜</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <!-- 推荐指数 -->
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>辣度:</strong>
+          <span *ngFor="let chili of [1, 2]">
+            <ion-icon name="flame"></ion-icon>
+          </span>
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </div>
+  
+  <div *ngIf="selectedSegment === 'attractions'">
+    <!-- 在这里添加景点相关内容 -->
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/滕王阁.jpg" />
+      <ion-card-header>
+        <ion-card-title>滕王阁(5A级景区)</ion-card-title>
+        <ion-card-subtitle>滕王阁是中国古代四大名楼之一,历史悠久,始建于公元653年。它因王勃的《滕王阁序》而闻名,阁内有丰富的文化底蕴和精美的建筑风格。游客可以欣赏到赣江的美丽景色。</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>开放时间:08:00-18:30</strong>
+        </div>
+        <div>
+          <strong>推荐游玩季节:春秋季节最佳，气候宜人</strong>
+        </div>
+        <div>
+          <strong>地址:江西省南昌市东湖区仿古街58号</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/八一起义.jpg" />
+      <ion-card-header>
+        <ion-card-title>南昌八一起义纪念馆(5A级景区)</ion-card-title>
+        <ion-card-subtitle>南昌八一起义纪念馆的前身为“江西大旅社”。1927年7月下旬,参加起义的部队包租下这幢旅社,在“喜庆厅”召开会议,成立了以周恩来为书记的中共前敌委员会:8月1日中国共产党发动了南昌起义:后又多次在此举行会议，成为领导起义的指挥中心。</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>开放时间:星期二到星期日,每天9:00 ~ 17:00(排队验证时间:上午9:00至下午16:30);星期一闭馆</strong>
+        </div>
+        <div>
+          <strong>推荐游玩季节:全年均可,适合任何季节。</strong>
+        </div>
+        <div>
+          <strong>地址:江西省南昌市中山路380号</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/海昏侯.jpg" />
+      <ion-card-header>
+        <ion-card-title>南昌汉代海昏侯国遗址(国家一级博物馆)</ion-card-title>
+        <ion-card-subtitle>南昌汉代海昏侯国遗址是中国汉代的一个重要考古遗址，展示了汉代王侯的生活和文化。遗址内有丰富的文物和结构，体现了汉代的辉煌历史。</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>开放时间:9:00—17:00(游客中心16:00停止售检票)</strong>
+        </div>
+        <div>
+          <strong>推荐游玩季节:春秋季节最佳，适合户外活动</strong>
+        </div>
+        <div>
+          <strong>地址:江西省南昌市新建区大塘坪乡关西村</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/市博.jpg" />
+      <ion-card-header>
+        <ion-card-title>南昌市博物馆(综合性地志博物馆)</ion-card-title>
+        <ion-card-subtitle>截至2022年底,馆有藏品数量10325件/套,有珍贵文物657件/套,经江西省文物鉴定小组鉴定,其中一级文物推荐7件,二级文物68件,三级文物400余件,年度观众总数为1376110人。</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <!-- 推荐指数 -->
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>开放时间:8:00-17:00</strong>
+        </div>
+        <div>
+          <strong>推荐游玩季节:全年均可，适合任何季节</strong>
+        </div>
+        <div>
+          <strong>地址:江西省南昌市象湖景区旁</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+  </div>
+  
+  <div *ngIf="selectedSegment === 'restaurants'">
+    <!-- 在这里添加饭店相关内容 -->
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/铭门.jpg" />
+      <ion-card-header>
+        <ion-card-title>铭门家宴</ion-card-title>
+        <ion-card-subtitle>人均78元</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>必点菜品:松鼠桂鱼、脆皮乳鸽、招牌深井烧鹅、烧汁鲜虾茄盒、黑松露龙虾炒饭</strong>
+        </div>
+        <div>
+          <strong>营业时间:11：00-14：00,17：00-21：00</strong>
+        </div>
+        <div>
+          <strong>地址:青山湖区北京西路东航大厦</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/老三样.jpg" />
+      <ion-card-header>
+        <ion-card-title>老三样.美食传承馆</ion-card-title>
+        <ion-card-subtitle>人均61元</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>辣度:</strong>
+          <span *ngFor="let chili of [1, 2, 3, 4, 5]">
+            <ion-icon name="flame"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>必点菜品:石锅红虾薯粉、老式白糖糕、爆辣皮皮虾、自助小黄鱼</strong>
+        </div>
+        <div>
+          <strong>营业时间:11:00-13:30,17:00-20:30</strong>
+        </div>
+        <div>
+          <strong>地址:西湖区中山路万寿宫历史文化街区B32-35号</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/打平火.jpg" />
+      <ion-card-header>
+        <ion-card-title>打平火.鲜辣小炒</ion-card-title>
+        <ion-card-subtitle>人均62元</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>辣度:</strong>
+          <span *ngFor="let chili of [1, 2, 3, 4, 5]">
+            <ion-icon name="flame"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>必点菜品:绝味牛蛙、烧大鸡脚、蘸汁油浸鱼、火爆甲鱼仔</strong>
+        </div>
+        <div>
+          <strong>营业时间:11:00—14:00,17:00-21:00</strong>
+        </div>
+        <div>
+          <strong>地址:西湖区船山路636号万寿宫历史文化街区B1、B2栋</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/食在鲜.jpg" />
+      <ion-card-header>
+        <ion-card-title>食在鲜.地道南昌菜</ion-card-title>
+        <ion-card-subtitle>人均47元</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <!-- 推荐指数 -->
+        <div>
+          <strong>推荐指数:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>必点菜品:金牌鸡脚、砂锅牛仔骨、鲜辣油浸鱼、粉蒸排骨</strong>
+        </div>
+        <div>
+          <strong>营业时间:11:00-00:00</strong>
+        </div>
+        <div>
+          <strong>地址:西湖区金盘路237号(广场东路宜尚酒店、回忆童年旁巷内第三家)</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </div>
+  
+  <div *ngIf="selectedSegment === 'lodging'">
+    <!-- 在这里添加旅店相关内容 -->
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/梵铂.jpg" />
+      <ion-card-header>
+        <ion-card-title>梵铂国际酒店</ion-card-title>
+        <ion-card-subtitle>装修亮丽、性价比高、服务周到，放心冲！</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>星级:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>评分:5.0/5.0</strong>
+        </div>
+        <div>
+          <strong>价格:133起</strong>
+        </div>
+        <div>
+          <strong>地址:洪都中大道899号</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/百瑞.jpg" />
+      <ion-card-header>
+        <ion-card-title>南昌百瑞四季酒店</ion-card-title>
+        <ion-card-subtitle>位于市中心,交通便利,风景开阔</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>星级:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>评分:3.9/5.0</strong>
+        </div>
+        <div>
+          <strong>价格:188起</strong>
+        </div>
+        <div>
+          <strong>地址:彭家桥街道洪都北大道10号</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/高朋.jpg" />
+      <ion-card-header>
+        <ion-card-title>南昌高朋酒店</ion-card-title>
+        <ion-card-subtitle>WIFI速度超快,卫生干净,地理位置良好</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <div>
+          <strong>星级:</strong>
+          <span *ngFor="let star of [1, 2, 3]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>评分:4.6/5.0</strong>
+        </div>
+        <div>
+          <strong>价格:153起</strong>
+        </div>
+        <div>
+          <strong>地址:北京西路437号江西师范大学学术交流中心</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+
+    <ion-card>
+      <img alt="Silhouette of mountains" src="./assets/img/希岸.jpg" />
+      <ion-card-header>
+        <ion-card-title>希岸酒店</ion-card-title>
+        <ion-card-subtitle>酒店环境很好,靠近万寿宫、珠宝街、滕王阁,交通方便</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        <!-- 推荐指数 -->
+        <div>
+          <strong>星级:</strong>
+          <span *ngFor="let star of [1, 2, 3, 4, 5]">
+            <ion-icon name="star"></ion-icon>
+          </span>
+        </div>
+        <div>
+          <strong>评分:5.0/5.0</strong>
+        </div>
+        <div>
+          <strong>价格:192起</strong>
+        </div>
+        <div>
+          <strong>地址:滕王阁步行街.胜利路287号</strong>
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+</ion-content>

travel-app/src/app/page-recommend/page-recommend.component.scss

@@ -0,0 +1,40 @@
+.calendar {
+    padding: 20px;
+    
+    .months {
+      display: flex;
+      flex-wrap: wrap;
+      
+      .month {
+        flex: 1 1 20%;
+        margin: 10px;
+        
+        .days {
+          display: flex;
+          flex-wrap: wrap;
+          
+          .day {
+            width: 30px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 2px;
+            cursor: pointer;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            
+            &.starred {
+              background-color: yellow;
+            }
+          }
+        }
+      }
+    }
+    
+    .event-details {
+      margin-top: 20px;
+      border: 1px solid #ccc;
+      padding: 10px;
+    }
+  }

travel-app/src/app/page-recommend/page-recommend.component.spec.ts

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

travel-app/src/app/page-recommend/page-recommend.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { addIcons } from 'ionicons';
+import { flame,star} from 'ionicons/icons';
+
+@Component({
+  selector: 'app-page-recommend',
+  templateUrl: './page-recommend.component.html',
+  styleUrls: ['./page-recommend.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonicModule,
+    FormsModule,
+  ],
+})
+export class PageRecommendComponent  implements OnInit {
+  selectedSegment: string = 'food'; // 默认选中美食
+
+  constructor() { 
+      addIcons({ flame,star});
+  }
+
+  ngOnInit() {}
+  
+
+  segmentChanged(event: any) {
+    this.selectedSegment = event.detail.value; // 更新选中的段
+  }
+
+}

travel-app/src/app/tab1/tab1.page.html

@@ -32,7 +32,7 @@
               <app-edittag
                 iconName="people"
                 label="一起游"
-                route="/play-together"
+                (click)="goToPage1()"
               ></app-edittag>
             </ion-col>
             <ion-col size="4">

travel-app/src/app/tab1/tab1.page.ts

@@ -89,6 +89,9 @@ export class Tab1Page {
       chatbubbles: chatbubbles,
     });
   }
+  goToPage1(){
+    this.router.navigate(['/tabs/recommend'])
+  }
   articles = [
     { title: '探索南昌的历史', summary: '南昌的历史悠久，让我们一起探索...' },
     { title: '最佳旅游季节', summary: '了解在什么时间去南昌旅游最合适...' },

travel-app/src/app/tabs/tabs.routes.ts

@@ -31,7 +31,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../explore-container/explore-container.component').then((m) => m.ExploreContainerComponent),
       },
-      
+      {
+        path: 'recommend',
+        loadComponent: () =>
+          import('../page-recommend/page-recommend.component').then((m) => m.PageRecommendComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',