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 298 additions and 21 deletions
NODE_ENV = 'production'
VUE_APP_TITLE = 'fev'
\ No newline at end of file
VUE_APP_TITLE = 'fev'
......
......@@ -330,9 +330,6 @@ textarea {
position: relative;
}
.btn {
cursor: pointer;
}
.swiper-pagination-bullet {
width: 1rem !important;
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
name: "pagination",
props: {
total: {
type: Number,
default: 1
}
},
data() {
return {
// total: 10, // 总页数
cur: 1, // 当前页码
sel: 1, // 选择的页码
}
},
components: {},
computed: {
offSet: function () {
return (this.cur - 1) * 5
},
indexs: function () {
var left = 1
var right = this.total
var ar = []
if (this.total >= 11) {
if (this.cur > 5 && this.cur < this.total - 4) {
left = this.cur - 5
right = this.cur + 4
} else {
if (this.cur <= 5) {
left = 1
right = 10
} else {
right = this.total
left = this.total - 9
}
}
}
while (left <= right) {
ar.push(left)
left++
}
return ar
}
},
methods: {
jumpPage() {
this.cur = this.sel;
if (this.cur < 1) this.cur = 1;
if (this.cur > this.total) this.cur = this.total;
this.sendPage();
},
selPage(data) { //页码点击事件
if (data == this.cur) return;
this.cur = data;
this.sel = this.cur;
this.sendPage();
},
prevPage() {
this.cur--;
if (this.cur < 1) this.cur = 1;
this.sel = this.cur;
this.sendPage();
},
nextPage() {
this.cur++;
if (this.cur > this.total) this.cur = this.total;
this.sel = this.cur;
this.sendPage();
},
sendPage() {
// 发送事件
this.$emit("selpage", {
page: this.cur
});
},
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.comp {
// display: flex;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
span {
margin: 0 0.7rem;
text-align: center;
}
.page-num {
width: 1.75rem;
height: 1.75rem;
border: solid 1px #dcdddd;
text-align: center;
cursor: pointer;
}
.page-num:hover {
color: #ffffff;
background-color: #006441;
}
}
.disabled {
color: #888888;
}
.active {
color: #ffffff;
background-color: #006441;
}
.ipt {
@extend .bb;
width: 3.5rem;
border: solid 1px #dcdddd;
padding: 0 .7rem;
}
.jump {
color: #006441;
text-decoration: underline;
}
<template>
<div class="comp">
<div class="pagination">
<span class="pointer" :class="{'disabled' : cur == 1}">
<a @click="prevPage()">上一页</a>
</span>
<span @click="selPage(index)" class="page-num pointer" v-for="(index,idx) in indexs" :key="idx" v-bind:class="{ 'active': cur == index}">
<a>{{index}}</a>
</span>
<span class="pointer" :class="{'disabled' : cur == total}">
<a @click="nextPage()">下一页</a>
</span>
<span>第</span>
<input v-model="sel" class="ipt" :placeholder="cur" type="text">
<span>/ {{total}}页</span>
<span @click="jumpPage" class="jump pointer">跳转</span>
</div>
</div>
</template>
<script src="./pagination.js"></script>
<style lang="scss" scoped>
@import "./pagination.scss";
</style>
......@@ -32,9 +32,6 @@
.btn {
position: absolute;
// width: 13.5rem;
// height: 4.1rem;
// top: 30.2rem;
width: 52%;
height: 11%;
top: 81%;
......@@ -118,9 +115,9 @@
justify-content: space-between;
align-items: center;
border-top: solid 1px #dcdddd;
cursor: pointer;
&-tit {
cursor: pointer;
}
&-date {}
......
......@@ -24,7 +24,6 @@
<img src="@/assets/images/index/recommend-2.png">
</div>
<div class="recommend-item">
<!-- {{t}} -->
<div class="btn"></div>
<img src="@/assets/images/index/recommend-3.png">
</div>
......@@ -32,7 +31,7 @@
<!-- 了解我们 -->
<div class="box more">
<div class="cont">
<div class="btn"></div>
<div class="btn pointer"></div>
<img src="@/assets/images/index/more-1.png">
</div>
</div>
......@@ -42,7 +41,7 @@
<div class="tit">新聞資訊</div>
<div class="under-line"></div>
<div class="news-wrap">
<div class="more">
<div class="more pointer">
查看更多 >
</div>
<div @click="toNewsDetail()" class="news-item">
......
......@@ -4,16 +4,33 @@ import {
httpPost
} from '@/api/fetch-api.js'
import Pagination from '@/components/pagination/pagination.vue'
export default {
name: "newsList",
components: {
Pagination
},
data() {
return {
key: 'value'
key: 'value',
items: []
}
},
components: {},
methods: {
initData() {}
selPage(val) {
let {
page
} = val;
console.log("page:", page);
},
initData() {
// 初始化数据
this.items = new Array(12);
}
},
mounted() {},
created() {}
created() {
this.initData();
}
}
......
......@@ -5,6 +5,14 @@
min-height: 50rem;
}
.top-space {
height: 2rem;
}
.box{
position: relative;
}
.ebg {
position: absolute;
bottom: 0;
......@@ -13,8 +21,53 @@
}
.box {}
.news {
&-item {}
color: #4c4948;
margin: 0 auto;
width: 66.75rem;
&-item {
display: flex;
justify-content: space-between;
align-items: center;
height: 4.25rem;
border-bottom: solid 1px #dcdddd;
cursor: pointer;
&-tit {
display: flex;
align-items: center;
.point {
width: .5rem;
height: .5rem;
background-color: #4c4948;
margin: 0 1.75rem;
}
.new {
margin: 0 1rem;
}
}
&-date {
margin-right: 1rem;
}
&:last-child {
border-bottom: none;
}
}
}
.pagination {
padding: 2.25rem 0;
}
......
......@@ -7,8 +7,16 @@
<div class="top-space"></div>
<div class="box">
<div class="news">
<div class="news-item"></div>
<div v-for="(item,index) in items" :key="index" class="news-item">
<div class="news-item-tit">
<div class="point"></div>
平安人壽2019年2季度保險消費報告出爐！
<img class="new" src="@/assets/images/news-list/news-list-new.png">
</div>
<div class="news-item-date">2019-09-27</div>
</div>
</div>
<pagination @selpage="selPage" :total="23" class="pagination"></pagination>
</div>
</div>
</template>
......
......@@ -15,6 +15,5 @@ export default {
initData() {}
},
mounted() {},
created() {
}
created() {}
}
......
......@@ -14,3 +14,25 @@
border-bottom: none;
@include border-top-radius(.75rem)
}
.payment {
&-nav {
display: flex;
justify-content: space-between;
&-item {
@extend .pointer;
@include border-top-radius(.5rem);
display: flex;
justify-content: center;
align-items: center;
height: 3.75rem;
padding: 0 2rem;
background-color: #f2f2f2;
&-icon {
margin-right: .4rem;
}
}
}
}
......
......@@ -6,6 +6,22 @@
<div class="payment">
<div class="payment-nav">
<div class="payment-nav-item">
<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">親臨客服中心付款
</div>
<div class="payment-nav-item">
<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">网银付款
</div>
<div class="payment-nav-item">
<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">电汇付款
</div>
<div class="payment-nav-item">
<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">柜员机付款
</div>
<div class="payment-nav-item">
<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">「缴费灵」付款
</div>
<div class="payment-nav-item">
<img class="payment-nav-item-icon" src="@/assets/images/payment-type/icon-payment-1.png">香港邮政局
</div>
</div>
</div>
......
......@@ -35,3 +35,8 @@
height: 100%;
}
.pointer {
cursor: pointer;
}
......