Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
18c697e5 by simon
Options

默认提交

1 parent ded81416
Inline Side-by-side
Showing 13 changed files with 464 additions and 315 deletions
......@@ -437,7 +437,8 @@ textarea {
}
.clarms .el-input__inner {
font-size: 22px;
font-size: 22px;
border: none;
}
@media (max-width: 1200px) {
......
......@@ -59,25 +59,42 @@ input {
.reservation-container-2 {
@extend .bb;
border-radius: .666667rem;
border: solid 2px $cOrange;
// border: solid 2px $cOrange;
background-color: #ffffff;
// padding: 1.666667rem 10rem 2.833333rem 10rem;
padding: 20px 100px 72px;
.clarms-border {
box-sizing: border-box;
padding: .166667rem;
border-radius: .416667rem;
position: relative;
@extend .bb;
@extend .fcc;
padding: 2px;
background-image: linear-gradient(to right, #ffb31d, #f15907);
margin: 0 1.25rem;
min-width: 25rem;
width: 482px;
height: 62px;
margin: 0 24px;
border-radius: 8px;
.clarms-select {
width: 100%;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 26px;
right: 1.2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: 15px;
height: 10px;
pointer-events: none;
cursor: default;
}
}
.title {
color: #ff6839;
text-align: center;
// margin: 1.666667rem auto 0 auto;
......@@ -86,12 +103,12 @@ input {
justify-content: center;
font-weight: 600;
letter-spacing: .25rem;
font-size: 1.5rem;
.t1 {
font-size: 24px;
font-size: 36px;
font-weight: bold;
}
}
.default-mt {
......@@ -242,13 +259,22 @@ input {
padding-left: 15px;
}
.cont {
@extend .bb;
@extend .fcc;
padding: 2px;
background-image: linear-gradient(to right, #ffb31d, #f15907);
height: 62px;
border-radius: 8px;
}
.ipt-date {
width: 100%;
border: 1px solid #ff6839 !important;
border-radius: .416667rem;
height: 3rem;
align-items: center;
padding-left: .833333rem;
background-color: #ffffff;
// padding-left: .833333rem;
// border-radius: 0;
height: 58px;
border-radius: 8px;
}
&-item {
......@@ -294,8 +320,8 @@ input {
right: 1.2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: .633333rem;
height: .433333rem;
width: 15px;
height: 10px;
pointer-events: none;
cursor: default;
}
......@@ -342,6 +368,7 @@ input {
.date-container {
width: 60%;
position: relative;
// background-color: wheat;
}
.value {
......@@ -357,6 +384,7 @@ input {
height: 3rem;
display: flex;
align-items: center;
}
......@@ -379,16 +407,17 @@ input {
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
top: 26px;
right: 1.2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: .633333rem;
height: .433333rem;
width: 15px;
height: 10px;
pointer-events: none;
cursor: default;
}
}
}
}
}
......
<template>
<div class="comp">
<template v-if="!insuredList || insuredList.length == 0">
<div class="reservation-container-2">
<div class="empty">
<div class="tips">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('customService.insuranceQuery.noPolicy')}}
<span class="pointer btn" @click="toContactUs">{{$t('customService.insuranceQuery.customService')}}</span>
</div>
</div>
</div>
</div>
</template>
<template v-else>
<div class="reservation-container-2">
<div class="title default-mt">
<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'">
<el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameEn" :value="index + 1">
</el-option>
</template>
<template v-else>
<el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameCn" :value="index + 1">
</el-option>
</template>
</el-select>
</div>
<span class="t1">{{$t('clarms.step2.label2')}}</span>
</div>
<hr>
<div class="gird-g form default-mt">
<div class="pure-u-1 form-item-2" v-if="data.insuredIndex">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label3')}}
</div>
<div class="sub-label">{{$t('clarms.step2.label4')}}</div>
</div>
<div class="value">
<div class="ipt-wrap item-group">
<div class="check-item pointer" v-if="typeCandidates.indexOf('1') > -1" @click="typeClickHandle('1')">
<img v-if="typeSelected.indexOf('1') > -1" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.op1')}}</span>
</div>
<div class="check-item pointer" v-if="typeCandidates.indexOf('2') > -1" @click="typeClickHandle('2')">
<img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.op3')}}</span>
</div>
<div class="check-item check-disabled">
<img src="@/assets/images/clarms/uncheck-disabled.png">
<!-- <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
<div class="comp clarms-plugins-material">
<template v-if="!insuredList || insuredList.length == 0">
<div class="reservation-container-2">
<div class="empty">
<div class="tips">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('customService.insuranceQuery.noPolicy')}}
<span class="pointer btn" @click="toContactUs">{{$t('customService.insuranceQuery.customService')}}</span>
</div>
</div>
</div>
</div>
</template>
<template v-else>
<div class="reservation-container-2">
<div class="title default-mt">
<span class="t1">{{$t('clarms.step2.label1')}}</span>
<div class="clarms-border">
<div class="down-arrow"></div>
<el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')">
<template v-if="lan == 'en'">
<el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameEn" :value="index + 1">
</el-option>
</template>
<template v-else>
<el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameCn" :value="index + 1">
</el-option>
</template>
</el-select>
</div>
<span class="t1">{{$t('clarms.step2.label2')}}</span>
</div>
<hr v-if="data.insuredIndex">
<div class="gird-g form default-mt">
<div class="pure-u-1 form-item-2" v-if="data.insuredIndex">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label3')}}
</div>
<div class="sub-label">{{$t('clarms.step2.label4')}}</div>
</div>
<div class="value">
<div class="ipt-wrap item-group">
<div class="check-item pointer" v-if="typeCandidates.indexOf('1') > -1" @click="typeClickHandle('1')">
<img v-if="typeSelected.indexOf('1') > -1" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.op1')}}</span>
</div>
<div class="check-item pointer" v-if="typeCandidates.indexOf('2') > -1" @click="typeClickHandle('2')">
<img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.op3')}}</span>
</div>
<div class="check-item check-disabled">
<img src="@/assets/images/clarms/uncheck-disabled.png">
<!-- <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png"> -->
<span>{{$t('clarms.step2.op2')}}</span>
</div>
<div class="check-item check-disabled">
<img src="@/assets/images/clarms/uncheck-disabled.png">
<span>{{$t('clarms.step2.op4')}}</span>
</div>
<div class="check-item check-disabled">
<img src="@/assets/images/clarms/uncheck-disabled.png">
<span>{{$t('clarms.step2.op5')}}</span>
</div>
</div>
<div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label5')}}</span></div>
</div>
</div>
<span>{{$t('clarms.step2.op2')}}</span>
</div>
<div class="check-item check-disabled">
<img src="@/assets/images/clarms/uncheck-disabled.png">
<span>{{$t('clarms.step2.op4')}}</span>
</div>
<div class="check-item check-disabled">
<img src="@/assets/images/clarms/uncheck-disabled.png">
<span>{{$t('clarms.step2.op5')}}</span>
</div>
</div>
<div class="tips"><img src="@/assets/images/clarms/impor.png">
<span>{{$t('clarms.step2.label5')}}</span>
</div>
</div>
</div>
<div class="pure-u-1 form-item-2 mt20" v-if="typeSelected && typeSelected.length > 0">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label6')}}
</div>
<div class="sub-label">{{$t('clarms.step2.label7')}} </div>
</div>
<div class="value">
<div>
<div class="ipt-wrap">
<input class="ipt2" type="number" v-model="data.amount" @blur="amountCheck">
</div>
</div>
<div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label8')}}</span></div>
</div>
</div>
<div class="pure-u-1 form-item-2 mt20" v-if="typeSelected && typeSelected.length > 0">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label6')}}
</div>
<div class="sub-label">{{$t('clarms.step2.label7')}} </div>
</div>
<div class="value">
<div>
<div class="ipt-wrap">
<input class="ipt2" type="number" v-model="data.amount" @blur="amountCheck">
</div>
</div>
<div class="tips"><img src="@/assets/images/clarms/impor.png">
<span>{{$t('clarms.step2.label8')}}</span>
</div>
</div>
</div>
<div class="pure-u-1 form-item-2 mt20" v-if="data.amount && data.amount > 0">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label9')}}
</div>
</div>
<div class="value">
<div class="ipt-wrap date-container">
<div class="down-arrow"></div>
<date-picker class="ipt-date" v-model="data.contactDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', 'color':'#f05a23','font-weight':'600'}"></date-picker>
</div>
</div>
</div>
<div class="pure-u-1 form-item-2 mt20" v-if="data.amount && data.amount > 0">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label9')}}
</div>
</div>
<div class="value">
<div class="ipt-wrap date-container">
<div class="down-arrow"></div>
<div class="cont">
<div class="ipt-date">
<date-picker v-model="data.contactDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important', 'color':'#ff6839','font-weight':'600'}"></date-picker>
</div>
</div>
</div>
</div>
</div>
<template v-if="data.contactDate">
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label10')}}
</div>
</div>
<div class="value">
<clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',toast:$t('clarms.step2.toast1')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
<clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast2')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
</div>
</div>
<template v-if="data.contactDate">
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label10')}}
</div>
</div>
<div class="value">
<clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',toast:$t('clarms.step2.toast1')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
<clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast2')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
</div>
</div>
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label13')}}
</div>
</div>
<div class="value">
<clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast3')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label13')}}
</div>
</div>
<div class="value">
<clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast3')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
<clarms-upload id="sc" ref="sc" class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',toast:$t('clarms.step2.toast4')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
<clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',toast:$t('clarms.step2.toast5')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
</div>
</div>
</template>
</div>
<hr v-if="data.amount > 0" >
<div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
<div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>
<clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',toast:$t('clarms.step2.toast5')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
</div>
</div>
</template>
</div>
<template v-if="(data.HT41 && data.HT41.length > 0) && (data.HT26 && data.HT26.length > 0)">
<hr v-if="data.amount > 0">
<div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
<div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>
<div class="bottom-tip orange mt20">{{$t('clarms.step2.label18')}}</div>
<div class="bottom-tip gray mt10">{{$t('clarms.step2.tip2')}}</div>
<div class="bottom-tip gray mt10">{{$t('clarms.step2.tip3')}}</div>
<div class="bottom-tip orange mt20">{{$t('clarms.step2.label18')}}</div>
<div class="bottom-tip gray mt10">{{$t('clarms.step2.tip2')}}</div>
<div class="bottom-tip gray mt10">{{$t('clarms.step2.tip3')}}</div>
<div class="bottom-tip orange mt10 pointer" @click="agress = !agress">
<img v-if="agress" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.tip4')}}</span>
</div>
<div class="bottom-tip orange mt10 pointer" @click="agress = !agress">
<img v-if="agress" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.tip4')}}</span>
</div>
<div class="submit-btn pointer flex-center" :class="{disabled: submitBtnDisabled || showTips}" @click="submitMaterial">
<van-loading v-if="loading" />
{{$t('clarms.step2.btn')}}
</div>
<div class="submit-btn pointer flex-center" :class="{disabled: submitBtnDisabled || showTips}" @click="submitMaterial">
<van-loading v-if="loading" /> {{$t('clarms.step2.btn')}}
</div>
<div class="contact" v-if="!showTips" @click="toContact">{{$t('clarms.step2.contact')}}</div>
<div class="contact" v-if="!showTips" @click="toContact">{{$t('clarms.step2.contact')}}</div>
<div class="fail-tips" v-if="showTips">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('clarms.step2.failure')}}
<span class="pointer btn" @click="toContact">{{$t('clarms.step2.failureContact')}}</span>
</div>
</div>
</div>
</template>
</div>
<div class="fail-tips" v-if="showTips">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('clarms.step2.failure')}}
<span class="pointer btn" @click="toContact">{{$t('clarms.step2.failureContact')}}</span>
</div>
</div>
</template>
</div>
</template>
</div>
</template>
......@@ -168,3 +180,14 @@
<style lang="scss" scoped>
@import "./clarms-plugins-material.scss";
</style>
<style lang="scss">
.clarms-plugins-material {
.clarms-select {
.el-input__inner {
height: 58px;
border-radius: 8px;
}
}
}
</style>
......
......@@ -21,16 +21,22 @@
background: rgba($color: #000000, $alpha: 0.7);
}
.border {
position: relative;
@extend .bb;
@extend .fcc;
padding: 2px;
background-image: linear-gradient(to right, #ffb31d, #f15907);
border-radius: 16px;
}
.modal {
position: relative;
@extend .bb;
width: 800px;
// height: 28.5rem;
border-radius: .8333rem;
border-radius: 16px;
background-color: #ffffff;
padding: 3.5rem 2rem 2.5rem;
border: .083333rem solid $cOrange;
.content {
display: flex;
......@@ -76,7 +82,7 @@
}
@media (max-width: 800px) {
@media (max-width: 768px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
......
<template>
<div class="comp">
<div @click="onOverLayHandler()" class="overlay"></div>
<div class="modal">
<div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
<div class="content">
<div class="info-icon">
<img src="@/assets/images/clarms/info.png">
</div>
<div class="message">
{{$t('clarms.step2.tip5')}}<span @click="toContact">{{$t('clarms.step2.tip6')}}</span>
</div>
</div>
</div>
</div>
<div class="comp">
<div @click="onOverLayHandler()" class="overlay"></div>
<div class="border">
<div class="modal">
<div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
<div class="content">
<div class="info-icon">
<img src="@/assets/images/clarms/info.png">
</div>
<div class="message">
{{$t('clarms.step2.tip5')}}
<span @click="toContact">{{$t('clarms.step2.tip6')}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./clarms-plugins-modal1.js"></script>
......
......@@ -21,15 +21,22 @@
background: rgba($color: #000000, $alpha: 0.7);
}
.border {
position: relative;
@extend .bb;
@extend .fcc;
padding: 2px;
background-image: linear-gradient(to right, #ffb31d, #f15907);
border-radius: 16px;
}
.modal {
position: relative;
@extend .bb;
width: 800px;
// height: 28.5rem;
border-radius: .8333rem;
border-radius: 16px;
background-color: #ffffff;
padding: 3.5rem 2rem 2.5rem;
border: .083333rem solid $cOrange;
.content {
......
<template>
<div class="comp">
<div @click="onOverLayHandler()" class="overlay"></div>
<div class="modal">
<div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
<div class="content">
<div class="info-icon">
<img src="@/assets/images/clarms/suc.png">
</div>
<div class="message">
{{$t('clarms.step2.tip7')}}<span @click="toAccountInformation">{{$t('clarms.step2.tip8')}}</span>
</div>
</div>
</div>
</div>
<div class="comp">
<div @click="onOverLayHandler()" class="overlay"></div>
<div class="border">
<div class="modal">
<div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
<div class="content">
<div class="info-icon">
<img src="@/assets/images/clarms/suc.png">
</div>
<div class="message">
{{$t('clarms.step2.tip7')}}
<span @click="toAccountInformation">{{$t('clarms.step2.tip8')}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./clarms-plugins-modal2.js"></script>
......
......@@ -82,7 +82,8 @@ export default {
let input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("multiple", "multiple");
input.setAttribute("accept", "image/*");
// input.setAttribute("accept", "image/*");
input.setAttribute("accept", "image/jpeg");
input.onchange = function (val) {
let position = _this.images.length;
for (let index = 0; index < input.files.length; index++) {
......
......@@ -6,7 +6,8 @@
.orange {
color: $cOrange;
// color: $cOrange;
color: #ff6839;
}
.gray {
......@@ -14,6 +15,7 @@
}
.submit-btn {
background: url("~@assets/images/vhis/vhis-btn.png");
background-size: 100% 100%;
......@@ -24,7 +26,7 @@
color: white;
font-weight: 600;
cursor: pointer;
margin: 2.5rem auto;
margin: 100px auto 32px;
text-align: center;
border-radius: 50px;
}
......@@ -32,9 +34,10 @@
.reservation-container {
@extend .bb;
border-radius: .666667rem;
border: solid 2px $cOrange;
// border: solid 2px $cOrange;
background-color: #ffffff;
padding: 2.666667rem 10rem 2.833333rem 10rem;
// padding: 2.666667rem 10rem 2.833333rem 10rem;
padding: 60px 82px 68px;
.title {
// font-size: 1.333333rem;
......@@ -48,7 +51,7 @@
}
.default-mt {
margin-top: 2.666667rem;
margin-top: 50px;
}
.flex-top {
......@@ -106,26 +109,32 @@
}
.ipt-date {
width: 100%;
border: 1px solid $cOrange !important;
border-radius: .416667rem;
height: 3rem;
align-items: center;
// width: 100%;
// border: 1px solid $cOrange !important;
// border-radius: .416667rem;
// height: 3rem;
// align-items: center;
padding: 0 2rem;
width: 100%;
background-color: #ffffff;
height: 48px;
border-radius: 8px;
}
&-item {
width: 50%;
width: 48%;
display: flex;
justify-content: center;
padding: 0 $marginSmall;
margin-bottom: 1.333333rem;
justify-content: space-between;
// padding: 0 $marginSmall;
margin-bottom: 32px;
.label {
display: flex;
align-items: center;
width: 30%;
// width: 30%;
width: 140px;
justify-content: flex-start;
padding-left: 5px;
letter-spacing: .25rem;
......@@ -133,16 +142,31 @@
.ipt-wrap {
width: 70%;
width: 352px;
position: relative;
.cont {
@extend .bb;
@extend .fcc;
padding: 2px;
background-image: linear-gradient(to right, #ffb31d, #f15907);
height: 52px;
border-radius: 8px;
}
// input和下拉
.ipt {
border: 1px solid $cOrange !important;
// border: 1px solid $cOrange !important;
border: none !important;
border-radius: .416667rem;
height: 3rem;
display: flex;
align-items: center;
// display: flex;
// align-items: center;
width: 100%;
background-color: #ffffff;
height: 48px;
border-radius: 8px;
}
......@@ -156,12 +180,12 @@
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
top: 22px;
right: 1.2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: .633333rem;
height: .433333rem;
width: 15px;
height: 10px;
pointer-events: none;
cursor: default;
}
......@@ -242,12 +266,12 @@
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
top: 22px;
right: 1.2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: .633333rem;
height: .433333rem;
width: 15px;
height: 10px;
pointer-events: none;
cursor: default;
}
......
<template>
<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">
<div class="form-item">
<div class="label">
{{$t('clarms.step1.label1')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text" v-model="data.lastName">
</div>
</div>
<div class="comp reservation-container clarms-plugins-verifyform">
<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">
<div class="form-item">
<div class="label">
{{$t('clarms.step1.label1')}}
</div>
<div class="ipt-wrap">
<div class="cont">
<input class="ipt" type="text" v-model="data.lastName">
</div>
</div>
</div>
<div class="form-item">
<div class="label">
{{$t('clarms.step1.label2')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text" v-model="data.firstName">
</div>
</div>
<div class="form-item">
<div class="label">
{{$t('clarms.step1.label2')}}
</div>
<div class="ipt-wrap">
<div class="cont">
<div class="form-item">
<div class="label">
{{$t('clarms.step1.label3')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<el-select class="ipt" v-model="data.idType" :placeholder="$t('clarms.step2.placeHolder1')">
<el-option v-for="(item, index) in policyIdTypeList" :key="index" :label="item.n" :value="item.v"></el-option>
</el-select>
</div>
</div>
<input class="ipt" type="text" v-model="data.firstName">
</div>
</div>
</div>
<div class="form-item">
<div class="label">
{{$t('clarms.step1.label4')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text" v-model="data.idNo">
</div>
</div>
<div class="form-item">
<div class="label">
{{$t('clarms.step1.label3')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<div class="cont">
<el-select class="ipt" v-model="data.idType" :placeholder="$t('clarms.step2.placeHolder1')">
<el-option v-for="(item, index) in policyIdTypeList" :key="index" :label="item.n" :value="item.v"></el-option>
</el-select>
</div>
<div class="form-item">
<div class="label">
{{$t('clarms.step1.label5')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<date-picker class="ipt-date" v-model="data.birthDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', padding:'0', color:'#606266'}"></date-picker>
</div>
</div>
</div>
<div class="submit-btn pointer flex-center" @click="handleConfirm" :class="{disabled : btnDisabled}">
<van-loading v-if="loading" />
<span>{{$t('clarms.step1.btn')}}</span>
</div>
<div class="tips" v-if="showTips">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('clarms.step1.noPolicy')}}
<span class="pointer btn" @click="toContactUs">{{$t('clarms.step1.customService')}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-item">
<div class="label">
{{$t('clarms.step1.label4')}}
</div>
<div class="ipt-wrap">
<div class="cont">
<input class="ipt" type="text" v-model="data.idNo">
</div>
</div>
</div>
<div class="form-item">
<div class="label">
{{$t('clarms.step1.label5')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<div class="cont">
<date-picker class="ipt-date" v-model="data.birthDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'48px', padding:'0', color:'#606266'}"></date-picker>
</div>
</div>
</div>
</div>
<div class="submit-btn pointer flex-center" @click="handleConfirm" :class="{disabled : btnDisabled}">
<van-loading v-if="loading" />
<span>{{$t('clarms.step1.btn')}}</span>
</div>
<div class="tips" v-if="showTips">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('clarms.step1.noPolicy')}}
<span class="pointer btn" @click="toContactUs">{{$t('clarms.step1.customService')}}</span>
</div>
</div>
</div>
</template>
<script src="./clarms-plugins-verifyform.js"></script>
......
@import '@/styles/_support';
$borderSize:8px;
.content {
// padding-bottom: 2.33rem;
margin: 2.333333rem auto;
position: relative;
}
.clarms {
background-image: linear-gradient(to right, #ffb31d, #f15907);
@extend .bb;
@extend .fcc;
padding: 2px;
border-radius: $borderSize;
&-cont {
width: 100%;
height: 100%;
background-color: #ffffff;
border-radius: $borderSize;
}
}
......@@ -13,7 +30,8 @@ input {
}
.orange {
color: $cOrange;
// color: $cOrange;
color: #ff6839;
}
.gray {
......@@ -71,9 +89,9 @@ input {
.reservation-container {
@extend .bb;
border-radius: .666667rem;
border: solid 2px $cOrange;
// border: solid 2px $cOrange;
background-color: #ffffff;
padding: 2.666667rem 10rem 2.833333rem 10rem;
// padding: 2.666667rem 10rem 2.833333rem 10rem;
.title {
font-size: 1.333333rem;
......@@ -118,7 +136,7 @@ input {
.reservation-container-2 {
@extend .bb;
border-radius: .666667rem;
border: solid .083333rem $cOrange;
// border: solid .083333rem $cOrange;
background-color: #ffffff;
padding: 1.666667rem 10rem 2.833333rem 10rem;
......
......@@ -8,29 +8,32 @@
</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="">
<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 class="clarms-cont">
<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>
<!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> -->
</div>
<!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> -->
</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>
<clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one>
<clarms-modal-two @close="showModal2 = false"></clarms-modal-two>
<div class="mobile-margin">
<template v-if="step == 2">
<clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material>
</template>
<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>
</div>
</div>
......
......@@ -36,6 +36,13 @@ export default {
if (a == "m4") {
a = "m41"
}
if(a == "m5"){
this.$router.push({
path: "/clarms",
query: {}
});
return;
}
this.$router.push({
path: "/custom/service",
query: {
......@@ -54,6 +61,13 @@ export default {
},
created() {
let activity = this.$route.query.q;
if(activity == "m5"){
this.$router.push({
path: "/clarms",
query: {}
});
return;
}
this.$set(this, 'activity', activity);
},
components: {
......