項目中需要用到的分頁按鈕樣式如圖:
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.前往...頁,文字替換為:跳至...頁