年龄页面样式

questionnaire/src/app/age/age.component.css

@@ -2,13 +2,21 @@
     display: flex;
     flex-wrap: wrap;
   }
-  .ageContent li {
+  .ageContent li.liWrapper {
     width: 100%;
     height: 60px;
     line-height: 60px;
     border-bottom: 1px solid #dcdcdc;
     display: flex;
     justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 5em;
+  }
+  .ageContent li div.item{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .ageContent li span b {
@@ -54,7 +62,7 @@
     width: 1px;
     background: #5566e9;
     z-index: 1;
-    top:82%;
+    top:-5%;
   }
   #dot span{
     width: 8px;
@@ -71,7 +79,7 @@
     height: 10px;
     display: flex;
     /* justify-content: space-between; */
-    border-top: 1px #d5d5d5 solid;
+    /* border-top: 1px #d5d5d5 solid; */
   }
   .age li{
     width: 1.6666%;

questionnaire/src/app/age/age.component.html

 <div class="layout">
-  <div class="content">
+  <div class="content" style="position: relative;">
     <div class="questionTitle">
       <div class="titleName">{{ curPageData?.pageName }}</div>
       <div class="page">2/{{this.totalPage}}</div>
     </div>
+    <div class="subTitle">(准确年龄才可以精确计算保费)</div>
     <ul class="ageContent">
-      <li *ngFor="let optionsList of this.curPageData?.questions; index as i">
+      <li class="liWrapper" *ngFor="let optionsList of this.curPageData?.questions; index as i">
+        <div class="item">
           <div>{{ optionsList.questionName }}</div>
+          <h2 style="text-align: center;margin-bottom: 0;">{{value2}}</h2>
           <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 class="item 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)">
@@ -93,6 +88,16 @@
             <li><span>80</span></li>
           </ul>
         </div>
+      </li>
+      <span style="color: #4446e2;position: absolute;top: 61%;right: 5%;" *ngIf="!(type==1||type==2)"
+        (click)="addChild()" [ngClass]="{'disabled':totalChildLimitCount<=0}"
+        [ngStyle]="{top:type==3?'39%':'61%'}">添加孩子</span>
+    </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>
 
 </div>

questionnaire/src/app/health/health.component.html

@@ -10,8 +10,8 @@
       </div>
       <ul class="jobContent">
         <li *ngFor="let options of this.curPageData?.questions[0]['options']"
-          [ngClass]="{ selected: options['selected'] == true}" (click)="selectedHealth(options,false)">
-          {{ options.optionName }}
+          [ngClass]="{ selected: options['selected'] == true}" (click)="selectedHealth(options,false)"
+          [innerHtml]="options.optionName">
         </li>
       </ul>
     </div>

questionnaire/src/app/job/job.component.html

@@ -8,8 +8,7 @@
       <div class="subTitle">(职业不同，风险保障侧重不同)</div>
       <ul class="jobContent">
         <li [ngClass]="{ selected: options['selected'] }" *ngFor="let options of this.curPageData?.questions[0].options"
-          (click)="selectedJob(options)">
-          {{ options.optionName }}
+          (click)="selectedJob(options)" [innerHtml]="options.optionName">
         </li>
       </ul>
     </div>

questionnaire/src/styles.css

@@ -230,9 +230,8 @@ ol li {
   display: flex;
   align-items: center;
   padding: 0 3%;
-  font-size: 14px;
+  font-size: 16px;
   background: #f4f4f4;
-  
 }
 
 .cityContent li,
@@ -244,9 +243,12 @@ ol li {
   border-radius: 4px;
   box-sizing: border-box;
   padding-left: 5%;
-  font-size: 14px;
+  font-size: 16px;
   background: #f4f4f4;
 }
+.jobContent li span{
+  font-size: 12px;
+}
 
 .jobContent li.selected,
 .income li.selected {