Skip to content

dev / pingan-life-index-pro

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

修改缴付保费页面

1 parent 6e87aad1
Expand all
Inline Side-by-side
Showing 26 changed files with 74 additions and 33 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;
24 flex-wrap: wrap; 14 flex-wrap: wrap;
25 15
26 &-item { 16 &-item {
27 @extend .pointer; 17 @extend .pointer;
...@@ -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;
......
...@@ -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>
......