s202226701053/E-Cover-app/src/app/generate-option/generate-option.component.html

<!--头部内容，包含标题和返回按钮-->
<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>