# up pagination style
This commit is contained in:
parent
67ab8dc8f9
commit
4613c32c93
|
@ -46,8 +46,9 @@
|
||||||
<el-pagination
|
<el-pagination
|
||||||
class="pagination"
|
class="pagination"
|
||||||
background
|
background
|
||||||
layout="prev, pager, next"
|
layout="total, prev, pager, next, jumper"
|
||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
:total="total">
|
:total="total">
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
</div>
|
</div>
|
||||||
|
@ -82,6 +83,10 @@ export default {
|
||||||
// console.log(page)
|
// console.log(page)
|
||||||
this.listLoading = true
|
this.listLoading = true
|
||||||
this.getDeviceCount({ page })
|
this.getDeviceCount({ page })
|
||||||
|
},
|
||||||
|
handleSizeChange(page) {
|
||||||
|
this.listLoading = true
|
||||||
|
this.getDeviceCount({ page })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -96,8 +101,36 @@ export default {
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.pagination {
|
.pagination {
|
||||||
float: right;
|
float: right;
|
||||||
|
font-weight: normal;
|
||||||
padding: 2rem 0 1rem 0;
|
padding: 2rem 0 1rem 0;
|
||||||
|
.btn-prev {
|
||||||
|
border: 1px solid #d1dbe5;
|
||||||
|
border-right: 0;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
.btn-next {
|
||||||
|
border: 1px solid #d1dbe5;
|
||||||
|
// border-left: 0;
|
||||||
|
border-radius: 0!important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
.el-pager li {
|
||||||
|
border: 1px solid #d1dbe5;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 0!important;
|
||||||
|
border-right: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
.el-pagination__jump {
|
||||||
|
margin-left: .8rem;
|
||||||
|
}
|
||||||
|
.el-pagination__editor.el-input {
|
||||||
|
width: 2.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
// mobile
|
||||||
@media screen and (max-width: 375px) {
|
@media screen and (max-width: 375px) {
|
||||||
.pagination {
|
.pagination {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
@ -105,11 +138,17 @@ export default {
|
||||||
float: none;
|
float: none;
|
||||||
padding: 1rem 0 1rem 0;
|
padding: 1rem 0 1rem 0;
|
||||||
.el-pager li {
|
.el-pager li {
|
||||||
height: 1.5rem;
|
// height: 1.5rem;
|
||||||
line-height: 1.5rem;
|
// line-height: 1.5rem;
|
||||||
font-size: .5rem !important;
|
font-size: .5rem !important;
|
||||||
margin: .1rem .1rem !important;
|
// min-width: 1.5rem !important;
|
||||||
min-width: 1.5rem !important;
|
}
|
||||||
|
.el-pagination__total {
|
||||||
|
// margin-right: 2rem;
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.el-pagination__jump {
|
||||||
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue