Skip to content

dev / pingan-life-index-pro

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

默认提交

1 parent 99d742df
Inline Side-by-side
Showing 15 changed files with 176 additions and 58 deletions
......@@ -423,6 +423,25 @@ module.exports = {
checkTips: "本人不同意接收宣傳信息",
submit: "確認修改",
},
policyChangeInformation: {
hkClient: "是否平安香港客戶",
yes: "是",
no: "否",
obj: "變更對象",
name: "姓名",
sex: "性别",
birth: "出生日期",
type: "證件類型",
NO: "證件號碼",
validityPeriod: "證件有效期",
nationality: "國籍",
employer: "工作單位",
maritalStatus: "婚姻狀況",
submit: "確認修改",
upload: "附件上傳",
modifyTips1: "如需修改請",
modifyTips2: "聯繫客服",
},
contactUs: {
service: {
center: {
......
......@@ -423,6 +423,25 @@ module.exports = {
checkTips: "本人不同意接收宣傳信息",
submit: "確認修改",
},
policyChangeInformation: {
hkClient: "是否平安香港客戶",
yes: "是",
no: "否",
obj: "變更對象",
name: "姓名",
sex: "性别",
birth: "出生日期",
type: "證件類型",
NO: "證件號碼",
validityPeriod: "證件有效期",
nationality: "國籍",
employer: "工作單位",
maritalStatus: "婚姻狀況",
submit: "確認修改",
upload: "附件上傳",
modifyTips1: "如需修改請",
modifyTips2: "聯繫客服",
},
contactUs: {
service: {
center: {
......
......@@ -424,6 +424,36 @@ module.exports = {
checkTips: "本人不同意接收宣传信息",
submit: "确认修改",
},
policyChangeInformation: {
hkClient: "是否平安香港客戶",
yes: "是",
no: "否",
obj: "变更对象",
name: "姓名",
sex: "性别",
birth: "出生日期",
type: "证件类型",
NO: "证件号码",
validityPeriod: "证件有效期",
nationality: "国籍",
employer: "工作单位",
maritalStatus: "婚姻状况",
submit: "确认修改",
upload: "附件上传",
modifyTips1: "如需修改请",
modifyTips2: "联系客服",
},
contactUs: {
service: {
center: {
......
......@@ -7,10 +7,18 @@ import {
export default {
data() {
return {
key: 'value'
key: 'value',
}
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
}
},
methods: {
initData() {}
},
......
......@@ -7,10 +7,20 @@ import {
export default {
data() {
return {
key: 'value'
key: 'value',
isHkCus : true,
checked : false
}
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
}
},
methods: {
initData() {}
},
......
......@@ -47,6 +47,7 @@
color: #f05a23;
display: flex;
align-items: center;
margin-bottom: .7rem;
.icon {
......@@ -59,6 +60,26 @@
}
}
.label2 {
justify-content: space-between;
.icon2 {
width: 1.2rem;
display: flex;
}
.t1 {
color: $cFontGray;
}
.t2 {
color: $cOrange;
text-decoration: underline;
@extend .pointer;
}
}
.ipt-wrap {
position: relative;
......@@ -74,6 +95,10 @@
padding: 0 2.083333rem;
}
.disable {
background-color: #dcdddd;
}
// 长文本
.textarea {
min-height: 8.75rem;
......@@ -101,8 +126,10 @@
margin-bottom: 2.25rem;
.label {
min-width: 12.833333rem;
// min-width: 12.833333rem;
height: 2.5rem;
margin-right: 2.25rem;
color: $cFontGray;
}
.cont {
......@@ -110,7 +137,8 @@
display: flex;
.boo-btn {
width: 5.25rem;
// width: 5.25rem;
padding: 0 2.25rem;
height: 2.5rem;
line-height: 2.5rem;
border: solid 1px #dcdddd;
......
......@@ -7,141 +7,140 @@
</div>
<div class="gird-g form">
<!-- 變更對象 -->
<!-- 變更對象 checkbox -->
<div class="pure-u-1 form-item form-item2">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-custom.png"></div>{{$t('reservation.hkClient')}}
{{$t('policyChangeInformation.hkClient')}}
</div>
<div class="cont">
<div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('reservation.yes')}}</div>
<div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('reservation.no')}}</div>
<div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('policyChangeInformation.yes')}}</div>
<div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('policyChangeInformation.no')}}</div>
</div>
</div>
<!-- start -->
<!-- 1 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}}
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div> {{$t('policyChangeInformation.obj')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.namePlaceholder')" class="ipt" type="text">
<input class="ipt" type="text">
</div>
</div>
<!-- 2 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
<div class="label label2">
<div class="fla">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div>{{$t('policyChangeInformation.sex')}}
</div>
<div class="fla">
<div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
<span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
<span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
</div>
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt">
<option v-if="locale !='zh'">電話</option>
<option v-else>电话</option>
<select disabled class="ipt disable">
<option v-if="locale !='zh'">男</option>
<option v-else>男</option>
</select>
</div>
</div>
<!-- 3 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
<div class="label label2">
<div class="fla">
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-date.png"></div>{{$t('policyChangeInformation.birth')}}
</div>
<div class="fla">
<div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
<span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
<span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
</div>
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text">
<input disabled placeholder="1999-1-1" class="ipt disable" type="text">
</div>
</div>
<!-- 4 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div>{{$t('policyChangeInformation.type')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt">
<template v-if="locale =='zh'">
<option>投保咨询</option>
<option>代办保单变更</option>
<option>身份证</option>
</template>
<template v-else>
<option>投保咨詢</option>
<option>代辦保單變更</option>
<option>身份證</option>
</template>
</select>
</div>
</div>
<!-- 5 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}}
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.NO')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.namePlaceholder')" class="ipt" type="text">
<input class="ipt" type="text">
</div>
</div>
<!-- 6 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.validityPeriod')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt">
<option v-if="locale !='zh'">電話</option>
<option v-else>电话</option>
</select>
<input class="ipt" type="text">
</div>
</div>
<!-- 7 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-earth.png"></div> {{$t('policyChangeInformation.nationality')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text">
<input class="ipt" type="text">
</div>
</div>
<!-- 8 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-build.png"></div> {{$t('policyChangeInformation.employer')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt">
<template v-if="locale =='zh'">
<option>投保咨询</option>
<option>代办保单变更</option>
</template>
<template v-else>
<option>投保咨詢</option>
<option>代辦保單變更</option>
</template>
</select>
<input class="ipt" type="text">
</div>
</div>
<!-- 9 -->
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
<div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-love.png"></div> {{$t('policyChangeInformation.maritalStatus')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt">
<template v-if="locale =='zh'">
<option>投保咨询</option>
<option>代办保单变更</option>
</template>
<template v-else>
<option>投保咨詢</option>
<option>代辦保單變更</option>
</template>
</select>
<input class="ipt" type="text">
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item"></div>
</div>
<div class="submit-btn">
{{$t("policyChangeContact.submit")}}
{{$t("policyChangeInformation.submit")}}
</div>
</div>
</div>
......
......@@ -14,6 +14,11 @@
justify-content: space-between;
}
.fla{
display: flex;
align-items: center;
}
//水平和垂直居中
.fcc {
display: flex;
......