yl666 4 місяців тому
батько
коміт
32a61cbb00
3 змінених файлів з 51 додано та 12 видалено
  1. 25 12
      src/app/tab1/tab1.page.html
  2. 13 0
      src/app/tab1/tab1.page.scss
  3. 13 0
      src/app/tab1/tab1.page.ts

+ 25 - 12
src/app/tab1/tab1.page.html

@@ -1,17 +1,30 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
+    <ion-title>影视首页</ion-title>
   </ion-toolbar>
 </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-searchbar placeholder="搜索"></ion-searchbar>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
-</ion-content>
+  <ion-segment>
+    <ion-segment-button value="recommend">
+      推荐
+    </ion-segment-button>
+    <ion-segment-button value="hot">
+      热门
+    </ion-segment-button>
+  </ion-segment>
+  
+  <ion-list>
+    <ion-item *ngFor="let video of videos">
+      <ion-thumbnail slot="start">
+        <img [src]="video.posterUrl" alt="视频海报">
+      </ion-thumbnail>
+      <ion-label>
+        <h2>{{ video.title }}</h2>
+        <p>{{ video.description }}</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>

+ 13 - 0
src/app/tab1/tab1.page.scss

@@ -0,0 +1,13 @@
+ion-thumbnail {
+    width: 100px;
+    height: 100px;
+  }
+  
+  ion-label {
+    padding: 0 10px;
+  }
+  
+  ion-item {
+    border-bottom: 1px solid #ccc;
+  }
+  

+ 13 - 0
src/app/tab1/tab1.page.ts

@@ -7,6 +7,19 @@ import { Component } from '@angular/core';
 })
 export class Tab1Page {
 
+  videos: any[] = [
+    {
+      title: '视频标题1',
+      description: '视频描述1',
+      posterUrl: 'assets/poster1.jpg',
+    },
+    {
+      title: '视频标题2',
+      description: '视频描述2',
+      posterUrl: 'assets/poster2.jpg',
+    },
+    // Add more video data as needed
+  ];
   constructor() {}
 
 }