Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
7bfcbeb5 by simon
Options

修改缴付保费页面

1 parent 6e87aad1
Inline Side-by-side
Showing 26 changed files with 132 additions and 77 deletions

527 Bytes | W: | H:

541 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

595 Bytes | W: | H:

591 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

490 Bytes | W: | H:

569 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

650 Bytes | W: | H:

641 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

620 Bytes | W: | H:

588 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

655 Bytes | W: | H:

644 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

584 Bytes | W: | H:

459 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

628 Bytes | W: | H:

510 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

524 Bytes | W: | H:

546 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

649 Bytes | W: | H:

575 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

543 Bytes | W: | H:

496 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

656 Bytes | W: | H:

580 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
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 methods: {
15 initData() {}
16 },
17 mounted() {},
18 created() {}
19 }
1 @import '@/styles/_support';
2
3 .content {}
4
5 .border {
6 width: 770px;
7 height: 387px;
8 border-radius: 8px;
9 border: solid 1px #f2f2f2;
10 background-color: #ffffff;
11 }
1
2 <template>
3 <div class="border">
4 contact-us
5 </div>
6 </template>
7
8 <script src="./contact-us.js"></script>
9 <style lang="scss" scoped>
10 @import "./contact-us.scss";
11 </style>
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .content { 3 .content {}
4 }
5 4
6 .top-space { 5 .top-space {
7 height: 2.25rem; 6 height: 2.25rem;
8 } 7 }
9 8
10 .box {
11 border: solid 1px #f2f2f2;
12 background-color: #ffffff;
13 @extend .bb;
14 padding: 4.5rem 1.75rem 3.5rem;
15 border-bottom: none;
16 @include border-top-radius(.75rem);
17 }
18
19 .payment { 9 .payment {
20 min-height: 26rem; 10
21 &-nav { 11 &-nav {
22 display: flex; 12 display: flex;
23 justify-content: space-between; 13 justify-content: space-between;
...@@ -31,14 +21,13 @@ ...@@ -31,14 +21,13 @@
31 align-items: center; 21 align-items: center;
32 height: 3.75rem; 22 height: 3.75rem;
33 background-color: #f2f2f2; 23 background-color: #f2f2f2;
34 width: 12rem; 24 padding: 0 1.25rem;
35 25
36 &-icon { 26 &-icon {
37 margin-right: .5rem; 27 margin-right: .4rem;
38 28
39 img { 29 img {
40 max-height: 1.75rem; 30 max-width: 2rem;
41 max-width: 1.5rem;
42 } 31 }
43 } 32 }
44 } 33 }
...@@ -51,18 +40,21 @@ ...@@ -51,18 +40,21 @@
51 40
52 &-line { 41 &-line {
53 height: 1px; 42 height: 1px;
54 background-color: #f05a23; 43 background-color: $cOrange;
55 } 44 }
56 45
57
58 &-cont { 46 &-cont {
59 margin-top: 3.5rem; 47 @extend .bb;
60 max-width: 67.5rem; 48 padding: 3.5rem 6.166667rem 0 2rem;
49 border: solid 1px #f2f2f2;
50 background-color: #ffffff;
51 min-height: 43.75rem;
52 @include border-bottom-radius(.666667rem);
53
61 54
62 &-item { 55 &-item {
63 @extend .bb; 56 color: #4c4948;
64 line-height: 3; 57 line-height: 3;
65 padding: 0 1rem;
66 58
67 ul { 59 ul {
68 list-style-type: none; 60 list-style-type: none;
......
1 1
2 <template> 2 <template>
3 <div class="">
4 <div class="box">
5 <div class="payment"> 3 <div class="payment">
6 <div class="payment-nav"> 4 <div class="payment-nav">
7 <div @mouseover="onOverHandler(index)" class="payment-nav-item" :class="{'active' : index == curIndex}" v-for="(item, index) in dataList" :key="item.id"> 5 <div @mouseover="onOverHandler(index)" class="payment-nav-item" :class="{'active' : index == curIndex}" v-for="(item, index) in dataList" :key="item.id">
...@@ -31,12 +29,12 @@ ...@@ -31,12 +29,12 @@
31 <div v-else-if="curIndex == 1" class="payment-cont-item"> 29 <div v-else-if="curIndex == 1" class="payment-cont-item">
32 您可通过本港银行提供的「网上缴费服务」以港元信用卡/银行账户缴交保费。详情请联络您的银行。 30 您可通过本港银行提供的「网上缴费服务」以港元信用卡/银行账户缴交保费。详情请联络您的银行。
33 <ul> 31 <ul>
34 <li>1.通过「本港银行港元信用卡」进行网上缴费： 32 <li>通过「本港银行港元信用卡」进行网上缴费：
35 <br>缴费商户 : 中国平安人寿保险股份有限公司香港分公司 33 <br>缴费商户 : 中国平安人寿保险股份有限公司香港分公司
36 <br>提款账户: 请选择「港元信用卡」 34 <br>提款账户: 请选择「港元信用卡」
37 <br>账单号码: 缴费通知书上之「账单号码」 35 <br>账单号码: 缴费通知书上之「账单号码」
38 </li> 36 </li>
39 <li>2.通过「本港银行账户」进行网上缴费： 37 <li>通过「本港银行账户」进行网上缴费：
40 <br>缴费商户: 中国平安人寿保险股份有限公司香港分公司 38 <br>缴费商户: 中国平安人寿保险股份有限公司香港分公司
41 <br>提款账户 :请选择往来或储蓄账户 39 <br>提款账户 :请选择往来或储蓄账户
42 <br>账单号码: 缴费通知书上之「收款单编号」 40 <br>账单号码: 缴费通知书上之「收款单编号」
...@@ -47,36 +45,44 @@ ...@@ -47,36 +45,44 @@
47 45
48 <div v-else-if="curIndex == 2" class="payment-cont-item"> 46 <div v-else-if="curIndex == 2" class="payment-cont-item">
49 您可通过本港银行把保费电汇至以下银行户口。 47 您可通过本港银行把保费电汇至以下银行户口。
50 <br>收款银行：**银行 48 <ul>
51 <br>银行地址：香港*** 49 <li>收款银行：**银行</li>
52 <br>收款人名字：中国平安人寿保险股份有限公司香港分公司 50 <li>银行地址：香港***</li>
53 <br>银行代码：*** 51 <li>收款人名字：中国平安人寿保险股份有限公司香港分公司</li>
54 <br>收款人账号：***-****** 52 <li>银行代码：***</li>
55 <br>代号：****** 53 <li>收款人账号：***-******</li>
54 <li>代号：******</li>
55 </ul>
56 </div> 56 </div>
57 57
58 <div v-else-if="curIndex == 3" class="payment-cont-item"> 58 <div v-else-if="curIndex == 3" class="payment-cont-item">
59 您可通过24小时「银通」自动柜员机从您的香港银行账户转账付款。 59 您可通过24小时「银通」自动柜员机从您的香港银行账户转账付款。
60 <br>请选择服务:「缴费」>「输入商户号码」 60 <ul>
61 <br>商户编号 : **** 61 <li>请选择服务:「缴费」>「输入商户号码」</li>
62 <br>账单类别 : 01 - 新单保费 ，02 - 续期保费及征费，03 - 偿还个人保单贷款 62 <li>商户编号 : ****</li>
63 <br>账单号码 : 缴费通知书右上方之「收款单编号」 63 <li>账单类别 : 01 - 新单保费 ，02 - 续期保费及征费，03 - 偿还个人保单贷款</li>
64 <li>账单号码 : 缴费通知书右上方之「收款单编号」</li>
65 </ul>
64 </div> 66 </div>
65 67
66 <div v-else-if="curIndex == 4" class="payment-cont-item"> 68 <div v-else-if="curIndex == 4" class="payment-cont-item">
67 缴费灵网上服务: 请浏览www.ppshk.com 69 <ul>
68 <br>缴费灵电话服务: 请致电18033 (广东话) 或18031 (英语) 70 <li>缴费灵网上服务: 请浏览www.ppshk.com</li>
69 <br>商户编号 : **** 71 <li>缴费灵电话服务: 请致电18033 (广东话) 或18031 (英语)</li>
70 <br>账单类别 : 01 - 保费及保费征费/偿还保单贷款 72 <li>商户编号 : ****</li>
71 <br>账单号码:缴费通知书右上方之「账单号码」 73 <li>账单类别 : 01 - 保费及保费征费/偿还保单贷款</li>
74 <li>账单号码:缴费通知书右上方之「账单号码」</li>
75 </ul>
72 </div> 76 </div>
73 77
74 <div v-else-if="curIndex == 5" class="payment-cont-item"> 78 <div v-else-if="curIndex == 5" class="payment-cont-item">
75 请携同缴费通知书到香港任何一间邮政局以现金、支票及易办事缴费。 79 请携同缴费通知书到香港任何一间邮政局以现金、支票及易办事缴费。
76 <br>1.每笔现金交易金额的上限为港元80,000。 80 <ul>
77 <br>2.易办事交易上限为港元50,000.00。 81 <li>每笔现金交易金额的上限为港元80,000。</li>
78 <br>3.支票交易无上限。 82 <li>易办事交易上限为港元50,000.00。</li>
79 <br>4.支票的截数日期为星期一至五下午3时及星期六上午11时，现金/ 易办事的截数日期为星期一至六下午6时，星期日及公众假期会于下一个工作天处理，请预留最少三个工作天处理有关付款。 83 <li>支票交易无上限。</li>
84 <li>支票的截数日期为星期一至五下午3时及星期六上午11时，现金/ 易办事的截数日期为星期一至六下午6时，星期日及公众假期会于下一个工作天处理，请预留最少三个工作天处理有关付款。</li>
85 </ul>
80 </div> 86 </div>
81 </template> 87 </template>
82 88
...@@ -96,12 +102,12 @@ ...@@ -96,12 +102,12 @@
96 <div v-else-if="curIndex == 1" class="payment-cont-item"> 102 <div v-else-if="curIndex == 1" class="payment-cont-item">
97 您可通過本港銀行提供的「網上繳費服務」以港元信用卡/銀行賬戶繳交保費。詳情請聯絡您的銀行。 103 您可通過本港銀行提供的「網上繳費服務」以港元信用卡/銀行賬戶繳交保費。詳情請聯絡您的銀行。
98 <ul> 104 <ul>
99 <li>1.通過「本港銀行港元信用卡」進行網上繳費： 105 <li>通過「本港銀行港元信用卡」進行網上繳費：
100 <br>繳費商戶 : 中國平安人壽保險股份有限公司香港分公司 106 <br>繳費商戶 : 中國平安人壽保險股份有限公司香港分公司
101 <br>提款賬戶: 請選擇「港元信用卡」 107 <br>提款賬戶: 請選擇「港元信用卡」
102 <br>賬單號碼: 繳費通知書上之「賬單號碼」 108 <br>賬單號碼: 繳費通知書上之「賬單號碼」
103 </li> 109 </li>
104 <li>2.通過「本港銀行賬戶」進行網上繳費： 110 <li>通過「本港銀行賬戶」進行網上繳費：
105 <br>繳費商戶: 中國平安人壽保險股份有限公司香港分公司 111 <br>繳費商戶: 中國平安人壽保險股份有限公司香港分公司
106 <br>提款賬戶 :請選擇往來或儲蓄賬戶 112 <br>提款賬戶 :請選擇往來或儲蓄賬戶
107 <br>賬單號碼: 繳費通知書上之「收款單編號」 113 <br>賬單號碼: 繳費通知書上之「收款單編號」
...@@ -112,40 +118,48 @@ ...@@ -112,40 +118,48 @@
112 118
113 <div v-else-if="curIndex == 2" class="payment-cont-item"> 119 <div v-else-if="curIndex == 2" class="payment-cont-item">
114 您可通過本港銀行把保費電匯至以下銀行戶口。 120 您可通過本港銀行把保費電匯至以下銀行戶口。
115 <br>收款銀行：**銀行 121 <ul>
116 <br>銀行地址：香港*** 122 <li>收款銀行：**銀行</li>
117 <br>收款人名字：中國平安人壽保險股份有限公司香港分公司 123 <li>銀行地址：香港***</li>
118 <br>銀行代碼：*** 124 <li>收款人名字：中國平安人壽保險股份有限公司香港分公司</li>
119 <br>收款人賬號：***-****** 125 <li>銀行代碼：***</li>
126 <li>收款人賬號：***-******</li>
127 </ul>
128
120 </div> 129 </div>
121 130
122 <div v-else-if="curIndex == 3" class="payment-cont-item"> 131 <div v-else-if="curIndex == 3" class="payment-cont-item">
123 您可通過24小時「銀通」自動櫃員機從您的香港銀行賬戶轉賬付款。 132 您可通過24小時「銀通」自動櫃員機從您的香港銀行賬戶轉賬付款。
124 <br>請選擇服務:「繳費」>「輸入商戶號碼」 133 <ul>
125 <br>商戶編號 : **** 134 <li>請選擇服務:「繳費」>「輸入商戶號碼」</li>
126 <br>賬單類別 : 01 - 新單保費 ，02 - 續期保費及征費，03 - 償還個人保單貸款 135 <li>商戶編號 : ****</li>
127 <br>賬單號碼 : 繳費通知書右上方之「收款單編號 136 <li>賬單類別 : 01 - 新單保費 ，02 - 續期保費及征費，03 - 償還個人保單貸款</li>
137 <li>賬單號碼 : 繳費通知書右上方之「收款單編號</li>
138 </ul>
139
128 </div> 140 </div>
129 141
130 <div v-else-if="curIndex == 4" class="payment-cont-item"> 142 <div v-else-if="curIndex == 4" class="payment-cont-item">
131 繳費靈網上服務: 請瀏覽www.ppshk.com 143 <ul>
132 <br>繳費靈電話服務: 請致電18033 (廣東話) 或18031 (英語) 144 <li>繳費靈網上服務: 請瀏覽www.ppshk.com</li>
133 <br>商戶編號 : **** 145 <li>繳費靈電話服務: 請致電18033 (廣東話) 或18031 (英語)</li>
134 <br>賬單類別 : 01 - 保費及保費征費/償還保單貸款 146 <li>商戶編號 : ****</li>
135 <br>賬單號碼:繳費通知書右上方之「賬單號碼」 147 <li>賬單類別 : 01 - 保費及保費征費/償還保單貸款</li>
148 <li>賬單號碼:繳費通知書右上方之「賬單號碼」</li>
149 </ul>
136 </div> 150 </div>
137 151
138 <div v-else-if="curIndex == 5" class="payment-cont-item"> 152 <div v-else-if="curIndex == 5" class="payment-cont-item">
139 請攜同繳費通知書到香港任何壹間郵政局以現金、支票及易辦事繳費。 153 請攜同繳費通知書到香港任何壹間郵政局以現金、支票及易辦事繳費。
140 <br>1.每筆現金交易金額的上限為港元80,000。 154 <ul>
141 <br>2.易辦事交易上限為港元50,000.00。 155 <li>每筆現金交易金額的上限為港元80,000。</li>
142 <br>3.支票交易無上限。 156 <li>易辦事交易上限為港元50,000.00。</li>
143 <br>4.支票的截數日期為星期壹至五下午3時及星期六上午11時，現金/ 易辦事的截數日期為星期壹至六下午6時，星期日及公眾假期會於下壹個工作天處理， 請預留最少三個工作天處理有關付款。 157 <li>支票交易無上限。</li>
144 </div> 158 <li>支票的截數日期為星期壹至五下午3時及星期六上午11時，現金/ 易辦事的截數日期為星期壹至六下午6時，星期日及公眾假期會於下壹個工作天處理， 請預留最少三個工作天處理有關付款。</li>
145 </template> 159 </ul>
146 160
147 </div> 161 </div>
148 </div> 162 </template>
149 163
150 </div> 164 </div>
151 </div> 165 </div>
......
...@@ -186,4 +186,10 @@ input { ...@@ -186,4 +186,10 @@ input {
186 color: #ffffff; 186 color: #ffffff;
187 border-radius: 3.5rem; 187 border-radius: 3.5rem;
188 cursor: pointer; 188 cursor: pointer;
189 border: none;
190 color: #ffffff;
191 background-color: #f05a23;
192 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
193 background-blend-mode: soft-light, ;
194 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
189 } 195 }
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 28
29 <div class="pure-u-1 pure-u-md-1-2 form-item"> 29 <div class="pure-u-1 pure-u-md-1-2 form-item">
30 <div class="label"> 30 <div class="label">
31 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div>{{$t('reservation.contact')}} 31 <div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
32 </div> 32 </div>
33 <div class="ipt-wrap"> 33 <div class="ipt-wrap">
34 <input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text"> 34 <input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text">
......
...@@ -4,6 +4,7 @@ import { ...@@ -4,6 +4,7 @@ import {
4 httpPost 4 httpPost
5 } from '@/api/fetch-api.js' 5 } from '@/api/fetch-api.js'
6 6
7 import ContactUs from './components/contact-us.vue'
7 import InsuranceQuery from './components/insurance-query.vue' 8 import InsuranceQuery from './components/insurance-query.vue'
8 import reservation from './components/reservation.vue' 9 import reservation from './components/reservation.vue'
9 import PaymentType from './components/payment-type.vue' 10 import PaymentType from './components/payment-type.vue'
...@@ -15,13 +16,13 @@ export default { ...@@ -15,13 +16,13 @@ export default {
15 } 16 }
16 }, 17 },
17 methods: { 18 methods: {
18 initData() { }, 19 initData() {},
19 toPath(path) { 20 toPath(path) {
20 this.$router.push({ 21 this.$router.push({
21 path: path 22 path: path
22 }); 23 });
23 }, 24 },
24 changeActivity(a){ 25 changeActivity(a) {
25 this.activity = a; 26 this.activity = a;
26 this.$route.query.q = a; 27 this.$route.query.q = a;
27 console.log(this.$route.query); 28 console.log(this.$route.query);
...@@ -43,6 +44,7 @@ export default { ...@@ -43,6 +44,7 @@ export default {
43 this.activity = activity; 44 this.activity = activity;
44 }, 45 },
45 components: { 46 components: {
47 ContactUs,
46 InsuranceQuery, 48 InsuranceQuery,
47 reservation, 49 reservation,
48 PaymentType 50 PaymentType
......
...@@ -145,7 +145,8 @@ ...@@ -145,7 +145,8 @@
145 145
146 .right-panel { 146 .right-panel {
147 margin-left: 1.166667rem; 147 margin-left: 1.166667rem;
148 width: 64.166667rem; 148 // width: 64.166667rem;
149 width: 64.416667rem;
149 background-color: #ffffff; 150 background-color: #ffffff;
150 151
151 .panel { 152 .panel {
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 <i class="m1"></i>{{$t('customService.menu1')}} 6 <i class="m1"></i>{{$t('customService.menu1')}}
7 </div> 7 </div>
8 <div class="separator"></div> 8 <div class="separator"></div>
9 <div class="menu-item" :class="{activity : activity == 'm2'}" @click="toPath('/payment/type');/*activity = 'm2'*/"> 9 <div class="menu-item" :class="{activity : activity == 'm2'}" @click="changeActivity('m2')">
10 <i class="m2"></i>{{$t('customService.menu2')}} 10 <i class="m2"></i>{{$t('customService.menu2')}}
11 </div> 11 </div>
12 <div class="separator"></div> 12 <div class="separator"></div>
...@@ -61,20 +61,19 @@ ...@@ -61,20 +61,19 @@
61 </div> 61 </div>
62 </div> 62 </div>
63 <div class="right-panel"> 63 <div class="right-panel">
64 <div class="panel" :class="{activity : activity == 'm1'}"></div> 64 <div class="panel" :class="{activity : activity == 'm1'}">
65 <contact-us></contact-us>
66 </div>
65 <div class="panel" :class="{activity : activity == 'm2'}"> 67 <div class="panel" :class="{activity : activity == 'm2'}">
66 <payment-type></payment-type> 68 <payment-type></payment-type>
67 <!-- <div class="empty-line"></div> -->
68 </div> 69 </div>
69 <div class="panel" :class="{activity : activity == 'm3'}"> 70 <div class="panel" :class="{activity : activity == 'm3'}">
70 <insurance-query></insurance-query> 71 <insurance-query></insurance-query>
71 <!-- <div class="empty-line"></div> -->
72 </div> 72 </div>
73 <div class="panel" :class="{activity : activity == 'm4'}"></div> 73 <div class="panel" :class="{activity : activity == 'm4'}"></div>
74 <div class="panel" :class="{activity : activity == 'm5'}"></div> 74 <div class="panel" :class="{activity : activity == 'm5'}"></div>
75 <div class="panel" :class="{activity : activity == 'm6'}"> 75 <div class="panel" :class="{activity : activity == 'm6'}">
76 <reservation></reservation> 76 <reservation></reservation>
77 <!-- <div class="empty-line"></div> -->
78 </div> 77 </div>
79 <div class="panel" :class="{activity : activity == 'm7'}"></div> 78 <div class="panel" :class="{activity : activity == 'm7'}"></div>
80 <div class="panel" :class="{activity : activity == 'm8'}"></div> 79 <div class="panel" :class="{activity : activity == 'm8'}"></div>
......