电影筛选界面部分

src/app/search/search.page.html

@@ -1,7 +1,7 @@
-<ion-header>
+<ion-header >
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
+      <ion-back-button defaultHref="/previous-page"></ion-back-button>
     </ion-buttons>
     <ion-title>搜索</ion-title>
   </ion-toolbar>

src/app/tab2/smovies/smovies.page.html

@@ -1,13 +1,82 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>SMovies</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/previous-page"></ion-back-button>
+    </ion-buttons>
+    <ion-title>
+      影视
+    </ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="search()">
+        <ion-icon name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
-
-<ion-content [fullscreen]="true">
+<!-- <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">SMovies</ion-title>
+      <ion-title size="large">影视</ion-title>
     </ion-toolbar>
   </ion-header>
+</ion-content> -->
+
+<ion-content>
+  <ion-card>
+    <ion-card-content>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event)">全部</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">电影</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">电视</ion-col>
+      </ion-row>
+    </ion-card-content>
+  </ion-card>
+  <ion-card>
+     <ion-card-content>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event)">全部</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">经典</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">新片</ion-col>
+      </ion-row>
+    </ion-card-content>
+  </ion-card>
+  <ion-card>
+     <ion-card-content>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event)">全部</ion-col>
+        <ion-col size="3"  (click)="filterByCategory($event)">中国</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">俄罗斯</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">美国</ion-col>
+        <ion-col size="3"  (click)="filterByCategory($event)">巴西</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">英国</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">法国</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">日本</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">西班牙</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">韩国</ion-col>
+      </ion-row>
+    </ion-card-content>
+  </ion-card>
+  <ion-card>
+    <ion-card-content>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event)">全部</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">爱情</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">喜剧</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">科幻</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">动作</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">悬疑</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">犯罪</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">青春</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">惊悚</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event)">文艺</ion-col>
+      </ion-row>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- <ion-card *ngFor="let movie of movies" routerLink="/movie-details/{{movie.id}}">
+    <ion-card-content>
+      <ion-card-title>{{ movie.title }}</ion-card-title>
+      <ion-card-subtitle>{{ movie.genre }}</ion-card-subtitle>
+    </ion-card-content>
+  </ion-card> -->
 </ion-content>

src/app/tab2/smovies/smovies.page.scss

@@ -0,0 +1,7 @@
+.blue {
+    color: blue;
+  }
+  
+  ion-card ion-row :first-child {
+    color: blue;
+  }

src/app/tab2/smovies/smovies.page.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { NavController } from '@ionic/angular';
+// import Swiper from 'swiper';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-smovies',
@@ -8,11 +10,39 @@ import { NavController } from '@ionic/angular';
 })
 export class SMoviesPage implements OnInit {
 
-  constructor(private navCtrl: NavController) {}
+  constructor(private navCtrl: NavController,private router: Router) {}
+
+  search() {
+    this.router.navigate(['/search']); // 替换成你的 setting 页面路由路径
+  }
 
   goToBlankPage() {
     // 导航到空白页面
     console.log('Navigating to Blank page');
   }
+
+  firstCol: HTMLElement |null = null;
+
+  filterByCategory(event: any) {
+    const selectedCol = event.target;
+    const allCols = document.querySelectorAll('ion-col');
+    
+    if (!this.firstCol) {
+      this.firstCol = document.querySelector('ion-col:first-child');
+      if (this.firstCol) {
+        this.firstCol.classList.add('blue');
+      }
+    } else if (this.firstCol) {
+      this.firstCol.classList.remove('blue');
+    }
+
+    allCols.forEach(col => col.classList.remove('blue'));
+    selectedCol.classList.add('blue');
+    this.firstCol = selectedCol;
+  }
+
+  
+
+
   ngOnInit() {}
 }