项目中需要用到的分页按钮样式如图:
HTML部分:
<el-pagination background layout="prev, pager, next, jumper" :total="500"> </el-pagination>
CSS部分:
.el-pagination {
float: right;
margin-top: 40px;
button {
height: 56px;
width: 56px;
">transparent !important;
border: 2px solid #a7a889;
border-radius: 4px;
.el-icon {
font-size: 30px !important;
font-weight: 400;
color: #fffe9f;
}
}
.el-pagination__jump {
font-size: 30px !important;
font-weight: 400;
color: #fffe9f;
line-height: 45px;
.el-input.el-pagination__editor {
width: 140px;
}
input {
overflow: hidden;
width: 96px;
overflow: auto;
height: 56px !important;
color: #fffe9f;
font-size: 30px;
border: 2px solid #a7a889;
border-radius: 4px;
">transparent !important;
}
}
ul {
li {
margin-left: 30px !important;
height: 56px;
width: 56px;
font-size: 30px;
color: #fffe9f !important;
font-weight: 400;
line-height: 56px;
">transparent !important;
border: 2px solid #a7a889;
border-radius: 4px;
}
li.el-icon {
margin-right: 30px;
line-height: 56px;
}
li:last-child {
margin-right: 30px;
display: none;
}
li.active {
color: #ffffff !important;
background: linear-gradient(45deg, #dd2e9b 0%, #f47039 99%);
}
li.active + li {
border-left: 2px solid #a7a889;
}
}
}
实现效果:
暂未实现:
1.控制按钮个数,如效果图显示,只显示1,2,3,4,5和6页不显示
2.前往的输入框 input ,随输入长度自适应长度变化
3.前往...页,文字替换为:跳至...页