Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
928b71b3 by simon
Options

默认提交

1 parent 66706665
Inline Side-by-side
Showing 10 changed files with 302 additions and 278 deletions
.cell-group {
margin-bottom: 1rem /* 12/12 */;
div{
font-size: 1rem /* 12/12 */;
color: #4c4948;
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
div {
font-size: 1rem;
color: #4c4948;
}
.w1 {
min-width: 9.166667rem;
text-align: center;
}
.w2 {
min-width: 6.25rem;
text-align: center;
}
.table-header {
width: 64.166667rem;
height: 2.5rem;
border-top-left-radius: .666667rem;
border-top-right-radius: .666667rem;
background-color: #f2f2f2;
display: flex;
align-items: center;
.normal-header {
width: 58.833333rem;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 1rem;
font-weight: bold;
color: #575453;
}
.guide {
transition: all 0.5s;
cursor: pointer;
width: 1rem;
height: .666667rem;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background-size: 100% 100%;
}
.rotate180 {
transform: rotate(180deg);
transition: all 0.5s;
}
}
}
.table-content {
width: 64.166667rem;
height: auto;
display: inline-block;
border-bottom-left-radius: .666667rem;
border-bottom-right-radius: .666667rem;
border-left: solid .083333rem #f2f2f2;
border-right: solid .083333rem #f2f2f2;
border-bottom: solid .083333rem #f2f2f2;
padding: 0 2.583333rem;
max-height: 41.666667rem;
transition: max-height ease-out 0.3s !important;
overflow: hidden;
.data-line {
height: 4.416667rem;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.cell1 {
width: 29.166667rem;
display: flex;
justify-content: space-between;
margin: auto;
}
.w1 {
min-width: 9.166667rem /* 110/12 */;
text-align: center;
.separator-v {
height: 2.5rem;
width: .166667rem;
background-color: #f2f2f2;
margin: 0 .916667rem;
}
}
.w2 {
min-width: 6.25rem /* 75/12 */;
text-align: center;
.label span {
color: #f05a23;
margin-left: .583333rem;
cursor: pointer;
text-decoration: underline;
}
.table-header {
width: 64.166667rem /* 770/12 */;
height: 2.5rem /* 30/12 */;
border-top-left-radius: .666667rem /* 8/12 */;
border-top-right-radius: .666667rem /* 8/12 */;
background-color: #f2f2f2;
display: flex;
align-items: center;
.normal-header {
width: 58.833333rem /* 706/12 */;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 1rem /* 12/12 */;
font-weight: bold;
color: #575453;
}
.guide {
transition: all 0.5s;
cursor: pointer;
width: 1rem /* 12/12 */;
height: .666667rem /* 8/12 */ ;
background: url("~@/assets/images/insurance-query/triangle-down.png") no-repeat center center;
background-size: 100% 100%;
}
.rotate180 {
transform: rotate(180deg);
transition: all 0.5s;
}
}
.separator-h {
width: 58.833333rem;
height: .083333rem;
background-color: #f2f2f2;
}
}
.table-content {
width: 64.166667rem /* 770/12 */;
height: auto;
display: inline-block;
border-bottom-left-radius: .666667rem /* 8/12 */;
border-bottom-right-radius: .666667rem /* 8/12 */;
border-left: solid .083333rem /* 1/12 */ #f2f2f2;
border-right: solid .083333rem /* 1/12 */ #f2f2f2;
border-bottom: solid .083333rem /* 1/12 */ #f2f2f2;
padding: 0 2.583333rem /* 31/12 */;
max-height: 41.666667rem /* 500/12 */;
transition: max-height ease-out 0.3s !important;
overflow: hidden;
.data-line {
height: 4.416667rem /* 53/12 */;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.cell1 {
width: 29.166667rem /* 350/12 */;
display: flex;
justify-content: space-between;
margin: auto;
}
.separator-v {
height: 2.5rem /* 30/12 */;
width: .166667rem /* 2/12 */;
background-color: #f2f2f2;
margin: 0 .916667rem /* 11/12 */;
}
}
.label span {
color: #f05a23;
margin-left: .583333rem /* 7/12 */;
cursor: pointer;
text-decoration: underline;
}
.separator-h {
width: 58.833333rem /* 706/12 */;
height: .083333rem /* 1/12 */;
background-color: #f2f2f2;
}
}
.orange {
background-color: #f05a23 !important;
div {
color: #ffffff;
}
}
.orange {
background-color: #f05a23 !important;
.hide {
max-height: 0;
border-bottom:none;
div {
color: #ffffff;
}
}
.hide {
max-height: 0;
border-bottom: none;
}
}
......
@import '@/styles/_support';
input {
padding: 0 2.083333rem /* 25/12 */;
padding: 0 2.083333rem;
}
.content {
padding-bottom: 6rem;
// padding-bottom: 6rem;
}
.top-space {
height: 4.25rem;
// height: 4.25rem;
}
.reservation-container {
width: 64.25rem /* 771/12 */;
border-radius: .666667rem /* 8/12 */;
border: solid .083333rem /* 1/12 */ #f2f2f2;
width: 64.25rem;
border-radius: .666667rem;
border: solid .083333rem #f2f2f2;
background-color: #ffffff;
padding: 2.166667rem /* 26/12 */ .916667rem /* 11/12 */;
padding: 2.166667rem .916667rem 0;
}
.form {
......@@ -27,10 +27,8 @@ input {
&-item {
position: relative;
// padding: 0 1.75rem;
padding:0 1.25rem /* 15/12 */;
// margin-bottom: 2.5rem;
margin-bottom: 2.333333rem /* 28/12 */;
padding: 0 1.25rem;
margin-bottom: 2.333333rem;
.label {
color: #f05a23;
......@@ -39,13 +37,12 @@ input {
margin-bottom: .7rem;
.icon {
width: 2.166667rem /* 26/12 */;
width: 2.166667rem;
display: flex;
}
img {
height: 1rem;
// margin-right: .8rem;
}
}
......@@ -61,7 +58,7 @@ input {
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 2.083333rem /* 25/12 */;
padding: 0 2.083333rem;
}
// 长文本
......@@ -76,6 +73,11 @@ input {
position: absolute;
top: 1.6rem;
right: 2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow.png');
width: 1rem;
height: .666667rem;
pointer-events: none;
cursor: default;
}
}
......@@ -84,11 +86,10 @@ input {
// 不换行
&-item2 {
display: flex;
margin-bottom: 2.25rem /* 27/12 */;
margin-bottom: 2.25rem;
.label {
// min-width: 13.75rem;
min-width: 12.833333rem /* 154/12 */;
min-width: 12.833333rem;
height: 2.5rem;
}
......@@ -125,16 +126,15 @@ input {
flex-wrap: wrap;
.label {
// min-width: 13.75rem;
min-width: 8.833333rem /* 106/12 */;
min-width: 8.833333rem;
}
.ipt-wrap {
width: 50%;
input {
font-size: 1.166667rem /* 14/12 */;
letter-spacing: .116667rem /* 1.4/12 */;
font-size: 1.166667rem;
letter-spacing: .116667rem;
color: #4c4948;
font-family: Arial;
}
......@@ -148,8 +148,9 @@ input {
}
}
}
.mt8 {
margin-top: .666667rem /* 8/12 */;
margin-top: .666667rem;
}
}
......@@ -166,7 +167,6 @@ input {
margin-bottom: 1rem;
&-icon {
// display: inline-block;
position: absolute;
top: .5rem;
}
......@@ -174,17 +174,17 @@ input {
}
.submit-btn {
width: 13.583333rem /* 163/12 */;
height: 4.083333rem /* 49/12 */;
margin: 2.5rem /* 30/12 */ auto;
line-height: 4.083333rem /* 49/12 */;
width: 13.583333rem;
height: 4.083333rem;
margin: 2.5rem auto;
line-height: 4.083333rem;
box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
background-blend-mode: soft-light, ;
background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
text-align: center;
font-size: 1.291667rem /* 15.5/12 */;
letter-spacing: .129167rem /* 1.55/12 */;
font-size: 1.291667rem;
letter-spacing: .129167rem;
color: #ffffff;
border-radius: 3.5rem;
cursor: pointer;
}
\ No newline at end of file
}
......
<template>
<div class="reservation-container">
<div class="">
<div class="temp">
<div class="gird-g form">
<div class="pure-u-1 pure-u-md-1-2 form-item">
......@@ -18,7 +18,7 @@
<div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
</div>
<div class="ipt-wrap">
<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
<div class="down-arrow"></div>
<select class="ipt">
<option v-if="locale !='zh'">電話</option>
<option v-else>电话</option>
......@@ -40,7 +40,7 @@
<div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
</div>
<div class="ipt-wrap">
<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
<div class="down-arrow"></div>
<select class="ipt">
<template v-if="locale =='zh'">
<option>投保咨询</option>
......@@ -112,6 +112,6 @@
</template>
<script src="./reservation.js"></script>
<style lang="scss" >
<style lang="scss" scoped>
@import "./reservation.scss";
</style>
......
.content {
display: flex;
display: flex;
// margin-top: 2.333333rem;
margin: 2.333333rem 0;
}
.left-panel {
width: 12.833333rem ;
height: 42.333333rem ;
margin-left: 3.166667rem;
.separator {
margin:auto;
width: 10.5rem ;
height: .083333rem;
background-color: #dcdddd;
}
.menu-item {
height: 5.916667rem;
line-height: 5.916667rem;
font-size: 1.5rem ;
font-weight: bold;
color: #4c4948;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
i {
display: inline-block;
width: 3.416667rem /* 41/12 */;
height: 3.416667rem /* 41/12 */;
// margin-right: 1.333333rem;
margin-right: .166667rem /* 2/12 */;
vertical-align: middle;
}
.m1 {
background: url("~@/assets/images/insurance-query/m1-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m2 {
background: url("~@/assets/images/insurance-query/m2-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m3 {
background: url("~@/assets/images/insurance-query/m3-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m4 {
background: url("~@/assets/images/insurance-query/m4-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m5 {
background: url("~@/assets/images/insurance-query/m5-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m6 {
background: url("~@/assets/images/insurance-query/m6-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m7 {
background: url("~@/assets/images/insurance-query/m7-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m8 {
background: url("~@/assets/images/insurance-query/m8-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
}
.menu-item.activity {
color: #f05a23 !important;
.m1 {
background: url("~@/assets/images/insurance-query/m1.png") no-repeat center center;
background-size: 100% 100%;
}
.m2 {
background: url("~@/assets/images/insurance-query/m2.png") no-repeat center center;
background-size: 100% 100%;
}
.m3 {
background: url("~@/assets/images/insurance-query/m3.png") no-repeat center center;
background-size: 100% 100%;
}
.m4 {
background: url("~@/assets/images/insurance-query/m4.png") no-repeat center center;
background-size: 100% 100%;
}
.m5 {
background: url("~@/assets/images/insurance-query/m5.png") no-repeat center center;
background-size: 100% 100%;
}
.m6 {
background: url("~@/assets/images/insurance-query/m6.png") no-repeat center center;
background-size: 100% 100%;
}
.m7 {
background: url("~@/assets/images/insurance-query/m7.png") no-repeat center center;
background-size: 100% 100%;
}
.m8 {
background: url("~@/assets/images/insurance-query/m8.png") no-repeat center center;
background-size: 100% 100%;
}
width: 12.833333rem;
height: 42.333333rem;
margin-left: 3.166667rem;
.separator {
margin: auto;
width: 10.5rem;
height: .083333rem;
background-color: #dcdddd;
}
.menu-item {
height: 5.916667rem;
line-height: 5.916667rem;
font-size: 1.5rem;
font-weight: bold;
color: #4c4948;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
i {
display: inline-block;
width: 3.416667rem;
height: 3.416667rem;
margin-right: .166667rem;
vertical-align: middle;
}
}
.min-panel {
margin-left: .666667rem;
width: 1.166667rem;
.m1 {
background: url("~@/assets/images/insurance-query/m1-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.item {
width: 1.166667rem ;
height: 6rem;
display: flex;
justify-content: flex-start;
align-items: center;
.m2 {
background: url("~@/assets/images/insurance-query/m2-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.activity .triangle {
width: .583333rem;
height: 1.166667rem ;
background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
background-size: 100% 100%;
.m3 {
background: url("~@/assets/images/insurance-query/m3-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
}
.right-panel {
margin-left: 1.166667rem;
width: 64.166667rem ;
background-color: #ffffff;
.m4 {
background: url("~@/assets/images/insurance-query/m4-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m5 {
background: url("~@/assets/images/insurance-query/m5-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m6 {
background: url("~@/assets/images/insurance-query/m6-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m7 {
background: url("~@/assets/images/insurance-query/m7-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m8 {
background: url("~@/assets/images/insurance-query/m8-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
}
.menu-item.activity {
color: #f05a23 !important;
.m1 {
background: url("~@/assets/images/insurance-query/m1.png") no-repeat center center;
background-size: 100% 100%;
}
.panel {
display: none;
.m2 {
background: url("~@/assets/images/insurance-query/m2.png") no-repeat center center;
background-size: 100% 100%;
}
.activity {
display: block !important;
.m3 {
background: url("~@/assets/images/insurance-query/m3.png") no-repeat center center;
background-size: 100% 100%;
}
.m4 {
background: url("~@/assets/images/insurance-query/m4.png") no-repeat center center;
background-size: 100% 100%;
}
.m5 {
background: url("~@/assets/images/insurance-query/m5.png") no-repeat center center;
background-size: 100% 100%;
}
.m6 {
background: url("~@/assets/images/insurance-query/m6.png") no-repeat center center;
background-size: 100% 100%;
}
.m7 {
background: url("~@/assets/images/insurance-query/m7.png") no-repeat center center;
background-size: 100% 100%;
}
.m8 {
background: url("~@/assets/images/insurance-query/m8.png") no-repeat center center;
background-size: 100% 100%;
}
}
}
.min-panel {
margin-left: .666667rem;
width: 1.166667rem;
.item {
width: 1.166667rem;
height: 6rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.activity .triangle {
width: .583333rem;
height: 1.166667rem;
background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
background-size: 100% 100%;
}
}
.right-panel {
margin-left: 1.166667rem;
width: 64.166667rem;
background-color: #ffffff;
.panel {
display: none;
}
.activity {
display: block !important;
}
}
.empty-line {
height: 1.333333rem /* 16/12 */;
height: 1.333333rem;
}
......
......@@ -64,15 +64,18 @@
<div class="panel" :class="{activity : activity == 'm1'}"></div>
<div class="panel" :class="{activity : activity == 'm2'}">
<payment-type></payment-type>
<div class="empty-line"></div></div>
<!-- <div class="empty-line"></div> -->
</div>
<div class="panel" :class="{activity : activity == 'm3'}">
<insurance-query></insurance-query>
<div class="empty-line"></div></div>
<!-- <div class="empty-line"></div> -->
</div>
<div class="panel" :class="{activity : activity == 'm4'}"></div>
<div class="panel" :class="{activity : activity == 'm5'}"></div>
<div class="panel" :class="{activity : activity == 'm6'}">
<reservation></reservation>
<div class="empty-line"></div></div>
<!-- <div class="empty-line"></div> -->
</div>
<div class="panel" :class="{activity : activity == 'm7'}"></div>
<div class="panel" :class="{activity : activity == 'm8'}"></div>
</div>
......
......@@ -49,9 +49,9 @@
// width: auto;
text-align: center;
justify-content: space-between;
max-width: 79.166667rem /* 950/12 */;
max-width: 79.166667rem;
// max-width: 1200px;
&-item {
......
......@@ -78,7 +78,7 @@
margin: 2.5rem auto 0;
display: flex;
align-items: center;
padding-left: 1rem /* 12/12 */;
padding-left: 1rem;
.check {
height: 1rem;
......@@ -118,7 +118,7 @@
&-item {
position: relative;
// margin-top: 2.75rem;
margin-top: 2.5rem /* 30/12 */;
margin-top: 2.5rem;
.label {
font-family: MicrosoftYaHei;
......
......@@ -85,7 +85,7 @@
margin: 2.5rem auto 0;
display: flex;
align-items: center;
padding-left: 1rem /* 12/12 */;
padding-left: 1rem;
.check {
height: 1rem;
......@@ -99,8 +99,7 @@
&-submit {
@include btc2(13.5rem, 4rem, 16px);
margin: 4.166667rem /* 50/12 */auto 0 ;
// margin: 8.25rem auto 0;
margin: 4.166667rem auto 0 ;
letter-spacing: 1.6px;
}
......
@import '@/styles/_support';
input {
padding: 0 2.083333rem /* 25/12 */;
padding: 0 2.083333rem;
}
.content {
......@@ -48,7 +48,7 @@ input {
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 2.083333rem /* 25/12 */;
padding: 0 2.083333rem;
}
// 长文本
......
......@@ -100,6 +100,6 @@
</template>
<script src="./reservation.js"></script>
<style lang="scss" >
<style lang="scss" scoped>
@import "./reservation.scss";
</style>
......