首页详情页2

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

@@ -1,82 +1,73 @@
-<ion-header class="header">
-  <ion-toolbar color="primary">
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/travels"></ion-back-button>
-    </ion-buttons>
-    <ion-title>{{travel.name}}</ion-title>
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      {{travel.name}}
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="content">
-  <ion-grid class="travel-intro">
-    <ion-row>
-      <ion-col size="12">
-        <ion-card class="travel-card">
-          <ion-card-header>
-            <ion-card-title>{{travel.name}}简介</ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-            <p>这里是关于{{travel.name}}的简短介绍，{{travel.name}}是一项充满乐趣的活动，可以体验不同的文化，探索世界各地的美景，增进人们之间的关系。</p>
-            <p>在{{travel.name}}中，孩子们可以开阔视野，学习新知识，同时也能在旅行中培养独立思考和解决问题的能力。家长可以与孩子一起创造美好的回忆，同时也能分享自己的经验和见解。</p>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+<ion-content>
+  <div class="container">
+    <!-- 搜索框 -->
+    <div class="search-bar">
+      <ion-searchbar class="search-box" placeholder="搜索目的地、景点或活动"></ion-searchbar>
+      <div class="search-tags">
+        <span class="search-tag">热门</span>
+        <span class="search-tag">推荐</span>
+        <span class="search-tag highlight">巴厘岛</span>
+        <span class="search-tag">浪漫之旅</span>
+        <span class="search-tag">度假</span>
+      </div>
+    </div>
 
-  <ion-grid class="travel-features">
-    <ion-row>
-      <ion-col size="6">
-        <ion-card class="feature-card">
-          <ion-card-header>
-            <ion-card-title>特色活动</ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-            <p>探索亲子友好型景点，参与互动体验活动</p>
-            <ion-button expand="block" fill="outline">查看详情</ion-button>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-      <ion-col size="6">
-        <ion-card class="feature-card">
-          <ion-card-header>
-            <ion-card-title>亲子住宿</ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-            <p>精选适合家庭的住宿环境，提供舒适体验</p>
-            <ion-button expand="block" fill="outline">查看详情</ion-button>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+    <!-- 目的地卡片 -->
+    <ion-card class="destination-card">
+      <ion-img src="/assets/bld.jpg" class="destination-image"></ion-img>
+      <ion-card-header>
+        <ion-card-title class="destination-name">巴厘岛浪漫之旅</ion-card-title>
+        <ion-text color="medium">
+          <ion-icon name="location-outline" class="location-icon"></ion-icon>
+          <span>印度尼西亚 · 巴厘岛</span>
+        </ion-text>
+      </ion-card-header>
+      
+      <ion-row class="rating">
+        <ion-col size="auto">
+          <ion-icon name="star" color="warning" *ngFor="let star of stars"></ion-icon>
+        </ion-col>
+        <ion-col>
+          <ion-text color="medium">4.5 (128条评价)</ion-text>
+        </ion-col>
+      </ion-row>
+    </ion-card>
 
-  <ion-grid class="recommended-routes">
-    <ion-row>
-      <ion-col size="12">
-        <ion-card class="routes-card">
-          <ion-card-header>
-            <ion-card-title>推荐行程</ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-            <ion-list>
-              <ion-item *ngFor="let route of recommendedRoutes">
-                <ion-label>
-                  <h3>{{route.name}}</h3>
-                  <p>{{route.description}}</p>
-                </ion-label>
-                <ion-button fill="clear" (click)="viewRouteDetail(route)">查看</ion-button>
-              </ion-item>
-            </ion-list>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-</ion-content>
+    <!-- 热门目的地标题 -->
+    <ion-label class="section-title">热门目的地</ion-label>
 
-<ion-footer>
-  <ion-toolbar>
-    <ion-title size="small">探索更多</ion-title>
-  </ion-toolbar>
-</ion-footer>
+    <!-- 热门目的地网格 -->
+    <ion-grid class="mockup-grid">
+      <ion-row>
+        <ion-col size="6" *ngFor="let destination of destinations">
+          <ion-card class="destination-card">
+            <ion-img src="{{destination.image}}" class="destination-image"></ion-img>
+            <ion-card-header>
+              <ion-card-title class="destination-name">{{destination.name}}</ion-card-title>
+              <ion-text color="medium">
+                <ion-icon name="location-outline" class="location-icon"></ion-icon>
+                <span>{{destination.description}}</span>
+              </ion-text>
+            </ion-card-header>
+            <ion-row class="rating">
+              <ion-col size="auto">
+                <ion-icon name="star" color="warning" *ngFor="let star of destination.stars"></ion-icon>
+              </ion-col>
+              <ion-col>
+                <ion-text color="medium">{{destination.rating}} ({{destination.reviews}}条评价)</ion-text>
+              </ion-col>
+            </ion-row>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </div>
+</ion-content>

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

@@ -1,43 +1,106 @@
-.header {
-  --background: #3880ff;
-  --color: white;
+/* 布局容器 */
+.container {
+  width: 100%;
+  margin: 0 auto;
+  background-color: #fff;
+  min-height: 100vh;
+  position: relative;
+  padding: 15px;
 }
 
-.content {
-  --background: #f8f9fa;
+/* 搜索框 */
+.search-bar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background-color: #fff;
+  padding: 10px 15px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 }
 
-.travel-intro {
-  margin-top: 15px;
+.search-box {
+  --background: #f7f7f7;
+  --border-radius: 20px;
+  --padding-start: 15px;
+  --padding-end: 15px;
+  margin-bottom: 10px;
 }
 
-.travel-card {
-  --background: white;
-  --margin-bottom: 15px;
+.search-tags {
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.feature-card {
-  --background: #f1f3f5;
-  --border-radius: 10px;
-  --margin: 10px;
+.search-tag {
+  background-color: #f7f7f7;
+  border-radius: 15px;
+  padding: 5px 12px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: #666;
 }
 
-.recommended-routes {
-  margin-top: 20px;
+.search-tag.highlight {
+  color: #3478F6;
 }
 
-.routes-card {
-  --background: white;
-  --margin: 0 15px 15px;
+/* 目的地卡片 */
+.destination-card {
+  --border-radius: 12px;
+  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-.ion-button {
-  --background: #3880ff;
-  --color: white;
-  --ripple-color: rgba(255, 255, 255, 0.3);
+.destination-card .destination-image {
+  width: 100%;
+  height: 160px;
+  --border-radius: 12px 12px 0 0;
+  object-fit: cover;
 }
 
-.ion-list {
-  --ion-item-background: transparent;
-  --ion-item-color: #333;
+.destination-card .destination-name {
+  font-weight: 600;
+  font-size: 1.1rem;
+  margin-bottom: 4px;
+}
+
+.destination-card .rating {
+  align-items: center;
+  margin-top: 8px;
+}
+
+.destination-card .stars {
+  margin-right: 8px;
+}
+
+/* 热门目的地标题 */
+.section-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin: 20px 0 16px;
+}
+
+/* 热门目的地网格 */
+.cards-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 16px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .cards-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .cards-container {
+    grid-template-columns: 1fr;
+  }
 }

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

@@ -28,21 +28,42 @@ export class PageTravelPage implements OnInit {
 
   ngOnInit() {
   }
-  // 定义推荐行程数组
-  recommendedRoutes = [
+    activeTab = 'home';
+
+  
+ destinations: any[] = [
+    {
+      name: '泰国 · 普吉岛',
+      description: '泰国 · 普吉岛',
+      image: '/assets/pjd.jpg',
+      stars: [1, 2, 3, 4, 5], // 5星评价
+      rating: 4.8,
+      reviews: 256
+    },
+    {
+      name: '日本 · 东京',
+      description: '日本 · 东京',
+      image: '/assets/dj.jpg',
+      stars: [1, 2, 3, 4], // 4星评价
+      rating: 4.2,
+      reviews: 189
+    },
     {
-      name: '欢乐三天游',
-      description: '适合全家出游的欢乐行程，包含主题乐园和互动活动。'
+      name: '马尔代夫',
+      description: '马尔代夫',
+      image: '/assets/medf.jpg',
+      stars: [1, 2, 3, 4, 5], // 5星评价
+      rating: 4.9,
+      reviews: 312
     },
     {
-      name: '自然探索五天游',
-      description: '探索自然，体验户外生活，增长见识。'
+      name: '法国 · 巴黎',
+      description: '法国 · 巴黎',
+      image: '/assets/bl.jpg',
+      stars: [1, 2, 3, 4], // 4星评价
+      rating: 4.0,
+      reviews: 175
     }
   ];
-
-  // 查看行程详情的方法
-  viewRouteDetail(route: Route) {
-    console.log(`查看行程详情: ${route.name}`);
-    // 这里可以添加跳转到行程详情页的逻辑
-  }
-}
+  stars = [1, 2, 3, 4, 5]; // 5星评价
+}