Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
2b265a07 by simon
Options

no message

1 parent 156ac248
Inline Side-by-side
Showing 6 changed files with 77 additions and 20 deletions
...@@ -10,5 +10,8 @@ module.exports = { ...@@ -10,5 +10,8 @@ module.exports = {
10 }, 10 },
11 nav: { 11 nav: {
12 ttt: "2" 12 ttt: "2"
13 },
14 paymentType: {
15
13 } 16 }
14 } 17 }
......
...@@ -24,7 +24,7 @@ Vue.use(Purecss); ...@@ -24,7 +24,7 @@ Vue.use(Purecss);
24 // 国际化 24 // 国际化
25 Vue.use(VueI18n) 25 Vue.use(VueI18n)
26 const i18n = new VueI18n({ 26 const i18n = new VueI18n({
27 locale: localStorage.getItem("lang") || 'zh', // 语言标识 27 locale: localStorage.getItem("lang") || 'tc', // 语言标识
28 //this.$i18n.locale // 通过切换locale的值来实现语言切换 28 //this.$i18n.locale // 通过切换locale的值来实现语言切换
29 messages: { 29 messages: {
30 'tc': require('@/common/lang/tc'), // 繁体语言包 30 'tc': require('@/common/lang/tc'), // 繁体语言包
......
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
18 bottom: 0; 18 bottom: 0;
19 left: 0; 19 left: 0;
20 right: 0; 20 right: 0;
21
22 } 21 }
23 22
24 .news { 23 .news {
...@@ -27,7 +26,6 @@ ...@@ -27,7 +26,6 @@
27 width: 66.75rem; 26 width: 66.75rem;
28 27
29 28
30
31 &-item { 29 &-item {
32 30
33 display: flex; 31 display: flex;
......
...@@ -7,11 +7,34 @@ import { ...@@ -7,11 +7,34 @@ import {
7 export default { 7 export default {
8 data() { 8 data() {
9 return { 9 return {
10 key: 'value' 10 key: 'value',
11 dataList: [{
12 tit: "親臨客服中心付款",
13 type: "",
14 }, {
15 tit: "网银付款",
16 type: "",
17 }, {
18 tit: "电汇付款",
19 type: "",
20 }, {
21 tit: "柜员机付款",
22 type: "",
23 }, {
24 tit: "「缴费灵」付款",
25 type: "",
26 }, {
27 tit: "香港邮政局",
28 type: "",
29 }],
30 curIndex: 0,
11 } 31 }
12 }, 32 },
13 components: {}, 33 components: {},
14 methods: { 34 methods: {
35 onOverHandler(val) {
36 this.curIndex = val;
37 },
15 initData() {} 38 initData() {}
16 }, 39 },
17 mounted() {}, 40 mounted() {},
......
...@@ -32,6 +32,37 @@ ...@@ -32,6 +32,37 @@
32 32
33 &-icon { 33 &-icon {
34 margin-right: .4rem; 34 margin-right: .4rem;
35 width: 1.75rem;
36
37 img {
38 max-height: 1.5rem;
39 max-width: 1.5rem;
40 }
41 }
42 }
43
44 .active {
45 color: #ffffff;
46 background-image: linear-gradient(to bottom, #f05f28, #f05021);
47 }
48 }
49
50 &-line {
51 height: 1px;
52 background-color: #f05a23;
53 }
54
55
56 &-cont {
57 margin-top: 3.5rem;
58
59 &-item {
60 line-height: 3;
61
62 ul {}
63
64 li {
65 // background-image:
35 } 66 }
36 } 67 }
37 } 68 }
......
...@@ -5,26 +5,28 @@ ...@@ -5,26 +5,28 @@
5 <div class="box"> 5 <div class="box">
6 <div class="payment"> 6 <div class="payment">
7 <div class="payment-nav"> 7 <div class="payment-nav">
8 <div class="payment-nav-item"> 8 <div @mouseover="onOverHandler(index)" class="payment-nav-item" :class="{'active' : index == curIndex}" v-for="(item, index) in dataList" :key="item.id">
9 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">親臨客服中心付款 9 <div class="payment-nav-item-icon">
10 <img :src="require('@assets/images/payment-type/icon-payment-'+(index+1)+(index == curIndex?'-act':'')+'.png')">
11 </div>
12 {{ item.tit }}
10 </div> 13 </div>
11 <div class="payment-nav-item"> 14 </div>
12 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">网银付款 15 <div class="payment-line"></div>
13 </div> 16
14 <div class="payment-nav-item"> 17 <div class="payment-cont">
15 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">电汇付款 18 <!-- 親臨客服中心付款 -->
16 </div> 19 <div class="payment-cont-item">
17 <div class="payment-nav-item"> 20 <ul>
18 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">柜员机付款 21 <li>現金：繳付保費的上限為每張保單15,000美元正或等值港元。</li>
19 </div> 22 <li>支票：請以劃線支票付款，擡頭寫上「中國平安人壽保險股份有限公司香港分公司」並於支票背面寫上繳費通知書右上方的「收款單編號」</li>
20 <div class="payment-nav-item"> 23 <li>信用卡：您可透過信用卡以港元繳費，最高繳款額須按您的指定銀行而定。</li>
21 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">「缴费灵」付款 24 <li>易辦事：您可透過由「易辦事」會員銀行發行的提款卡及具備提款功能之信用卡透過易辦事以港元繳付費用，最高繳款額須按您的指定銀行而定。</li>
22 </div> 25 </ul>
23 <div class="payment-nav-item">
24 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">香港邮政局
25 </div> 26 </div>
26 </div> 27 </div>
27 </div> 28 </div>
29
28 </div> 30 </div>
29 </div> 31 </div>
30 </template> 32 </template>
......