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
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.content {}
.border {
width: 770px;
height: 387px;
border-radius: 8px;
border: solid 1px #f2f2f2;
background-color: #ffffff;
}
<template>
<div class="border">
contact-us
</div>
</template>
<script src="./contact-us.js"></script>
<style lang="scss" scoped>
@import "./contact-us.scss";
</style>
@import '@/styles/_support';
.content {
}
.content {}
.top-space {
height: 2.25rem;
}
.box {
border: solid 1px #f2f2f2;
background-color: #ffffff;
@extend .bb;
padding: 4.5rem 1.75rem 3.5rem;
border-bottom: none;
@include border-top-radius(.75rem);
}
.payment {
min-height: 26rem;
&-nav {
display: flex;
justify-content: space-between;
......@@ -31,14 +21,13 @@
align-items: center;
height: 3.75rem;
background-color: #f2f2f2;
width: 12rem;
padding: 0 1.25rem;
&-icon {
margin-right: .5rem;
margin-right: .4rem;
img {
max-height: 1.75rem;
max-width: 1.5rem;
max-width: 2rem;
}
}
}
......@@ -51,18 +40,21 @@
&-line {
height: 1px;
background-color: #f05a23;
background-color: $cOrange;
}
&-cont {
margin-top: 3.5rem;
max-width: 67.5rem;
@extend .bb;
padding: 3.5rem 6.166667rem 0 2rem;
border: solid 1px #f2f2f2;
background-color: #ffffff;
min-height: 43.75rem;
@include border-bottom-radius(.666667rem);
&-item {
@extend .bb;
color: #4c4948;
line-height: 3;
padding: 0 1rem;
ul {
list-style-type: none;
......
<template>
<div class="">
<div class="box">
<div class="payment">
<div class="payment-nav">
<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 @@
<div v-else-if="curIndex == 1" class="payment-cont-item">
您可通过本港银行提供的「网上缴费服务」以港元信用卡/银行账户缴交保费。详情请联络您的银行。
<ul>
<li>1.通过「本港银行港元信用卡」进行网上缴费：
<li>通过「本港银行港元信用卡」进行网上缴费：
<br>缴费商户 : 中国平安人寿保险股份有限公司香港分公司
<br>提款账户: 请选择「港元信用卡」
<br>账单号码: 缴费通知书上之「账单号码」
</li>
<li>2.通过「本港银行账户」进行网上缴费：
<li>通过「本港银行账户」进行网上缴费：
<br>缴费商户: 中国平安人寿保险股份有限公司香港分公司
<br>提款账户 :请选择往来或储蓄账户
<br>账单号码: 缴费通知书上之「收款单编号」
......@@ -47,36 +45,44 @@
<div v-else-if="curIndex == 2" class="payment-cont-item">
您可通过本港银行把保费电汇至以下银行户口。
<br>收款银行：**银行
<br>银行地址：香港***
<br>收款人名字：中国平安人寿保险股份有限公司香港分公司
<br>银行代码：***
<br>收款人账号：***-******
<br>代号：******
<ul>
<li>收款银行：**银行</li>
<li>银行地址：香港***</li>
<li>收款人名字：中国平安人寿保险股份有限公司香港分公司</li>
<li>银行代码：***</li>
<li>收款人账号：***-******</li>
<li>代号：******</li>
</ul>
</div>
<div v-else-if="curIndex == 3" class="payment-cont-item">
您可通过24小时「银通」自动柜员机从您的香港银行账户转账付款。
<br>请选择服务:「缴费」>「输入商户号码」
<br>商户编号 : ****
<br>账单类别 : 01 - 新单保费 ，02 - 续期保费及征费，03 - 偿还个人保单贷款
<br>账单号码 : 缴费通知书右上方之「收款单编号」
<ul>
<li>请选择服务:「缴费」>「输入商户号码」</li>
<li>商户编号 : ****</li>
<li>账单类别 : 01 - 新单保费 ，02 - 续期保费及征费，03 - 偿还个人保单贷款</li>
<li>账单号码 : 缴费通知书右上方之「收款单编号」</li>
</ul>
</div>
<div v-else-if="curIndex == 4" class="payment-cont-item">
缴费灵网上服务: 请浏览www.ppshk.com
<br>缴费灵电话服务: 请致电18033 (广东话) 或18031 (英语)
<br>商户编号 : ****
<br>账单类别 : 01 - 保费及保费征费/偿还保单贷款
<br>账单号码:缴费通知书右上方之「账单号码」
<ul>
<li>缴费灵网上服务: 请浏览www.ppshk.com</li>
<li>缴费灵电话服务: 请致电18033 (广东话) 或18031 (英语)</li>
<li>商户编号 : ****</li>
<li>账单类别 : 01 - 保费及保费征费/偿还保单贷款</li>
<li>账单号码:缴费通知书右上方之「账单号码」</li>
</ul>
</div>
<div v-else-if="curIndex == 5" class="payment-cont-item">
请携同缴费通知书到香港任何一间邮政局以现金、支票及易办事缴费。
<br>1.每笔现金交易金额的上限为港元80,000。
<br>2.易办事交易上限为港元50,000.00。
<br>3.支票交易无上限。
<br>4.支票的截数日期为星期一至五下午3时及星期六上午11时，现金/ 易办事的截数日期为星期一至六下午6时，星期日及公众假期会于下一个工作天处理，请预留最少三个工作天处理有关付款。
<ul>
<li>每笔现金交易金额的上限为港元80,000。</li>
<li>易办事交易上限为港元50,000.00。</li>
<li>支票交易无上限。</li>
<li>支票的截数日期为星期一至五下午3时及星期六上午11时，现金/ 易办事的截数日期为星期一至六下午6时，星期日及公众假期会于下一个工作天处理，请预留最少三个工作天处理有关付款。</li>
</ul>
</div>
</template>
......@@ -96,12 +102,12 @@
<div v-else-if="curIndex == 1" class="payment-cont-item">
您可通過本港銀行提供的「網上繳費服務」以港元信用卡/銀行賬戶繳交保費。詳情請聯絡您的銀行。
<ul>
<li>1.通過「本港銀行港元信用卡」進行網上繳費：
<li>通過「本港銀行港元信用卡」進行網上繳費：
<br>繳費商戶 : 中國平安人壽保險股份有限公司香港分公司
<br>提款賬戶: 請選擇「港元信用卡」
<br>賬單號碼: 繳費通知書上之「賬單號碼」
</li>
<li>2.通過「本港銀行賬戶」進行網上繳費：
<li>通過「本港銀行賬戶」進行網上繳費：
<br>繳費商戶: 中國平安人壽保險股份有限公司香港分公司
<br>提款賬戶 :請選擇往來或儲蓄賬戶
<br>賬單號碼: 繳費通知書上之「收款單編號」
......@@ -112,40 +118,48 @@
<div v-else-if="curIndex == 2" class="payment-cont-item">
您可通過本港銀行把保費電匯至以下銀行戶口。
<br>收款銀行：**銀行
<br>銀行地址：香港***
<br>收款人名字：中國平安人壽保險股份有限公司香港分公司
<br>銀行代碼：***
<br>收款人賬號：***-******
<ul>
<li>收款銀行：**銀行</li>
<li>銀行地址：香港***</li>
<li>收款人名字：中國平安人壽保險股份有限公司香港分公司</li>
<li>銀行代碼：***</li>
<li>收款人賬號：***-******</li>
</ul>
</div>
<div v-else-if="curIndex == 3" class="payment-cont-item">
您可通過24小時「銀通」自動櫃員機從您的香港銀行賬戶轉賬付款。
<br>請選擇服務:「繳費」>「輸入商戶號碼」
<br>商戶編號 : ****
<br>賬單類別 : 01 - 新單保費 ，02 - 續期保費及征費，03 - 償還個人保單貸款
<br>賬單號碼 : 繳費通知書右上方之「收款單編號
<ul>
<li>請選擇服務:「繳費」>「輸入商戶號碼」</li>
<li>商戶編號 : ****</li>
<li>賬單類別 : 01 - 新單保費 ，02 - 續期保費及征費，03 - 償還個人保單貸款</li>
<li>賬單號碼 : 繳費通知書右上方之「收款單編號</li>
</ul>
</div>
<div v-else-if="curIndex == 4" class="payment-cont-item">
繳費靈網上服務: 請瀏覽www.ppshk.com
<br>繳費靈電話服務: 請致電18033 (廣東話) 或18031 (英語)
<br>商戶編號 : ****
<br>賬單類別 : 01 - 保費及保費征費/償還保單貸款
<br>賬單號碼:繳費通知書右上方之「賬單號碼」
<ul>
<li>繳費靈網上服務: 請瀏覽www.ppshk.com</li>
<li>繳費靈電話服務: 請致電18033 (廣東話) 或18031 (英語)</li>
<li>商戶編號 : ****</li>
<li>賬單類別 : 01 - 保費及保費征費/償還保單貸款</li>
<li>賬單號碼:繳費通知書右上方之「賬單號碼」</li>
</ul>
</div>
<div v-else-if="curIndex == 5" class="payment-cont-item">
請攜同繳費通知書到香港任何壹間郵政局以現金、支票及易辦事繳費。
<br>1.每筆現金交易金額的上限為港元80,000。
<br>2.易辦事交易上限為港元50,000.00。
<br>3.支票交易無上限。
<br>4.支票的截數日期為星期壹至五下午3時及星期六上午11時，現金/ 易辦事的截數日期為星期壹至六下午6時，星期日及公眾假期會於下壹個工作天處理， 請預留最少三個工作天處理有關付款。
</div>
</template>
<ul>
<li>每筆現金交易金額的上限為港元80,000。</li>
<li>易辦事交易上限為港元50,000.00。</li>
<li>支票交易無上限。</li>
<li>支票的截數日期為星期壹至五下午3時及星期六上午11時，現金/ 易辦事的截數日期為星期壹至六下午6時，星期日及公眾假期會於下壹個工作天處理， 請預留最少三個工作天處理有關付款。</li>
</ul>
</div>
</div>
</template>
</div>
</div>
......
......@@ -186,4 +186,10 @@ input {
color: #ffffff;
border-radius: 3.5rem;
cursor: pointer;
border: none;
color: #ffffff;
background-color: #f05a23;
box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
background-blend-mode: soft-light, ;
background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
}
......
......@@ -28,7 +28,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-name.png"></div>{{$t('reservation.contact')}}
<div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
</div>
<div class="ipt-wrap">
<input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text">
......
......@@ -4,6 +4,7 @@ import {
httpPost
} from '@/api/fetch-api.js'
import ContactUs from './components/contact-us.vue'
import InsuranceQuery from './components/insurance-query.vue'
import reservation from './components/reservation.vue'
import PaymentType from './components/payment-type.vue'
......@@ -15,13 +16,13 @@ export default {
}
},
methods: {
initData() { },
initData() {},
toPath(path) {
this.$router.push({
path: path
});
},
changeActivity(a){
changeActivity(a) {
this.activity = a;
this.$route.query.q = a;
console.log(this.$route.query);
......@@ -43,6 +44,7 @@ export default {
this.activity = activity;
},
components: {
ContactUs,
InsuranceQuery,
reservation,
PaymentType
......
......@@ -145,7 +145,8 @@
.right-panel {
margin-left: 1.166667rem;
width: 64.166667rem;
// width: 64.166667rem;
width: 64.416667rem;
background-color: #ffffff;
.panel {
......
......@@ -6,7 +6,7 @@
<i class="m1"></i>{{$t('customService.menu1')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm2'}" @click="toPath('/payment/type');/*activity = 'm2'*/">
<div class="menu-item" :class="{activity : activity == 'm2'}" @click="changeActivity('m2')">
<i class="m2"></i>{{$t('customService.menu2')}}
</div>
<div class="separator"></div>
......@@ -61,20 +61,19 @@
</div>
</div>
<div class="right-panel">
<div class="panel" :class="{activity : activity == 'm1'}"></div>
<div class="panel" :class="{activity : activity == 'm1'}">
<contact-us></contact-us>
</div>
<div class="panel" :class="{activity : activity == 'm2'}">
<payment-type></payment-type>
<!-- <div class="empty-line"></div> -->
</div>
<div class="panel" :class="{activity : activity == 'm3'}">
<insurance-query></insurance-query>
<!-- <div class="empty-line"></div> -->
</div>
<div class="panel" :class="{activity : activity == 'm4'}"></div>
<div class="panel" :class="{activity : activity == 'm5'}"></div>
<div class="panel" :class="{activity : activity == 'm6'}">
<reservation></reservation>
<!-- <div class="empty-line"></div> -->
</div>
<div class="panel" :class="{activity : activity == 'm7'}"></div>
<div class="panel" :class="{activity : activity == 'm8'}"></div>
......