feat(age): 刻度尺

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

@@ -69,16 +69,20 @@
     width: 100%;
     height: 10px;
     display: flex;
-    justify-content: space-between;
+    /* justify-content: space-between; */
     border-top: 1px #d5d5d5 solid;
-    margin-left: -2px;
   }
+  .age li{
+    width: 1.6666%;
+    height: 8px;
+    border-left: 1px #d5d5d5 solid;
 
-  .age li:nth-child(10n+1){
-    height: 10px;
+  }
+  .age li:nth-child(5n+1){
+    height: 15px;
     position: relative;
-    width: 1px;
-    background: #d5d5d5;
+    width: 1.6666%;
+    border-left: 1px #d5d5d5 solid;
   }
   .age li span{
     position: absolute;

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

@@ -17,15 +17,17 @@
     </div>
   </div>
   <div class="ageWrapper">
-    <!-- <div id="dot" [ngStyle]="{'left': value2 + 'px'}">
+    <div id="dot" [ngStyle]="{'left': (value2-20)/60*100 + '%'}">
       <span></span>
-    </div> -->
-    <!-- <input style="position: absolute; opacity: 0; left: 0;width: '100%' " type="range" [(ngModel)]="value2"
-      (ngModelChange)="selectAge($event)" min="20" max="80" step="1" /> -->
-    <div style="text-align: center;font-size: 36px;color:#5566e9;">{{value2}}</div>
+    </div>
+    <input style="position: absolute; opacity: 0.5; left: 0;width: '100%' " type="range" [(ngModel)]="value2"
+      (ngModelChange)="selectAge($event)" min="20" max="80" step="1" />
+
+      <h2>{{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>
+    </nz-slider> -->
     <ul class="age">
       <li><span>20</span></li>
       <li></li>