new31

travel-app/src/app/edit-rating-star/edit-rating-star.component.html

@@ -0,0 +1,6 @@
+<div class="star-rating">
+  <ng-container *ngFor="let star of starList; let i = index">
+    <ion-icon [name]="star ? 'star' : 'star-outline'" (click)="rate(i)">
+    </ion-icon>
+  </ng-container>
+</div>

travel-app/src/app/edit-rating-star/edit-rating-star.component.scss

@@ -0,0 +1,10 @@
+.star-rating {
+  display: flex;
+  cursor: pointer;
+
+  ion-icon {
+    font-size: 30px; // 调整星星大小
+    color: gold; // 星星颜色
+    margin-right: 5px; // 星星间距
+  }
+}

travel-app/src/app/edit-rating-star/edit-rating-star.component.spec.ts

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

travel-app/src/app/edit-rating-star/edit-rating-star.component.ts

@@ -0,0 +1,73 @@
+import { InterpolationConfig } from '@angular/compiler';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonButton,
+  IonButtons,
+  IonIcon,
+  IonSearchbar,
+  IonCard,
+  IonCardHeader,
+  IonCardContent,
+  IonCardTitle,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonGrid,
+  IonRow,
+  IonCol,
+  IonThumbnail,
+  IonAvatar,
+  IonMenuButton,
+  IonCardSubtitle,
+  IonTabs,
+  IonTabBar,
+  IonTabButton,
+  IonSegment,
+  IonSegmentButton,
+} from '@ionic/angular/standalone';
+@Component({
+  selector: 'edit-rating-star',
+  templateUrl: './edit-rating-star.component.html',
+  styleUrls: ['./edit-rating-star.component.scss'],
+  imports: [IonIcon],
+})
+export class EditRatingStarComponent {
+  @Input() score: number = 0; // 默认分值为0
+  @Input() scoreMax: number = 5; // 最大分值
+  starList: boolean[] = []; // 星星状态数组
+
+  @Output() onScoreChange: EventEmitter<number> = new EventEmitter<number>();
+
+  constructor() {
+    this.updateStarList();
+  }
+
+  ngOnChanges() {
+    this.updateStarList();
+  }
+
+  // 更新星星数组
+  private updateStarList() {
+    this.starList = Array(this.scoreMax).fill(false);
+    for (let i = 0; i < this.score; i++) {
+      this.starList[i] = true;
+    }
+  }
+
+  // 打分方法
+  rate(index: number) {
+    if (this.score === index + 1) {
+      // 如果点击的是当前分值，清零
+      this.score = 0;
+    } else {
+      // 否则更新分值
+      this.score = index + 1;
+    }
+    this.updateStarList();
+    this.onScoreChange.emit(this.score); // 触发分值变化事件
+  }
+}

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

@@ -23,7 +23,6 @@
         />
         <button class="play-button">畅玩南昌</button>
       </div>
-
       <div class="content-container">
         <ion-grid>
           <ion-row>
@@ -76,22 +75,45 @@
           </ion-row>
         </ion-grid>
       </div>
-      <ion-content>
-        <div class="hot-articles-container">
-          <h2>热门文章</h2>
-          <ion-list>
-            <ion-item *ngFor="let article of articles">
-              <ion-label>
-                <h3>{{ article.title }}</h3>
-                <p>{{ article.summary }}</p>
-              </ion-label>
-              <ion-button fill="clear" slot="end">
-                <ion-icon name="arrow-forward"></ion-icon>
-              </ion-button>
-            </ion-item>
-          </ion-list>
-        </div>
-      </ion-content>
+      <div class="hot-articles-container">
+        <h2>热门文章</h2>
+        <ion-list>
+          <ion-item *ngFor="let article of articles">
+            <ion-label>
+              <h3>{{ article.title }}</h3>
+              <p>{{ article.summary }}</p>
+            </ion-label>
+            <ion-button fill="clear" slot="end">
+              <ion-icon name="arrow-forward"></ion-icon>
+            </ion-button>
+          </ion-item>
+        </ion-list>
+      </div>
+      <div class="featured-activity">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>特色活动</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-grid>
+              <ion-row>
+                <ion-col size="4">
+                  <ion-thumbnail>
+                    <img
+                      src="https://tse1-mm.cn.bing.net/th/id/OIP-C.2_qiO0SQbsGhv36jgqQBcgHaEu?rs=1&pid=ImgDetMain"
+                    />
+                  </ion-thumbnail>
+                </ion-col>
+                <ion-col size="8">
+                  <h3>春季赏花节</h3>
+                  <p>春暖花开，一起赏花去！</p>
+                  <ion-button fill="clear" size="small">查看详情</ion-button>
+                </ion-col>
+              </ion-row>
+            </ion-grid>
+          </ion-card-content>
+        </ion-card>
+      </div>
     </ion-content>
   </div>
 </ion-content>

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

@@ -160,57 +160,207 @@ ion-toolbar {
   line-height: 1.5;
 }
 // hot-articles.component.scss
+/* 全局样式 */
+ion-content {
+  background: #f4f4f4;
+}
+
+/* 热门文章容器样式 */
 .hot-articles-container {
   padding: 16px;
+  background-color: #f5ebe0;
+  margin-bottom: 0; // 确保没有额外的底部间隔
+}
 
-  .section-title {
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 16px;
-    color: #333;
-  }
+.hot-articles-container h2 {
+  font-size: 24px;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+/* 文章列表样式 */
+ion-list {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 文章项样式 */
+ion-item {
+  --background: transparent;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+ion-item:last-child {
+  border-bottom: none;
+}
+
+ion-label {
+  margin: 0;
+}
 
-  ion-list {
-    ion-item {
-      --padding-start: 0;
-      --inner-padding-end: 16px;
-      border-bottom: 1px solid #e6e6e6;
+ion-label h3 {
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+ion-label p {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 0;
+}
 
-      &:last-child {
-        border-bottom: none;
+/* 按钮样式 */
+ion-button {
+  --background: transparent;
+}
+
+ion-icon {
+  color: #666;
+}
+.featured-activity {
+  display: flex; // 使用flex布局来居中卡片
+  justify-content: center; // 水平居中
+  align-items: center; // 垂直居中
+  margin-bottom: 0;
+  margin-top: 0;
+  padding: 16px;
+  background-color: #f5ebe0;
+  height: auto;
+  width: 100%;
+
+  ion-card {
+    display: flex; // 使用flex布局来调整图片和文本的布局
+    flex-direction: column; // 默认是垂直布局
+    background-color: rgba(0, 0, 0, 0.1);
+    height: auto;
+    width: 100%;
+    max-width: 500px; // 限制卡片的最大宽度，根据需要调整
+
+    ion-card-header {
+      ion-card-title {
+        font-size: 18px;
+        color: #333;
+        text-align: center; // 标题居中
       }
+    }
+
+    ion-card-content {
+      padding: 8px;
+      display: flex; // 使用flex布局来调整图片和文本的布局
+      flex-direction: column; // 默认是垂直布局
+      align-items: center; // 图片和文本居中对齐
+
+      ion-grid {
+        width: 100%; // 确保网格占满卡片宽度
 
-      ion-thumbnail {
-        width: 80px;
-        height: 80px;
-        margin-right: 16px;
+        ion-row {
+          align-items: center;
 
-        img {
-          border-radius: 8px;
+          ion-col.size-4 {
+            ion-thumbnail {
+              img {
+                border-radius: 4px;
+                width: 50%; // 图片宽度为所在列的一半
+                height: auto; // 高度自适应
+                max-height: 150px; // 可选，限制图片的最大高度
+              }
+            }
+          }
+
+          ion-col.size-8 {
+            text-align: center; // 文本居中
+            h3 {
+              margin: 0;
+              font-size: 16px;
+              color: #333;
+            }
+
+            p {
+              margin: 4px 0;
+              font-size: 14px;
+              color: #666;
+            }
+
+            ion-button {
+              font-size: 12px;
+              --ion-color-primary: rgba(0, 0, 0, 0.1);
+            }
+          }
         }
       }
+    }
+  }
+}
+.featured-activity {
+  display: flex; // 使用flex布局来居中卡片
+  justify-content: center; // 水平居中
+  align-items: center; // 垂直居中
+  margin-bottom: 0;
+  margin-top: 0;
+  padding: 16px;
+  background-color: #f5ebe0;
+  height: auto;
+  width: 100%;
 
-      ion-label {
-        h3 {
-          font-size: 16px;
-          margin-bottom: 8px;
-        }
+  ion-card {
+    display: flex; // 使用flex布局来调整图片和文本的布局
+    flex-direction: column; // 默认是垂直布局
+    background-color: rgba(0, 0, 0, 0.1);
+    height: auto;
+    width: 100%;
+    max-width: 500px; // 限制卡片的最大宽度，根据需要调整
 
-        p {
-          color: #666;
-          font-size: 14px;
-        }
+    ion-card-header {
+      ion-card-title {
+        font-size: 18px;
+        color: #333;
       }
+    }
+
+    ion-card-content {
+      padding: 8px;
+      display: flex; // 使用flex布局来调整图片和文本的布局
+      flex-direction: column; // 默认是垂直布局
+      align-items: center; // 图片和文本居中对齐
+
+      ion-grid {
+        width: 100%; // 确保网格占满卡片宽度
+
+        ion-row {
+          align-items: center;
+
+          ion-col.size-4 {
+            ion-thumbnail {
+              img {
+                border-radius: 4px;
+                width: 50%; // 图片宽度为所在列的一半
+                height: auto; // 高度自适应
+                max-height: 150px; // 可选，限制图片的最大高度
+              }
+            }
+          }
+
+          ion-col.size-8 {
+            text-align: center; // 文本居中
+            h3 {
+              margin: 0;
+              font-size: 16px;
+              color: #333;
+            }
 
-      ion-button {
-        --border-radius: 50%;
-        --padding-start: 8px;
-        --padding-end: 8px;
-        --background: rgba(0, 0, 0, 0.1);
-        color: #444;
+            p {
+              margin: 4px 0;
+              font-size: 14px;
+              color: #666;
+            }
 
-        ion-icon {
-          font-size: 18px;
+            ion-button {
+              font-size: 12px;
+              --ion-color-primary: rgba(0, 0, 0, 0.1);
+            }
+          }
         }
       }
     }

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

@@ -27,10 +27,13 @@ import {
   IonTabs,
   IonTabBar,
   IonTabButton,
+  IonSegment,
+  IonSegmentButton,
 } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { EdittagComponent } from '../edittag/edittag.component';
 import { WeatherComponent } from '../weather/weather.component'; // 路径根据实际情况调整
+
 import { CommonModule } from '@angular/common';
 import { addIcons } from 'ionicons';
 import {
@@ -42,12 +45,17 @@ import {
 } from 'ionicons/icons';
 import { Router } from '@angular/router';
 
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
   imports: [
+    IonSegmentButton,
+    IonSegment,
     IonTabButton,
     IonTabBar,
     IonHeader,
@@ -89,8 +97,8 @@ export class Tab1Page {
       chatbubbles: chatbubbles,
     });
   }
-  goToPage1(){
-    this.router.navigate(['/tabs/recommend'])
+  goToPage1() {
+    this.router.navigate(['/tabs/recommend']);
   }
   articles = [
     { title: '探索南昌的历史', summary: '南昌的历史悠久，让我们一起探索...' },