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 @@
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">
<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 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>
</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>
<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)"
<!-- <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>
......
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 {
......
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