Ma/GoFilm
1
0
Fork 0
mirror of https://github.com/ProudMuBai/GoFilm.git synced 2026-02-27 06:54:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix wrap Pagination UI

Browse Source
This commit is contained in:
mubai
2023-07-08 23:51:22 +08:00
parent 21e1a00bd4
commit 54ec510721
7 changed files with 197 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
client/src/assets/css/classify.css
View File

@@ -1,18 +1,19 @@
.header {
.container {
padding: 0 10px;
}
.title {
display: flex;
justify-content: start;
padding-bottom: 20px;
margin-top: 20px;
margin-bottom: 35px;
border-bottom: 2px solid rgba(255,255,255, 0.15);
}
.header a {
.title a {
color: rgba(255,255,255,0.15);
font-size: 30px;
font-weight: 700;
line-height: 1.1;
}
.header a:hover {
.title a:hover {
color: rgba(255,255,255,0.65)!important;
}
@@ -27,7 +28,6 @@
left: 0;
width: 100%;
background: orangered;
bottom: -60%;
height: 3px;
border-radius: 16px 16px 0 0;
}
@@ -36,11 +36,41 @@
width: 3px;
background: rgba(255,255,255,0.15);
display: inline-block;
margin: 5px 15px;
border-radius: 2px;
}
@media (min-width: 650px) {
.title{
margin-bottom: 35px;
margin-top: 20px;
}
.title a{
font-size: 30px;
}
.h_active::after{
bottom: -60%;
}
.line{
margin: 5px 15px;
}
}
@media (max-width: 650px) {
.title{
margin-bottom: 20px;
}
.title a{
font-size: 24px;
}
.h_active::after{
bottom: -76%;
}
.line{
margin: 2px 15px;
}
}
/*Category Tag style*/
.c_header {
width: 100%;

85
client/src/assets/css/pagination.css Normal file
View File

@@ -0,0 +1,85 @@
/*分页插件区域*/
.pagination_container {
max-width: 100%;
margin-top: 30px;
text-align: center;
}
:deep(.el-pagination) {
width: 100% !important;
margin: 0 auto !important;
justify-content: center;
}
/*分页器样式修改*/
:deep(.number) {
font-weight: bold;
width: 45px;
height: 45px;
background: #2e2e2e !important;
color: #ffffff;
border-radius: 50%;
/*margin: 0 3px!important;*/
}
:deep(.number:hover) {
color: #67d9e8;
}
:deep(.btn-prev) {
font-weight: bold;
width: 45px;
height: 45px;
background: #2e2e2e !important;
color: #ffffff;
border-radius: 50%;
}
:deep(.btn-next) {
font-weight: bold;
width: 45px;
height: 45px;
background: #2e2e2e !important;
color: #ffffff;
border-radius: 50%;
}
:deep(.more) {
font-weight: bold;
width: 45px;
height: 45px;
background: #2e2e2e !important;
color: #ffffff;
border-radius: 50%;
}
:deep(.is-active) {
background: #67d9e8 !important;
}
/*移动端缩小*/
@media (max-width: 650px) {
:deep(.number) {
width: 35px;
height: 35px;
}
:deep(.btn-prev) {
width: 35px;
height: 35px;
}
:deep(.btn-next) {
width: 35px;
height: 35px;
}
:deep(.more) {
width: 35px;
height: 35px;
}
:deep(.el-pager li){
margin: 0 2px!important;
}
}