s202226701049/AIart-app/src/app/interest-search/interest-search.component.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button default-href="/tabs/tab1" style="color:black;"></ion-back-button>
    </ion-buttons>
    <ion-title style="font-family: 'Courier New', Courier, monospace;">
      <span style="font-weight: bold;">调查问卷</span>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="light">
  <ion-list [inset]="true">
    <ion-item>
      <ion-label>一、基本情况</ion-label>
    </ion-item>
    <ion-item>
      <ion-input label="姓名"></ion-input>
    </ion-item>
    <ion-item>
      <span style="margin-right: 30px;">生日</span>
      <ion-datetime-button datetime="datetime"></ion-datetime-button>
      <ion-modal [keepContentsMounted]="true">
        <ng-template>
          <ion-datetime id="datetime"></ion-datetime>
        </ng-template>
      </ion-modal>
    </ion-item>
  </ion-list>

  <ion-list [inset]="true">
    <ion-item>
      <ion-label>二、工作状况</ion-label>
    </ion-item>
    <p style="margin-left: 15px;">工作几年?</p>
    <ion-radio-group [allowEmptySelection]="true" value="turtles">
      <ion-radio value="1年-3年" labelPlacement="end" aria-label="Custom checkbox">1年-3年</ion-radio><br />
      <ion-radio value="3年-5年" labelPlacement="end" aria-label="Custom checkbox">3年-5年</ion-radio><br />
      <ion-radio value="5年以上" labelPlacement="end" aria-label="Custom checkbox">5年以上</ion-radio><br />
    </ion-radio-group>
    <p style="margin-left: 15px;">从事什么职业?</p>
    <ion-radio-group [allowEmptySelection]="true" value="turtles">
      <ion-radio value="前端开发" labelPlacement="end" aria-label="Custom checkbox">前端开发</ion-radio><br />
      <ion-radio value="后端开发" labelPlacement="end" aria-label="Custom checkbox">后端开发</ion-radio><br />
      <ion-radio value="测试" labelPlacement="end" aria-label="Custom checkbox">测试</ion-radio><br />
      <ion-radio value="产品经理" labelPlacement="end" aria-label="Custom checkbox">产品经理</ion-radio><br />
      <ion-radio value="其他" labelPlacement="end" aria-label="Custom checkbox">其他</ion-radio><br />
      <br />
    </ion-radio-group>
  </ion-list>

  <ion-list [inset]="true">
    <ion-item>
      <ion-label>三、其他情况</ion-label>
    </ion-item>
    <p style="margin-left: 15px;">是否喜欢吃水果?</p>
    <ion-radio-group [allowEmptySelection]="true" value="turtles">
      <ion-radio value="是" labelPlacement="end" aria-label="Custom checkbox">是</ion-radio><br />
      <ion-radio value="否" labelPlacement="end" aria-label="Custom checkbox">否</ion-radio><br />
    </ion-radio-group>
    <p style="margin-left: 15px;">喜欢什么运动?</p>
    <ion-radio-group [allowEmptySelection]="true" value="turtles">
      <ion-radio value="篮球" labelPlacement="end" aria-label="Custom checkbox">篮球</ion-radio><br />
      <ion-radio value="足球" labelPlacement="end" aria-label="Custom checkbox">足球</ion-radio><br />
      <ion-radio value="羽毛球" labelPlacement="end" aria-label="Custom checkbox">羽毛球</ion-radio><br />
      <ion-radio value="其他" labelPlacement="end" aria-label="Custom checkbox">其他</ion-radio><br />
      <br />
    </ion-radio-group>
  </ion-list>
  <div style="display: flex;justify-content: space-between;align-items: center;margin: 0 15px 0 15px;">
    <ion-button style="width: 45%;">保存</ion-button>
    <ion-button id="yes/no" style="width: 45%;">提交</ion-button>
    <ion-alert trigger="yes/no" header="是否确定提交" [buttons]="alertButtons"></ion-alert>
  </div>
</ion-content>