Skip to content

A
allCampaign
Commit 037cc589 by Chao Sun
Options

年龄页面样式

parent 9dd56f96
Showing with 108 additions and 94 deletions
questionnaire/src/app/age/age.component.css
...@@ -2,13 +2,21 @@ ...@@ -2,13 +2,21 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.ageContent li { .ageContent li.liWrapper {
width: 100%; width: 100%;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
border-bottom: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;
display: flex; display: flex;
justify-content: space-between; 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 { .ageContent li span b {
...@@ -54,7 +62,7 @@ ...@@ -54,7 +62,7 @@
width: 1px; width: 1px;
background: #5566e9; background: #5566e9;
z-index: 1; z-index: 1;
top:82%; top:-5%;
} }
#dot span{ #dot span{
width: 8px; width: 8px;
...@@ -71,7 +79,7 @@ ...@@ -71,7 +79,7 @@
height: 10px; height: 10px;
display: flex; display: flex;
/* justify-content: space-between; */ /* justify-content: space-between; */
border-top: 1px #d5d5d5 solid; /* border-top: 1px #d5d5d5 solid; */
} }
.age li{ .age li{
width: 1.6666%; width: 1.6666%;
......
questionnaire/src/app/age/age.component.html
<div class="layout"> <div class="layout">
<div class="content"> <div class="content" style="position: relative;">
<div class="questionTitle"> <div class="questionTitle">
<div class="titleName">{{ curPageData?.pageName }}</div> <div class="titleName">{{ curPageData?.pageName }}</div>
<div class="page">2/{{this.totalPage}}</div> <div class="page">2/{{this.totalPage}}</div>
</div> </div>
<div class="subTitle">(准确年龄才可以精确计算保费)</div>
<ul class="ageContent"> <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>{{ optionsList.questionName }}</div> <div class="item">
<b (click)="showToast(optionsList)" style="width:35%;text-align: center;float: right"> <div>{{ optionsList.questionName }}</div>
<span style="width:20%;text-align: center;">{{ optionsList.optionName}}</span> <h2 style="text-align: center;margin-bottom: 0;">{{value2}}</h2>
<span style="width:10%;text-align: center;float: right">&gt;</span> <b (click)="showToast(optionsList)" style="width:35%;text-align: center;float: right">
</b> <span style="width:20%;text-align: center;">{{ optionsList.optionName}}</span>
<span style="width:10%;text-align: center;float: right">&gt;</span>
</b>
</div>
<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" />
<!-- <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>
</li> </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> </ul>
<div class="addChild" (click)="addChild()" *ngIf="!(type==1||type==2)" <!-- <div class="addChild" (click)="addChild()" *ngIf="!(type==1||type==2)"
[ngClass]="{'disabled':totalChildLimitCount<=0}"> [ngClass]="{'disabled':totalChildLimitCount<=0}">
<div class="icon">+</div> <div class="icon">+</div>
<div data-toggle="modal">增加孩子年龄</div> <div data-toggle="modal">增加孩子年龄</div>
</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> </div>
......
questionnaire/src/app/health/health.component.html
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
</div> </div>
<ul class="jobContent"> <ul class="jobContent">
<li *ngFor="let options of this.curPageData?.questions[0]['options']" <li *ngFor="let options of this.curPageData?.questions[0]['options']"
[ngClass]="{ selected: options['selected'] == true}" (click)="selectedHealth(options,false)"> [ngClass]="{ selected: options['selected'] == true}" (click)="selectedHealth(options,false)"
{{ options.optionName }} [innerHtml]="options.optionName">
</li> </li>
</ul> </ul>
</div> </div>
......
questionnaire/src/app/job/job.component.html
...@@ -8,8 +8,7 @@ ...@@ -8,8 +8,7 @@
<div class="subTitle">(职业不同，风险保障侧重不同)</div> <div class="subTitle">(职业不同，风险保障侧重不同)</div>
<ul class="jobContent"> <ul class="jobContent">
<li [ngClass]="{ selected: options['selected'] }" *ngFor="let options of this.curPageData?.questions[0].options" <li [ngClass]="{ selected: options['selected'] }" *ngFor="let options of this.curPageData?.questions[0].options"
(click)="selectedJob(options)"> (click)="selectedJob(options)" [innerHtml]="options.optionName">
{{ options.optionName }}
</li> </li>
</ul> </ul>
</div> </div>
......
questionnaire/src/styles.css
...@@ -230,9 +230,8 @@ ol li { ...@@ -230,9 +230,8 @@ ol li {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 3%; padding: 0 3%;
font-size: 14px; font-size: 16px;
background: #f4f4f4; background: #f4f4f4;
} }
.cityContent li, .cityContent li,
...@@ -244,9 +243,12 @@ ol li { ...@@ -244,9 +243,12 @@ ol li {
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
padding-left: 5%; padding-left: 5%;
font-size: 14px; font-size: 16px;
background: #f4f4f4; background: #f4f4f4;
} }
.jobContent li span{
font-size: 12px;
}
.jobContent li.selected, .jobContent li.selected,
.income li.selected { .income li.selected {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment