版本提交
Showing
14 changed files
with
686 additions
and
32 deletions
293 Bytes
src/assets/images/contact-us/cs-qrcode.png
0 → 100644
17.6 KB
... | @@ -16,7 +16,7 @@ module.exports = { | ... | @@ -16,7 +16,7 @@ module.exports = { |
16 | name: "register", | 16 | name: "register", |
17 | path: "/register", | 17 | path: "/register", |
18 | value: "" | 18 | value: "" |
19 | },{ | 19 | }, { |
20 | name: "login", | 20 | name: "login", |
21 | path: "/login", | 21 | path: "/login", |
22 | value: "" | 22 | value: "" |
... | @@ -110,7 +110,7 @@ module.exports = { | ... | @@ -110,7 +110,7 @@ module.exports = { |
110 | contactInformation: "Contact Information", | 110 | contactInformation: "Contact Information", |
111 | service: "Service", | 111 | service: "Service", |
112 | qrcode: "Official Accounts", | 112 | qrcode: "Official Accounts", |
113 | copyright:"版權所有 © 中國平安保險(集團)股份有限公司未經許可不得復制、轉載或摘編,違者必究!" | 113 | copyright: "版權所有 © 中國平安保險(集團)股份有限公司未經許可不得復制、轉載或摘編,違者必究!" |
114 | }, | 114 | }, |
115 | login: { | 115 | login: { |
116 | title: "平安一賬通", | 116 | title: "平安一賬通", |
... | @@ -208,6 +208,80 @@ module.exports = { | ... | @@ -208,6 +208,80 @@ module.exports = { |
208 | menu7: "Suggestions", | 208 | menu7: "Suggestions", |
209 | menu8: "Common form", | 209 | menu8: "Common form", |
210 | }, | 210 | }, |
211 | commonForm: { | ||
212 | head1: "表格類型", | ||
213 | head2: "表格名稱", | ||
214 | head3: "使用說明", | ||
215 | head4: "附件", | ||
216 | download: "下載文檔", | ||
217 | form: [{ | ||
218 | type: "繳費類", | ||
219 | list: [{ | ||
220 | name: "「電子入賬服務」及銀行戶口<br>直接付款授權申請", | ||
221 | desc: "申請設立「 電子入賬服務」 及銀行戶口<br>直接付款授權時須提供", | ||
222 | download: "", | ||
223 | }, | ||
224 | { | ||
225 | name: "信用卡戶口直接付款授權書", | ||
226 | desc: "申請信用卡戶口直接付款授權時須提供", | ||
227 | download: "", | ||
228 | } | ||
229 | ] | ||
230 | }, | ||
231 | { | ||
232 | type: "保單變更類", | ||
233 | list: [{ | ||
234 | name: "保險合同解除申請書", | ||
235 | desc: "退保、猶豫期退保業務適用", | ||
236 | download: "", | ||
237 | }, | ||
238 | { | ||
239 | name: "保險合同變更申請書( 保單貸款還款類)", | ||
240 | desc: "保單貸款、還款業務適用", | ||
241 | download: "", | ||
242 | }, | ||
243 | { | ||
244 | name: "保險合同變更申請書( 保險合同計劃變更類)", | ||
245 | desc: "加保、減保、新增附險、復效等業務適用", | ||
246 | download: "", | ||
247 | }, | ||
248 | { | ||
249 | name: "保險合同變更申請書( 客戶信息變更類)", | ||
250 | desc: "基本信息變更業務適用", | ||
251 | download: "", | ||
252 | }, | ||
253 | { | ||
254 | name: "保險合同變更申請書( 客戶權益變更類)", | ||
255 | desc: "交費方式、自墊選擇權變更、補發等業務適用", | ||
256 | download: "", | ||
257 | }, | ||
258 | { | ||
259 | name: "授權委托書", | ||
260 | desc: "委托他人代辦時須提供", | ||
261 | download: "", | ||
262 | }, | ||
263 | { | ||
264 | name: "稅收聲明", | ||
265 | desc: "CRS要求", | ||
266 | download: "", | ||
267 | }, | ||
268 | { | ||
269 | name: "健康告知", | ||
270 | desc: "須二次核保的業務須提供", | ||
271 | download: "", | ||
272 | } | ||
273 | ] | ||
274 | }, | ||
275 | { | ||
276 | type: "理賠類", | ||
277 | list: [{ | ||
278 | name: "理賠申請書", | ||
279 | desc: "紙質申請的應備文件", | ||
280 | download: "", | ||
281 | }] | ||
282 | }, | ||
283 | ] | ||
284 | }, | ||
211 | customService: { | 285 | customService: { |
212 | name: "Customer service", | 286 | name: "Customer service", |
213 | menu1: "Contact us", | 287 | menu1: "Contact us", |
... | @@ -246,7 +320,7 @@ module.exports = { | ... | @@ -246,7 +320,7 @@ module.exports = { |
246 | t4Title: "Beneficiary information", | 320 | t4Title: "Beneficiary information", |
247 | t4NameCn: "Name (Cn)", | 321 | t4NameCn: "Name (Cn)", |
248 | t4NameEn: "Name (En)", | 322 | t4NameEn: "Name (En)", |
249 | t4Relation : "與受保人關係", | 323 | t4Relation: "與受保人關係", |
250 | t4Allocation: "Distribution ratio", | 324 | t4Allocation: "Distribution ratio", |
251 | 325 | ||
252 | t5Title: "Payment information", | 326 | t5Title: "Payment information", |
... | @@ -263,8 +337,8 @@ module.exports = { | ... | @@ -263,8 +337,8 @@ module.exports = { |
263 | t6ClosingDate: "Closing date", | 337 | t6ClosingDate: "Closing date", |
264 | t6PaymentAmount: "Payment amount", | 338 | t6PaymentAmount: "Payment amount", |
265 | }, | 339 | }, |
266 | reservation :{ | 340 | reservation: { |
267 | submitBtn : '確認' | 341 | submitBtn: '確認' |
268 | } | 342 | } |
269 | } | 343 | } |
270 | } | 344 | } | ... | ... |
... | @@ -16,7 +16,7 @@ module.exports = { | ... | @@ -16,7 +16,7 @@ module.exports = { |
16 | name: "註冊", | 16 | name: "註冊", |
17 | path: "/register", | 17 | path: "/register", |
18 | value: "" | 18 | value: "" |
19 | },{ | 19 | }, { |
20 | name: "登入", | 20 | name: "登入", |
21 | path: "/login", | 21 | path: "/login", |
22 | value: "" | 22 | value: "" |
... | @@ -208,6 +208,80 @@ module.exports = { | ... | @@ -208,6 +208,80 @@ module.exports = { |
208 | menu7: "投訴受理", | 208 | menu7: "投訴受理", |
209 | menu8: "常用表格", | 209 | menu8: "常用表格", |
210 | }, | 210 | }, |
211 | commonForm: { | ||
212 | head1: "表格類型", | ||
213 | head2: "表格名稱", | ||
214 | head3: "使用說明", | ||
215 | head4: "附件", | ||
216 | download: "下載文檔", | ||
217 | form: [{ | ||
218 | type: "繳費類", | ||
219 | list: [{ | ||
220 | name: "「電子入賬服務」及銀行戶口<br>直接付款授權申請", | ||
221 | desc: "申請設立「 電子入賬服務」 及銀行戶口<br>直接付款授權時須提供", | ||
222 | download: "", | ||
223 | }, | ||
224 | { | ||
225 | name: "信用卡戶口直接付款授權書", | ||
226 | desc: "申請信用卡戶口直接付款授權時須提供", | ||
227 | download: "", | ||
228 | } | ||
229 | ] | ||
230 | }, | ||
231 | { | ||
232 | type: "保單變更類", | ||
233 | list: [{ | ||
234 | name: "保險合同解除申請書", | ||
235 | desc: "退保、猶豫期退保業務適用", | ||
236 | download: "", | ||
237 | }, | ||
238 | { | ||
239 | name: "保險合同變更申請書( 保單貸款還款類)", | ||
240 | desc: "保單貸款、還款業務適用", | ||
241 | download: "", | ||
242 | }, | ||
243 | { | ||
244 | name: "保險合同變更申請書( 保險合同計劃變更類)", | ||
245 | desc: "加保、減保、新增附險、復效等業務適用", | ||
246 | download: "", | ||
247 | }, | ||
248 | { | ||
249 | name: "保險合同變更申請書( 客戶信息變更類)", | ||
250 | desc: "基本信息變更業務適用", | ||
251 | download: "", | ||
252 | }, | ||
253 | { | ||
254 | name: "保險合同變更申請書( 客戶權益變更類)", | ||
255 | desc: "交費方式、自墊選擇權變更、補發等業務適用", | ||
256 | download: "", | ||
257 | }, | ||
258 | { | ||
259 | name: "授權委托書", | ||
260 | desc: "委托他人代辦時須提供", | ||
261 | download: "", | ||
262 | }, | ||
263 | { | ||
264 | name: "稅收聲明", | ||
265 | desc: "CRS要求", | ||
266 | download: "", | ||
267 | }, | ||
268 | { | ||
269 | name: "健康告知", | ||
270 | desc: "須二次核保的業務須提供", | ||
271 | download: "", | ||
272 | } | ||
273 | ] | ||
274 | }, | ||
275 | { | ||
276 | type: "理賠類", | ||
277 | list: [{ | ||
278 | name: "理賠申請書", | ||
279 | desc: "紙質申請的應備文件", | ||
280 | download: "", | ||
281 | }] | ||
282 | }, | ||
283 | ] | ||
284 | }, | ||
211 | customService: { | 285 | customService: { |
212 | name: "客戶服務", | 286 | name: "客戶服務", |
213 | menu1: "聯繫我們", | 287 | menu1: "聯繫我們", |
... | @@ -246,7 +320,7 @@ module.exports = { | ... | @@ -246,7 +320,7 @@ module.exports = { |
246 | t4Title: "受益人資料", // t4BeneficiaryInformation | 320 | t4Title: "受益人資料", // t4BeneficiaryInformation |
247 | t4NameCn: "姓名(中文)", | 321 | t4NameCn: "姓名(中文)", |
248 | t4NameEn: "姓名(英文)", | 322 | t4NameEn: "姓名(英文)", |
249 | t4Relation : "與受保人關係", | 323 | t4Relation: "與受保人關係", |
250 | t4Allocation: "分配比例", | 324 | t4Allocation: "分配比例", |
251 | 325 | ||
252 | t5Title: "繳費資料", | 326 | t5Title: "繳費資料", |
... | @@ -263,8 +337,8 @@ module.exports = { | ... | @@ -263,8 +337,8 @@ module.exports = { |
263 | t6ClosingDate: "實收日期", | 337 | t6ClosingDate: "實收日期", |
264 | t6PaymentAmount: "繳費金額", | 338 | t6PaymentAmount: "繳費金額", |
265 | }, | 339 | }, |
266 | reservation :{ | 340 | reservation: { |
267 | submitBtn : '確認' | 341 | submitBtn: '確認' |
268 | } | 342 | } |
269 | } | 343 | } |
270 | } | 344 | } | ... | ... |
... | @@ -16,7 +16,7 @@ module.exports = { | ... | @@ -16,7 +16,7 @@ module.exports = { |
16 | name: "注册", | 16 | name: "注册", |
17 | path: "/register", | 17 | path: "/register", |
18 | value: "" | 18 | value: "" |
19 | },{ | 19 | }, { |
20 | name: "登陆", | 20 | name: "登陆", |
21 | path: "/login", | 21 | path: "/login", |
22 | value: "" | 22 | value: "" |
... | @@ -208,6 +208,81 @@ module.exports = { | ... | @@ -208,6 +208,81 @@ module.exports = { |
208 | menu7: "投诉受理", | 208 | menu7: "投诉受理", |
209 | menu8: "常用表格", | 209 | menu8: "常用表格", |
210 | }, | 210 | }, |
211 | commonForm: { | ||
212 | head1: "表格类型", | ||
213 | head2: "表格名称", | ||
214 | head3: "使用说明", | ||
215 | head4: "附件", | ||
216 | download: "下载文档", | ||
217 | form: [{ | ||
218 | type: "缴费类", | ||
219 | list: [{ | ||
220 | name: "「电子入账服务」及银行户口<br>直接付款授权申请", | ||
221 | desc: "申请设立「电子入账服务」及银行户口<br>直接付款授权时须提供", | ||
222 | download: "", | ||
223 | }, | ||
224 | { | ||
225 | name: "信用卡户口直接付款授权书", | ||
226 | desc: "申请信用卡户口直接付款授权时须提供", | ||
227 | download: "", | ||
228 | } | ||
229 | ] | ||
230 | }, | ||
231 | { | ||
232 | type: "保单变更类", | ||
233 | list: [{ | ||
234 | name: "保险合同解除申请书", | ||
235 | desc: "退保、犹豫期退保业务适用", | ||
236 | download: "", | ||
237 | }, | ||
238 | { | ||
239 | name: "保险合同变更申请书(保单贷款还款类)", | ||
240 | desc: "保单贷款、还款业务适用", | ||
241 | download: "", | ||
242 | }, | ||
243 | { | ||
244 | name: "保险合同变更申请书(保险合同计划变更类)", | ||
245 | desc: "加保、减保、新增附险、复效等业务适用", | ||
246 | download: "", | ||
247 | }, | ||
248 | { | ||
249 | name: "保险合同变更申请书(客户信息变更类)", | ||
250 | desc: "基本信息变更业务适用", | ||
251 | download: "", | ||
252 | }, | ||
253 | { | ||
254 | name: "保险合同变更申请书(客户权益变更类)", | ||
255 | desc: "交费方式、自垫选择权变更、补发等业务适用", | ||
256 | download: "", | ||
257 | }, | ||
258 | { | ||
259 | name: "授权委托书", | ||
260 | desc: "委托他人代办时须提供", | ||
261 | download: "", | ||
262 | }, | ||
263 | { | ||
264 | name: "税收声明", | ||
265 | desc: "CRS要求", | ||
266 | download: "", | ||
267 | }, | ||
268 | { | ||
269 | name: "健康告知", | ||
270 | desc: "须二次核保的业务须提供", | ||
271 | download: "", | ||
272 | } | ||
273 | |||
274 | ] | ||
275 | }, | ||
276 | { | ||
277 | type: "理赔类", | ||
278 | list: [{ | ||
279 | name: "理赔申请书", | ||
280 | desc: "纸质申请的应备文件", | ||
281 | download: "", | ||
282 | }] | ||
283 | }, | ||
284 | ] | ||
285 | }, | ||
211 | customService: { | 286 | customService: { |
212 | name: "客户服务", | 287 | name: "客户服务", |
213 | menu1: "联系我们", | 288 | menu1: "联系我们", |
... | @@ -246,7 +321,7 @@ module.exports = { | ... | @@ -246,7 +321,7 @@ module.exports = { |
246 | t4Title: "受益人资料", // t4BeneficiaryInformation | 321 | t4Title: "受益人资料", // t4BeneficiaryInformation |
247 | t4NameCn: "姓名(中文)", | 322 | t4NameCn: "姓名(中文)", |
248 | t4NameEn: "姓名(英文)", | 323 | t4NameEn: "姓名(英文)", |
249 | t4Relation : "与受保人关系", | 324 | t4Relation: "与受保人关系", |
250 | t4Allocation: "分配比例", | 325 | t4Allocation: "分配比例", |
251 | 326 | ||
252 | t5Title: "缴费资料", | 327 | t5Title: "缴费资料", |
... | @@ -263,8 +338,8 @@ module.exports = { | ... | @@ -263,8 +338,8 @@ module.exports = { |
263 | t6ClosingDate: "实收日期", | 338 | t6ClosingDate: "实收日期", |
264 | t6PaymentAmount: "缴费金额", | 339 | t6PaymentAmount: "缴费金额", |
265 | }, | 340 | }, |
266 | reservation :{ | 341 | reservation: { |
267 | submitBtn : '确认' | 342 | submitBtn: '确认' |
268 | } | 343 | } |
269 | } | 344 | } |
270 | } | 345 | } | ... | ... |
1 | import api from '@/api/api' | ||
2 | import { | ||
3 | httpGet, | ||
4 | httpPost | ||
5 | } from '@/api/fetch-api.js' | ||
6 | |||
7 | export default { | ||
8 | data() { | ||
9 | return { | ||
10 | key: 'value' | ||
11 | } | ||
12 | }, | ||
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 | }, | ||
22 | methods: { | ||
23 | initData() {} | ||
24 | }, | ||
25 | mounted() {}, | ||
26 | created() {} | ||
27 | } |
1 | @import '@/styles/_support'; | ||
2 | |||
3 | .common-form-container {} | ||
4 | |||
5 | .table { | ||
6 | $girdHei: 4.333333rem; | ||
7 | text-align: center; | ||
8 | |||
9 | &-header { | ||
10 | @include border-top-radius(.666667rem); | ||
11 | display: flex; | ||
12 | align-items: center; | ||
13 | height: 2.5rem; | ||
14 | color: #ffffff; | ||
15 | font-weight: bold; | ||
16 | letter-spacing: .1rem; | ||
17 | |||
18 | &-item {} | ||
19 | } | ||
20 | |||
21 | &-content { | ||
22 | background-color: #f2f2f2; | ||
23 | text-align: center; | ||
24 | border: solid 1px #f2f2f2; | ||
25 | @include border-bottom-radius(.666667rem); | ||
26 | $gridHei: 4.333333rem; | ||
27 | |||
28 | &-item { | ||
29 | position: relative; | ||
30 | // @extend .fcc; | ||
31 | display: flex; | ||
32 | align-items: center; | ||
33 | width: 100%; | ||
34 | height: auto; | ||
35 | |||
36 | .hl { | ||
37 | position: absolute; | ||
38 | width: 5.25rem; | ||
39 | height: 1px; | ||
40 | background-color: #dcdddd; | ||
41 | bottom: 0; | ||
42 | left: .75rem; | ||
43 | } | ||
44 | |||
45 | .grid { | ||
46 | position: relative; | ||
47 | height: $gridHei; | ||
48 | @extend .fcc; | ||
49 | // border-bottom: solid 1px #f2f2f2; | ||
50 | background-color: #ffffff; | ||
51 | |||
52 | .v-line { | ||
53 | position: absolute; | ||
54 | width: 1px; | ||
55 | height: 2.25rem; | ||
56 | background-color: #dcdddd; | ||
57 | right: 0; | ||
58 | top: 0; | ||
59 | bottom: 0; | ||
60 | margin: auto 0; | ||
61 | } | ||
62 | |||
63 | .icon{ | ||
64 | margin-right: .916667rem; | ||
65 | } | ||
66 | } | ||
67 | |||
68 | .ww { | ||
69 | position: relative; | ||
70 | |||
71 | .h-line { | ||
72 | position: absolute; | ||
73 | width: 100%; | ||
74 | height: 1px; | ||
75 | background-color: #dcdddd; | ||
76 | bottom: 0; | ||
77 | left: 0; | ||
78 | } | ||
79 | } | ||
80 | |||
81 | .w1 {} | ||
82 | |||
83 | .w4 { | ||
84 | .h-line { | ||
85 | width: 9rem; | ||
86 | } | ||
87 | color: $cOrange; | ||
88 | } | ||
89 | } | ||
90 | } | ||
91 | |||
92 | .t1 { | ||
93 | background-color: #f2f2f2; | ||
94 | } | ||
95 | |||
96 | .w1 { | ||
97 | width: 7rem; | ||
98 | } | ||
99 | |||
100 | .w2 { | ||
101 | width: 23rem; | ||
102 | } | ||
103 | |||
104 | .w3 { | ||
105 | width: 23.5rem; | ||
106 | } | ||
107 | |||
108 | .w4 { | ||
109 | flex: 1; | ||
110 | } | ||
111 | } | ||
112 | |||
113 | |||
114 | .orange { | ||
115 | background-color: $cOrange; | ||
116 | } |
1 | |||
2 | <template> | ||
3 | <div class="common-form-container"> | ||
4 | <div class="table"> | ||
5 | <div class="table-header orange"> | ||
6 | <div class="table-header-item w1">{{$t('commonForm.head1')}}</div> | ||
7 | <div class="table-header-item w2">{{$t('commonForm.head2')}}</div> | ||
8 | <div class="table-header-item w3">{{$t('commonForm.head3')}}</div> | ||
9 | <div class="table-header-item w4">{{$t('commonForm.head4')}}</div> | ||
10 | </div> | ||
11 | <div class="table-content"> | ||
12 | <div v-for="(item,index) in i18n.commonForm.form" :key="index" class="table-content-item"> | ||
13 | <div v-if="index < i18n.commonForm.form.length-1" class="hl"></div> | ||
14 | <div class="ww w1"> | ||
15 | {{item.type}} | ||
16 | </div> | ||
17 | <div class="ww w2"> | ||
18 | <div v-for="(item2,index2) in item.list" :key="index2" class="grid"> | ||
19 | <div class="v-line"></div> | ||
20 | <div v-if="index < i18n.commonForm.form.length-1 || index2 < item.list.length-1" class="h-line"></div> | ||
21 | <span v-html="item2.name"> {{item2.name}}</span> | ||
22 | </div> | ||
23 | </div> | ||
24 | <div class="ww w3"> | ||
25 | <div v-for="(item2,index2) in item.list" :key="index2" class="grid"> | ||
26 | <div class="v-line"></div> | ||
27 | <div v-if="index < i18n.commonForm.form.length-1 || index2 < item.list.length-1" class="h-line"></div> | ||
28 | <span v-html="item2.desc"> {{item2.desc}}</span> | ||
29 | </div> | ||
30 | </div> | ||
31 | <div class="ww w4"> | ||
32 | <div v-for="(item2,index2) in item.list" :key="index2" class="grid pointer"> | ||
33 | <div v-if="index < i18n.commonForm.form.length-1 || index2 < item.list.length-1" class="h-line"></div> | ||
34 | <img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> {{$t('commonForm.download')}} | ||
35 | </div> | ||
36 | </div> | ||
37 | </div> | ||
38 | |||
39 | <!-- 繳費類 --> | ||
40 | <!-- <div class="table-content-item"> | ||
41 | <div class="hl"></div> | ||
42 | <div class="ww w1"> | ||
43 | 繳費類 | ||
44 | </div> | ||
45 | <div class="ww w2"> | ||
46 | <div class="grid"> | ||
47 | <div class="v-line"></div> | ||
48 | <div class="h-line"></div> | ||
49 | 「電子入賬服務」及銀行戶口 | ||
50 | <br> 直接付款授權申請 | ||
51 | </div> | ||
52 | <div class="grid"> | ||
53 | <div class="v-line"></div> | ||
54 | <div class="h-line"></div> | ||
55 | 信用卡戶口直接付款授權書 | ||
56 | </div> | ||
57 | </div> | ||
58 | <div class="ww w3"> | ||
59 | <div class="grid"> | ||
60 | <div class="v-line"></div> | ||
61 | <div class="h-line"></div> | ||
62 | 申請設立「電子入賬服務」及銀行戶口 | ||
63 | <br>直接付款授權時須提供 | ||
64 | </div> | ||
65 | <div class="grid"> | ||
66 | <div class="v-line"></div> | ||
67 | <div class="h-line"></div> | ||
68 | 申請信用卡戶口直接付款授權時須提供 | ||
69 | </div> | ||
70 | |||
71 | </div> | ||
72 | <div class="ww w4"> | ||
73 | <div class="grid pointer"> | ||
74 | <div class="h-line"></div> | ||
75 | <img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> 下載文檔 | ||
76 | </div> | ||
77 | <div class="grid pointer"> | ||
78 | <div class="h-line"></div> | ||
79 | <img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> 下載文檔 | ||
80 | </div> | ||
81 | |||
82 | </div> | ||
83 | </div> --> | ||
84 | |||
85 | <!-- 保單變更類 --> | ||
86 | <!-- <div class="table-content-item"> | ||
87 | <div class="hl"></div> | ||
88 | <div class="ww w1"> | ||
89 | 保單變更類 | ||
90 | </div> | ||
91 | <div class="ww w2"> | ||
92 | <div class="grid"> | ||
93 | <div class="v-line"></div> | ||
94 | <div class="h-line"></div> | ||
95 | 保險合同解除申請書 | ||
96 | </div> | ||
97 | <div class="grid"> | ||
98 | <div class="v-line"></div> | ||
99 | <div class="h-line"></div> | ||
100 | 信用卡戶口直接付款授權書 | ||
101 | </div> | ||
102 | </div> | ||
103 | <div class="ww w3"> | ||
104 | <div class="grid"> | ||
105 | <div class="v-line"></div> | ||
106 | <div class="h-line"></div> | ||
107 | 申請設立「電子入賬服務」及銀行戶口 | ||
108 | <br>直接付款授權時須提供 | ||
109 | </div> | ||
110 | <div class="grid"> | ||
111 | <div class="v-line"></div> | ||
112 | <div class="h-line"></div> | ||
113 | 申請信用卡戶口直接付款授權時須提供 | ||
114 | </div> | ||
115 | |||
116 | </div> | ||
117 | <div class="ww w4"> | ||
118 | <div class="grid pointer"> | ||
119 | <div class="h-line"></div> | ||
120 | <img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> 下載文檔 | ||
121 | </div> | ||
122 | <div class="grid pointer"> | ||
123 | <div class="h-line"></div> | ||
124 | <img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> 下載文檔 | ||
125 | </div> | ||
126 | </div> | ||
127 | </div> --> | ||
128 | |||
129 | <!-- 理賠類 --> | ||
130 | <!-- <div class="table-content-item"> | ||
131 | <div class="ww w1"> | ||
132 | 理賠類 | ||
133 | </div> | ||
134 | <div class="ww w2"> | ||
135 | <div class="grid"> | ||
136 | <div class="v-line"></div> | ||
137 | 理賠申請書 | ||
138 | </div> | ||
139 | </div> | ||
140 | <div class="ww w3"> | ||
141 | <div class="grid"> | ||
142 | <div class="v-line"></div> | ||
143 | 紙質申請的應備文件 | ||
144 | </div> | ||
145 | </div> | ||
146 | <div class="ww w4"> | ||
147 | <div class="grid pointer"> | ||
148 | <img class="icon" src="@/assets/images/common-form/icon-cf-download.png" alt=""> 下載文檔 | ||
149 | </div> | ||
150 | </div> | ||
151 | </div> --> | ||
152 | |||
153 | </div> | ||
154 | </div> | ||
155 | </div> | ||
156 | </template> | ||
157 | |||
158 | <script src="./common-form.js"></script> | ||
159 | <style lang="scss" scoped> | ||
160 | @import "./common-form.scss"; | ||
161 | </style> |
1 | @import '@/styles/_support'; | 1 | @import '@/styles/_support'; |
2 | 2 | ||
3 | .content {} | 3 | |
4 | .contact-us-container {} | ||
4 | 5 | ||
5 | .border { | 6 | .border { |
7 | @extend .bb; | ||
8 | padding: 2.833333rem 4.0rem 0 3.5rem; | ||
6 | width: 770px; | 9 | width: 770px; |
7 | height: 387px; | 10 | height: 387px; |
8 | border-radius: 8px; | 11 | border-radius: 8px; |
9 | border: solid 1px #f2f2f2; | 12 | border: solid 1px #f2f2f2; |
10 | background-color: #ffffff; | 13 | background-color: #ffffff; |
11 | } | 14 | } |
15 | |||
16 | .info { | ||
17 | display: flex; | ||
18 | justify-content: space-between; | ||
19 | margin-bottom: 4.416667rem; | ||
20 | |||
21 | &-item { | ||
22 | font-size: 12px; | ||
23 | |||
24 | &-tit { | ||
25 | display: flex; | ||
26 | align-items: center; | ||
27 | color: $cOrange; | ||
28 | font-size: 18px; | ||
29 | font-weight: bold; | ||
30 | height: 2.833333rem; | ||
31 | |||
32 | .icon-wrap { | ||
33 | margin-right: .75rem; | ||
34 | } | ||
35 | } | ||
36 | |||
37 | &:last-child { | ||
38 | margin-right: 0; | ||
39 | } | ||
40 | } | ||
41 | |||
42 | .qrcode-wrap { | ||
43 | text-align: center; | ||
44 | |||
45 | // margin:; | ||
46 | // margin-right: ; | ||
47 | .qrocde {} | ||
48 | } | ||
49 | |||
50 | ul { | ||
51 | list-style-type: none; | ||
52 | margin-top: 1.5rem; | ||
53 | } | ||
54 | |||
55 | li { | ||
56 | background-image: url('~@assets/images/payment-type/icon-li.png'); | ||
57 | background-repeat: no-repeat; | ||
58 | background-position: 0rem .5rem; | ||
59 | padding-left: 1rem; | ||
60 | margin: .6rem 0; | ||
61 | } | ||
62 | } | ||
63 | |||
64 | .info2 { | ||
65 | .info-item { | ||
66 | margin: 0; | ||
67 | } | ||
68 | } | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <div class="contact-us-container"> | 3 | <div class="contact-us-container"> |
4 | <div class="border"> | 4 | <div class=" border"> |
5 | contact-us | 5 | <div class="info"> |
6 | <div class="info-item"> | ||
7 | <div class="info-item-tit"> | ||
8 | <div class="icon-wrap"> | ||
9 | <img class="icon" src="@/assets/images/contact-us/icon-cs-service.png"> | ||
6 | </div> | 10 | </div> |
11 | 客戶服務中心 | ||
12 | </div> | ||
13 | <div class="info-item-detail"> | ||
14 | <ul> | ||
15 | <li>地址:香港尖沙嘴港威永金融大樓</li> | ||
16 | <li>服務時間:星期壹至五9:00-18:00</li> | ||
17 | </ul> | ||
18 | </div> | ||
19 | |||
20 | </div> | ||
21 | |||
22 | <div class="info-item"> | ||
23 | <div class="info-item-tit"> | ||
24 | <div class="icon-wrap"> | ||
25 | <img class="icon" src="@/assets/images/contact-us/icon-cs-call.png"> | ||
26 | </div> | ||
27 | 客戶服務熱線 | ||
28 | </div> | ||
29 | <div class="info-item-detail"> | ||
30 | <ul> | ||
31 | <li>香港號碼:(852)2983 8866</li> | ||
32 | <li>內地號碼:(86)40078 95511</li> | ||
33 | <li>服務時間:星期壹至五9:00-18:00</li> | ||
34 | </ul> | ||
35 | </div> | ||
36 | </div> | ||
37 | |||
38 | <div class="info-item"> | ||
39 | <div class="info-item-tit"> | ||
40 | <div class="icon-wrap"> | ||
41 | <img class="icon" src="@/assets/images/contact-us/icon-cs-email.png"> | ||
42 | </div> | ||
43 | 客戶服務電郵 | ||
44 | </div> | ||
45 | <div class="info-item-detail"> | ||
46 | <ul> | ||
47 | <li>cs@pingan.com.hk</li> | ||
48 | </ul> | ||
49 | </div> | ||
50 | </div> | ||
51 | </div> | ||
52 | <!-- 微信公众号 --> | ||
53 | <div class="info info2"> | ||
54 | <div class="info-item"> | ||
55 | <div class="info-item-tit"> | ||
56 | <div class="icon-wrap"> | ||
57 | <img class="icon" src="@/assets/images/contact-us/icon-cs-wechat.png"> | ||
58 | </div> | ||
59 | 微信公眾號 | ||
60 | </div> | ||
61 | <div class="info-item-detail"> | ||
62 | <ul> | ||
63 | <li>登陸「微信」APP,按右上角的「+按鈕並選擇「添加朋友」選擇「公眾號」輸入並搜索「平安人壽香港」</li> | ||
64 | <li>登陸「微信」APP,按右上角的「+」按鈕並選擇「掃壹掃」</li> | ||
65 | </ul> | ||
66 | </div> | ||
67 | </div> | ||
68 | <div class="qrcode-wrap"> | ||
69 | <img src="@/assets/images/contact-us/cs-qrcode.png"> | ||
70 | <div class="t1">官方公眾號</div> | ||
71 | </div> | ||
72 | </div> | ||
73 | </div> | ||
74 | |||
7 | </div> | 75 | </div> |
8 | </template> | 76 | </template> |
9 | 77 | ... | ... |
... | @@ -8,11 +8,12 @@ import ContactUs from './components/contact-us.vue' | ... | @@ -8,11 +8,12 @@ import ContactUs from './components/contact-us.vue' |
8 | import InsuranceQuery from './components/insurance-query.vue' | 8 | import InsuranceQuery from './components/insurance-query.vue' |
9 | import reservation from './components/reservation.vue' | 9 | import reservation from './components/reservation.vue' |
10 | import PaymentType from './components/payment-type.vue' | 10 | import PaymentType from './components/payment-type.vue' |
11 | import CommonForm from './components/common-form.vue' | ||
11 | 12 | ||
12 | export default { | 13 | export default { |
13 | data() { | 14 | data() { |
14 | return { | 15 | return { |
15 | activity: "m3" | 16 | activity: "m8" |
16 | } | 17 | } |
17 | }, | 18 | }, |
18 | methods: { | 19 | methods: { |
... | @@ -29,24 +30,23 @@ export default { | ... | @@ -29,24 +30,23 @@ export default { |
29 | } | 30 | } |
30 | }, | 31 | }, |
31 | watch: { | 32 | watch: { |
32 | $route() { | 33 | // $route() { |
33 | let activity = this.$route.query.q; | 34 | // let activity = this.$route.query.q; |
34 | // console.log("watch", this.$route); | 35 | // if (activity) { |
35 | if (activity) { | 36 | // this.$set(this, 'activity', activity); |
36 | this.$set(this, 'activity', activity); | 37 | // } |
37 | } | 38 | // } |
38 | // console.log("activity === ", this.activity); | ||
39 | } | ||
40 | }, | 39 | }, |
41 | created() { | 40 | created() { |
42 | let activity = this.$route.query.q; | 41 | // let activity = this.$route.query.q; |
43 | activity = activity ? activity : "m3"; | 42 | // activity = activity ? activity : "m3"; |
44 | this.activity = activity; | 43 | // this.activity = activity; |
45 | }, | 44 | }, |
46 | components: { | 45 | components: { |
47 | ContactUs, | 46 | ContactUs, |
48 | InsuranceQuery, | 47 | InsuranceQuery, |
49 | reservation, | 48 | reservation, |
50 | PaymentType | 49 | PaymentType, |
50 | CommonForm | ||
51 | } | 51 | } |
52 | } | 52 | } | ... | ... |
... | @@ -22,7 +22,8 @@ | ... | @@ -22,7 +22,8 @@ |
22 | .menu-item { | 22 | .menu-item { |
23 | position: relative; | 23 | position: relative; |
24 | @extend .bb; | 24 | @extend .bb; |
25 | padding: 1rem 0; | 25 | padding: 1.25rem 0; |
26 | // height: 3.833333rem; | ||
26 | font-weight: bold; | 27 | font-weight: bold; |
27 | color: $cFontGray; | 28 | color: $cFontGray; |
28 | text-align: center; | 29 | text-align: center; | ... | ... |
... | @@ -25,7 +25,9 @@ | ... | @@ -25,7 +25,9 @@ |
25 | <reservation></reservation> | 25 | <reservation></reservation> |
26 | </div> | 26 | </div> |
27 | <div class="panel" :class="{activity : activity == 'm7'}"></div> | 27 | <div class="panel" :class="{activity : activity == 'm7'}"></div> |
28 | <div class="panel" :class="{activity : activity == 'm8'}"></div> | 28 | <div class="panel" :class="{activity : activity == 'm8'}"> |
29 | <common-form></common-form> | ||
30 | </div> | ||
29 | </div> | 31 | </div> |
30 | </div> | 32 | </div> |
31 | </template> | 33 | </template> | ... | ... |
-
Please register or sign in to post a comment