Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
887b10f6 by simon
Options

默认提交

1 parent 9f9a9aef
Expand all
Inline Side-by-side
Showing 23 changed files with 619 additions and 568 deletions
......@@ -48,6 +48,7 @@
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"prerender-spa-plugin": "^3.4.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
......
......@@ -9,4 +9,4 @@
// selectorBlackList: []
// }
// }
// }
\ No newline at end of file
// }
......
......@@ -837,7 +837,7 @@ module.exports = {
register: "註冊",
login: "登入",
t1: "一賬通以便我們為您提供更好的服務",
label0: "索償人資訊",
label0: "索償人資料",
label1: "姓",
label2: "名",
label3: "證件類型",
......
......@@ -839,7 +839,7 @@ module.exports = {
register: "注册",
login: "登入",
t1: "一账通以便我们为您提供更好的服务",
label0: "索偿人信息",
label0: "索偿人资料",
label1: "姓",
label2: "名",
label3: "证件类型",
......
@import '@/styles/_support';
$borderRadius:8px;
.comp {
font-size: 22px;
margin: 0 auto;
}
input {
padding: 0 2.083333rem;
color: #333333;
color: $cFontGray2;
}
.orange {
......@@ -57,11 +60,9 @@ input {
.reservation-container-2 {
@extend .bb;
border-radius: .666667rem;
// border: solid 2px $cOrange;
background-color: #ffffff;
// padding: 1.666667rem 10rem 2.833333rem 10rem;
padding: 20px 100px 72px;
border-radius: 16px;
.clarms-border {
position: relative;
......@@ -72,7 +73,7 @@ input {
width: 482px;
height: 62px;
margin: 0 24px;
border-radius: 8px;
border-radius: $borderRadius;
.clarms-select {
width: 100%;
......@@ -96,7 +97,6 @@ input {
color: #ff6839;
text-align: center;
// margin: 1.666667rem auto 0 auto;
display: flex;
align-items: center;
justify-content: center;
......@@ -135,19 +135,17 @@ input {
cursor: default;
span {
color: $cDisabled;
// color: $cDisabled;
}
}
.check-item {
display: flex;
align-items: center;
margin-right: 60px;
// margin-bottom: .833333rem;
margin-right: 76px;
margin-bottom: 24px;
span {
margin-left: 20px;
margin-left: 24px;
}
img {
......@@ -184,10 +182,10 @@ input {
}
.bottom-tip {
// font-size: .833333rem;
font-size: 18px;
display: flex;
align-items: center;
@extend .text-jtf;
span {
// margin-left: 1.3rem;
......@@ -281,16 +279,14 @@ input {
padding: 2px;
background-image: linear-gradient(to right, #ffb31d, #f15907);
height: 62px;
border-radius: 8px;
border-radius: $borderRadius;
}
.ipt-date {
width: 100%;
background-color: #ffffff;
// padding-left: .833333rem;
// border-radius: 0;
height: 58px;
border-radius: 8px;
border-radius: $borderRadius;
}
&-item {
......@@ -365,13 +361,14 @@ input {
display: flex;
justify-content: flex-start;
// padding: 0 $marginSmall;
margin-bottom: 1.333333rem;
// margin-bottom: 1.333333rem;
.label {
@extend .bb;
align-items: center;
min-width: 260px;
padding-left: 70px;
width: 215px;
padding-left: 52px;
padding-right: 5px;
letter-spacing: .25rem;
font-size: 20px;
......@@ -401,10 +398,8 @@ input {
height: 3rem;
display: flex;
align-items: center;
}
.ipt2 {
// width: 100%;
border-bottom: 1px solid #ccc;
......@@ -412,7 +407,8 @@ input {
display: flex;
align-items: center;
margin-bottom: .833333rem;
width: 700px;
// width: 700px;
width: 100%;
}
// 长文本
......@@ -464,99 +460,65 @@ input {
}
}
@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: 1200px) {
.comp {
.reservation-container-2 {
padding: 20px 50px 72px;
}
}
}
@media (max-width: 600px) {
.reservation-container-2 {
.clarms-border {
min-width: auto;
margin: 0 .25rem;
}
}
@media (max-width: 1000px) {
.comp {
.reservation-container-2 {
.title {
display: block;
.form {
&-item {
width: 100%;
.tt {
margin: 8px auto;
}
.label {
min-width: 30%;
.clarms-border {
width: auto;
}
}
.ipt-wrap {
width: 70%;
}
}
}
&-item2 {
display: block;
}
.ipt-wrap {
margin: 0;
}
}
@media (max-width: 768px) {
.comp {
.reservation-container-2 {
padding: 16px 16px;
&-item-2 {
display: block;
.form-item-2 {
flex-wrap: wrap;
.label {
width: 100%;
margin-bottom: 10px;
}
.label {
display: flex;
padding-left: 0;
width: auto;
}
.value {
width: 100%;
}
.value {
margin-top: 24px;
width: 100%;
.date-container {
width: 100%;
.check-item {
align-items: flex-start;
flex-wrap: wrap;
margin:0 0 24px;
width: 100%;
}
}
}
}
&-item3 {
display: block;
.ipt-wrap {
margin: 0;
.date-container{
width: 100%;
}
}
}
.notice {
margin: 0;
}
}
@media (max-width: 400px) {
.reservation-container-2 {
padding: 1.666667rem 1rem;
}
}
......
......@@ -17,10 +17,10 @@
<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="tt t1">{{$t('clarms.step2.label1')}}</div>
<div class="tt clarms-border">
<div class="down-arrow"></div>
<el-select style="text-align: center;" class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')">
<el-select style="text-align: center;" class="clarms-select" v-model="data.insuredIndex" :placeholder="''">
<template v-if="lan == 'en'">
<el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameEn" :value="index + 1">
</el-option>
......@@ -31,7 +31,7 @@
</template>
</el-select>
</div>
<span class="t1">{{$t('clarms.step2.label2')}}</span>
<div class="tt t1">{{$t('clarms.step2.label2')}}</div>
</div>
<hr v-if="data.insuredIndex">
<div class="gird-g form default-mt">
......@@ -138,6 +138,7 @@
</template>
</div>
<template v-if="(data.HT41 && data.HT41.length > 0) && (data.HT26 && data.HT26.length > 0)">
<!-- <template v-if="1>0"> -->
<hr class="hr2" 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>
......@@ -186,6 +187,7 @@
height: 58px;
border-radius: 8px;
text-align: center;
color: #58595b;
}
}
}
......
......@@ -34,7 +34,7 @@
.modal {
position: relative;
@extend .bb;
width: 1000px;
max-width: 1000px;
border-radius: 16px;
background-color: #ffffff;
......@@ -75,68 +75,59 @@
}
}
.close {
cursor: pointer;
img {
width: 1.666667rem;
position: absolute;
right: -2.5rem;
top: -1.666667rem;
}
}
}
@media (max-width: 768px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 5rem 4rem;
}
.close {
display: none;
}
.close {
position: absolute;
right: -55px;
top: -15px;
cursor: pointer;
img {
position: relative;
width: 30px;
height: 30px;
}
}
@media (max-width: 700px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 4rem 2rem;
}
.close {
display: none;
}
@media (max-width: 1150px) {
.border {
width: 90%;
}
.close {
right: -15px;
top: -55px;
}
}
@media (max-width: 450px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
@media (max-width: 1000px) {
.border {
width: 90%;
height: auto;
}
}
.close {
display: none;
}
@media (max-width: 768px) {
.border {
width: 80%;
.content {
padding: 2rem .5rem;
.modal {
.content {
flex-wrap: wrap;
padding: 32px 16px;
.info-icon {
margin: 0 auto;
width: 32%;
min-width: auto;
}
.message {
margin: 16px auto 0;
font-size: 20px;
}
}
}
}
}
......
......@@ -3,18 +3,18 @@
<div class="comp">
<div @click="onOverLayHandler()" class="overlay"></div>
<div class="border">
<div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></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>
<div class="message" :class="{'lsp':locale != 'en'}">
<template v-if="type == 1">
{{$t('clarms.step2.tip5')}}
{{$t('clarms.step2.tip5')}}
</template>
<template v-else>
{{$t('clarms.step2.tip9')}}
{{$t('clarms.step2.tip9')}}
</template>
<span @click="toContact">{{$t('clarms.step2.tip6')}}</span>
</div>
......
......@@ -33,7 +33,7 @@
.modal {
position: relative;
@extend .bb;
width: 1000px;
max-width: 1000px;
border-radius: 16px;
background-color: #ffffff;
......@@ -75,68 +75,60 @@
letter-spacing: 0.7px;
}
.close {
cursor: pointer;
}
img {
width: 1.666667rem;
position: absolute;
right: -2.5rem;
top: -1.666667rem;
}
.close {
position: absolute;
right: -55px;
top: -15px;
cursor: pointer;
img {
position: relative;
width: 30px;
height: 30px;
}
}
@media (max-width: 800px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 5rem 4rem;
}
.close {
display: none;
}
@media (max-width: 1150px) {
.border {
width: 90%;
}
.close {
right: -15px;
top: -55px;
}
}
@media (max-width: 700px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
padding: 4rem 2rem;
}
.close {
display: none;
}
@media (max-width: 1000px) {
.border {
width: 90%;
}
}
@media (max-width: 768px) {
.border {
width: 80%;
@media (max-width: 450px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 90%;
height: auto;
.close {
display: none;
.modal {
.content {
flex-wrap: wrap;
padding: 32px 16px;
.info-icon {
margin: 0 auto;
width: 32%;
min-width: auto;
}
.message{
margin: 16px auto 0;
font-size: 20px;
}
}
}
.content {
padding: 2rem .5rem;
}
}
}
......
......@@ -3,8 +3,8 @@
<div class="comp">
<div @click="onOverLayHandler()" class="overlay"></div>
<div class="border">
<div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></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">
......
......@@ -8,8 +8,8 @@ $borderSize: 8px;
.clarms-container {
box-sizing: border-box;
padding: .166667rem;
border-radius: .416667rem;
padding: 2px;
border-radius: $borderSize;
background-image: linear-gradient(to right, #ffb31d, #f15907);
.clarms-box {
......@@ -17,7 +17,7 @@ $borderSize: 8px;
position: relative;
width: 100%;
height: 100%;
border-radius: .416667rem;
border-radius: $borderSize;
background: #fff;
// padding: 40px 50px 20px 40px;
padding: 40px 0 20px;
......@@ -82,7 +82,7 @@ $borderSize: 8px;
}
.clarms-t2 {
color: #58595b;
color: $cFontGray2;
letter-spacing: 0.9px;
font-size: 18px;
margin-top: 6px;
......@@ -172,7 +172,7 @@ $borderSize: 8px;
.clarms-upload-tips {
font-size: 1rem;
color: #58595b;
color: $cFontGray2;
text-align: center;
}
}
......@@ -184,54 +184,78 @@ $borderSize: 8px;
}
}
@media (max-width: 800px) {
@media (max-width: 768px) {
.clarms-container {
.clarms-box {
.clarms-header {
flex-direction: column;
padding: 40px 12px 20px 12px;
.clarms-header-2 {
align-self: flex-start;
}
.clarms-btn {
align-self: flex-end;
margin-top: .833333rem;
}
.clarms-header {
flex-wrap: wrap;
padding: 0;
}
.clarms-icon {
width: 4.166667rem;
}
.clarms-btn{
margin: 20px 0;
width: 100%;
}
.clarms-title-container {
margin-top: .833333rem;
margin-left: .833333rem;
.line {
padding: 0;
}
}
}
}
@media (max-width: 600px) {
.clarms-container .clarms-box .clarms-title-container .clarms-t1 {
font-size: 1.333333rem;
}
.clarms-container .clarms-box .clarms-title-container .clarms-t2 {
font-size: 1.333333rem;
}
}
// @media (max-width: 800px) {
// .clarms-container {
// .clarms-box {
// .clarms-header {
// flex-direction: column;
@media (max-width: 500px) {
.clarms-container .clarms-box .clarms-title-container .clarms-t1 {
font-size: 1rem;
}
// .clarms-header-2 {
// align-self: flex-start;
// }
.clarms-container .clarms-box .clarms-title-container .clarms-t2 {
font-size: 1rem;
}
}
// .clarms-btn {
// align-self: flex-end;
// margin-top: .833333rem;
// }
// .clarms-icon {
// width: 4.166667rem;
// }
// }
// .clarms-title-container {
// margin-top: .833333rem;
// margin-left: .833333rem;
// }
// }
// }
// }
// @media (max-width: 600px) {
// .clarms-container .clarms-box .clarms-title-container .clarms-t1 {
// font-size: 1.333333rem;
// }
// .clarms-container .clarms-box .clarms-title-container .clarms-t2 {
// font-size: 1.333333rem;
// }
// }
// @media (max-width: 500px) {
// .clarms-container .clarms-box .clarms-title-container .clarms-t1 {
// font-size: 1rem;
// }
// .clarms-container .clarms-box .clarms-title-container .clarms-t2 {
// font-size: 1rem;
// }
// }
......
......@@ -14,7 +14,7 @@
color: #747474;
}
$borderRadius:8px;
.submit-btn {
background: url("~@assets/images/vhis/vhis-btn.png");
......@@ -33,7 +33,7 @@
.reservation-container {
@extend .bb;
border-radius: .666667rem;
border-radius: $borderRadius;
// border: solid 2px $cOrange;
background-color: #ffffff;
// padding: 2.666667rem 10rem 2.833333rem 10rem;
......@@ -119,7 +119,7 @@
width: 100%;
background-color: #ffffff;
height: 48px;
border-radius: 8px;
border-radius: $borderRadius;
}
&-item {
......@@ -151,7 +151,7 @@
padding: 2px;
background-image: linear-gradient(to right, #ffb31d, #f15907);
height: 52px;
border-radius: 8px;
border-radius: $borderRadius;
}
// input和下拉
......@@ -166,7 +166,7 @@
width: 100%;
background-color: #ffffff;
height: 48px;
border-radius: 8px;
border-radius: $borderRadius;
}
......
......@@ -6,7 +6,7 @@
<span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span>
</u>
<span v-if="$i18n.locale == 'en'">&nbsp;</span>{{$t('clarms.step1.t1')}}</div>
<div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</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">
......@@ -38,7 +38,7 @@
<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-select class="ipt" v-model="data.idType" :placeholder="''">
<el-option v-for="(item, index) in policyIdTypeList" :key="index" :label="item.n" :value="item.v"></el-option>
</el-select>
</div>
......
......@@ -20,73 +20,133 @@
background: rgba($color: #000000, $alpha: 0.7);
}
.bold {
font-weight: 600;
letter-spacing: .083333rem;
}
.orange {
color: #ff6839;
color: $cOrange2;
}
.bold {
font-weight: 600;
letter-spacing: .083333rem;
.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: 63.333333rem;
// height: 28.5rem;
border-radius: .8333rem;
width: 1200px;
max-height: 80vh;
border-radius: 16px;
background-color: #ffffff;
padding: 3.5rem 2rem 2.5rem;
border: .083333rem solid #ff6839;
padding: 80px 0;
font-size: 36px;
overflow-x: hidden;
overflow-y: auto;
color: $cFontGray2;
.title {
letter-spacing: .083333rem ;
font-size: 1.666667rem;
font-weight: 900;
color: #ff6839;
.content {
max-width: 1000px;
margin: 0 auto;
}
.content {
width: 70%;
margin: auto;
.statement {
@extend .bb;
padding-left: 40px;
margin: 80px auto 0;
}
.form {
@extend .bb;
padding-left: 40px;
margin: 80px auto 0;
&-item {
display: flex;
justify-self: center;
}
}
.bottom-wrap {
margin: 80px auto 0;
}
.title {
font-size: 48px;
color: $cOrange2;
font-weight: bold;
letter-spacing: 2.45px;
}
.desc {
text-align: left;
line-height: 2.2rem ;
min-width: 7.5rem ;
line-height: 1.5;
letter-spacing: 3.6px;
span {
margin: 0 .166667rem ;
margin: 0 2px;
}
}
.value {
text-align: left;
line-height: 2rem ;
line-height: 1.5;
letter-spacing: 3.6px;
}
hr {
border-top: .083333rem solid #e4e4e5;
width: 70%;
margin: auto;
.line1 {
margin: 80px auto 0;
}
.download-btn {
cursor: pointer;
border: 1px solid #ff6839;
border-radius: .416667rem;
padding: .5rem;
margin: 2rem auto;
width: 35rem;
img {
max-height: 2.083333rem;
}
.btn-name {
margin-left: 1.666667rem ;
hr {
border-top: 1px solid #e4e4e5;
margin: 0 auto;
max-width: 1000px;
}
.download {
margin: 44px auto 0;
text-align: center;
font-size: 28px;
&-item {
@extend .bb;
@extend .fcc;
margin: 0 auto 24px;
max-width: 738px;
height: 81px;
line-height: 81px;
padding: 2px;
border-radius: 8px;
cursor: pointer;
background-image: linear-gradient(to right, #ffb31d, #f15907);
.cont {
@extend .bb;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #ffffff;
letter-spacing: 1.4px;
font-weight: bold;
border-radius: 8px;
.icon {
height: 60px;
margin-right: 64px;
}
}
}
}
......@@ -104,163 +164,156 @@
margin-top: 1rem;
}
.btn-wrap {
margin: 40px auto 0;
display: flex;
justify-content: center;
}
.submit-btn {
background: url("~@assets/images/vhis/vhis-btn.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 14rem;
height: 2rem;
line-height: 2rem;
color: white;
font-weight: 600;
width: 405px;
height: 60px;
line-height: 60px;
color: #ffffff;
font-weight: bold;
cursor: pointer;
letter-spacing: 1.4px;
font-size: 28px;
margin: 0 25px;
}
.btn-margin {
margin-left: 2rem !important;
.contact {
font-size: 28px;
margin: 45px auto 0;
font-weight: bold;
}
}
.close {
cursor: pointer;
img {
width: 1.666667rem ;
position: absolute;
right: -2.5rem;
top: -1.666667rem ;
}
.close {
position: absolute;
right: -55px;
top: -15px;
cursor: pointer;
img {
position: relative;
width: 30px;
height: 30px;
}
}
.flex-left {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.hide {
display: none;
}
@media (max-width: 1200px) {
.comp {
position: fixed;
@media (max-width: 1350px) {
.close {
right: -15px;
top: -55px;
}
}
.modal {
width: 70%;
position: absolute;
@media (max-width: 1250px) {
.border {
width: 90%;
}
}
.content {
width: 80%;
margin: auto;
@media (max-width: 1200px) {
.border {
width: 90%;
.modal {
padding: 80px 20px;
}
}
}
.download-btn{
width: 80%;
}
@media (max-width: 1000px) {
.border {
width: 90%;
.default-mt {
margin-top: 2rem;
}
.modal {
padding: 80px 20px;
.half-mt {
margin-top: 1rem;
}
.statement {
padding-left: 0;
}
hr {
border-top: .083333rem solid #e4e4e5;
width: 80%;
margin: auto;
.form {
padding-left: 0;
}
}
}
}
@media (max-width: 768px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 80%;
height: auto;
.content {
width: 90%;
margin: auto;
}
.border {
.download-btn {
margin: 1rem auto;
width: 90%;
}
.modal {
padding: 16px 16px;
font-size: 18px;
hr {
border-top: .083333rem solid #e4e4e5;
width: 90% ;
margin: auto;
}
.title {
font-size: 28px;
}
.default-mt {
margin-top: 1.5rem ;
}
.statement {
margin: 24px auto 0;
}
.download-btn{
width: 100%;
}
.form {
margin: 24px auto 0;
}
.submit-btn {
background-size: 100% 100% ;
width: 10rem ;
}
.btn-margin {
margin-left: 1.666667rem ;
}
}
}
.bottom-wrap {
margin: 24px auto 0;
.btn-wrap {
margin: 16px auto 0;
flex-wrap: wrap;
@media (max-width: 400px) {
.modal {
// height: 28.5rem;
padding: 3rem 1.5rem;
width: 90%;
height: auto;
.submit-btn{
height: 48px;
line-height: 48px;
font-size: 18px;
margin: 8px auto;
}
}
.close {
display: none;
}
.contact{
margin: 16px auto 0;
font-size: 18px;
}
}
.content {
width: 100%;
margin: auto;
}
.download {
margin: 24px auto 0;
font-size: 18px;
.download-btn {
margin: 1rem auto;
width: 100%;
}
.download-item {
height: 52px;
line-height: 52px;
hr {
border-top: 1px solid #e4e4e5;
width: 100% ;
margin: auto;
}
.icon {
height: 32px;
margin-right: 24px;
}
}
.default-mt {
margin-top: 1.5rem ;
}
}
.submit-btn {
background-size: 100% 100% ;
width: 10rem ;
.line1 {
margin: 24px auto 0;
}
}
.btn-margin {
margin-left: 1.666667rem ;
}
}
}
\ No newline at end of file
}
......
......@@ -2,37 +2,74 @@
<template>
<div class="comp" v-if="policyDetail && showPolicy">
<div @click="handleIgnorePolicy" class="overlay"></div>
<div class="modal">
<div class="close" @click="onOverLayHandler()"><img src="@/assets/images/vhis/close.png"></div>
<div class="title">{{$t('vhis.title')}}</div>
<div class="content default-mt">
<div class="desc orange">{{$t('vhis.desc1')}}</div>
<div class="desc">{{$t('vhis.desc2')}}</div>
<div class="desc">{{$t('vhis.desc3')}}</div>
<div class="desc">{{$t('vhis.desc4')}}</div>
<div class="desc">{{$t('vhis.desc5')}}</div>
</div>
<hr class="default-mt">
<div class="content default-mt">
<div class="flex-left"><div class="desc">{{$t('vhis.label1')}}：</div><div class="value orange">{{policyDetail.policyCode}}</div></div>
<div class="flex-left"><div class="desc">{{$t('vhis.label2')}}：</div><div class="value">{{policyDetail.productName}}</div></div>
<div class="flex-left"><div class="desc">{{$t('vhis.label3')}}：</div><div class="value"><span class="orange">{{policyDetail.ymd1}}</span>{{$t('vhis.ymd1')}}<span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd2')}}<span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd3')}}</div></div>
<div class="flex-left"><div class="desc">{{$t('vhis.label4')}}：</div><div class="value">{{policyDetail.clientNameCn}}</div></div>
<div class="flex-left"><div class="desc">{{$t('vhis.label5')}}：</div><div class="value">{{policyDetail.insuredNameCn}}</div></div>
<div class="border">
<div class="close" @click="onOverLayHandler()"><img src="@/assets/images/vhis/close.png"></div>
<div class="modal">
<div class="content">
<div class="title">{{$t('vhis.title')}}</div>
<div class="statement">
<div class="desc orange">{{$t('vhis.desc1')}}</div>
<div class="desc">{{$t('vhis.desc2')}}</div>
<div class="desc">{{$t('vhis.desc3')}}</div>
<div class="desc">{{$t('vhis.desc4')}}</div>
<div class="desc">{{$t('vhis.desc5')}}</div>
</div>
<hr class="line1">
<div class="form ">
<div class="form-item">
<div class="desc">{{$t('vhis.label1')}}：</div>
<div class="value orange">{{policyDetail.policyCode}}</div>
</div>
<div class="form-item">
<div class="desc">{{$t('vhis.label2')}}：</div>
<div class="value orange">{{policyDetail.productName}}</div>
</div>
<div class="form-item">
<div class="desc">{{$t('vhis.label3')}}：</div>
<div class="value">
<span class="orange">{{policyDetail.ymd1}}</span>{{$t('vhis.ymd1')}}
<span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd2')}}
<span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd3')}}
</div>
</div>
<div class="form-item">
<div class="desc">{{$t('vhis.label4')}}：</div>
<div class="value orange">{{policyDetail.clientNameCn}}</div>
</div>
<div class="form-item">
<div class="desc">{{$t('vhis.label5')}}：</div>
<div class="value orange">{{policyDetail.insuredNameCn}}</div>
</div>
<div class="download-btn flex-center" @click="downloadPolicy"><img src="@/assets/images/vhis/vhis-download.png"><span class="btn-name">{{$t('vhis.btn1')}}</span></div>
</div>
<hr class="default-mt">
<div class="content default-mt">
<span class="desc">{{$t('vhis.tip1')}}<span class="orange">{{policyDetail.clientNameCn}}</span>{{$t('vhis.tip2')}}<span class="orange">{{policyDetail.nowYmd1}}</span>{{$t('vhis.ymd1')}}<span class="orange">{{policyDetail.nowYmd2}}</span>{{$t('vhis.ymd2')}}<span class="orange">{{policyDetail.nowYmd3}}</span>{{$t('vhis.ymd3')}}{{$t('vhis.tip3')}}</span>
<div class="flex-center half-mt">
<div class="submit-btn" @click="handleConfirmPolicy" >{{$t('vhis.btn2')}}</div>
<div class="submit-btn btn-margin" @click="handleIgnorePolicy" >{{$t('vhis.btn3')}}</div>
</div>
<div class="flex-center half-mt pointer" @click="toContact()"><span class="orange bold">{{$t('vhis.tip4')}}</span></div>
</div>
</div>
</div>
<div class="download">
<div class="border2 download-item" @click="downloadPolicy">
<div class="cont">
<img class="icon" src="@/assets/images/vhis/vhis-download.png"> {{$t('vhis.btn1')}}
</div>
</div>
</div>
</div>
<hr class="line1">
<div class="bottom-wrap ">
<span class="desc">{{$t('vhis.tip1')}}
<span class="orange">{{policyDetail.clientNameCn}}</span>{{$t('vhis.tip2')}}
<span class="orange">{{policyDetail.nowYmd1}}</span>{{$t('vhis.ymd1')}}
<span class="orange">{{policyDetail.nowYmd2}}</span>{{$t('vhis.ymd2')}}
<span class="orange">{{policyDetail.nowYmd3}}</span>{{$t('vhis.ymd3')}}{{$t('vhis.tip3')}}</span>
<div class="btn-wrap">
<div class="submit-btn" @click="handleConfirmPolicy">{{$t('vhis.btn2')}}</div>
<div class="submit-btn " @click="handleIgnorePolicy">{{$t('vhis.btn3')}}</div>
</div>
<div class="flex-center pointer contact" @click="toContact()">
<span class="orange bold">{{$t('vhis.tip4')}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./vhis-modal.js"></script>
......
......@@ -2,8 +2,9 @@
$borderSize:8px;
.page{
.page {
min-height: 480px;
color: $cFontGray2;
}
.content {
......@@ -17,13 +18,14 @@ $borderSize:8px;
@extend .bb;
@extend .fcc;
padding: 2px;
border-radius: $borderSize;
border-radius: 16px;
// min-height: 480px;
&-cont {
width: 100%;
height: 100%;
background-color: #ffffff;
border-radius: $borderSize;
border-radius: 16px;
}
}
......@@ -60,7 +62,7 @@ input {
.cont {
position: relative;
width: 1200px;
max-width: 1200px;
margin: 0 auto;
.tt {
......@@ -92,10 +94,11 @@ input {
.reservation-container {
@extend .bb;
border-radius: .666667rem;
// border-radius: .666667rem;
// border: solid 2px $cOrange;
background-color: #ffffff;
// padding: 2.666667rem 10rem 2.833333rem 10rem;
background-color: #ffffff;
border-radius: 16px;
.title {
font-size: 1.333333rem;
......@@ -139,10 +142,8 @@ input {
.reservation-container-2 {
@extend .bb;
border-radius: .666667rem;
// border: solid .083333rem $cOrange;
background-color: #ffffff;
padding: 1.666667rem 10rem 2.833333rem 10rem;
border-radius: 16px;
.title {
font-size: 1.333333rem;
......@@ -489,121 +490,96 @@ input {
}
}
// .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%;
}
}
.content {
width: 96%;
}
}
@media (max-width: 600px) {
.reservation-container {
padding: 2.666667rem 2rem 2.833333rem 2rem;
}
.form {
&-item {
width: 100%;
// @media (max-width: 1000px) {
// .reservation-container-2 {}
.label {
min-width: 30%;
}
// .form {
// &-item {
// width: 100%;
.ipt-wrap {
width: 70%;
}
}
// .label {
// min-width: 30%;
// }
&-item2 {
display: block;
// .ipt-wrap {
// width: 70%;
// }
// }
.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%;
}
}
}
// &-item-2 {
// .date-container {
// width: 80%;
// }
// }
// }
// }
.notice {
margin: 0;
}
}
// @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;
}
}
// @media (max-width: 400px) {
// .reservation-container-2 {
// // padding: 1.666667rem 1rem;
// }
// }
......
......@@ -14,7 +14,6 @@
<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>
</div>
<div class="content clarms" v-else>
......
@import '@/styles/_support';
.page {
color: #58595b;
color: $cFontGray2;
}
.content {
......@@ -10,7 +10,7 @@
.box {
position: relative;
margin-top: $marginMedium;
// margin-top: $marginMedium;
}
// banner 轮播
......@@ -200,7 +200,7 @@
// 产品
.product {
margin: 100px auto 0;
margin: 92px auto 0;
text-align: center;
.tit {
......@@ -222,7 +222,7 @@
@extend .fcc;
padding: 2px;
width: 582px;
height: 280px;
min-height: 250px;
margin-bottom: 25px;
.cont {
......@@ -233,14 +233,20 @@
background-color: #ffffff;
.icon-wrap {
@extend .fcc;
@extend .bb;
padding-top: 70px;
display: flex;
justify-content: center;
align-items: flex-start;
width: 202px;
}
.detail {
padding: 52px 32px 0 0;
position: relative;
padding: 44px 20px 25px 0;
flex: 1;
flex-grow: 1;
margin-left: -16px;
.t1 {
letter-spacing: 2px;
......@@ -267,7 +273,7 @@
margin-top: 6px;
font-size: 18px;
font-weight: 300;
// letter-spacing: -0.45px;
@extend .text-jtf;
}
}
}
......@@ -278,11 +284,12 @@
// 视频
.video {
@extend .fcc;
margin: 72px auto 0;
}
// 保障
.guarantee {
margin: 100px auto 0;
margin: 90px auto 0;
font-size: 22px;
.tit {
......@@ -310,7 +317,7 @@
.tt {
@extend .bb;
width: 50%;
padding: 20px 0;
padding: 18px 12px 18px 0;
letter-spacing: 1.12px;
color: #666666;
}
......@@ -338,7 +345,8 @@
.tt {
@extend .bb;
width: 50%;
padding: 48px;
padding: 50px 60px 26px 100px;
letter-spacing: 1.12px;
color: #666666;
......@@ -347,6 +355,11 @@
}
}
.tt2{
padding: 50px 64px 26px 50px;
padding: 48px;
}
.label {
border-right: solid 1px #e4e4e5;
line-height: 1.4;
......@@ -433,7 +446,7 @@
// 提交订单
.submit-btn {
margin: 64px auto 100px;
margin: 50px auto 100px;
@extend .pointer;
@extend .bb;
@include btc4(300px, 50px, 22px);
......
......@@ -134,7 +134,7 @@
<li>保證於保費繳付期內保費不變。</li>
</ul>
</div>
<div class="tt label label2">
<div class="tt tt2 label label2">
<div class="t1">
<span>計劃不包括</span>
<span class="small">2</span>
......
......@@ -6,7 +6,3 @@
overflow-x: hidden;
overflow-y: auto;
}
// .content::-webkit-scrollbar {
// display: none;
// }
......
......@@ -82,4 +82,9 @@
input {
color:'#606266'
}
\ No newline at end of file
}
.text-jtf{
text-align: justify;
text-align-last: left;
}
......
......@@ -41,7 +41,7 @@ $cLightBlack:#606266;
$cDisabled:#888888;
$cOrange2:#ff6839;
$cFontGra2: #58595b;
$cFontGray2: #58595b;
// 文章宽度
$articleWidth:1041px;
......