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 = { ...@@ -423,6 +423,25 @@ module.exports = {
423 checkTips: "本人不同意接收宣傳信息", 423 checkTips: "本人不同意接收宣傳信息",
424 submit: "確認修改", 424 submit: "確認修改",
425 }, 425 },
426 policyChangeInformation: {
427 hkClient: "是否平安香港客戶",
428 yes: "是",
429 no: "否",
430 obj: "變更對象",
431 name: "姓名",
432 sex: "性别",
433 birth: "出生日期",
434 type: "證件類型",
435 NO: "證件號碼",
436 validityPeriod: "證件有效期",
437 nationality: "國籍",
438 employer: "工作單位",
439 maritalStatus: "婚姻狀況",
440 submit: "確認修改",
441 upload: "附件上傳",
442 modifyTips1: "如需修改請",
443 modifyTips2: "聯繫客服",
444 },
426 contactUs: { 445 contactUs: {
427 service: { 446 service: {
428 center: { 447 center: {
......
...@@ -423,6 +423,25 @@ module.exports = { ...@@ -423,6 +423,25 @@ module.exports = {
423 checkTips: "本人不同意接收宣傳信息", 423 checkTips: "本人不同意接收宣傳信息",
424 submit: "確認修改", 424 submit: "確認修改",
425 }, 425 },
426 policyChangeInformation: {
427 hkClient: "是否平安香港客戶",
428 yes: "是",
429 no: "否",
430 obj: "變更對象",
431 name: "姓名",
432 sex: "性别",
433 birth: "出生日期",
434 type: "證件類型",
435 NO: "證件號碼",
436 validityPeriod: "證件有效期",
437 nationality: "國籍",
438 employer: "工作單位",
439 maritalStatus: "婚姻狀況",
440 submit: "確認修改",
441 upload: "附件上傳",
442 modifyTips1: "如需修改請",
443 modifyTips2: "聯繫客服",
444 },
426 contactUs: { 445 contactUs: {
427 service: { 446 service: {
428 center: { 447 center: {
......
...@@ -424,6 +424,36 @@ module.exports = { ...@@ -424,6 +424,36 @@ module.exports = {
424 checkTips: "本人不同意接收宣传信息", 424 checkTips: "本人不同意接收宣传信息",
425 submit: "确认修改", 425 submit: "确认修改",
426 }, 426 },
427
428
429
430
431
432
433
434
435
436
437
438 policyChangeInformation: {
439 hkClient: "是否平安香港客戶",
440 yes: "是",
441 no: "否",
442 obj: "变更对象",
443 name: "姓名",
444 sex: "性别",
445 birth: "出生日期",
446 type: "证件类型",
447 NO: "证件号码",
448 validityPeriod: "证件有效期",
449 nationality: "国籍",
450 employer: "工作单位",
451 maritalStatus: "婚姻状况",
452 submit: "确认修改",
453 upload: "附件上传",
454 modifyTips1: "如需修改请",
455 modifyTips2: "联系客服",
456 },
427 contactUs: { 457 contactUs: {
428 service: { 458 service: {
429 center: { 459 center: {
......
...@@ -7,10 +7,18 @@ import { ...@@ -7,10 +7,18 @@ import {
7 export default { 7 export default {
8 data() { 8 data() {
9 return { 9 return {
10 key: 'value' 10 key: 'value',
11 } 11 }
12 }, 12 },
13 components: {}, 13 components: {},
14 computed: {
15 locale() {
16 return this.$i18n.locale || 'tc';
17 },
18 i18n() {
19 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
20 }
21 },
14 methods: { 22 methods: {
15 initData() {} 23 initData() {}
16 }, 24 },
......
...@@ -7,10 +7,20 @@ import { ...@@ -7,10 +7,20 @@ import {
7 export default { 7 export default {
8 data() { 8 data() {
9 return { 9 return {
10 key: 'value' 10 key: 'value',
11 isHkCus : true,
12 checked : false
11 } 13 }
12 }, 14 },
13 components: {}, 15 components: {},
16 computed: {
17 locale() {
18 return this.$i18n.locale || 'tc';
19 },
20 i18n() {
21 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
22 }
23 },
14 methods: { 24 methods: {
15 initData() {} 25 initData() {}
16 }, 26 },
......
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
47 color: #f05a23; 47 color: #f05a23;
48 display: flex; 48 display: flex;
49 align-items: center; 49 align-items: center;
50
50 margin-bottom: .7rem; 51 margin-bottom: .7rem;
51 52
52 .icon { 53 .icon {
...@@ -59,6 +60,26 @@ ...@@ -59,6 +60,26 @@
59 } 60 }
60 } 61 }
61 62
63 .label2 {
64 justify-content: space-between;
65
66 .icon2 {
67
68 width: 1.2rem;
69 display: flex;
70 }
71
72 .t1 {
73 color: $cFontGray;
74 }
75
76 .t2 {
77 color: $cOrange;
78 text-decoration: underline;
79 @extend .pointer;
80 }
81 }
82
62 .ipt-wrap { 83 .ipt-wrap {
63 position: relative; 84 position: relative;
64 85
...@@ -74,6 +95,10 @@ ...@@ -74,6 +95,10 @@
74 padding: 0 2.083333rem; 95 padding: 0 2.083333rem;
75 } 96 }
76 97
98 .disable {
99 background-color: #dcdddd;
100 }
101
77 // 长文本 102 // 长文本
78 .textarea { 103 .textarea {
79 min-height: 8.75rem; 104 min-height: 8.75rem;
...@@ -101,8 +126,10 @@ ...@@ -101,8 +126,10 @@
101 margin-bottom: 2.25rem; 126 margin-bottom: 2.25rem;
102 127
103 .label { 128 .label {
104 min-width: 12.833333rem; 129 // min-width: 12.833333rem;
105 height: 2.5rem; 130 height: 2.5rem;
131 margin-right: 2.25rem;
132 color: $cFontGray;
106 } 133 }
107 134
108 .cont { 135 .cont {
...@@ -110,7 +137,8 @@ ...@@ -110,7 +137,8 @@
110 display: flex; 137 display: flex;
111 138
112 .boo-btn { 139 .boo-btn {
113 width: 5.25rem; 140 // width: 5.25rem;
141 padding: 0 2.25rem;
114 height: 2.5rem; 142 height: 2.5rem;
115 line-height: 2.5rem; 143 line-height: 2.5rem;
116 border: solid 1px #dcdddd; 144 border: solid 1px #dcdddd;
......
...@@ -7,141 +7,140 @@ ...@@ -7,141 +7,140 @@
7 </div> 7 </div>
8 <div class="gird-g form"> 8 <div class="gird-g form">
9 9
10 <!-- 變更對象 --> 10 <!-- 變更對象 checkbox -->
11 <div class="pure-u-1 form-item form-item2"> 11 <div class="pure-u-1 form-item form-item2">
12 <div class="label"> 12 <div class="label">
13 <div class="icon"><img src="@/assets/images/reservation/icon-re-custom.png"></div>{{$t('reservation.hkClient')}} 13 {{$t('policyChangeInformation.hkClient')}}
14 </div> 14 </div>
15 <div class="cont"> 15 <div class="cont">
16 <div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('reservation.yes')}}</div> 16 <div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('policyChangeInformation.yes')}}</div>
17 <div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('reservation.no')}}</div> 17 <div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('policyChangeInformation.no')}}</div>
18 </div> 18 </div>
19 </div> 19 </div>
20 20
21 <!-- start -->
22 <!-- 1 -->
21 <div class="pure-u-1 pure-u-md-1-2 form-item"> 23 <div class="pure-u-1 pure-u-md-1-2 form-item">
22 <div class="label"> 24 <div class="label">
23 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}} 25 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div> {{$t('policyChangeInformation.obj')}}
24 </div> 26 </div>
25 <div class="ipt-wrap"> 27 <div class="ipt-wrap">
26 <input :placeholder="$t('reservation.namePlaceholder')" class="ipt" type="text"> 28 <input class="ipt" type="text">
27 </div> 29 </div>
28 </div> 30 </div>
29 31
32 <!-- 2 -->
30 <div class="pure-u-1 pure-u-md-1-2 form-item"> 33 <div class="pure-u-1 pure-u-md-1-2 form-item">
31 <div class="label"> 34 <div class="label label2">
32 <div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}} 35 <div class="fla">
36 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div>{{$t('policyChangeInformation.sex')}}
37 </div>
38 <div class="fla">
39 <div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
40 <span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
41 <span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
42 </div>
33 </div> 43 </div>
34 <div class="ipt-wrap"> 44 <div class="ipt-wrap">
35 <div class="down-arrow"></div> 45 <div class="down-arrow"></div>
36 <select class="ipt"> 46 <select disabled class="ipt disable">
37 <option v-if="locale !='zh'">電話</option> 47 <option v-if="locale !='zh'">男</option>
38 <option v-else>电话</option> 48 <option v-else>男</option>
39 </select> 49 </select>
40 </div> 50 </div>
41 </div> 51 </div>
42 52
53 <!-- 3 -->
43 <div class="pure-u-1 pure-u-md-1-2 form-item"> 54 <div class="pure-u-1 pure-u-md-1-2 form-item">
44 <div class="label"> 55 <div class="label label2">
45 <div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}} 56 <div class="fla">
57 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-date.png"></div>{{$t('policyChangeInformation.birth')}}
58 </div>
59 <div class="fla">
60 <div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
61 <span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
62 <span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
63 </div>
46 </div> 64 </div>
47 <div class="ipt-wrap"> 65 <div class="ipt-wrap">
48 <input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text"> 66 <input disabled placeholder="1999-1-1" class="ipt disable" type="text">
49 </div> 67 </div>
50 </div> 68 </div>
51 69
70 <!-- 4 -->
52 <div class="pure-u-1 pure-u-md-1-2 form-item"> 71 <div class="pure-u-1 pure-u-md-1-2 form-item">
53 <div class="label"> 72 <div class="label">
54 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}} 73 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div>{{$t('policyChangeInformation.type')}}
55 </div> 74 </div>
56 <div class="ipt-wrap"> 75 <div class="ipt-wrap">
57 <div class="down-arrow"></div> 76 <div class="down-arrow"></div>
58 <select class="ipt"> 77 <select class="ipt">
59 <template v-if="locale =='zh'"> 78 <template v-if="locale =='zh'">
60 <option>投保咨询</option> 79 <option>身份证</option>
61 <option>代办保单变更</option>
62 </template> 80 </template>
63 <template v-else> 81 <template v-else>
64 <option>投保咨詢</option> 82 <option>身份證</option>
65 <option>代辦保單變更</option>
66 </template> 83 </template>
67 </select> 84 </select>
68 </div> 85 </div>
69 </div> 86 </div>
70 87
88 <!-- 5 -->
71 <div class="pure-u-1 pure-u-md-1-2 form-item"> 89 <div class="pure-u-1 pure-u-md-1-2 form-item">
72 <div class="label"> 90 <div class="label">
73 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}} 91 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.NO')}}
74 </div> 92 </div>
75 <div class="ipt-wrap"> 93 <div class="ipt-wrap">
76 <input :placeholder="$t('reservation.namePlaceholder')" class="ipt" type="text"> 94 <input class="ipt" type="text">
77 </div> 95 </div>
78 </div> 96 </div>
79 97
98 <!-- 6 -->
80 <div class="pure-u-1 pure-u-md-1-2 form-item"> 99 <div class="pure-u-1 pure-u-md-1-2 form-item">
81 <div class="label"> 100 <div class="label">
82 <div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}} 101 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.validityPeriod')}}
83 </div> 102 </div>
84 <div class="ipt-wrap"> 103 <div class="ipt-wrap">
85 <div class="down-arrow"></div> 104 <input class="ipt" type="text">
86 <select class="ipt">
87 <option v-if="locale !='zh'">電話</option>
88 <option v-else>电话</option>
89 </select>
90 </div> 105 </div>
91 </div> 106 </div>
92 107
108 <!-- 7 -->
93 <div class="pure-u-1 pure-u-md-1-2 form-item"> 109 <div class="pure-u-1 pure-u-md-1-2 form-item">
94 <div class="label"> 110 <div class="label">
95 <div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}} 111 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-earth.png"></div> {{$t('policyChangeInformation.nationality')}}
96 </div> 112 </div>
97 <div class="ipt-wrap"> 113 <div class="ipt-wrap">
98 <input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text"> 114 <input class="ipt" type="text">
99 </div> 115 </div>
100 </div> 116 </div>
101 117
118 <!-- 8 -->
102 <div class="pure-u-1 pure-u-md-1-2 form-item"> 119 <div class="pure-u-1 pure-u-md-1-2 form-item">
103 <div class="label"> 120 <div class="label">
104 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}} 121 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-build.png"></div> {{$t('policyChangeInformation.employer')}}
105 </div> 122 </div>
106 <div class="ipt-wrap"> 123 <div class="ipt-wrap">
107 <div class="down-arrow"></div> 124 <input class="ipt" type="text">
108 <select class="ipt">
109 <template v-if="locale =='zh'">
110 <option>投保咨询</option>
111 <option>代办保单变更</option>
112 </template>
113 <template v-else>
114 <option>投保咨詢</option>
115 <option>代辦保單變更</option>
116 </template>
117 </select>
118 </div> 125 </div>
119 </div> 126 </div>
120 127
128 <!-- 9 -->
121 <div class="pure-u-1 pure-u-md-1-2 form-item"> 129 <div class="pure-u-1 pure-u-md-1-2 form-item">
122 <div class="label"> 130 <div class="label">
123 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}} 131 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-love.png"></div> {{$t('policyChangeInformation.maritalStatus')}}
124 </div> 132 </div>
125 <div class="ipt-wrap"> 133 <div class="ipt-wrap">
126 <div class="down-arrow"></div> 134 <input class="ipt" type="text">
127 <select class="ipt">
128 <template v-if="locale =='zh'">
129 <option>投保咨询</option>
130 <option>代办保单变更</option>
131 </template>
132 <template v-else>
133 <option>投保咨詢</option>
134 <option>代辦保單變更</option>
135 </template>
136 </select>
137 </div> 135 </div>
138 </div> 136 </div>
137
139 <div class="pure-u-1 pure-u-md-1-2 form-item"></div> 138 <div class="pure-u-1 pure-u-md-1-2 form-item"></div>
140 139
141 </div> 140 </div>
142 141
143 <div class="submit-btn"> 142 <div class="submit-btn">
144 {{$t("policyChangeContact.submit")}} 143 {{$t("policyChangeInformation.submit")}}
145 </div> 144 </div>
146 </div> 145 </div>
147 </div> 146 </div>
......
...@@ -14,6 +14,11 @@ ...@@ -14,6 +14,11 @@
14 justify-content: space-between; 14 justify-content: space-between;
15 } 15 }
16 16
17 .fla{
18 display: flex;
19 align-items: center;
20 }
21
17 //水平和垂直居中 22 //水平和垂直居中
18 .fcc { 23 .fcc {
19 display: flex; 24 display: flex;
......