app-gift/app-angular/src/modules/lesson/page-test/page-test.component.html

<div class="ion-page">
    <ion-header>
        <ion-segment value="all">
            <ion-segment-button value="all" (click)="changeTab('all')">
                <ion-label>不同MBTI宠物</ion-label>
            </ion-segment-button>
            <ion-segment-button value="favorites" (click)="changeTab('favorites')">
                <ion-label>宠物测试</ion-label>
            
            </ion-segment-button>
        </ion-segment>
    </ion-header>

    <ion-content>
        
        <ng-container *ngIf="currentTab === 'all'">
         

           
          

   
            <ion-content>
                <ng-container *ngIf="currentTab === 'all'">
                    <ion-card>
                      <ion-card-header>
                        <ion-card-title>宠物MBTI各个维度解释</ion-card-title>
                      </ion-card-header>
                      <ion-card-content>
                        <p>E(外向）—— |(内向）：表示宠物在社交场合中的表现，E表示狗狗热情、亲近人，|表示宠物较为内敛、保持距离。</p>
                        <p>A(积极）—— C(谨慎)：表示宠物对新事物的接受程度，A表示狗狗好奇、敢于尝试，C表示狗狗谨慎、保守。</p>
                        <p>L(学习型）- S(稳定型）：表示狗狗在学习和适应环境中的表现，L表示狗狗学习能力强、适应能力高，S表示狗狗倾向于稳定的环境和习惯。</p>
                      </ion-card-content>
                    </ion-card>
                  </ng-container>
                <ion-grid>
                    <ion-row>
                        <ng-container *ngFor="let course of courseList; let i = index">
                            <ng-container *ngIf="i % 2 === 0">
                                <ion-col size="5.5">
                                        <img alt="Silhouette of mountains" [src]="course?.get('petImg')" />
                                        <ion-card-header>
                                            <ion-card-title>{{course?.get("petName")}}</ion-card-title>
                                        </ion-card-header>
                                </ion-col>
                                <ion-col size="5.5" *ngIf="i + 1 < courseList.length">
                                        <img alt="Silhouette of mountains" [src]="courseList[i + 1].get('petImg')" />
                                        <ion-card-header>
                                            <ion-card-title>{{courseList[i +1].get("petName")}}</ion-card-title>
                                        </ion-card-header>
                                </ion-col>
                            </ng-container>
                        </ng-container>
                    </ion-row>
                </ion-grid>
            </ion-content>
        </ng-container>




        <!-- 宠物测试 -->
        <ng-container *ngIf="currentTab === 'favorites'">
            <h4 style="text-align: center;padding: 15px;">请填写以下信息，以便为你宠物测试</h4>
            <ion-list>
                <ion-item>
                    <ion-select [value]="planOptions.targets" (ionChange)="setOption('targets',$event)"
                        aria-label="object" placeholder="当你的宠物遇到陌生人时，它会" [multiple]="true">
                        <ion-select-option value="慵懒休闲">慵懒休闲</ion-select-option>
                        <ion-select-option value="活泼好动">活泼好动</ion-select-option>
                        <ion-select-option value="独立自主">独立自主</ion-select-option>
                    </ion-select>
                </ion-item>               
                <ion-item>
                    <ion-textarea label="你是否有其他信息或补充" labelPlacement="floating" placeholder=" "></ion-textarea>
                </ion-item>
            </ion-list>
            <ion-button  expand="block">生成</ion-button>

        </ng-container>
        <div class="navfooter"> </div>
    </ion-content>
</div>