教程页面修改

src/app/tab1/tab1.page.html

@@ -9,14 +9,13 @@
 <ion-content>
   <ion-searchbar [(ngModel)]="searchQuery" (ionChange)="searchCourses()" placeholder="搜索教程"></ion-searchbar>
 
-  <ion-grid>
-    <ion-row>
-      <ion-col size="6" size-md="4" size-lg="3" *ngFor="let app of apps">
-        <ion-button (click)="openTutorial(app)" class="ios-button">
-          <ion-icon [name]="app.icon" slot="start"></ion-icon>
-          {{ app.name }}
-        </ion-button>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+  <ion-card *ngFor="let app of apps" (click)="openTutorial(app)">
+    <ion-card-header>
+      <ion-card-title>{{ app.name }}</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-icon [name]="app.icon" slot="start"></ion-icon>
+      <p>{{ app.description }}</p>
+    </ion-card-content>
+  </ion-card>
 </ion-content>

src/app/tab1/tab1.page.scss

@@ -1,14 +1,8 @@
-ion-button.ios-button {
-  --background: #007aff;
-  --color: #fff;
-  --border-radius: 10px;
-  --padding-start: 10px;
-  --padding-end: 10px;
-  --padding-top: 5px;
-  --padding-bottom: 5px;
-  font-weight: bold;
+ion-card {
+  margin: 10px;
 }
 
-ion-button.ios-button:active {
-  --background: #0056b3;
+ion-icon {
+  font-size: 24px;
+  margin-right: 10px;
 }

src/app/tab1/tab1.page.ts

@@ -9,17 +9,17 @@ import { AlertController } from '@ionic/angular';
 
 export class Tab1Page {
   apps = [
-    { name: '微信', icon: 'logo-wechat', category: '微信教程' },
-    { name: '支付宝', icon: 'logo-alipay', category: '支付宝教程' },
-    { name: '滴滴', icon: 'car', category: '滴滴教程' },
-    { name: '更多', icon: 'ellipsis-horizontal', category: '更多教程' }
+    { name: '微信', icon: 'logo-wechat', description: '微信相关教程' },
+    { name: '支付宝', icon: 'logo-alipay', description: '支付宝相关教程' },
+    { name: '滴滴', icon: 'car', description: '滴滴相关教程' },
+    { name: '更多', icon: 'apps', description: '更多相关教程' }
   ];
 
   searchQuery: string = '';
 
   openTutorial(app: any) {
     // 在这里处理点击按钮后的逻辑，打开对应类别的教程
-    console.log('打开' + app.category + '教程');
+    console.log('打开' + app.name + '教程');
   }
 
   searchCourses() {