|
@@ -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>
|
|
|
选择服装
|