Ma/GoFilm
1
0
Fork 0
mirror of https://github.com/ProudMuBai/GoFilm.git synced 2026-02-04 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

2
client/index.html
View File

@@ -10,7 +10,7 @@
<meta name="referrer" content="never">
<meta charset="UTF-8"/>
<title>(╥﹏╥)</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_vmyr7my0yje.css">
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_xtm26gd5aa.css">
</head>
<body>
<div id="app"></div>

8
client/src/App.vue
View File

@@ -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;

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;
}
}

58
client/src/views/index/FilmClassify.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="container">
<div class="header">
<a :href="`/filmClassify?Pid=${d.title.id}`" class="h_active">{{ d.title.name }}</a>
<span class="line"/>
<a :href="`/filmClassifySearch?Pid=${d.title.id}`" >{{ `${d.title.name}库` }}</a>
<div class="title">
<a :href="`/filmClassify?Pid=${d.title.id}`" class="h_active">{{ d.title.name }}</a>
<span class="line"/>
<a :href="`/filmClassifySearch?Pid=${d.title.id}`">{{ `${d.title.name}库` }}</a>
</div>
<!--影片列表展示-->
@@ -17,14 +17,14 @@
</div>
<div class="news">
<div class="c_nav">
<span class="c_nav_text silver">排行榜</span>
<span class="c_nav_text silver">排行榜</span>
<span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
</div>
<FilmList :list="d.content.top"/>
</div>
<div class="news">
<div class="c_nav">
<span class="c_nav_text silver">最近更新</span>
<span class="c_nav_text silver">最近更新</span>
<span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
</div>
<FilmList :list="d.content.recent"/>
@@ -77,26 +77,58 @@ onMounted(() => {
.c_nav {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
padding: 6px;
}
.c_nav_text {
font-size: 28px;
font-weight: 700;
line-height: 1.1;
}
.c_nav_more{
font-size: 14px;
.c_nav_more {
//font-size: 14px;
background: #25252b;
padding: 0 15px;
line-height: 32px;
border-radius: 8px;
}
.content>div {
.content > div {
padding-bottom: 20px;
}
/**/
@media (min-width: 650px) {
.c_nav{
margin-bottom: 15px;
}
.c_nav_text {
font-size: 28px;
}
.c_nav_more {
font-size: 14px;
padding: 0 15px;
line-height: 32px;
}
}
@media (max-width: 650px) {
.c_nav{
margin-bottom: 10px;
}
.c_nav_text {
font-size: 20px;
line-height: 28px;
}
.c_nav_more {
font-size: 12px;
padding: 0 10px;
line-height: 28px;
}
.c_nav_more b{
font-size: 12px;
}
}
</style>

123
client/src/views/index/FilmClassifySearch.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="container">
<div class="header">
<div class="title">
<a :href="`/filmClassify?Pid=${d.title.id}`" >{{ d.title.name }}</a>
<span class="line"/>
<a :href="`/filmClassifySearch?Pid=${d.title.id}`" class="h_active">{{ `${d.title.name}库` }}</a>
@@ -8,7 +8,7 @@
<!--影片分类检索-->
<div class="t_container">
<div class="t_item" v-for="k in d.search.sortList ">
<div class="t_title">{{d.search.titles[k]}} <b class="iconfont icon-yousanjiao"/> </div>
<div class="t_title">{{d.search.titles[k]}} <b class="iconfont icon-triangle"/> </div>
<div class="tag_group">
<a href="javascript:void(false)" :class="`tag ${t['Value'] === d.searchParams[k]?'t_active':''}`" v-for="t in d.search.tags[k]" @click="handleTag(k,t['Value'])" >
{{t['Name']}}
@@ -120,8 +120,24 @@ onMounted(() => {
<style scoped>
@import "/src/assets/css/classify.css";
@import "/src/assets/css/pagination.css";
@media (min-width: 650px) {
.tag {
margin: 0 8px;
padding: 6px 12px;
}
.t_title {
padding: 3px 0;
}
}
@media (max-width: 650px) {
.tag {
margin: 0 5px;
padding: 4px 10px;
font-size: 12px;
}
}
.t_container {
display: block;
@@ -135,6 +151,7 @@ onMounted(() => {
display: flex;
justify-content: start;
margin: 14px 0;
white-space: nowrap;
}
.t_title {
@@ -145,23 +162,24 @@ onMounted(() => {
color: rgba(255,255,255,0.35);
border-radius: 6px;
margin-right: 12px;
padding: 3px 0;
//padding: 3px 0;
}
.t_title b{
color: rgba(255,255,255,0.15);
}
.tag_group {
display: flex;
justify-content: start;
flex-flow: wrap;
flex-flow: nowrap;
overflow: auto;
}
.tag {
display: inline-block;
border: 1px solid rgba(255,255,255,0.12);
margin: 0 8px;
border-radius: 5px;
text-align: center;
padding: 6px 12px;
}
.t_active {
@@ -175,10 +193,7 @@ onMounted(() => {
<!--移动端修改-->
<style scoped>
@media (max-width: 650px) {
.container {
padding: 0 10px;
}
/*顶部内容区域*/
.header {
width: 100%;
@@ -208,89 +223,3 @@ onMounted(() => {
}
</style>
<style scoped>
/*分页插件区域*/
.pagination_container {
width: 100%;
margin-top: 30px;
/*background: deepskyblue;*/
text-align: center;
/*display: flex;*/
}
: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;
}
}
</style>

89
client/src/views/index/SearchFilm.vue
View File

@@ -110,6 +110,7 @@ const changeCurrent = (currentVal: number) => {
<!--移动端-->
<style scoped>
@import "/src/assets/css/pagination.css";
@media (max-width: 650px) {
.title h2 {
margin: 8px auto;
@@ -368,91 +369,3 @@ const changeCurrent = (currentVal: number) => {
</style>
<!--分页器-->
<style scoped>
/*分页插件区域*/
.pagination_container {
width: 100%;
margin-top: 30px;
/*background: deepskyblue;*/
text-align: center;
/*display: flex;*/
}
: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;
}
}
</style>