new12

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

@@ -1,130 +1,20 @@
-<ion-app>
-  <ion-header>
-    <ion-toolbar color="primary">
-      <ion-title>南昌旅游App</ion-title>
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      智韵云游————南昌
+    </ion-title>
+  </ion-toolbar>
+  <ion-searchbar color="light" placeholder="Light" showCancelButton="focus" class="custom">
+  
+  </ion-searchbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tab 1</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <ion-content>
-
-    <!-- 热门推荐 -->
-    <ion-grid>
-      <ion-row>
-        <ion-col *ngFor="let item of hotRecommendations" size="6">
-          <ion-card>
-            <img [src]="item.image" />
-            <ion-card-header>
-              <ion-card-title>{{ item.title }}</ion-card-title>
-            </ion-card-header>
-            <ion-card-content>
-              {{ item.description }}
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-
-    <!-- 导航栏 -->
-    <ion-tabs>
-      <ion-tab-bar slot="bottom">
-        <ion-tab-button tab="home">
-          <ion-icon name="home"></ion-icon>
-          <ion-label>首页</ion-label>
-        </ion-tab-button>
-        <ion-tab-button tab="attractions">
-          <ion-icon name="pin"></ion-icon>
-          <ion-label>景点</ion-label>
-        </ion-tab-button>
-        <ion-tab-button tab="food">
-          <ion-icon name="restaurant"></ion-icon>
-          <ion-label>美食</ion-label>
-        </ion-tab-button>
-        <ion-tab-button tab="lodging">
-          <ion-icon name="bed"></ion-icon>
-          <ion-label>住宿</ion-label>
-        </ion-tab-button>
-        <ion-tab-button tab="guide">
-          <ion-icon name="book"></ion-icon>
-          <ion-label>攻略</ion-label>
-        </ion-tab-button>
-        <ion-tab-button tab="events">
-          <ion-icon name="calendar"></ion-icon>
-          <ion-label>活动</ion-label>
-        </ion-tab-button>
-        <ion-tab-button tab="profile">
-          <ion-icon name="person"></ion-icon>
-          <ion-label>个人中心</ion-label>
-        </ion-tab-button>
-      </ion-tab-bar>
-    </ion-tabs>
-
-    <!-- 特色活动/优惠信息 -->
-    <ion-list>
-      <ion-item *ngFor="let event of events">
-        <ion-thumbnail slot="start">
-          <img [src]="event.image" />
-        </ion-thumbnail>
-        <ion-label>
-          <h2>{{ event.title }}</h2>
-          <p>{{ event.description }}</p>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-
-    <!-- 个性化推荐 -->
-    <ion-list>
-      <ion-item *ngFor="let recommendation of personalizedRecommendations">
-        <ion-label>
-          <h2>{{ recommendation.title }}</h2>
-          <p>{{ recommendation.description }}</p>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-
-    <!-- 旅游攻略 -->
-    <ion-list>
-      <ion-item *ngFor="let guide of travelGuides">
-        <ion-label>
-          <h2>{{ guide.title }}</h2>
-          <p>{{ guide.description }}</p>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-
-    <!-- 用户互动区域 -->
-    <ion-list>
-      <ion-item *ngFor="let post of travelPosts">
-        <ion-avatar slot="start">
-          <img [src]="post.avatar" />
-        </ion-avatar>
-        <ion-label>
-          <h2>{{ post.username }}</h2>
-          <p>{{ post.content }}</p>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-
-    <!-- 搜索功能 -->
-    <ion-searchbar placeholder="搜索景点、美食、住宿..."></ion-searchbar>
-
-    <!-- 客服与帮助 -->
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button>
-        <ion-icon name="help-circle"></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
-
-    <!-- 天气和出行信息 -->
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>南昌天气</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <!-- 天气信息展示 -->
-      </ion-card-content>
-    </ion-card>
-
-    <!-- 下载/分享按钮 -->
-    <ion-row>
-      <ion-col>
-        <ion-button expand="block">按钮文本</ion-button>
+  <app-explore-container name="Tab 1 page"></app-explore-container>
+</ion-content>

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

@@ -1,39 +1,18 @@
-
-ion-slides {
-  height: 200px;
-
-  img {
-    width: 100%;
-    height: 100%;
+/* Scoped components require higher specificity to customize */
+ion-searchbar.custom {
+    --background: #19422d;
+    --color: #fff;
+    --placeholder-color: #c83131;
+    --icon-color: #fff;
+    --clear-button-color: #fff;
+  
+    --border-radius: 4px;
   }
-}
-
-ion-card {
-  margin: 10px 0;
-
-  img {
-    max-width: 100%;
-    height: auto;
+  
+  ion-searchbar.ios.custom {
+    --cancel-button-color: #19422d;
   }
-}
-
-ion-tab-bar {
-  ion-tab-button {
-    --background: #f4f4f4;
-    --color: #333;
-
-    &.tab-selected {
-      --background: #3880ff;
-      --color: #fff;
-    }
-  }
-}
-
-ion-searchbar {
-  --border-radius: 20px;
-  --background: #f4f4f4;
-}
-
-ion-fab-button {
-  --background: #3880ff;
-}
+  
+  ion-searchbar.md.custom {
+    --cancel-button-color: #336959;
+  }

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

@@ -1,57 +1,16 @@
-import { Component, ViewChild } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
+import { Component } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
-import { IonAvatar, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonFab, IonFabButton, IonGrid, IonIcon, IonItem, IonLabel, IonList, IonRow, IonSearchbar, IonTab, IonTabBar, IonTabButton, IonTabs, IonThumbnail, IonToolbar } from '@ionic/angular/standalone';
-import { CommonModule } from '@angular/common'; // 导入 CommonModule 以使用 *ngFor
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [
-    IonicModule,
-    IonContent, IonToolbar, IonGrid, IonRow, IonCard, IonCardContent, IonCardHeader,
-    IonCol, IonTab, IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonList, IonItem,
-    IonThumbnail, IonAvatar, IonSearchbar, IonFab, IonFabButton,
-    ExploreContainerComponent,
-    CommonModule
-  ]
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,IonSearchbar]
 })
 export class Tab1Page {
-  constructor() {}
-
-  @ViewChild('slides') ionSlides: any; // 使用 ViewChild 获取 ion-slides 实例
-
-  slides: any[] = [
-    { image: 'src/assets/img/1.png' },
-    { image: 'src/assets/img/1.png' },
-    { image: 'src/assets/img/1.png' },
-  ];
-
-  hotRecommendations: any[] = [
-    { title: '滕王阁', description: '江南三大名楼之一', image: 'src/assets/img/1.png' },
-    { title: '八一广场', description: '南昌市中心广场', image: 'src/assets/img/1.png' },
-    // 更多推荐...
-  ];
 
-  events: any[] = [
-    { title: '南昌国际马拉松', description: '一年一度的国际体育赛事', image: 'src/assets/img/1.png' },
-    // 更多活动...
-  ];
-
-  personalizedRecommendations: any[] = [
-    { title: '红色旅游线路', description: '南昌起义纪念馆一日游', image: 'src/assets/img/1.png' },
-    // 更多个性化推荐...
-  ];
-
-  travelGuides: any[] = [
-    { title: '一日游推荐', description: '南昌市区经典一日游路线', image: 'src/assets/img/1.png' },
-    // 更多攻略...
-  ];
+  constructor() {}
 
-  travelPosts: any[] = [
-    { username: '张三', content: '今天去了滕王阁，真的很壮观！', avatar: 'src/assets/img/1.png' },
-    // 更多用户互动...
-  ];
 }