完成基础电影页面

src/app/tab1/tab1.page.html

@@ -39,7 +39,7 @@
         </ion-row>
         <ion-row>
           <ion-col size="12">
-            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">更多</ion-button>
+            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">more ></ion-button>
           </ion-col>
         </ion-row>
       </ion-grid>
@@ -66,7 +66,7 @@
         </ion-row>
         <ion-row>
           <ion-col size="12">
-            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">更多</ion-button>
+            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">more ></ion-button>
           </ion-col>
         </ion-row>
       </ion-grid>
@@ -100,7 +100,7 @@
         </ion-row>
         <ion-row>
           <ion-col size="12">
-            <ion-button expand="full" color="light" (click)="navigateToBlankPage()">更多</ion-button>
+            <ion-button expand="full" color="light"  shape="round" (click)="navigateToBlankPage()">more ></ion-button>
           </ion-col>
         </ion-row>
       </ion-grid>
@@ -128,7 +128,7 @@
         </ion-row>
         <ion-row>
           <ion-col size="12">
-            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">更多</ion-button>
+            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">more ></ion-button>
           </ion-col>
         </ion-row>
       </ion-grid>
@@ -171,7 +171,7 @@
         </ion-row>
         <ion-row>
           <ion-col size="12">
-            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">更多</ion-button>
+            <ion-button expand="full" color="light" shape="round" (click)="navigateToBlankPage()">more ></ion-button>
           </ion-col>
         </ion-row>
       </ion-grid>

src/app/tab2/tab2.page.html

@@ -5,6 +5,55 @@
 </ion-header>
 
 <ion-content>
+  <!-- 电影顶部背景图及介绍 -->
+
+  <ion-card class="movie-banner" (click)="goToBlankPage()">
+    <img src="assets/images/movie/movieBanner.jpg" alt="Movie Banner">
+    <ion-card-content>
+      <h2>拓海，我要去乡下住几天</h2>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-content>
+      <ion-row>
+        <ion-col size="13">
+              <ion-row>
+                <ion-col (click)="goToBlankPage()">电影</ion-col>
+                <ion-col (click)="goToBlankPage()">电视</ion-col>
+                <ion-col (click)="goToBlankPage()">经典</ion-col>
+                <ion-col (click)="goToBlankPage()">新片</ion-col>
+              </ion-row>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="13">
+              <ion-row>
+                <ion-col (click)="goToBlankPage()">中国大陆</ion-col>
+                <ion-col (click)="goToBlankPage()">中国香港</ion-col>
+                <ion-col (click)="goToBlankPage()">美国</ion-col>
+                <ion-col (click)="goToBlankPage()">英国</ion-col>
+              </ion-row>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="13">
+              <ion-row>
+                <ion-col (click)="goToBlankPage()">爱情</ion-col>
+                <ion-col (click)="goToBlankPage()">动作</ion-col>
+                <ion-col (click)="goToBlankPage()">喜剧</ion-col>
+                <ion-col (click)="goToBlankPage()">科幻</ion-col>
+              </ion-row>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="12">
+          <ion-button expand="full" color="light" shape="round" (click)="goToBlankPage()">more ></ion-button>
+        </ion-col>
+      </ion-row>
+    </ion-card-content>
+  </ion-card>
+
   <!-- 推荐电影 -->
   <ion-card>
     <ion-card-header>
@@ -30,34 +79,20 @@
           </ion-thumbnail>
           <ion-label>
             <h2>周处除三害</h2>
-            <p>动作/犯罪</p>
+            <p>动作/犯罪</p>  
             <p>中国台湾</p>
             <p>2023</p>
           </ion-label>
         </ion-item>
       </ion-list>
+      <ion-row>
+        <ion-col size="12">
+          <ion-button expand="full" color="light" shape="round" (click)="goToBlankPage()">more ></ion-button>
+        </ion-col>
+      </ion-row>
     </ion-card-content>
   </ion-card>
 
-  <!-- 影视分类 -->
-  <ion-card>
-    <ion-card-header>
-      影视分类
-    </ion-card-header>
-    <ion-card-content>
-      <ion-list>
-        <ion-item>
-          喜剧
-        </ion-item>
-        <ion-item>
-          动作
-        </ion-item>
-        <ion-item>
-          爱情
-        </ion-item>
-      </ion-list>
-    </ion-card-content>
-  </ion-card>
 
   <!-- 热门电影 -->
   <ion-card>
@@ -91,6 +126,11 @@
           </ion-label>
         </ion-item>
       </ion-list>
+      <ion-row>
+        <ion-col size="12">
+          <ion-button expand="full" color="light" shape="round" (click)="goToBlankPage()">more ></ion-button>
+        </ion-col>
+      </ion-row>
     </ion-card-content>
   </ion-card>
 
@@ -100,7 +140,58 @@
       主题分类电影推荐
     </ion-card-header>
     <ion-card-content>
-      这里展示主题分类电影推荐的内容
+      <ion-grid>
+        <ion-row >
+          <ion-col size="12" (click)="goToBlankPage()">
+            <img src="assets/images/movie/movie3_1.jpg" >
+          </ion-col>
+        </ion-row>
+        <ion-row >
+          <ion-col size="12" (click)="goToBlankPage()">
+            <img src="assets/images/movie/movie3_2.jpg" >
+          </ion-col>
+        </ion-row>
+        <ion-row >
+          <ion-col size="12" (click)="goToBlankPage()">
+            <img src="assets/images/movie/movie3_3.jpg" >
+          </ion-col>
+        </ion-row>
+        <ion-row >
+          <ion-col size="12" (click)="goToBlankPage()">
+            <img src="assets/images/movie/movie3_4.jpg" >
+          </ion-col>
+        </ion-row>
+        <ion-row >
+          <ion-col size="12" (click)="goToBlankPage()">
+            <img src="assets/images/movie/movie3_5.jpg" >
+          </ion-col>
+        </ion-row>
+        <ion-row >
+          <ion-col size="12" (click)="goToBlankPage()">
+            <img src="assets/images/movie/movie3_6.jpg" >
+          </ion-col>
+        </ion-row>
+        <ion-row >
+          <ion-col size="12" (click)="goToBlankPage()">
+            <img src="assets/images/movie/movie3_7.jpg" >
+          </ion-col>
+        </ion-row>
+        <ion-row >
+          <ion-col size="12" (click)="goToBlankPage()">
+            <img src="assets/images/movie/movie3_8.jpg" >
+          </ion-col>
+        </ion-row>
+        <ion-row >
+          <ion-col size="12" (click)="goToBlankPage()">
+            <img src="assets/images/movie/movie3_4.jpg" >
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col size="12">
+            <ion-button expand="full" color="light" shape="round" (click)="goToBlankPage()">more ></ion-button>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
     </ion-card-content>
   </ion-card>
 </ion-content>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,20 @@
+.movie-banner {
+    img {
+      width: 100%;
+      border-radius: 10px;
+    }
+  }
+  
+  .rounded-button {
+    border-radius: 10px;
+    background-color: #007bff;
+    color: white;
+    text-align: center;
+    padding: 10px;
+    margin: 5px;
+    cursor: pointer;
+  }
+  
+  .rounded-button:hover {
+    background-color: #0056b3;
+  }

src/app/tab2/tab2.page.ts

@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
 
+import { Router } from '@angular/router';
+import { NavController } from '@ionic/angular';
+
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
@@ -7,6 +10,12 @@ import { Component } from '@angular/core';
 })
 export class Tab2Page {
 
-  constructor() {}
+  constructor(private router: Router, private navCtrl: NavController) {}
+
+  goToBlankPage() {
+    // this.router.navigateByUrl('/blank-page');
+    // 导航到空白页面
+    console.log('Navigating to Blank page');
+  }
 
 }