1234567891011121314151617181920212223242526272829303132333435363738394041 |
- <!--头部内容,包含标题和返回按钮-->
- <ion-header>
- <div class="header-container">
- <ion-icon name="arrow-back-outline" size="large" class="back-icon" (click)="goBack()"></ion-icon>
- <p class="header-title">个性化生成</p>
- </div>
- </ion-header>
- <!--正文部分-->
- <ion-content>
- <!--性别选择,包含两个大卡片-->
- <div id="gender">
- <ion-card id="gentel" (click)="toggleGentelActive()">
- <ion-img [src]="getImageSrc(gentelIsActive,'gentel')" class="transition-image"></ion-img>
- </ion-card>
- <ion-card id="lady" (click)="toggleLadyActive()">
- <ion-img [src]="getImageSrc(ladyIsActive,'lady')" class="transition-image"></ion-img>
- </ion-card>
- </div>
- <!--风格描述输入框-->
- <div id="styleDesc">
- <ion-textarea label="风格描述" labelPlacement="floating" fill="solid" [autoGrow]="true"
- [(ngModel)]="suppleInput"></ion-textarea>
- <ion-text (click)="onHelperTextClick()" class="helper-text">没有想法?点击展开</ion-text>
- </div>
- <!--可供用户选择的提示词,默认隐藏,通过点击风格输入框中的helper-text展开-->
- <div id="option-prompt">
- <ion-card *ngFor="let card of cards">
- <ion-card-header>
- <ion-card-title>{{ card.id }}</ion-card-title>
- </ion-card-header>
- <ion-chip *ngFor="let chip of card.chips" [class.isElected]="chip.isElected"
- (click)="toggleChip(card.id, chip.id)">
- {{ chip.label }}
- </ion-chip>
- </ion-card>
- </div>
- <ion-button (click)="sendMsgAndGoGenerateResult()">
- 生成
- </ion-button>
- </ion-content>
|