fix:page-improvement

paint-app/package-lock.json

@@ -25,6 +25,7 @@
         "fmode-ng": "^0.0.62",
         "ionicons": "^7.2.1",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.15",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -17438,6 +17439,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.15.tgz",
+      "integrity": "sha512-IzWeU34WwC7gbhjKsjkImTuCRf+lRbO6cnxMGs88iVNKDwV+xQpBCJxZ4bNH6gSrIbbyVJ1kuGzo3JTtz//CBw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/symbol-observable/-/symbol-observable-4.0.0.tgz",

paint-app/package.json

@@ -30,6 +30,7 @@
     "fmode-ng": "^0.0.62",
     "ionicons": "^7.2.1",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.15",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

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

@@ -1,33 +1,57 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      创作
+      素材
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<ion-content [fullscreen]="true" class="bg-color">
+  <img src="../../assets/icon/tou2.png" alt="Image Description" class="image-style"/>
+  <!-- <ion-header>
     <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
+      <ion-button (click)="goTestPage()">测试</ion-button>
+      <ion-button (click)="goTestPage1()">灵感</ion-button>
+      <ion-button class="float-left" (click)="goTestPage2()">绘画</ion-button>
+      <ion-button class="float-left" (click)="goTestPage2()">绘画</ion-button>
     </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 1 page"></app-explore-container>
-
-
-<ion-button (click)="goTestPage()">进入测试页面</ion-button>
-
-<ion-button (click)="goTestPage1()">激发灵感</ion-button>
-
-<ion-button (click)="goTestPage2()">绘画</ion-button>
-
-<h1>星星打分组件演示:分值{{currentScore}}</h1>
+  </ion-header> -->
+    <!-- <ion-list v-if="loaded">
+      <ion-list-header>Albums</ion-list-header>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ion-icon style="width: 100%; height: 100%" :icon="musicalNotes"></ion-icon>
+        </ion-thumbnail>
+        <ion-label>
+          <h3>Abbey Road</h3>
+          <p>The Beatles</p>
+          <p>1969</p>
+        </ion-label>
+      </ion-item>
+    </ion-list> -->
+
+  <ion-card>
+      <ion-card-header>
+        <ion-card-title>AI绘画建议 <ion-button (click)="goTestPage1()">前往</ion-button></ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+      </ion-card-content>
+  </ion-card>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>AI绘画参考 <ion-button (click)="goTestPage2()">前往</ion-button></ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+    </ion-card-content>
+</ion-card>
+
+     
+<!-- <h1>星星打分组件演示:分值{{currentScore}}</h1>
 <edit-rating-star
   [score]="currentScore" 
   [scoreMax]="5" 
   (onScoreChange)="handleScoreChange($event)">
 </edit-rating-star>
-<h1>编辑标签的演示</h1>
+<h1>编辑标签的演示</h1> -->
 
 </ion-content>

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

@@ -0,0 +1,69 @@
+// .bg-color {
+//     --background: #f4f4f4;  /* 设置背景颜色 */
+//   }
+//   ion-button {
+//     --background: #f4f4f4;  /* 设置背景颜色 */
+//     --color: #888;
+//     --border-radius: 8px; /* 按钮圆角 */
+//     font-weight: bold; /* 加粗按钮文本 */
+//     height: 40px; /* 按钮高度 */
+//     width: auto;
+//     float: right;
+//   }
+ 
+//   ion-toolbar {
+//     overflow: auto; /* 确保父容器能够包裹浮动元素 */
+//   }
+//   ion-button:active {
+//     --background: #0056b3; /* 按钮按下时的背景颜色 */
+//     --color: white; /* 按钮按下时的文本颜色 */
+//   }
+
+//   ion-img {
+//     border-radius: 10px; /* 设置圆角 */
+//     margin: 5px; /* 添加间距 */
+//     width: 100%; /* 确保图片宽度为100% */
+//     height: auto; /* 自适应高度 */
+//   }
+
+.bg-color {
+  --background: #f4f4f4;  /* 设置背景颜色 */
+}
+ion-button {
+  --background: white;  /* 设置背景颜色 */
+  --color: #888;
+  --border-radius: 8px; /* 按钮圆角 */
+  font-weight: bold; /* 加粗按钮文本 */
+  height: 40px; /* 按钮高度 */
+  width: auto;
+  float: right;
+  font-size: 16px; /* 设置按钮字体大小 */
+}
+
+ion-toolbar {
+  overflow: auto; /* 确保父容器能够包裹浮动元素 */
+}
+ion-button:active {
+  --background: #0056b3; /* 按钮按下时的背景颜色 */
+  --color: white; /* 按钮按下时的文本颜色 */
+}
+
+ion-img {
+  border-radius: 10px; /* 设置圆角 */
+  margin: 5px; /* 添加间距 */
+  width: 100%; /* 确保图片宽度为100% */
+  height: auto; /* 自适应高度 */
+}
+
+ion-card-title {
+  font-size: 24px; /* 设置标题字体大小 */
+  font-weight: bold; /* 设置标题字体加粗 */
+  align-items: center; /* 垂直居中 */
+}
+.image-style {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  display: block;
+  margin: 0 auto;
+}

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonHeader,IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader,IonToolbar, IonTitle, IonContent, IonicSlides } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.component';
 import { Router } from '@angular/router';
@@ -7,14 +7,22 @@ import { IonButton} from '@ionic/angular/standalone';
 
 
 
+
+import { IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/angular/standalone';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone';
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonToolbar, IonTitle, IonContent, ExploreContainerComponent,EditRatingStarComponent,IonHeader,IonButton],
+  imports: [IonToolbar, IonTitle, IonContent, ExploreContainerComponent,EditRatingStarComponent,IonHeader,IonButton,
+    IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle
+  ],
+  
 })
 export class Tab1Page {
+
   //星星打分
   currentScore: number = 0; // 初始分值
 

paint-app/src/app/tab2/tab2.page.html

@@ -1,17 +1,71 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 2
+      素材库
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 2 page"></app-explore-container>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>油彩画 <ion-button>查看更多</ion-button></ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="4">
+            <ion-img src="../../assets/icon/tou1.jpg" alt="Image 1"></ion-img>
+          </ion-col>
+          <ion-col size="4">
+            <ion-img src="../../assets/icon/tou1.jpg" alt="Image 2"></ion-img>
+          </ion-col>
+          <ion-col size="4">
+            <ion-img src="../../assets/icon/tou1.jpg" alt="Image 3"></ion-img>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card-content>
+  </ion-card>
+  
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>素描 <ion-button>查看更多</ion-button></ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="4">
+            <ion-img src="../../assets/icon/tou1.jpg" alt="Image 1"></ion-img>
+          </ion-col>
+          <ion-col size="4">
+            <ion-img src="../../assets/icon/tou1.jpg" alt="Image 2"></ion-img>
+          </ion-col>
+          <ion-col size="4">
+            <ion-img src="../../assets/icon/tou1.jpg" alt="Image 3"></ion-img>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card-content>
+  </ion-card>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>水墨画 <ion-button>查看更多</ion-button></ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="4">
+            <ion-img src="../../assets/icon/tou1.jpg" alt="Image 1"></ion-img>
+          </ion-col>
+          <ion-col size="4">
+            <ion-img src="../../assets/icon/tou1.jpg" alt="Image 2"></ion-img>
+          </ion-col>
+          <ion-col size="4">
+            <ion-img src="../../assets/icon/tou1.jpg" alt="Image 3"></ion-img>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card-content>
+  </ion-card>
 </ion-content>

paint-app/src/app/tab2/tab2.page.scss

@@ -0,0 +1,34 @@
+.bg-color {
+    --background: #f4f4f4;  /* 设置背景颜色 */
+  }
+  ion-button {
+    --background: white;  /* 设置背景颜色 */
+    --color: #888;
+    --border-radius: 8px; /* 按钮圆角 */
+    font-weight: bold; /* 加粗按钮文本 */
+    height: 40px; /* 按钮高度 */
+    width: auto;
+    float: right;
+    font-size: 16px; /* 设置按钮字体大小 */
+  }
+ 
+  ion-toolbar {
+    overflow: auto; /* 确保父容器能够包裹浮动元素 */
+  }
+  ion-button:active {
+    --background: #0056b3; /* 按钮按下时的背景颜色 */
+    --color: white; /* 按钮按下时的文本颜色 */
+  }
+
+  ion-img {
+    border-radius: 10px; /* 设置圆角 */
+    margin: 5px; /* 添加间距 */
+    width: 100%; /* 确保图片宽度为100% */
+    height: auto; /* 自适应高度 */
+  }
+
+  ion-card-title {
+    font-size: 24px; /* 设置标题字体大小 */
+    font-weight: bold; /* 设置标题字体加粗 */
+    align-items: center; /* 垂直居中 */
+  }

paint-app/src/app/tab2/tab2.page.ts

@@ -1,13 +1,15 @@
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCol, IonGrid, IonImg, IonRow } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,IonButton,
+    IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle,IonGrid,IonCol,IonRow,IonImg]
 })
 export class Tab2Page {