<div class="layout">
  <div class="content">
    <div class="questionTitle">{{ this.curPageData?.pageName }}</div>
    <ul class="ageContent">
      <li *ngFor="let optionsList of this.curPageData?.questions; index as i">
        <div>{{ optionsList.questionName }}</div>
        <b (click)="showToast(optionsList)" style="width:35%;text-align: center;float: right">
          <span style="width:20%;text-align: center;">{{ optionsList.optionName}}</span>
          <span style="width:10%;text-align: center;float: right">&gt;</span>
        </b>
      </li>
    </ul>
    <div class="addChild" (click)="addChild()" *ngIf="!(type==1||type==2)"
      [ngClass]="{'disabled':totalChildLimitCount<=0}">
      <div class="icon">+</div>
      <div data-toggle="modal">增加孩子年龄</div>
    </div>
    <div class="ageWrapper">
      <div id="dot" [ngStyle]="{'left': (value2-20)/60*100 + '%'}">
        <span></span>
      </div>
      <input style="height:35px;position: absolute; opacity: 0; left: 0;width: '100%';top: 58%;z-index: 2; "
        type="range" [(ngModel)]="value2" (ngModelChange)="selectAge($event)" min="20" max="80" step="1" />

      <h2 style="text-align: center;">{{value2}}</h2>
      <!-- <div style="text-align: center;font-size: 36px;color:#5566e9;">{{value2}}</div>
      <nz-slider [(ngModel)]="value2" [nzDisabled]="disabled" [nzMin]='20' [nzMax]="80" [nzTipFormatter]="null"
        (ngModelChange)="selectAge($event)">
      </nz-slider> -->
      <ul class="age">
        <li><span>20</span></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li><span>30</span></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li><span>40</span></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li><span>50</span></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li><span>60</span></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li><span>70</span></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li><span>80</span></li>
      </ul>
    </div>
  </div>

</div>
<div class="content_footer">
  <div style="color: #4242dd;" (click)="before()">
    <!-- &lt; -->
    上一步
  </div>
  <div [ngStyle]="{ color: nextBtn == false ? '#8a8a8a' : '#4242dd' }" (click)="next()"> 下一步</div>
</div>
<div class="toastWrapper toast" *ngIf="isShow" (click)="closeToast()">

</div>
<div class="toastContent" *ngIf="isShow">
  <ul>
    <li *ngFor="let options of curQues.options" [ngClass]="{ selected: options['selected']}"
      (click)="selectedAge(options);">
      {{ options.optionName }}
    </li>
  </ul>
  <!--<div>{{curQues|json}}</div>-->
</div>