feat:init app 0.2

src/app/tab1/tab1.page.html

@@ -24,24 +24,29 @@
     </ion-segment-button>
   </ion-segment>
   
-  <div *ngIf="changeTab === 'default'" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; text-align: center;">
-    <img src="../../assets/images/1.jpg" alt="" width="1000"height="520" >
+  <div *ngIf="changeTab === 'default'" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; text-align: center; padding: 20px;">
+    <img src="../../assets/images/1.jpg" alt="" style="max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
+    <h2 style="margin-top: 20px;">欢迎来到虚拟试衣</h2>
+    <ion-button color="primary" shape="round" style="margin-top: 20px;" (click)="startDressing()">开始换装</ion-button>
+</div>
 
-    <h2>欢迎来到虚拟试衣</h2>
-    <ion-button (click)="startDressing()">开始换装</ion-button>
-  </div>
-  
-  <div *ngIf="changeTab === 'segment'" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh;">
-    <div class="image-container" [@imageAnimation]="currentImageIndex">
-      <img [src]="images[currentImageIndex]" alt="Image" height="400px" width="500px">
+<div *ngIf="changeTab === 'segment'" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; padding: 20px;">
+    <div class="image-container" [@imageAnimation]="currentImageIndex" style="margin-bottom: 20px;">
+        <img [src]="images[currentImageIndex]" alt="Image" style="max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
     </div>
-    <button (click)="changeImage(-1)">Previous</button>
-    <button (click)="changeImage(1)">Next</button>
-    <h2>上传图片并选择服装</h2>
+    <div style="display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 20px;">
+      <ion-button color="primary" shape="round" (click)="changeImage(-1)" style="margin-right: 10px;">
+          <ion-icon name="arrow-back-outline"></ion-icon> 上一个
+      </ion-button>
+      <ion-button color="primary" shape="round" (click)="changeImage(1)">
+          下一个 <ion-icon name="arrow-forward-outline"></ion-icon>
+      </ion-button>
+  </div>
+  <h2 style="font-family: '宋体'; font-size: 1.2em;">上传图片并选择服装</h2>
     
-    <input type="file" (change)="onFileSelected($event)">
+    <input type="file" (change)="onFileSelected($event)" style="margin-bottom: 20px;">
     
-    <div style="display: flex; flex-direction: column; align-items: center; width: 100%;">
+    <div style="width: 100%;">
         <ion-button expand="block" color="primary" style="margin-bottom: 10px;" (click)="selectClothing()">
             <ion-icon name="shirt-outline"></ion-icon>
             选择服装

src/app/tabs/tabs.page.scss

@@ -8,4 +8,12 @@ ion-tab-button ion-icon {
     font-size: 12px; /* 自定义标签文字大小 */
     color: #333; /* 自定义标签文字颜色 */
   }
-  
+  ion-tabs {
+    border: 2px solid #ccc; /* 设置边框样式 */
+    border-radius: 10px; /* 设置边框圆角 */
+    overflow: hidden; /* 防止内容溢出 */
+  }
+  
+  ion-tab-bar {
+    background-color: #f1f1f1; /* 设置tab-bar背景色 */
+  }