Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
81f4f819 by simon
Options

默认提交

1 parent 821eb3e0
Expand all
Inline Side-by-side
Showing 6 changed files with 123 additions and 58 deletions
...@@ -810,6 +810,7 @@ module.exports = { ...@@ -810,6 +810,7 @@ module.exports = {
810 }, 810 },
811 vhis: { 811 vhis: {
812 title: "保單確認書", 812 title: "保單確認書",
813 titleAft:"（由保單持有人確認）",
813 desc1: "多謝閣下投保平安人壽保險產品。", 814 desc1: "多謝閣下投保平安人壽保險產品。",
814 desc2: "保單已經承保，內附于此供閣下參考及保存。", 815 desc2: "保單已經承保，內附于此供閣下參考及保存。",
815 desc3: "保單是重要檔，請即查閱其內容準確性，", 816 desc3: "保單是重要檔，請即查閱其內容準確性，",
......
...@@ -24,7 +24,10 @@ export default { ...@@ -24,7 +24,10 @@ export default {
24 ...mapState({ 24 ...mapState({
25 userInfo: state => state.userInfo, 25 userInfo: state => state.userInfo,
26 policyList: state => state.policyList 26 policyList: state => state.policyList
27 }) 27 }),
28 locale() {
29 return this.$i18n.locale || 'tc';
30 },
28 }, 31 },
29 methods: { 32 methods: {
30 initData() { 33 initData() {
...@@ -101,8 +104,11 @@ export default { ...@@ -101,8 +104,11 @@ export default {
101 let d = now.getDate(); 104 let d = now.getDate();
102 105
103 if (this.$i18n.locale == 'en') { 106 if (this.$i18n.locale == 'en') {
104 this.policyDetail.nowYmd1 = m > 10 ? m : "0" + m; 107 // this.policyDetail.nowYmd1 = m > 10 ? m : "0" + m;
105 this.policyDetail.nowYmd2 = d > 10 ? d : "0" + d; 108 // this.policyDetail.nowYmd2 = d > 10 ? d : "0" + d;
109 // this.policyDetail.nowYmd3 = y;
110 this.policyDetail.nowYmd2 = m > 10 ? m : "0" + m;
111 this.policyDetail.nowYmd1 = d > 10 ? d : "0" + d;
106 this.policyDetail.nowYmd3 = y; 112 this.policyDetail.nowYmd3 = y;
107 } else { 113 } else {
108 this.policyDetail.nowYmd1 = y; 114 this.policyDetail.nowYmd1 = y;
......
...@@ -22,7 +22,6 @@ ...@@ -22,7 +22,6 @@
22 22
23 .bold { 23 .bold {
24 font-weight: 600; 24 font-weight: 600;
25 letter-spacing: .083333rem;
26 } 25 }
27 26
28 .orange { 27 .orange {
...@@ -42,30 +41,30 @@ ...@@ -42,30 +41,30 @@
42 position: relative; 41 position: relative;
43 @extend .bb; 42 @extend .bb;
44 width: 1200px; 43 width: 1200px;
45 max-height: 80vh; 44 max-height: 84vh;
46 border-radius: 16px; 45 border-radius: 16px;
47 background-color: #ffffff; 46 background-color: #ffffff;
48 padding: 80px 0; 47 padding: 88px 0;
49 font-size: 36px; 48 font-size: 22px;
50 overflow-x: hidden; 49 overflow-x: hidden;
51 overflow-y: auto; 50 overflow-y: auto;
52 color: $cFontGray2; 51 color: $cFontGray2;
53 52
54 .content { 53 .content {
55 max-width: 1000px; 54 max-width: 800px;
56 margin: 0 auto; 55 margin: 0 auto;
57 } 56 }
58 57
59 .statement { 58 .statement {
60 @extend .bb; 59 @extend .bb;
61 padding-left: 40px; 60 padding-left: 92px;
62 margin: 80px auto 0; 61 margin: 50px auto 0;
63 } 62 }
64 63
65 .form { 64 .form {
66 @extend .bb; 65 @extend .bb;
67 padding-left: 40px; 66 padding-left: 92px;
68 margin: 80px auto 0; 67 margin: 50px auto 0;
69 68
70 &-item { 69 &-item {
71 display: flex; 70 display: flex;
...@@ -74,11 +73,20 @@ ...@@ -74,11 +73,20 @@
74 } 73 }
75 74
76 .bottom-wrap { 75 .bottom-wrap {
77 margin: 80px auto 0; 76 margin: 50px auto 0;
77
78 .notice {
79 letter-spacing: 2.2px;
80 font-size: 0;
81
82 span {
83 font-size: 22px;
84 }
85 }
78 } 86 }
79 87
80 .title { 88 .title {
81 font-size: 48px; 89 font-size: 36px;
82 color: $cOrange2; 90 color: $cOrange2;
83 font-weight: bold; 91 font-weight: bold;
84 letter-spacing: 2.45px; 92 letter-spacing: 2.45px;
...@@ -86,8 +94,9 @@ ...@@ -86,8 +94,9 @@
86 94
87 .desc { 95 .desc {
88 text-align: left; 96 text-align: left;
89 line-height: 1.5; 97 line-height: 1.82;
90 letter-spacing: 3.6px; 98 letter-spacing: 3.6px;
99 @extend .text-jtf;
91 100
92 span { 101 span {
93 margin: 0 2px; 102 margin: 0 2px;
...@@ -95,14 +104,29 @@ ...@@ -95,14 +104,29 @@
95 } 104 }
96 105
97 .value { 106 .value {
107 flex: 1;
98 text-align: left; 108 text-align: left;
99 line-height: 1.5; 109 line-height: 1.82;
100 letter-spacing: 3.6px; 110 letter-spacing: 3.6px;
111 font-size: 0;
112
113 span {
114 font-size: 22px;
115 }
116 }
117
118 .ltz{
119 letter-spacing: 0;
101 } 120 }
102 121
122 .ltr-zero {
123 @extend .ltz;
124 text-align: justify;
125 text-align-last: left;
126 }
103 127
104 .line1 { 128 .line1 {
105 margin: 80px auto 0; 129 margin: 50px auto 0;
106 } 130 }
107 131
108 132
...@@ -115,15 +139,15 @@ ...@@ -115,15 +139,15 @@
115 .download { 139 .download {
116 margin: 44px auto 0; 140 margin: 44px auto 0;
117 text-align: center; 141 text-align: center;
118 font-size: 28px; 142
119 143
120 &-item { 144 &-item {
121 @extend .bb; 145 @extend .bb;
122 @extend .fcc; 146 @extend .fcc;
123 margin: 0 auto 24px; 147 margin: 0 auto 24px;
124 max-width: 738px; 148 max-width: 602px;
125 height: 81px; 149 height: 67px;
126 line-height: 81px; 150 line-height: 67px;
127 padding: 2px; 151 padding: 2px;
128 border-radius: 8px; 152 border-radius: 8px;
129 cursor: pointer; 153 cursor: pointer;
...@@ -142,8 +166,8 @@ ...@@ -142,8 +166,8 @@
142 border-radius: 8px; 166 border-radius: 8px;
143 167
144 .icon { 168 .icon {
145 height: 60px; 169 height: 47px;
146 margin-right: 64px; 170 margin-right: 52px;
147 } 171 }
148 172
149 } 173 }
...@@ -165,7 +189,7 @@ ...@@ -165,7 +189,7 @@
165 } 189 }
166 190
167 .btn-wrap { 191 .btn-wrap {
168 margin: 40px auto 0; 192 margin: 50px auto 0;
169 display: flex; 193 display: flex;
170 justify-content: center; 194 justify-content: center;
171 } 195 }
...@@ -174,23 +198,21 @@ ...@@ -174,23 +198,21 @@
174 background: url("~@assets/images/vhis/vhis-btn.png"); 198 background: url("~@assets/images/vhis/vhis-btn.png");
175 background-size: 100% 100%; 199 background-size: 100% 100%;
176 background-repeat: no-repeat; 200 background-repeat: no-repeat;
177 width: 405px; 201 width: 300px;
178 height: 60px; 202 height: 50px;
179 line-height: 60px; 203 line-height: 50px;
180 color: #ffffff; 204 color: #ffffff;
181 font-weight: bold; 205 font-weight: bold;
182 cursor: pointer; 206 cursor: pointer;
183 letter-spacing: 1.4px; 207 letter-spacing: 1.1px;
184 font-size: 28px;
185 margin: 0 25px; 208 margin: 0 25px;
186 } 209 }
187 210
188 .contact { 211 .contact {
189 font-size: 28px; 212 margin: 50px auto 0;
190 margin: 45px auto 0;
191 font-weight: bold; 213 font-weight: bold;
192 214
193 span{ 215 span {
194 text-decoration: underline; 216 text-decoration: underline;
195 } 217 }
196 } 218 }
...@@ -258,6 +280,11 @@ ...@@ -258,6 +280,11 @@
258 280
259 281
260 @media (max-width: 768px) { 282 @media (max-width: 768px) {
283 .close {
284 right: -15px;
285 top: -40px;
286 }
287
261 .border { 288 .border {
262 289
263 .modal { 290 .modal {
...@@ -274,16 +301,29 @@ ...@@ -274,16 +301,29 @@
274 301
275 .form { 302 .form {
276 margin: 24px auto 0; 303 margin: 24px auto 0;
304
305 .value {
306 span {
307 font-size: 18px;
308 }
309 }
277 } 310 }
278 311
279 .bottom-wrap { 312 .bottom-wrap {
280 margin: 24px auto 0; 313 margin: 24px auto 0;
281 314
315 .notice {
316
317 span {
318 font-size: 18px;
319 }
320 }
321
282 .btn-wrap { 322 .btn-wrap {
283 margin: 16px auto 0; 323 margin: 16px auto 0;
284 flex-wrap: wrap; 324 flex-wrap: wrap;
285 325
286 .submit-btn{ 326 .submit-btn {
287 height: 48px; 327 height: 48px;
288 line-height: 48px; 328 line-height: 48px;
289 font-size: 18px; 329 font-size: 18px;
...@@ -291,7 +331,7 @@ ...@@ -291,7 +331,7 @@
291 } 331 }
292 } 332 }
293 333
294 .contact{ 334 .contact {
295 margin: 16px auto 0; 335 margin: 16px auto 0;
296 font-size: 18px; 336 font-size: 18px;
297 } 337 }
......
...@@ -6,56 +6,74 @@ ...@@ -6,56 +6,74 @@
6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/vhis/close.png"></div> 6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/vhis/close.png"></div>
7 <div class="modal"> 7 <div class="modal">
8 <div class="content"> 8 <div class="content">
9 <div class="title">{{$t('vhis.title')}}</div> 9 <div class="title">{{$t('vhis.title')}}{{$t('vhis.titleAft')}}</div>
10 <div class="statement"> 10 <div class="statement">
11 <div class="desc orange">{{$t('vhis.desc1')}}</div> 11 <div class="desc orange" :class="{'ltr-zero':locale == 'en'}">{{$t('vhis.desc1')}}</div>
12 <div class="desc">{{$t('vhis.desc2')}}</div> 12 <div class="desc" :class="{'ltr-zero':locale == 'en'}">{{$t('vhis.desc2')}}</div>
13 <div class="desc">{{$t('vhis.desc3')}}</div> 13 <div class="desc" :class="{'ltr-zero':locale == 'en'}">{{$t('vhis.desc3')}}</div>
14 <div class="desc">{{$t('vhis.desc4')}}</div> 14 <div class="desc" :class="{'ltr-zero':locale == 'en'}">{{$t('vhis.desc4')}}</div>
15 <div class="desc">{{$t('vhis.desc5')}}</div> 15 <div class="desc" :class="{'ltr-zero':locale == 'en'}">{{$t('vhis.desc5')}}</div>
16 </div> 16 </div>
17 <hr class="line1"> 17 <hr class="line1">
18 <div class="form "> 18 <div class="form ">
19 <div class="form-item"> 19 <div class="form-item">
20 <div class="desc">{{$t('vhis.label1')}}：</div> 20 <div class="desc" :class="{'ltr-zero':locale == 'en'}">{{$t('vhis.label1')}}：</div>
21 <div class="value orange">{{policyDetail.policyCode}}</div> 21 <div class="value orange">
22 <span>{{policyDetail.policyCode}}</span>
23 </div>
22 </div> 24 </div>
23 <div class="form-item"> 25 <div class="form-item">
24 <div class="desc">{{$t('vhis.label2')}}：</div> 26 <div class="desc" :class="{'ltr-zero':locale == 'en'}">{{$t('vhis.label2')}}：</div>
25 <div class="value orange">{{policyDetail.productName}}</div> 27 <div class="value orange">
28 <span>{{policyDetail.productName}}</span>
29 </div>
26 </div> 30 </div>
27 <div class="form-item"> 31 <div class="form-item">
28 <div class="desc">{{$t('vhis.label3')}}：</div> 32 <div class="desc" :class="{'ltr-zero':locale == 'en'}">{{$t('vhis.label3')}}：</div>
29 <div class="value"> 33 <div class="value">
30 <span class="orange">{{policyDetail.ymd1}}</span>{{$t('vhis.ymd1')}} 34 <span class="orange">{{policyDetail.ymd1}}</span>
31 <span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd2')}} 35 <span>{{$t('vhis.ymd1')}}</span>
32 <span class="orange">{{policyDetail.ymd2}}</span>{{$t('vhis.ymd3')}} 36 <span class="orange">{{policyDetail.ymd2}}</span>
37 <span>{{$t('vhis.ymd2')}}</span>
38 <span class="orange">{{policyDetail.ymd3}}</span>
39 <span>{{$t('vhis.ymd3')}}</span>
33 </div> 40 </div>
34 </div> 41 </div>
35 <div class="form-item"> 42 <div class="form-item">
36 <div class="desc">{{$t('vhis.label4')}}：</div> 43 <div class="desc" :class="{'ltr-zero':locale == 'en'}">{{$t('vhis.label4')}}：</div>
37 <div class="value orange">{{policyDetail.clientNameCn}}</div> 44 <div class="value orange">
45 <span>{{policyDetail.clientNameCn}}</span>
46 </div>
38 </div> 47 </div>
39 <div class="form-item"> 48 <div class="form-item">
40 <div class="desc">{{$t('vhis.label5')}}：</div> 49 <div class="desc" :class="{'ltr-zero':locale == 'en'}">{{$t('vhis.label5')}}：</div>
41 <div class="value orange">{{policyDetail.insuredNameCn}}</div> 50 <div class="value orange">
51 <span>{{policyDetail.insuredNameCn}}</span>
52 </div>
42 </div> 53 </div>
43 54
44 <div class="download"> 55 <div class="download">
45 <div class="border2 download-item" @click="downloadPolicy"> 56 <div class="border2 download-item" @click="downloadPolicy">
46 <div class="cont"> 57 <div class="cont">
47 <img class="icon" src="@/assets/images/vhis/vhis-download.png"> {{$t('vhis.btn1')}} 58 <img class="icon" src="@/assets/images/vhis/vhis-download.png">
59 <span class="t1">{{$t('vhis.btn1')}}</span>
48 </div> 60 </div>
49 </div> 61 </div>
50 </div> 62 </div>
51 </div> 63 </div>
52 <hr class="line1"> 64 <hr class="line1">
53 <div class="bottom-wrap "> 65 <div class="bottom-wrap ">
54 <span class="desc">{{$t('vhis.tip1')}} 66 <span class="notice">
55 <span class="orange">{{policyDetail.clientNameCn}}</span>{{$t('vhis.tip2')}} 67 <span>{{$t('vhis.tip1')}}</span>
56 <span class="orange">{{policyDetail.nowYmd1}}</span>{{$t('vhis.ymd1')}} 68 <span class="orange">{{policyDetail.clientNameCn}}</span>
57 <span class="orange">{{policyDetail.nowYmd2}}</span>{{$t('vhis.ymd2')}} 69 <span>{{$t('vhis.tip2')}}</span>
58 <span class="orange">{{policyDetail.nowYmd3}}</span>{{$t('vhis.ymd3')}}{{$t('vhis.tip3')}}</span> 70 <span class="orange">{{policyDetail.nowYmd1}}</span>
71 <span>{{$t('vhis.ymd1')}}</span>
72 <span class="orange">{{policyDetail.nowYmd2}}</span>
73 <span>{{$t('vhis.ymd2')}}</span>
74 <span class="orange">{{policyDetail.nowYmd3}}</span>
75 <span>{{$t('vhis.ymd3')}}{{$t('vhis.tip3')}}</span>
76 </span>
59 <div class="btn-wrap"> 77 <div class="btn-wrap">
60 <div class="submit-btn" @click="handleConfirmPolicy">{{$t('vhis.btn2')}}</div> 78 <div class="submit-btn" @click="handleConfirmPolicy">{{$t('vhis.btn2')}}</div>
61 <div class="submit-btn " @click="handleIgnorePolicy">{{$t('vhis.btn3')}}</div> 79 <div class="submit-btn " @click="handleIgnorePolicy">{{$t('vhis.btn3')}}</div>
......