generate-option.component.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!--头部内容,包含标题和返回按钮-->
  2. <ion-header>
  3. <div class="header-container">
  4. <ion-icon name="arrow-back-outline" size="large" class="back-icon" (click)="goBack()"></ion-icon>
  5. <p class="header-title">个性化生成</p>
  6. </div>
  7. </ion-header>
  8. <!--正文部分-->
  9. <ion-content>
  10. <!--性别选择,包含两个大卡片-->
  11. <div id="gender">
  12. <ion-card id="gentel" (click)="toggleGentelActive()">
  13. <ion-img [src]="getImageSrc(gentelIsActive,'gentel')" class="transition-image"></ion-img>
  14. </ion-card>
  15. <ion-card id="lady" (click)="toggleLadyActive()">
  16. <ion-img [src]="getImageSrc(ladyIsActive,'lady')" class="transition-image"></ion-img>
  17. </ion-card>
  18. </div>
  19. <!--风格描述输入框-->
  20. <div id="styleDesc">
  21. <ion-textarea label="风格描述" labelPlacement="floating" fill="solid" [autoGrow]="true"
  22. [(ngModel)]="suppleInput"></ion-textarea>
  23. <ion-text (click)="onHelperTextClick()" class="helper-text">没有想法?点击展开</ion-text>
  24. </div>
  25. <!--可供用户选择的提示词,默认隐藏,通过点击风格输入框中的helper-text展开-->
  26. <div id="option-prompt">
  27. <ion-card *ngFor="let card of cards">
  28. <ion-card-header>
  29. <ion-card-title>{{ card.id }}</ion-card-title>
  30. </ion-card-header>
  31. <ion-chip *ngFor="let chip of card.chips" [class.isElected]="chip.isElected"
  32. (click)="toggleChip(card.id, chip.id)">
  33. {{ chip.label }}
  34. </ion-chip>
  35. </ion-card>
  36. </div>
  37. <ion-button (click)="sendMsgAndGoGenerateResult()">
  38. 生成
  39. </ion-button>
  40. </ion-content>