From 54ec510721d954e6a2801ec7127c58ec314a7d5f Mon Sep 17 00:00:00 2001 From: mubai <1609539827@qq.com> Date: Sat, 8 Jul 2023 23:51:22 +0800 Subject: [PATCH] fix wrap Pagination UI --- client/index.html | 2 +- client/src/App.vue | 8 +- client/src/assets/css/classify.css | 46 +++++-- client/src/assets/css/pagination.css | 85 ++++++++++++ client/src/views/index/FilmClassify.vue | 58 +++++++-- client/src/views/index/FilmClassifySearch.vue | 123 ++++-------------- client/src/views/index/SearchFilm.vue | 89 +------------ 7 files changed, 197 insertions(+), 214 deletions(-) create mode 100644 client/src/assets/css/pagination.css diff --git a/client/index.html b/client/index.html index d0060f3..cff064c 100644 --- a/client/index.html +++ b/client/index.html @@ -10,7 +10,7 @@ (╥﹏╥) - +
diff --git a/client/src/App.vue b/client/src/App.vue index 02eff38..ba6417e 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -19,22 +19,16 @@ html, body, #app { } /*背景色切换*/ - - #app, .main { max-width: 100%; min-height: 100vh; - /*background: #222;*/ color: rgb(221, 221, 221); - //background: rgb(34, 34, 34); + background: #16161a; } - * { box-sizing: border-box; } - - /*全局a标签默认样式去除*/ a { outline: none; diff --git a/client/src/assets/css/classify.css b/client/src/assets/css/classify.css index cb021dc..e453314 100644 --- a/client/src/assets/css/classify.css +++ b/client/src/assets/css/classify.css @@ -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%; diff --git a/client/src/assets/css/pagination.css b/client/src/assets/css/pagination.css new file mode 100644 index 0000000..2ba1aa1 --- /dev/null +++ b/client/src/assets/css/pagination.css @@ -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; + } +} + diff --git a/client/src/views/index/FilmClassify.vue b/client/src/views/index/FilmClassify.vue index 11f01e4..af77da3 100644 --- a/client/src/views/index/FilmClassify.vue +++ b/client/src/views/index/FilmClassify.vue @@ -1,9 +1,9 @@