Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
d6c2547b by simon
Options

默认提交

1 parent 27ff180f master
Inline Side-by-side
Showing 18 changed files with 967 additions and 104 deletions
......@@ -436,6 +436,10 @@ textarea {
display: none;
}
.clarms .el-input__inner {
font-size: 22px;
}
@media (max-width: 1200px) {
.page-index {
.video-js {
......
@import '@/styles/_support';
.comp {
font-size: 22px;
}
input {
padding: 0 2.083333rem;
......@@ -11,10 +14,11 @@ input {
}
.gray {
color: #747474;
// color: #747474;
color: #666666;
}
.empty{
.empty {
flex: 1;
height: 30rem;
display: flex;
......@@ -37,35 +41,36 @@ input {
}
}
.submit-btn{
.submit-btn {
background: url("~@assets/images/vhis/vhis-btn.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 15rem;
height: 2.5rem;
line-height: 2.5rem;
width: 300px;
height: 50px;
line-height: 50px;
color: white;
font-weight: 600;
cursor: pointer;
margin: 2.5rem auto;
text-align: center;
border-radius: 2rem;
border-radius: 50px;
}
.reservation-container-2 {
@extend .bb;
border-radius: .666667rem;
border: solid .083333rem #ff6839;
border: solid 2px $cOrange;
background-color: #ffffff;
padding: 1.666667rem 10rem 2.833333rem 10rem;
// padding: 1.666667rem 10rem 2.833333rem 10rem;
padding: 20px 100px 72px;
.clarms-border{
box-sizing:border-box;
padding:.166667rem;
.clarms-border {
box-sizing: border-box;
padding: .166667rem;
border-radius: .416667rem;
background-image: linear-gradient(to right , #ffb31d, #f15907) ;
margin: 0 1.25rem ;
min-width: 25rem ;
background-image: linear-gradient(to right, #ffb31d, #f15907);
margin: 0 1.25rem;
min-width: 25rem;
.clarms-select {
width: 100%;
......@@ -73,24 +78,28 @@ input {
}
.title {
font-size: 1.333333rem;
color: #ff6839;
text-align: center;
margin: 1.666667rem auto 0 auto;
// margin: 1.666667rem auto 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
letter-spacing: .25rem ;
letter-spacing: .25rem;
font-size: 1.5rem;
.t1 {
font-size: 24px;
font-weight: bold;
}
}
.default-mt {
margin-top: 2.666667rem;
margin-top: 48px;
}
.submit-btn{
margin: 2.5rem auto 1rem;
.submit-btn {
margin: 48px auto 24px;
}
.flex-top {
......@@ -117,15 +126,15 @@ input {
.check-item {
display: flex;
align-items: center;
margin-right: 2rem;
margin-right: 60px;
margin-bottom: .833333rem;
span {
margin-left: .833333rem;
margin-left: 20px;
}
img {
width: 1.666667rem ;
width: 1.666667rem;
}
}
......@@ -145,17 +154,19 @@ input {
}
.mt20 {
margin-top: 1.666667rem;
margin-top: 48px;
}
.mt10 {
margin-top: .833333rem;
margin-top: 24px;
}
.bottom-tip {
font-size: .833333rem ;
// font-size: .833333rem;
font-size: 18px;
display: flex;
align-items: center;
span {
margin-left: 1.3rem;
}
......@@ -167,7 +178,7 @@ input {
hr {
border-top: 1px solid #eee;
margin-top: 2.5rem ;
margin-top: 48px;
}
.tips {
......@@ -176,11 +187,12 @@ input {
align-items: center;
img {
width: .833333rem;
width: 2rem;
}
span {
font-size: 1rem ;
// font-size: 1rem;
font-size: 18px;
margin-left: .833333rem;
color: #ff6839;
}
......@@ -202,7 +214,7 @@ input {
font-size: 1.166667rem;
.icon {
width:1.333333rem;
width: 1.333333rem;
margin-right: 5px;
display: inline-block;
}
......@@ -214,7 +226,7 @@ input {
font-size: 1.166667rem;
}
}
}
}
.form {
......@@ -223,7 +235,7 @@ input {
flex-wrap: wrap;
&-name {
font-size: 1.333333rem ;
font-size: 1.333333rem;
font-weight: 600;
text-align: left;
color: #ff6839;
......@@ -233,7 +245,7 @@ input {
.ipt-date {
width: 100%;
border: 1px solid #ff6839 !important;
border-radius: .416667rem ;
border-radius: .416667rem;
height: 3rem;
align-items: center;
padding-left: .833333rem;
......@@ -262,9 +274,9 @@ input {
// input和下拉
.ipt {
border: 1px solid #ff6839 !important;
border-radius: .416667rem ;
border-radius: .416667rem;
height: 3rem;
display:flex;
display: flex;
align-items: center;
}
......@@ -318,9 +330,11 @@ input {
width: 30%;
padding-left: 5px;
letter-spacing: .25rem;
font-size: 20px;
.main-label {
font-size: 1.5rem ;
// font-size: 1.5rem;
font-size: 22px;
color: #ff6839;
}
}
......@@ -333,14 +347,15 @@ input {
.value {
width: 70%;
position: relative;
.ipt-wrap {
// input和下拉
.ipt {
border: 1px solid #ff6839 !important;
border-radius: .416667rem ;
border-radius: .416667rem;
height: 3rem;
display:flex;
display: flex;
align-items: center;
}
......@@ -349,9 +364,9 @@ input {
width: 100%;
border-bottom: 1px solid #ccc;
height: 3rem;
display:flex;
display: flex;
align-items: center;
margin-bottom: .833333rem ;
margin-bottom: .833333rem;
}
// 长文本
......@@ -406,6 +421,7 @@ input {
.form {
&-item {
width: 100%;
.label {
min-width: 30%;
}
......@@ -426,13 +442,13 @@ input {
@media (max-width: 600px) {
.reservation-container-2 {
.reservation-container-2 {
.clarms-border{
.clarms-border {
min-width: auto;
margin: 0 .25rem;
}
}
}
.form {
&-item {
......@@ -457,10 +473,12 @@ input {
&-item-2 {
display: block;
.label {
width: 100%;
margin-bottom:10px;
margin-bottom: 10px;
}
.value {
width: 100%;
}
......
<template>
<div>
<div class="comp">
<template v-if="!insuredList || insuredList.length == 0">
<div class="reservation-container-2">
<div class="empty">
......@@ -17,7 +17,7 @@
<template v-else>
<div class="reservation-container-2">
<div class="title default-mt">
<span>{{$t('clarms.step2.label1')}}</span>
<span class="t1">{{$t('clarms.step2.label1')}}</span>
<div class="clarms-border">
<el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')">
<template v-if="lan == 'en'">
......@@ -30,7 +30,7 @@
</template>
</el-select>
</div>
<span>{{$t('clarms.step2.label2')}}</span>
<span class="t1">{{$t('clarms.step2.label2')}}</span>
</div>
<hr>
<div class="gird-g form default-mt">
......
......@@ -9,6 +9,7 @@
height: 100%;
@extend .fcc;
text-align: center;
font-size: 22px;
}
.overlay {
......@@ -23,7 +24,7 @@
.modal {
position: relative;
@extend .bb;
width: 63.333333rem;
width: 800px;
// height: 28.5rem;
border-radius: .8333rem;
background-color: #ffffff;
......@@ -39,18 +40,19 @@
.info-icon {
width: 10rem;
min-width: 6rem;
min-width: 10rem;
img {
width:100%;
width: 100%;
}
}
.message {
margin-left: 1.666667rem;
font-size: 1.333333rem;
margin-left: 32px;
// font-size: 1.333333rem;
font-weight: 600;
color: $cOrange;
letter-spacing: .083333rem ;
letter-spacing: .083333rem;
text-align: left;
line-height: 1.5;
......@@ -63,11 +65,12 @@
.close {
cursor: pointer;
img {
width: 1.666667rem ;
width: 1.666667rem;
position: absolute;
right: -2.5rem;
top: -1.666667rem ;
top: -1.666667rem;
}
}
}
......@@ -83,13 +86,14 @@
.content {
padding: 5rem 4rem;
}
.close {
display: none;
}
}
}
}
@media (max-width: 700px) {
@media (max-width: 700px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
......@@ -99,11 +103,12 @@
.content {
padding: 4rem 2rem;
}
.close {
display: none;
}
}
}
}
......@@ -117,8 +122,9 @@
.close {
display: none;
}
.content {
padding: 2rem .5rem;
}
}
}
}
......
......@@ -9,6 +9,7 @@
height: 100%;
@extend .fcc;
text-align: center;
font-size: 22px;
}
.overlay {
......@@ -23,7 +24,7 @@
.modal {
position: relative;
@extend .bb;
width: 63.333333rem;
width: 800px;
// height: 28.5rem;
border-radius: .8333rem;
background-color: #ffffff;
......@@ -39,18 +40,19 @@
.info-icon {
width: 10rem;
min-width: 6rem;
min-width: 10rem;
img {
width:100%;
width: 100%;
}
}
.message {
margin-left: 1.666667rem;
font-size: 1.333333rem;
margin-left: 32px;
// font-size: 1.333333rem;
font-weight: 600;
color: $cOrange;
letter-spacing: .083333rem ;
letter-spacing: .083333rem;
text-align: left;
line-height: 1.5;
......@@ -63,11 +65,12 @@
.close {
cursor: pointer;
img {
width: 1.666667rem ;
width: 1.666667rem;
position: absolute;
right: -2.5rem;
top: -1.666667rem ;
top: -1.666667rem;
}
}
}
......@@ -83,13 +86,14 @@
.content {
padding: 5rem 4rem;
}
.close {
display: none;
}
}
}
}
@media (max-width: 700px) {
@media (max-width: 700px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
......@@ -99,11 +103,12 @@
.content {
padding: 4rem 2rem;
}
.close {
display: none;
}
}
}
}
......@@ -117,8 +122,9 @@
.close {
display: none;
}
.content {
padding: 2rem .5rem;
}
}
}
}
......
......@@ -2,6 +2,10 @@
$borderSize: 8px;
.comp{
font-size: 22px;
}
.clarms-container {
box-sizing: border-box;
padding: .166667rem;
......@@ -25,6 +29,7 @@ $borderSize: 8px;
border-radius: 2px;
padding: 2px;
background-image: linear-gradient(to right, #ffb31d, #f15907);
max-width: 400px;
.cont {
@extend .bb;
......@@ -33,6 +38,7 @@ $borderSize: 8px;
height: 100%;
background-color: #ffffff;
border-radius: 2px;
font-size: 18px;
}
}
......@@ -63,7 +69,7 @@ $borderSize: 8px;
}
.clarms-t1 {
font-size: 1.5rem;
font-size: 22px;
color: #f15907;
letter-spacing: .166667rem;
}
......@@ -71,6 +77,7 @@ $borderSize: 8px;
.clarms-t2 {
color: #58595b;
letter-spacing: .166667rem;
font-size: 18px;
}
}
......@@ -89,7 +96,8 @@ $borderSize: 8px;
line-height: 3rem;
color: white;
letter-spacing: .166667rem;
font-size: 1.166667rem;
// font-size: 1.166667rem;
font-size: 18px;
cursor: pointer;
}
......
<template>
<div>
<div class="comp">
<div class="clarms-container">
<div class="clarms-box">
<div class="clarms-tips" v-if="tipsVisible">
......
@import '@/styles/_support';
.comp {
font-size: 22px;
}
.orange {
.orange {
color: $cOrange;
}
}
.gray {
.gray {
color: #747474;
}
}
.submit-btn{
.submit-btn {
background: url("~@assets/images/vhis/vhis-btn.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 18rem;
height: 3rem;
line-height: 3rem;
width: 300px;
height: 50px;
line-height: 50px;
color: white;
font-weight: 600;
cursor: pointer;
margin: 2.5rem auto;
text-align: center;
border-radius: 1.666667rem;
}
border-radius: 50px;
}
.reservation-container {
@extend .bb;
border-radius: .666667rem;
border: solid .083333rem $cOrange;
border: solid 2px $cOrange;
background-color: #ffffff;
padding: 2.666667rem 10rem 2.833333rem 10rem;
.title {
font-size: 1.333333rem;
// font-size: 1.333333rem;
color: $cOrange;
text-align: center;
margin: 1.666667rem auto 0 auto;
span {
margin: 0 .333333rem ;
margin: 0 .333333rem;
}
}
......@@ -62,6 +67,7 @@
.check-item {
display: flex;
align-items: center;
span {
margin-left: .833333rem;
}
......@@ -92,7 +98,7 @@
flex-wrap: wrap;
&-name {
font-size: 1.333333rem ;
// font-size: 1.333333rem;
font-weight: 600;
text-align: left;
color: $cOrange;
......@@ -102,10 +108,11 @@
.ipt-date {
width: 100%;
border: 1px solid $cOrange !important;
border-radius: .416667rem ;
border-radius: .416667rem;
height: 3rem;
align-items: center;
padding: 0 2rem;
}
&-item {
......@@ -125,16 +132,18 @@
}
.ipt-wrap {
width: 70%;
position: relative;
// input和下拉
.ipt {
border: 1px solid $cOrange !important;
border-radius: .416667rem ;
border-radius: .416667rem;
height: 3rem;
display:flex;
display: flex;
align-items: center;
}
// 长文本
......@@ -201,14 +210,15 @@
.value {
width: 75%;
position: relative;
.ipt-wrap {
// input和下拉
.ipt {
border: 1px solid $cOrange !important;
border-radius: .416667rem ;
border-radius: .416667rem;
height: 3rem;
display:flex;
display: flex;
align-items: center;
}
......@@ -217,9 +227,9 @@
width: 100%;
border-bottom: 1px solid #ccc;
height: 3rem;
display:flex;
display: flex;
align-items: center;
margin-bottom: .833333rem ;
margin-bottom: .833333rem;
}
// 长文本
......@@ -244,10 +254,10 @@
}
}
}
}
}
.notice {
.notice {
margin-top: 4rem;
@extend .bb;
padding: 0 1rem;
......@@ -264,7 +274,7 @@
top: .6rem;
}
}
}
}
@media (max-width: 1200px) {
......@@ -278,6 +288,7 @@
.form {
&-item {
width: 100%;
.label {
min-width: 30%;
}
......@@ -325,6 +336,7 @@
.label {
width: 30%;
}
.value {
width: 70%;
}
......@@ -353,7 +365,7 @@
@media (max-width: 500px) {
.date-wrap .calendar-wrap{
.date-wrap .calendar-wrap {
margin-left: -25px !important;
}
......
<template>
<div class="reservation-container">
<div class="comp reservation-container">
<div class="title" v-if="!(userInfo && userInfo.name)"><u><span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/<span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div>
<div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div>
<div class="gird-g form default-mt">
......
@import '@/styles/_support';
.content {
// padding-bottom: 2.33rem;
margin: 2.333333rem auto;
position: relative;
}
input {
padding: 0 2.083333rem;
color: #333333;
}
.orange {
color: $cOrange;
}
.gray {
color: #747474;
}
.border2 {
background-image: linear-gradient(to right, #ffb31d, #f15907);
}
.navigate {
position: relative;
margin: 24px auto 48px;
.bg {
position: absolute;
height: 13px;
width: 100%;
background-image: linear-gradient(to right, #ffb31d, #f15907);
top: 32px;
}
.cont {
position: relative;
width: 1200px;
margin: 0 auto;
.tt {
padding: 0 24px;
color: #ff6839;
font-size: 48px;
font-weight: bold;
letter-spacing: 2.45px;
background-color: #ffffff;
}
}
}
.submit-btn {
background: url("~@assets/images/vhis/vhis-btn.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 15rem;
height: 2.5rem;
line-height: 2.5rem;
color: white;
font-weight: 600;
cursor: pointer;
margin: 2.5rem auto;
text-align: center;
}
.reservation-container {
@extend .bb;
border-radius: .666667rem;
border: solid 2px $cOrange;
background-color: #ffffff;
padding: 2.666667rem 10rem 2.833333rem 10rem;
.title {
font-size: 1.333333rem;
color: $cOrange;
text-align: center;
margin: 1.666667rem auto 0 auto;
span {
padding: 0 .166667rem;
}
}
.default-mt {
margin-top: 2.666667rem;
}
.flex-top {
display: flex;
justify-content: left;
align-items: flex-start;
}
.flex-start {
display: flex;
justify-content: left;
align-items: flex-start;
flex-wrap: wrap;
}
.check-item {
display: flex;
align-items: center;
span {
margin-left: .833333rem;
}
}
}
.reservation-container-2 {
@extend .bb;
border-radius: .666667rem;
border: solid .083333rem $cOrange;
background-color: #ffffff;
padding: 1.666667rem 10rem 2.833333rem 10rem;
.title {
font-size: 1.333333rem;
color: $cOrange;
text-align: center;
margin: 1.666667rem auto 0 auto;
select {
padding: 0 1.25rem;
border: none;
border-bottom: .083333rem solid #666666;
color: #666666;
}
}
.default-mt {
margin-top: 2.666667rem;
}
.submit-btn {
margin: 2.5rem auto 1rem;
}
.flex-top {
display: flex;
justify-content: left;
align-items: flex-start;
}
.flex-start {
display: flex;
justify-content: left;
align-items: flex-start;
flex-wrap: wrap;
}
.check-item {
display: flex;
align-items: center;
margin-right: 2rem;
margin-bottom: .833333rem;
span {
margin-left: .833333rem;
}
img {
width: 1.666667rem;
}
}
.item-group {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
.ml10 {
margin-left: .833333rem;
}
.mr10 {
margin-right: .833333rem;
}
.mt20 {
margin-top: 1.666667rem;
}
.mt10 {
margin-top: .833333rem;
}
.upload-item {
.tip {
color: $cOrange;
font-size: 1rem;
margin-top: .833333rem;
text-align: center;
width: 8.333333rem;
letter-spacing: 1px;
}
.upload-icon-1 {
width: 8.333333rem;
height: 8.333333rem;
background: url("~@/assets/images/clarms/icon1.png");
background-size: 100% 100%;
}
.upload-icon-2 {
width: 8.333333rem;
height: 8.333333rem;
background: url("~@/assets/images/clarms/icon2.png");
background-size: 100% 100%;
}
.upload-icon-3 {
width: 8.333333rem;
height: 8.333333rem;
background: url("~@/assets/images/clarms/icon3.png");
background-size: 100% 100%;
}
.upload-icon-4 {
width: 8.333333rem;
height: 8.333333rem;
background: url("~@/assets/images/clarms/icon4.png");
background-size: 100% 100%;
}
.upload-icon-5 {
width: 8.333333rem;
height: 8.333333rem;
background: url("~@/assets/images/clarms/icon5.png");
background-size: 100% 100%;
}
}
.bottom-tip {
font-size: .833333rem;
display: flex;
align-items: center;
span {
margin-left: 1.3rem;
}
img {
width: 1.3rem;
}
}
hr {
border-top: 1px solid #eee;
margin-top: 2.5rem;
}
.tips {
display: flex;
justify-content: flex-start;
align-items: center;
img {
width: .833333rem;
}
span {
font-size: 1rem;
margin-left: .833333rem;
color: $cOrange;
}
}
.contact {
text-align: center;
cursor: pointer;
color: $cOrange;
font-weight: 600;
}
}
.form {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&-name {
font-size: 1.333333rem;
font-weight: 600;
text-align: left;
color: $cOrange;
padding-left: 15px;
}
.ipt-date {
width: 100%;
border: 1px solid $cOrange !important;
border-radius: .416667rem;
height: 3rem;
align-items: center;
padding-left: .833333rem;
}
&-item {
width: 50%;
display: flex;
justify-content: center;
padding: 0 $marginSmall;
margin-bottom: 1.333333rem;
.label {
display: flex;
align-items: center;
min-width: 30%;
justify-content: flex-start;
padding-left: 5px;
letter-spacing: .25rem;
}
.ipt-wrap {
width: 70%;
position: relative;
// input和下拉
.ipt {
border: 1px solid $cOrange !important;
border-radius: .416667rem;
height: 3rem;
display: flex;
align-items: center;
}
// 长文本
.textarea {
min-height: 8.75rem;
@extend .bb;
padding: .75rem;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
right: 1.2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: .633333rem;
height: .433333rem;
pointer-events: none;
cursor: default;
}
}
.validator {
color: $cOrange;
margin-top: 0.5rem;
position: absolute;
right: 1rem;
display: flex;
align-items: center;
// bottom: 0;
img {
display: inline-block;
margin-right: 0.4rem;
}
}
}
&-item-2 {
width: 100%;
display: flex;
justify-content: flex-start;
padding: 0 $marginSmall;
margin-bottom: 1.333333rem;
.label {
align-items: center;
width: 25%;
padding-left: 5px;
letter-spacing: .25rem;
.main-label {
color: $cOrange;
}
}
.date-container {
width: 60%;
position: relative;
}
.value {
width: 75%;
position: relative;
.ipt-wrap {
// input和下拉
.ipt {
border: 1px solid $cOrange !important;
border-radius: .416667rem;
height: 3rem;
display: flex;
align-items: center;
}
.ipt2 {
width: 100%;
border-bottom: 1px solid #ccc;
height: 3rem;
display: flex;
align-items: center;
margin-bottom: .833333rem;
}
// 长文本
.textarea {
min-height: 8.75rem;
@extend .bb;
padding: .75rem;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
right: 1.2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: .633333rem;
height: .433333rem;
pointer-events: none;
cursor: default;
}
}
}
}
}
.notice {
margin-top: 4rem;
@extend .bb;
padding: 0 1rem;
&-item {
position: relative;
line-height: 2;
letter-spacing: 1.2px;
margin-bottom: 1rem;
&-icon {
width: 1.166667rem;
position: absolute;
top: .6rem;
}
}
}
// .submit-btn {
// 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 bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
// // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
// text-align: center;
// font-size: $fontSize;
// letter-spacing: .129167rem;
// color: #ffffff;
// border-radius: 3.5rem;
// cursor: pointer;
// border: none;
// color: #ffffff;
// background-color: $cOrange;
// box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
// background-blend-mode: soft-light, ;
// background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
// // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
// }
@media (max-width: 1200px) {
.mobile-margin {
margin-top: 2.5rem;
}
}
@media (max-width: 1000px) {
.reservation-container-2 {
padding: 1.666667rem 2rem 2.833333rem 2rem;
}
.form {
&-item {
width: 100%;
.label {
min-width: 30%;
}
.ipt-wrap {
width: 70%;
}
}
&-item-2 {
.date-container {
width: 80%;
}
}
}
}
@media (max-width: 600px) {
.reservation-container {
padding: 2.666667rem 2rem 2.833333rem 2rem;
}
.form {
&-item {
width: 100%;
.label {
min-width: 30%;
}
.ipt-wrap {
width: 70%;
}
}
&-item2 {
display: block;
.ipt-wrap {
margin: 0;
}
}
&-item-2 {
.label {
width: 30%;
}
.value {
width: 70%;
}
.date-container {
width: 100%;
}
}
&-item3 {
display: block;
.ipt-wrap {
margin: 0;
width: 100%;
}
}
}
.notice {
margin: 0;
}
}
@media (max-width: 400px) {
.reservation-container-2 {
padding: 1.666667rem 1rem;
}
}
<template>
<div>
<div class="navigate">
<div class="bg"></div>
<div class="cont">
<span class="tt">索償申請</span>
</div>
</div>
<div class="content clarms">
<template v-if="step == 3">
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
......@@ -26,6 +32,8 @@
</template>
</div>
</div>
</div>
</template>
<script src="./clarms.js"></script>
......
import {
mapGetters,
mapActions,
mapState
} from "vuex";
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
import ClarmsModalOne from '@/components/clarms/clarms-plugins-modal1.vue';
import ClarmsModalTwo from '@/components/clarms/clarms-plugins-modal2.vue';
import ClarmsVerifyForm from '@/components/clarms/clarms-plugins-verifyform.vue';
import ClarmsMaterial from '@/components/clarms/clarms-plugins-material.vue';
// 用户没有登录
// 校验成功
// 校验失败
// 用户已经登录
// 没有保单
// 校验成功
// 校验失败
// 有保单
export default {
data() {
return {
step: 0, // 1是表单；2是报案页面；3=信息不完整
showModal1: false,
showModal2: false,
agress: false,
reservationTypes: [],
cid: false,
// 可以理赔的客户信息
customerList: []
}
},
components: {
ClarmsVerifyForm,
ClarmsMaterial,
ClarmsModalOne,
ClarmsModalTwo
},
computed: {
...mapState({
userInfo: state => state.userInfo
}),
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
},
methods: {
toClarms() {
this.$router.push({
path: "/clarms",
query: {}
});
},
initData() {
// this.step = 2;
// return;
if (this.userInfo && this.userInfo.name) {
this.loadCidIfLogin();
sessionStorage.removeItem("clarmsRequestCid")
} else {
let cid = sessionStorage.getItem("clarmsRequestCid");
if (cid) {
this.cid = cid;
this.checkCid();
} else {
this.step = 1;
}
}
},
loadCidIfLogin() {
let param = {
sid: this.userInfo.sid
};
httpPost({
url: api.getCidByLogin,
sid: true,
data: param
}).then(res => {
if (res) {
this.cid = res;
this.checkCid();
} else {
this.step = 3;
}
}).catch(e => {
this.step = 1;
});
},
checkCid() {
let param = {
cid: this.cid
}
httpPost({
url: api.clarmsCustomerList,
data: param
}).then(res => {
sessionStorage.removeItem("clarmsRequestCid");
if (res) {
this.customerList = res.insuredInfoList;
this.step = 2;
}
// if (res && res.insuredInfoList && res.insuredInfoList.length > 0) {
// this.customerList = res.insuredInfoList;
// this.step = 2;
// } else {
// sessionStorage.removeItem("clarmsRequestCid");
// this.step = 1;
// }
}).catch(e => {
sessionStorage.removeItem("clarmsRequestCid");
this.step = 1;
});
},
handleInsuredInfo(data) {
this.cid = data.cid;
this.customerList = data.list;
this.step = 2;
},
handleShowModal(modalIndex) {
console.log(modalIndex);
if (modalIndex == 1) {
this.showModal1 = true;
} else if (modalIndex == 2) {
this.showModal2 = true;
}
},
gotoInformationPage() {
let c = this.$route.fullPath;
this.$router.push({
path: "/infomation/improve",
query: {
c: c,
a: 1
}
});
},
logoutAction() {
this.sid = false;
this.hadQueryCustomerList = false;
this.customerList = [];
this.step = 1;
},
loginAction() {
this.sid = false;
this.hadQueryCustomerList = false;
this.customerList = [];
}
},
watch: {
userInfo(val) {
if (val && val.name) {
this.loginAction();
} else {
this.logoutAction();
}
}
},
mounted() {
this.initData();
},
created() {}
}
......@@ -29,11 +29,13 @@ input {
}
.reservation-container {
@extend .fcc;
@extend .bb;
border-radius: .666667rem;
border: solid .083333rem $cOrange;
background-color: #ffffff;
padding: 2.666667rem 10rem 2.833333rem 10rem;
min-height: 500px;
.title {
font-size: 1.333333rem;
......
<template>
<div class="reservation-container">
<div class="submit-btn" @click="toClarms">下一步</div>
</div>
<!-- <div>
<template v-if="step == 3">
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('customService.unauth.baseInfoTip')}}&nbsp;
<span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
&nbsp;{{$t('customService.unauth.baseInfoTail')}}
</div>
</div>
</template>
<clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one>
<clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two>
<div class="mobile-margin">
<template v-if="step == 1">
<clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form>
</template>
<template v-if="step == 2">
<clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material>
</template>
</div>
</div> -->
</template>
<script src="./clarms-comp.js"></script>
<style lang="scss" scoped>
@import "./clarms-comp.scss";
</style>
......@@ -14,7 +14,7 @@ import CommonForm from './components/common-form.vue'
import PolicyChangeGuide from './components/policy-change-guide.vue'
import PolicyChangeContact from './components/policy-change-contact.vue'
import PolicyChangeInformation from './components/policy-change-information.vue'
import Clarms from './components/clarms.vue'
import Clarms from './components/clarms-comp.vue'
export default {
data() {
......
......@@ -189,7 +189,7 @@ export default {
this.$set(this, 'bannerList', bannerList);
console.log(this.bannerList);
this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPlayer);
this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPoster);
// 设置标题
document.title = targetData.productName;
......
......@@ -276,6 +276,14 @@ const routes = [
meta: {
title: '平安人寿香港'
}
},
{
path: '/clarms',
name: 'clarms',
component: () => import('./pages/clarms/clarms.vue'),
meta: {
title: '平安人寿香港'
}
}
// 404页面
// {
......