Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
156ac248 by simon
Options

默认提交

1 parent 7d0c40ac
Inline Side-by-side
Showing 14 changed files with 297 additions and 20 deletions
...@@ -330,9 +330,6 @@ textarea { ...@@ -330,9 +330,6 @@ textarea {
330 position: relative; 330 position: relative;
331 } 331 }
332 332
333 .btn {
334 cursor: pointer;
335 }
336 333
337 .swiper-pagination-bullet { 334 .swiper-pagination-bullet {
338 width: 1rem !important; 335 width: 1rem !important;
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7 export default {
8 name: "pagination",
9 props: {
10 total: {
11 type: Number,
12 default: 1
13 }
14 },
15 data() {
16 return {
17 // total: 10, // 总页数
18 cur: 1, // 当前页码
19 sel: 1, // 选择的页码
20 }
21 },
22 components: {},
23 computed: {
24 offSet: function () {
25 return (this.cur - 1) * 5
26 },
27 indexs: function () {
28 var left = 1
29 var right = this.total
30 var ar = []
31 if (this.total >= 11) {
32 if (this.cur > 5 && this.cur < this.total - 4) {
33 left = this.cur - 5
34 right = this.cur + 4
35 } else {
36 if (this.cur <= 5) {
37 left = 1
38 right = 10
39 } else {
40 right = this.total
41 left = this.total - 9
42 }
43 }
44 }
45 while (left <= right) {
46 ar.push(left)
47 left++
48 }
49 return ar
50 }
51 },
52 methods: {
53 jumpPage() {
54 this.cur = this.sel;
55 if (this.cur < 1) this.cur = 1;
56 if (this.cur > this.total) this.cur = this.total;
57 this.sendPage();
58 },
59 selPage(data) { //页码点击事件
60 if (data == this.cur) return;
61 this.cur = data;
62 this.sel = this.cur;
63 this.sendPage();
64 },
65 prevPage() {
66 this.cur--;
67 if (this.cur < 1) this.cur = 1;
68 this.sel = this.cur;
69 this.sendPage();
70 },
71 nextPage() {
72 this.cur++;
73 if (this.cur > this.total) this.cur = this.total;
74 this.sel = this.cur;
75 this.sendPage();
76 },
77 sendPage() {
78 // 发送事件
79 this.$emit("selpage", {
80 page: this.cur
81 });
82 },
83 initData() {}
84 },
85 mounted() {},
86 created() {}
87 }
1 @import '@/styles/_support';
2
3 .comp {
4 // display: flex;
5 }
6
7 .pagination {
8 display: flex;
9 justify-content: center;
10 align-items: center;
11
12 span {
13 margin: 0 0.7rem;
14 text-align: center;
15 }
16
17 .page-num {
18 width: 1.75rem;
19 height: 1.75rem;
20 border: solid 1px #dcdddd;
21 text-align: center;
22 cursor: pointer;
23 }
24
25 .page-num:hover {
26 color: #ffffff;
27 background-color: #006441;
28 }
29
30 }
31
32 .disabled {
33 color: #888888;
34 }
35
36 .active {
37 color: #ffffff;
38 background-color: #006441;
39 }
40
41
42 .ipt {
43 @extend .bb;
44 width: 3.5rem;
45 border: solid 1px #dcdddd;
46 padding: 0 .7rem;
47 }
48
49 .jump {
50 color: #006441;
51 text-decoration: underline;
52 }
1
2 <template>
3 <div class="comp">
4 <div class="pagination">
5 <span class="pointer" :class="{'disabled' : cur == 1}">
6 <a @click="prevPage()">上一页</a>
7 </span>
8 <span @click="selPage(index)" class="page-num pointer" v-for="(index,idx) in indexs" :key="idx" v-bind:class="{ 'active': cur == index}">
9 <a>{{index}}</a>
10 </span>
11 <span class="pointer" :class="{'disabled' : cur == total}">
12 <a @click="nextPage()">下一页</a>
13 </span>
14 <span>第</span>
15 <input v-model="sel" class="ipt" :placeholder="cur" type="text">
16 <span>/ {{total}}页</span>
17 <span @click="jumpPage" class="jump pointer">跳转</span>
18 </div>
19 </div>
20 </template>
21
22 <script src="./pagination.js"></script>
23 <style lang="scss" scoped>
24 @import "./pagination.scss";
25 </style>
...@@ -32,9 +32,6 @@ ...@@ -32,9 +32,6 @@
32 32
33 .btn { 33 .btn {
34 position: absolute; 34 position: absolute;
35 // width: 13.5rem;
36 // height: 4.1rem;
37 // top: 30.2rem;
38 width: 52%; 35 width: 52%;
39 height: 11%; 36 height: 11%;
40 top: 81%; 37 top: 81%;
...@@ -118,9 +115,9 @@ ...@@ -118,9 +115,9 @@
118 justify-content: space-between; 115 justify-content: space-between;
119 align-items: center; 116 align-items: center;
120 border-top: solid 1px #dcdddd; 117 border-top: solid 1px #dcdddd;
118 cursor: pointer;
121 119
122 &-tit { 120 &-tit {
123 cursor: pointer;
124 } 121 }
125 122
126 &-date {} 123 &-date {}
......
...@@ -24,7 +24,6 @@ ...@@ -24,7 +24,6 @@
24 <img src="@/assets/images/index/recommend-2.png"> 24 <img src="@/assets/images/index/recommend-2.png">
25 </div> 25 </div>
26 <div class="recommend-item"> 26 <div class="recommend-item">
27 <!-- {{t}} -->
28 <div class="btn"></div> 27 <div class="btn"></div>
29 <img src="@/assets/images/index/recommend-3.png"> 28 <img src="@/assets/images/index/recommend-3.png">
30 </div> 29 </div>
...@@ -32,7 +31,7 @@ ...@@ -32,7 +31,7 @@
32 <!-- 了解我们 --> 31 <!-- 了解我们 -->
33 <div class="box more"> 32 <div class="box more">
34 <div class="cont"> 33 <div class="cont">
35 <div class="btn"></div> 34 <div class="btn pointer"></div>
36 <img src="@/assets/images/index/more-1.png"> 35 <img src="@/assets/images/index/more-1.png">
37 </div> 36 </div>
38 </div> 37 </div>
...@@ -42,7 +41,7 @@ ...@@ -42,7 +41,7 @@
42 <div class="tit">新聞資訊</div> 41 <div class="tit">新聞資訊</div>
43 <div class="under-line"></div> 42 <div class="under-line"></div>
44 <div class="news-wrap"> 43 <div class="news-wrap">
45 <div class="more"> 44 <div class="more pointer">
46 查看更多 > 45 查看更多 >
47 </div> 46 </div>
48 <div @click="toNewsDetail()" class="news-item"> 47 <div @click="toNewsDetail()" class="news-item">
......
...@@ -4,16 +4,33 @@ import { ...@@ -4,16 +4,33 @@ import {
4 httpPost 4 httpPost
5 } from '@/api/fetch-api.js' 5 } from '@/api/fetch-api.js'
6 6
7 import Pagination from '@/components/pagination/pagination.vue'
8
7 export default { 9 export default {
10 name: "newsList",
11 components: {
12 Pagination
13 },
8 data() { 14 data() {
9 return { 15 return {
10 key: 'value' 16 key: 'value',
17 items: []
11 } 18 }
12 }, 19 },
13 components: {},
14 methods: { 20 methods: {
15 initData() {} 21 selPage(val) {
22 let {
23 page
24 } = val;
25 console.log("page:", page);
26 },
27 initData() {
28 // 初始化数据
29 this.items = new Array(12);
30 }
16 }, 31 },
17 mounted() {}, 32 mounted() {},
18 created() {} 33 created() {
34 this.initData();
35 }
19 } 36 }
......
...@@ -5,6 +5,14 @@ ...@@ -5,6 +5,14 @@
5 min-height: 50rem; 5 min-height: 50rem;
6 } 6 }
7 7
8 .top-space {
9 height: 2rem;
10 }
11
12 .box{
13 position: relative;
14 }
15
8 .ebg { 16 .ebg {
9 position: absolute; 17 position: absolute;
10 bottom: 0; 18 bottom: 0;
...@@ -13,8 +21,53 @@ ...@@ -13,8 +21,53 @@
13 21
14 } 22 }
15 23
16 .box {}
17
18 .news { 24 .news {
19 &-item {} 25 color: #4c4948;
26 margin: 0 auto;
27 width: 66.75rem;
28
29
30
31 &-item {
32
33 display: flex;
34 justify-content: space-between;
35 align-items: center;
36
37 height: 4.25rem;
38 border-bottom: solid 1px #dcdddd;
39 cursor: pointer;
40
41 &-tit {
42 display: flex;
43 align-items: center;
44
45 .point {
46 width: .5rem;
47 height: .5rem;
48 background-color: #4c4948;
49 margin: 0 1.75rem;
50 }
51
52 .new {
53 margin: 0 1rem;
54 }
55 }
56
57 &-date {
58 margin-right: 1rem;
59 }
60
61 &:last-child {
62 border-bottom: none;
63 }
64
65 }
66
67
68 }
69
70
71 .pagination {
72 padding: 2.25rem 0;
20 } 73 }
......
...@@ -7,8 +7,16 @@ ...@@ -7,8 +7,16 @@
7 <div class="top-space"></div> 7 <div class="top-space"></div>
8 <div class="box"> 8 <div class="box">
9 <div class="news"> 9 <div class="news">
10 <div class="news-item"></div> 10 <div v-for="(item,index) in items" :key="index" class="news-item">
11 <div class="news-item-tit">
12 <div class="point"></div>
13 平安人壽2019年2季度保險消費報告出爐！
14 <img class="new" src="@/assets/images/news-list/news-list-new.png">
11 </div> 15 </div>
16 <div class="news-item-date">2019-09-27</div>
17 </div>
18 </div>
19 <pagination @selpage="selPage" :total="23" class="pagination"></pagination>
12 </div> 20 </div>
13 </div> 21 </div>
14 </template> 22 </template>
......
...@@ -15,6 +15,5 @@ export default { ...@@ -15,6 +15,5 @@ export default {
15 initData() {} 15 initData() {}
16 }, 16 },
17 mounted() {}, 17 mounted() {},
18 created() { 18 created() {}
19 }
20 } 19 }
......
...@@ -14,3 +14,25 @@ ...@@ -14,3 +14,25 @@
14 border-bottom: none; 14 border-bottom: none;
15 @include border-top-radius(.75rem) 15 @include border-top-radius(.75rem)
16 } 16 }
17
18 .payment {
19 &-nav {
20 display: flex;
21 justify-content: space-between;
22
23 &-item {
24 @extend .pointer;
25 @include border-top-radius(.5rem);
26 display: flex;
27 justify-content: center;
28 align-items: center;
29 height: 3.75rem;
30 padding: 0 2rem;
31 background-color: #f2f2f2;
32
33 &-icon {
34 margin-right: .4rem;
35 }
36 }
37 }
38 }
......
...@@ -6,6 +6,22 @@ ...@@ -6,6 +6,22 @@
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 class="payment-nav-item">
9 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">親臨客服中心付款
10 </div>
11 <div class="payment-nav-item">
12 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">网银付款
13 </div>
14 <div class="payment-nav-item">
15 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">电汇付款
16 </div>
17 <div class="payment-nav-item">
18 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">柜员机付款
19 </div>
20 <div class="payment-nav-item">
21 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">「缴费灵」付款
22 </div>
23 <div class="payment-nav-item">
24 <img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">香港邮政局
9 </div> 25 </div>
10 </div> 26 </div>
11 </div> 27 </div>
......
...@@ -35,3 +35,8 @@ ...@@ -35,3 +35,8 @@
35 height: 100%; 35 height: 100%;
36 } 36 }
37 37
38 .pointer {
39 cursor: pointer;
40 }
41
42
......