| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <ion-header [translucent]="true">
- <ion-toolbar>
- <ion-title style="text-align: center;">
- 主页
- </ion-title>
- </ion-toolbar>
- </ion-header>
- <head><link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"></head>
- <ion-content [fullscreen]="true">
- <ion-header collapse="condense">
- <ion-toolbar>
- <ion-title size="large">主页</ion-title>
- </ion-toolbar>
- </ion-header>
- <ion-segment [ngModelOptions]="{standalone:true}" [(ngModel)]="changeTab" (ionChange)="shishang($event)">
- <ion-segment-button value="default">
- <ion-label>换装</ion-label>
- </ion-segment-button>
- <ion-segment-button value="segment">
- <ion-label>上传</ion-label>
- </ion-segment-button>
- <ion-segment-button value="buttons">
- <ion-label>结果</ion-label>
- </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; 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>
- <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>
- <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)" style="margin-bottom: 20px;">
-
- <div style="width: 100%;">
- <ion-button expand="block" color="primary" style="margin-bottom: 10px;" (click)="selectClothing()">
- <ion-icon name="shirt-outline"></ion-icon>
- 选择服装
- </ion-button>
-
- <ion-button expand="block" color="success" style="margin-bottom: 10px;" (click)="save()">
- <ion-icon name="save-outline"></ion-icon>
- 保存
- </ion-button>
-
- <ion-button expand="block" color="primary" style="margin-bottom: 10px;" (click)="submit()">
- <ion-icon name="checkmark-outline"></ion-icon>
- 提交
- </ion-button>
-
- <ion-button expand="block" color="danger" (click)="returnToHome()">
- <ion-icon name="home-outline"></ion-icon>
- 返回首页
- </ion-button>
- </div>
- </div>
- <div *ngIf="changeTab === 'buttons'" class="center-content">
- <h2>查看结果</h2>
- <!-- 这里放置结果的样式 -->
- <div class="center-buttons">
- <ion-button (click)="share()">分享</ion-button>
- <ion-button (click)="returnToHome()">返回首页</ion-button>
- </div>
- </div>
- <!-- <app-explore-container name="Tab 1 page"></app-explore-container> -->
- </ion-content>
|
