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

optimize

Browse Source
This commit is contained in:
mubai
2023-04-19 21:57:30 +08:00
parent b791a1db2b
commit 984ace88a4
45 changed files with 941 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/src/assets/image/cartoon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.9 KiB

BIN
client/src/assets/image/film.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 KiB

BIN
client/src/assets/image/tv.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

1
client/src/assets/svg/cartoon.svg
View File

@@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679472009425" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7100" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M 114.95 629.48 s -134.39 -197.75 80.63 -271.66 l 16.32 -9.6 s 8.64 -111.35 118.07 -142.07 c 0 0 68.16 -1.92 96.95 0 c 0 0 48.96 -99.83 174.71 -66.24 c 0 0 41.28 14.4 69.11 45.12 c 0 0 191.03 -62.4 181.43 124.79 c 0 0 -37.44 -173.75 -174.71 -79.67 c 0 0 -125.75 -135.35 -214.06 -19.2 l -20.16 32.64 s -171.83 -37.44 -207.35 137.27 c 0.01 -0.01 -203.49 31.67 -120.94 248.62 Z" fill="#1296db" p-id="7101"></path><path d="M 176.39 563.24 a 74.39 66.24 0 1 0 148.78 0 a 74.39 66.24 0 1 0 -148.78 0 Z" fill="#1296db" p-id="7102"></path><path d="M 383.25 414.93 m -69.12 0 a 69.12 69.12 0 1 0 138.24 0 a 69.12 69.12 0 1 0 -138.24 0 Z" fill="#1296db" p-id="7103"></path><path d="M 568.52 310.3 m -71.03 0 a 71.03 71.03 0 1 0 142.06 0 a 71.03 71.03 0 1 0 -142.06 0 Z" fill="#1296db" p-id="7104"></path><path d="M 673.15 329.5 a 61.44 70.07 0 1 0 122.88 0 a 61.44 70.07 0 1 0 -122.88 0 Z" fill="#1296db" p-id="7105"></path><path d="M 289.66 723.55 s 136.31 263.02 395.49 137.27 c 0 0 171.83 -88.31 136.31 -350.37 c 0 0 108.47 252.46 -122.87 383.97 c 0 0 -291.82 148.79 -408.93 -170.87 Z" fill="#1296db" p-id="7106"></path><path d="M 446.13 650.59 s 84.95 -139.67 239.02 -87.35 c 37.04 12.58 110.87 94.55 0 156.47 c -18.65 10.41 -43.2 7.68 -85.43 0 c 0 0 -29.76 63.36 -64.32 74.87 c 0 0 -134.39 57.6 -89.27 -143.99 Z" fill="#1296db" p-id="7107"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

1
client/src/assets/svg/film.svg
View File

@@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679471653435" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="54082" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M799 832H224c-17.7 0-32 14.3-32 32s14.3 32 32 32h575c17.7 0 32-14.3 32-32s-14.3-32-32-32z m97-704H128c-35.3 0-64 28.7-64 64v511c0 35.3 28.7 64 64 64h768c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64zM623.9 473.6l-197.6 98.5c-19.4 9.7-42.3-4.4-42.3-26v-197c0-21.6 22.9-35.7 42.3-26l197.6 98.5c21.5 10.7 21.5 41.3 0 52z" fill="#45C6FD" p-id="54083"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 694 B

1
client/src/assets/svg/tv.svg
View File

@@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679472049358" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8204" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M464 496H272c-17.6 0-32-14.4-32-32s14.4-32 32-32h192c17.6 0 32 14.4 32 32s-14.4 32-32 32z" fill="#1296db" p-id="8205"></path><path d="M368 720c-17.6 0-32-14.4-32-32V464c0-17.6 14.4-32 32-32s32 14.4 32 32v224c0 17.6-14.4 32-32 32zM656 720c-12.8 0-24-8-28.8-19.2l-96-224c-6.4-16 0-35.2 16-41.6 16-6.4 35.2 0 41.6 17.6L656 608l67.2-155.2c6.4-16 25.6-24 41.6-17.6 16 6.4 24 25.6 16 41.6l-96 224c-4.8 11.2-16 19.2-28.8 19.2z" fill="#1296db" p-id="8206"></path><path d="M848 928H176c-52.8 0-96-43.2-96-96V320c0-52.8 43.2-96 96-96h672c52.8 0 96 43.2 96 96v512c0 52.8-43.2 96-96 96zM176 288c-17.6 0-32 14.4-32 32v512c0 17.6 14.4 32 32 32h672c17.6 0 32-14.4 32-32V320c0-17.6-14.4-32-32-32H176z" fill="#1296db" p-id="8207"></path><path d="M448 288c-8 0-16-3.2-22.4-9.6l-160-160c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l160 160c12.8 12.8 12.8 32 0 44.8-6.4 6.4-14.4 9.6-22.4 9.6zM576 288c-8 0-16-3.2-22.4-9.6-12.8-12.8-12.8-32 0-44.8l160-160c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8l-160 160c-6.4 6.4-14.4 9.6-22.4 9.6z" fill="#1296db" p-id="8208"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

184
client/src/components/FilmList.vue Normal file
View File

@@ -0,0 +1,184 @@
<template>
<div class="c_content" >
<div class="item" v-for="item in list" :style="{width: `calc(${ list.length <= 12 ? 16 : 14}% - 16px)`}">
<a :href="`/filmDetail?link=${item.id}`" class="default_image" >
<div class="tag_group">
<span class="cus_tag ">{{ item.year?item.year.slice(0,4):'未知' }}</span>
<span class="cus_tag ">{{ item.cName }}</span>
<span class="cus_tag ">{{ item.area.split(',')[0] }}</span>
</div>
<span class="cus_remark hidden-md-and-up">{{ item.remarks }}</span>
<img :src="item.picture" :alt="item.name.split('[')[0]" @error="handleImg" >
</a>
<a :href="`/filmDetail?link=${item.id}`" class="content_text_tag">{{ item.name.split("[")[0] }}</a>
<span class="cus_remark hidden-md-and-down">{{ item.remarks }}</span>
</div>
</div>
</template>
<script setup lang="ts">
import {defineProps} from 'vue'
defineProps({
list: Array
})
// 图片加载失败事件
const handleImg =(e:Event)=>{
e.target.style.display = "none"
}
</script>
<style scoped>
.default_image {
background: url("/src/assets/image/404.png");
background-size: cover;
}
/*wrap*/
@media (max-width: 650px) {
/*展示区域*/
.c_content {
width: 100%;
display: flex;
flex-flow: wrap;
justify-content: start;
}
.c_content .item {
flex-basis: calc(33% - 6px);
max-width: 33%;
margin: 0 3px 20px 3px;
box-sizing: border-box;
overflow: hidden;
}
.item a {
padding-top: 125%;
position: relative;
border-radius: 5px;
display: flex;
width: 100%;
background-size:cover ;
}
img {
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
object-fit: cover;
width: 100%;
height: 100%;
}
.tag_group {
display: none;
}
.content_text_tag {
font-size: 11px !important;
color: rgb(221, 221, 221);
width: 96%!important;
max-height: 40px;
line-height: 20px;
padding: 2px 0 2px 0 !important;
text-align: left;
display: -webkit-box!important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.cus_remark {
z-index: 10;
position: absolute;
bottom: 0;
display: block;
width: 100%;
font-size: 12px;
color: #c2c2c2;
text-align: center;
background: rgba(0,0,0,0.55);
border-radius: 0 0 5px 5px;
}
}
/*pc*/
@media (min-width: 650px) {
.c_content {
width: 100%;
display: flex;
flex-flow: wrap;
justify-content: start;
}
.c_content .item {
margin: 0 8px 20px 8px;
box-sizing: border-box;
}
.item a {
border-radius: 5px;
padding-top: 125%;
background-size: cover;
width: 100%;
display: flex;
position: relative;
margin-bottom: 5px;
}
img {
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
object-fit: cover;
width: 100%;
height: 100%;
}
.tag_group {
position: absolute;
bottom: 3px;
display: flex;
width: 100%;
flex-wrap: wrap ;
overflow: hidden;
justify-content: start;
height: 18px;
z-index: 10;
line-height: 18px;
padding-left: 10px;
}
.cus_tag {
flex-shrink: 0; /* 不缩小元素 */
white-space: nowrap;
color: rgb(255, 255, 255);
padding: 0 3px;
margin-right: 8px;
background: rgba(0, 0, 0, 0.55);
font-size: 12px;
border-radius: 5px;
}
.content_text_tag {
display: block;
font-size: 14px !important;
color: rgb(221, 221, 221);
width: 96%!important;
padding: 2px 10px 2px 2px !important;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cus_remark {
display: block;
width: 100%;
padding-left: 3px;
font-size: 12px;
color: #999999;
text-align: left;
}
}
</style>

13
client/src/components/Header.vue
View File

@@ -3,7 +3,7 @@
<!-- 左侧logo以及搜索 -->
<div class="nav_left">
<!-- <img class="logo" src="/src/assets/logo.png">-->
<a href="/" style="font-weight: 600;font-style: italic;font-size: 24px;margin-right: 5px">Boat</a>
<a href="/" class="site" >GoFilm</a>
<div class="search_group">
<input v-model="keyword" @keydown="(e)=>{e.keyCode == 13 && searchFilm()}" placeholder="搜索 动漫,剧集,电影 " class="search"/>
<el-button @click="searchFilm" :icon="Search"/>
@@ -130,6 +130,17 @@ onMounted(() => {
.nav_left {
display: flex;
}
/*site标志样式*/
.site{
font-weight: 600;
font-style: italic;
font-size: 24px;
margin-right: 5px;
background: linear-gradient(118deg, #e91a90, #c965b3, #988cd7, #00acfd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/*搜索栏*/
.search_group {

153
client/src/components/RelateList.vue
View File

@@ -1,154 +1,29 @@
<template>
<div class="container">
<h2 class="title">相关影片</h2>
<div class="content">
<div class="item" v-for="m in relateList">
<a :href="`/filmDetail?link=${m.id}`" class="cus_content_link"
:style="{backgroundImage: `url('${m.picture}')`}">
<span class="cus_tag hidden-md-and-down">{{ m.year }}</span>
<span class="cus_tag hidden-md-and-down">{{ m.cName }}</span>
<span class="cus_tag hidden-md-and-down">{{ m.area }}</span>
<span class="cus_remark hidden-md-and-up">{{ m.remarks }}</span>
</a>
<a :href="`/filmDetail?link=${m.id}`"
class=" content_text_tag">{{ m.name }}</a>
<span class="cus_remark hidden-md-and-down">{{ m.remarks }}</span>
</div>
</div>
</div>
<div class="relate_container">
<h2 class="title">相关推荐</h2>
<FilmList :list="relateList"/>
</div>
</template>
<script lang="ts" setup>
import FilmList from "./FilmList.vue";
defineProps({
relateList : []
relateList: Array
})
</script>
<style scoped>
@media (min-width: 650px) {
.container {
width: 100%;
margin-top: 36px;
}
.title {
padding: 0 0 5px 10px;
text-align: left;
border-bottom: 2px solid #777777;
}
.content {
width: 100%;
display: flex;
flex-direction: row;
flex-flow: wrap;
justify-content: start;
}
.container .item {
width: calc(14% - 20px);
margin: 2px 10px 16px 10px;
}
.cus_content_link {
border-radius: 5px;
display: flex;
padding-top: 125%;
background-size: cover;
overflow: hidden;
}
.cus_tag {
text-align: center;
color: rgb(255, 255, 255);
padding: 0 3px;
margin: 0 0 10px 8px;
background: rgba(0, 0, 0, 0.55);
font-size: 12px;
border-radius: 5px;
}
.content_text_tag {
display: block;
font-size: 13px !important;
color: rgb(221, 221, 221);
padding: 2px 2px 2px 2px !important;
text-align: left;
max-width: 80%;
max-height: 20px;
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 使用省略号表示被截断的部分 */
}
.cus_remark {
display: block;
color: #888888;
width: 100%;
font-size: 12px;
text-align: left;
}
.relate_container {
width: 100%;
margin-top: 36px;
}
@media (max-width: 650px) {
.container {
width: 100%;
margin-top: 36px;
}
.title {
padding: 0 0 5px 10px;
text-align: left;
border-bottom: 2px solid #777777;
}
.content {
width: 100%;
display: flex;
flex-direction: row;
flex-flow: wrap;
justify-content: start;
}
.container .item {
width: calc(33% - 8px);
margin: 2px 4px 16px 4px;
}
.cus_content_link {
border-radius: 5px;
display: flex;
padding-top: 125%;
background-size: cover;
overflow: hidden;
}
.cus_tag {
text-align: center;
color: rgb(255, 255, 255);
padding: 0 3px;
margin: 0 0 10px 8px;
background: rgba(0, 0, 0, 0.55);
font-size: 12px;
border-radius: 5px;
}
.content_text_tag {
font-size: 12px !important;
color: rgb(221, 221, 221);
width: 100%;
padding: 2px 0 2px 0 !important;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.cus_remark {
display: block;
width: 100%;
font-size: 12px;
color: #c2c2c2;
text-align: center;
background: rgba(0,0,0,0.55);
border-radius: 0 0 5px 5px;
}
.title {
padding: 0 0 5px 10px;
text-align: left;
border-bottom: 2px solid #777777;
}
</style>

3
client/src/components/Util.vue
View File

@@ -60,7 +60,7 @@ const changeStyle = (type:string)=>{
case 'light':
control.darkTheme = false
localStorage.setItem("theme", 'light')
document.getElementsByClassName('main')[0].style.background = `radial-gradient(circle, #C147E9, #810CA8, #2D033B)`
document.getElementsByClassName('main')[0].style.background = `linear-gradient(45deg, #356697, rgb(105, 68, 140), rgb(151, 109, 133), rgb(92 104 149))`
break
case 'dark':
control.darkTheme = true
@@ -81,6 +81,7 @@ const changeStyle = (type:string)=>{
right: 10px;
bottom: 15%;
width: 35px;
z-index: 20;
}
.util a {
display: block;

6
client/src/views/IndexHome.vue
View File

@@ -49,9 +49,13 @@ import Footer from "../components/Footer.vue";
@media (max-width: 650px) {
.el-main {
/*margin: 0 auto;*/
padding: 60px 0;
padding: 55px 0!important;
/*padding-top: 100px!important;*/
}
:deep(.el-header) {
height: 40px!important;
min-height: 40px!important;
}
}
:deep(.el-menu--horizontal) {

29
client/src/views/error/Error404.vue
View File

@@ -3,19 +3,42 @@
<el-empty style="height: 100%; line-height: 100%; font-size: 20px" :image-size="400"
image="/src/assets/image/404.png">
<template #description>
<p style="font-size: 32px;width: 100%;color: #a574b7">你好像走错地方了哦!!!</p>
<p style="font-size: 32px;width: 100%;color: #a574b7;margin-bottom: 20px">你好像走错地方了哦!!!</p>
<button @click="handleError('home')" >主页</button>
<button @click="handleError('back')">返回</button>
</template>
</el-empty>
</div>
</template>
<script>
<script setup lang="ts">
import {useRouter} from "vue-router";
const router = useRouter()
const handleError = (t:string) =>{
switch (t) {
case 'home':
router.push('/')
break
case 'back':
router.go(-1)
break
}
}
</script>
<style scoped>
.container {
height: 100vh;
}
button {
margin: 5px 15px;
background: rgb(103, 217, 232);
color: #ffffff;
width: 120px;
border-radius: 36px;
}
button:hover {
border: none;
}
</style>

318
client/src/views/index/CategoryFilm.vue
View File

@@ -1,40 +1,32 @@
<template>
<div class="container">
<div class="header">
<p>{{ d.category.name }}</p>
<div class="c_header">
<a :class="`nav ${d.list.length >0 && d.list[0].cid == c.id?'active':''}`" href="javascript:;" @click="changeCategory(c.id)"
v-for="c in d.category.children">{{ c.name }}</a>
<!-- <a :class="`nav `" href="javascript:;" @click="changeCategory">{{ d.category.name }}</a>-->
</div>
</div>
<div class="container">
<div class="header">
<p>{{ d.category.name }}</p>
<div class="c_header">
<a :class="`nav ${d.list.length >0 && d.list[0].cid == c.id?'active':''}`" href="javascript:;"
@click="changeCategory(c.id)"
v-for="c in d.category.children">{{ c.name }}</a>
<!-- <a :class="`nav `" href="javascript:;" @click="changeCategory">{{ d.category.name }}</a>-->
</div>
</div>
<div class="c_content" >
<div class="item" v-for="item in d.list">
<a :href="`/filmDetail?link=${item.id}`" :style="{backgroundImage: `url('${item.picture}')`}">
<span class="cus_tag ">{{ item.year }}</span>
<span class="cus_tag ">{{ item.cName }}</span>
<span class="cus_tag ">{{ item.area }}</span>
<span class="cus_remark hidden-md-and-up">{{ item.remarks }}</span>
</a>
<a :href="`/filmDetail?link=${item.id}`" class="content_text_tag">{{ item.name.split("[")[0] }}</a>
<span class="cus_remark hidden-md-and-down">{{ item.remarks }}</span>
</div>
<!--影片列表展示-->
<FilmList :list="d.list"/>
<!--分页展示区域-->
<div class="pagination_container ">
<el-pagination background layout="prev, pager, next"
v-model:current-page="d.page.current"
@current-change="changeCurrent"
:pager-count="5"
:background="true"
:page-size="d.page.pageSize"
:total="d.page.total"
:prev-icon="ArrowLeftBold"
:next-icon="ArrowRightBold"
hide-on-single-page
class="pagination"/>
</div>
</div>
<div class="pagination_container ">
<el-pagination background layout="prev, pager, next"
v-model:current-page="d.page.current"
@current-change="changeCurrent"
:pager-count="5"
:background="true"
:page-size="d.page.pageSize"
:total="d.page.total"
:prev-icon="ArrowLeftBold"
:next-icon="ArrowRightBold"
hide-on-single-page
class="pagination"/>
</div>
</div>
</template>
<script setup lang="ts">
@@ -45,14 +37,15 @@ import {useRouter} from "vue-router";
import {ApiGet} from "../../utils/request";
import {ElMessage} from "element-plus";
import {ArrowRightBold, ArrowLeftBold} from '@element-plus/icons-vue'
import FilmList from "../../components/FilmList.vue";
// 页面所需数据
const d = reactive({
category: {},
list: [],
page: {
current: 0,
},
category: {},
list: [],
page: {
current: 0,
},
})
// 获取路由参数查询对应数据
@@ -60,38 +53,38 @@ const router = useRouter()
// 点击分页按钮事件 current-change
const changeCurrent = (currentVal: number) => {
let query = router.currentRoute.value.query
// router.push({path: '/categoryFilm', query:{pid: query.pid, cid: query.cid, current: currentVal}})
if (query.cid && query.cid != "") {
location.href = `/categoryFilm?pid=${query.pid}&cid=${query.cid}&current=${currentVal}`
} else {
location.href = `/categoryFilm?pid=${query.pid}&&current=${currentVal}`
}
let query = router.currentRoute.value.query
// router.push({path: '/categoryFilm', query:{pid: query.pid, cid: query.cid, current: currentVal}})
if (query.cid && query.cid != "") {
location.href = `/categoryFilm?pid=${query.pid}&cid=${query.cid}&current=${currentVal}`
} else {
location.href = `/categoryFilm?pid=${query.pid}&&current=${currentVal}`
}
}
// 点击分类事件
const changeCategory = (cid?: any) => {
let params = new URLSearchParams(location.search)
// location.href = `/categoryFilm?pid=${params.get('pid')}&cid=${cid}&current=${params.get('current')?params.get('current'):1}`
location.href = cid?`/categoryFilm?pid=${params.get('pid')}&cid=${cid}&current=1`:`/categoryFilm?pid=${params.get('pid')}`
let params = new URLSearchParams(location.search)
// location.href = `/categoryFilm?pid=${params.get('pid')}&cid=${cid}&current=${params.get('current')?params.get('current'):1}`
location.href = cid ? `/categoryFilm?pid=${params.get('pid')}&cid=${cid}&current=1` : `/categoryFilm?pid=${params.get('pid')}`
}
const getFilmData = (param: any) => {
ApiGet('/filmCategory', {pid: param.pid, cid: param.cid, current: param.current}).then((resp: any) => {
if (resp.status === 'ok') {
d.category = resp.data.category
d.list = resp.data.list
d.page = resp.page
} else {
ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1000})
}
})
ApiGet('/filmCategory', {pid: param.pid, cid: param.cid, current: param.current}).then((resp: any) => {
if (resp.status === 'ok') {
d.category = resp.data.category
d.list = resp.data.list
d.page = resp.page
} else {
ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1000})
}
})
}
onMounted(() => {
let query = router.currentRoute.value.query
getFilmData({pid: query.pid, cid: query.cid, current: query.current})
let query = router.currentRoute.value.query
getFilmData({pid: query.pid, cid: query.cid, current: query.current})
})
</script>
@@ -103,12 +96,14 @@ onMounted(() => {
padding: 0 10px;
}
/*顶部内容区域*/
.header {
width: 100%;
margin-bottom: 100px;
background: none!important;
background: none !important;
}
.header p {
text-align: left;
font-weight: 600;
@@ -167,61 +162,10 @@ onMounted(() => {
border-radius: 50px;
transform: scaleX(1);
}
.active {
background: rgb(249 230 195)!important;
color: #e52424!important;
}
/*展示区域*/
.c_content {
width: 100%;
display: flex;
flex-flow: wrap;
justify-content: start;
}
.c_content .item {
flex-basis: calc(33% - 6px);
max-width: 33%;
margin: 0 3px 20px 3px;
box-sizing: border-box;
overflow: hidden;
}
.item a {
border-radius: 5px;
display: flex;
padding-top: 125%;
background-size: cover;
width: 100%;
}
.cus_tag {
display: none;
}
.content_text_tag {
font-size: 12px !important;
color: rgb(221, 221, 221);
width: 100%;
padding: 2px 0 2px 0 !important;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.cus_remark {
display: block;
width: 100%;
font-size: 12px;
color: #c2c2c2;
text-align: center;
background: rgba(0,0,0,0.55);
border-radius: 0 0 5px 5px;
background: rgb(249 230 195) !important;
color: #e52424 !important;
}
}
@@ -231,6 +175,7 @@ onMounted(() => {
.container {
max-width: 100vw;
}
@media (min-width: 650px) {
/*顶部内容区域*/
@@ -252,17 +197,17 @@ onMounted(() => {
width: 100%;
display: flex;
justify-content: start;
/*justify-content: start;*/
margin-bottom: 20px;
}
.c_header a {
/*flex-basis: calc(14% - 16px);*/
flex-basis: calc(14% - 16px);
white-space: nowrap;
margin-right: 20px;
color: #000;
font-weight: 800;
background: rgba(255, 255, 255, 0.94);
padding: 20px 40px;
padding: 1.35% 0;
border-radius: 10px;
position: relative;
}
@@ -295,144 +240,93 @@ onMounted(() => {
border-radius: 50px;
transform: scaleX(1);
}
.active {
background: rgb(249 230 195)!important;
color: #e52424!important;
background: rgb(249 230 195) !important;
color: #e52424 !important;
}
.c_content {
width: 100%;
display: flex;
flex-flow: wrap;
justify-content: start;
}
.c_content .item {
flex-basis: calc(14% - 16px);
margin: 0 8px 20px 8px;
/*width: 100px;*/
box-sizing: border-box;
overflow: hidden;
}
.item a {
border-radius: 5px;
display: flex;
/*position: relative;*/
padding-top: 125%;
background-size: cover;
width: 100%;
}
.cus_tag {
text-align: center;
color: rgb(255, 255, 255);
padding: 0 3px;
margin: 0 0 10px 8px;
background: rgba(0, 0, 0, 0.55);
font-size: 12px;
border-radius: 5px;
}
.content_text_tag {
font-size: 14px !important;
color: rgb(221, 221, 221);
width: 96%;
padding: 2px 10px 2px 2px !important;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cus_remark {
display: block;
width: 100%;
padding-left: 3px;
font-size: 12px;
color: #999999;
text-align: left;
}
}
</style>
<style scoped>
/*分页插件区域*/
.pagination_container {
width: 100%;
margin-top: 30px;
/*background: deepskyblue;*/
text-align: center;
/*display: flex;*/
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;
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;*/
font-weight: bold;
width: 45px;
height: 45px;
background: #2e2e2e !important;
color: #ffffff;
border-radius: 50%;
/*margin: 0 3px!important;*/
}
:deep(.number:hover) {
color: #67d9e8;
color: #67d9e8;
}
:deep(.btn-prev) {
font-weight: bold;
width: 45px;
height: 45px;
background: #2e2e2e !important;
color: #ffffff;
border-radius: 50%;
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%;
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%;
font-weight: bold;
width: 45px;
height: 45px;
background: #2e2e2e !important;
color: #ffffff;
border-radius: 50%;
}
:deep(.is-active) {
background: #67d9e8 !important;
background: #67d9e8 !important;
}
/*移动端缩小*/
@media (max-width: 650px) {
:deep(.number){
: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;

100
client/src/views/index/FilmDetails.vue
View File

@@ -7,16 +7,14 @@
<div class="title_mt_right">
<h3>{{ data.detail.name }}</h3>
<ul class="tags">
<li style="margin: 2px 0">{{ `${data.detail.descriptor.classTag}`.replaceAll(",", " | ") }}</li>
<li style="margin: 2px 0">{{ data.detail.descriptor.classTag?`${data.detail.descriptor.classTag}`.replaceAll(",", " | "):'未知' }}</li>
</ul>
<p><span>导演:</span> {{ data.detail.descriptor.director }}</p>
<p><span>主演:</span>
{{ (data.detail.descriptor.actor && data.detail.descriptor.actor.length > 0) ? `${data.detail.descriptor.actor}`.split(",")[0] + " " + `${data.detail.descriptor.actor}`.split(",")[1] : ''}}
</p>
<p><span>导演:</span> {{data.detail.descriptor.director }}</p>
<p><span>主演:</span> {{handleLongText(data.detail.descriptor.actor)}}</p>
<p><span>上映:</span> {{ data.detail.descriptor.releaseDate }}</p>
<p><span>地区:</span> {{ data.detail.descriptor.area }}</p>
<p v-if="data.detail.descriptor.remark"><span>连载:</span>{{ data.detail.descriptor.remark }}</p>
<p><span>评分:</span><b id="score">{{ data.detail.descriptor.dbScore }}</b></p>
<p v-if="data.detail.descriptor.remarks"><span>连载:</span>{{ data.detail.descriptor.remarks }}</p>
<!--<p><span>评分:</span><b id="score">{{ data.detail.descriptor.dbScore }}</b></p>-->
</div>
</div>
<div class="mt_content">
@@ -34,23 +32,23 @@
</el-icon>
{{ data.detail.descriptor.cName }}
</li>
<li>{{ `${data.detail.descriptor.classTag}`.replaceAll(",", "&emsp;") }}</li>
<li v-if="data.detail.descriptor.classTag">{{ `${data.detail.descriptor.classTag}`.replaceAll(",", "&emsp;") }}</li>
<li>{{ data.detail.descriptor.year }}</li>
<li>{{ data.detail.descriptor.area }}</li>
</ul>
<p><span>导演:</span> {{ data.detail.descriptor.director }}</p>
<p><span>主演:</span> {{ data.detail.descriptor.actor }}</p>
<p><span>上映:</span> {{ data.detail.descriptor.releaseDate }}</p>
<p v-if="data.detail.descriptor.remark"><span>连载:</span>{{ data.detail.descriptor.remark }}</p>
<p v-if="data.detail.descriptor.remarks"><span>连载:</span>{{ data.detail.descriptor.remarks }}</p>
<p><span>评分:</span><b id="score">{{ data.detail.descriptor.dbScore }}</b></p>
<div class="cus_wap">
<p style="min-width: 40px"><span>剧情:</span></p>
<p ref="textContent" class="text_content">
<el-button v-if="`${data.detail.descriptor.content}`.length > 120" class="multi_text"
<el-button v-if="`${data.detail.descriptor.content}`.length > 140" class="multi_text"
style="color:#a574b7;"
@click="showContent(multiBtn.state)" link>{{ multiBtn.text }}
</el-button>
<span class="cus_info" v-html="`${data.detail.descriptor.content}`.replaceAll('　　', '')"></span>
<span class="cus_info" v-html="data.detail.descriptor.content"></span>
</p>
</div>
<p>
@@ -62,10 +60,11 @@
</el-button>
</p>
</div>
<!--播放列表-->
<div class="play_list">
<h2 class="hidden-md-and-down">播放列表:(右侧切换播放源)</h2>
<el-tabs type="card" class="play_tabs">
<el-tab-pane v-for="(p,i) in data.detail.playList" :label="`播放地址${i+1}`" >
<el-tab-pane v-for="(p,i) in data.detail.playList" :label="`播放地址${i+1}`">
<div class="play_content">
<a v-for="(item,index) in p" href="javascript:;"
@click="play({source: i, episode: index})">{{ item.episode }}</a>
@@ -73,8 +72,9 @@
</el-tab-pane>
</el-tabs>
</div>
<!--相关系列影片-->
<div class="correlation">
<RelateList :relate-list="data.relate" />
<RelateList :relate-list="data.relate"/>
</div>
</div>
</template>
@@ -91,18 +91,69 @@ import RelateList from "../../components/RelateList.vue";
const router = useRouter()
const data = reactive({
detail: {descriptor: {}},
detail: {
id: '',
cid: '',
pid: '',
name: '',
picture: '',
playFrom: [],
DownFrom: '',
playList: [[]],
downloadList: '',
descriptor: {
subTitle: '',
cName: '',
enName: '',
initial: '',
classTag: '',
actor: '',
director: '',
writer: '',
blurb: '',
remarks: '',
releaseDate: '',
area: '',
language: '',
year: '',
state: '',
updateTime: '',
addTime: '',
dbId: '',
dbScore: '',
hits: '',
content: '',
}
},
relate: [],
loading: false,
})
// 对部分信息过长进行处理
const handleLongText = (t:string):string=>{
let res = ''
t.split(',').forEach((s,i)=>{
console.log(s)
if (i <3) {
res += `${s} `
}
})
return res.trimEnd()
}
onBeforeMount(() => {
let link = router.currentRoute.value.query.link
ApiGet('/filmDetail', {id: link}).then((resp: any) => {
if (resp.status === "ok") {
data.detail = resp.data.detail
// 去除影视简介中的无用内容和特殊标签格式等
data.detail.name = data.detail.name.replace(/(～.*～)/g, '')
data.detail.descriptor.content = data.detail.descriptor.content.replace(/(&.*;)|( )|(　　)|(\n)|(<[^>]+>)/g, '')
data.relate = resp.data.relate
// 处理过长数据
data.detail.descriptor.actor = handleLongText(data.detail.descriptor.actor)
console.log(handleLongText(data.detail.descriptor.actor))
data.detail.descriptor.director = handleLongText(data.detail.descriptor.director)
data.loading = true
} else {
ElMessage({
@@ -148,7 +199,7 @@ const showContent = (flag: boolean) => {
.picture_mt {
width: 100%;
height: 175px;
height: 180px;
margin-right: 12px;
border-radius: 8px;
background-size: cover;
@@ -156,17 +207,19 @@ const showContent = (flag: boolean) => {
}
.title_mt_right {
flex: 1.8;
flex: 1.5;
text-align: left;
}
.title_mt_right h3 {
font-size: 14px;
margin: 0 0 5px 0;
}
.title_mt_right p {
font-size: 12px;
margin: 3px 2px;
white-space: nowrap;
}
.mt_content {
@@ -178,22 +231,27 @@ const showContent = (flag: boolean) => {
}
.mt_content p {
max-width: 96%;
margin: 0 auto;
font-size: 12px;
text-align: left;
word-wrap: break-word;
}
.play_content a {
white-space: nowrap;
color: #ffffff;
border-radius: 6px;
margin: 6px 8px;
background: #888888;
flex-basis: calc(25% - 16px);
min-width: calc(25% - 16px);
font-size: 12px;
padding: 6px 12px !important;
}
:deep(.el-tabs__item) {
width: 70px;
height: 35px!important;
height: 35px !important;
margin: 17px 5px 0 0 !important;
font-size: 13px;
}
@@ -235,8 +293,9 @@ const showContent = (flag: boolean) => {
@media (min-width: 650px) {
.play_content a {
white-space: nowrap;
font-size: 12px;
flex-basis: calc(10% - 24px);
min-width: calc(10% - 24px);
padding: 6px 15px;
color: #ffffff;
border-radius: 6px;
@@ -371,13 +430,14 @@ const showContent = (flag: boolean) => {
.title .text_content {
max-width: 70%;
margin: 20px 3px;
line-height: 22.5px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
vertical-align: top;
margin-top: 5px;
/*margin-top: 5px;*/
}

99
client/src/views/index/Home.vue
View File

@@ -1,44 +1,32 @@
<template>
<div class="container">
<div class="content_item" v-for="item in data.info.content">
<template v-if="item.nav.name !='综艺' & item.nav.name !='综艺片'">
<el-row class="row-bg cus_nav" justify="space-between">
<el-col :span="12" class="title">
<span :class="`iconfont ${item.nav.name.search('电影') != -1?'icon-film':item.nav.name.search('剧') != -1?'icon-tv':'icon-cartoon'}`"
style="color: #79bbff;font-size: 32px;margin-right: 10px; line-height: 130%" />
style="color: #79bbff;font-size: 32px;margin-right: 10px; line-height: 130%"/>
<a :href="`/categoryFilm?pid=${item.nav.id}`">{{ item.nav.name }}</a>
</el-col>
<el-col :span="12">
<ul class="nav_ul">
<li v-for="c in item.nav.children" class="nav_category hidden-md-and-down"><a
:href="`/categoryFilm?pid=${c.pid}&cid=${c.id}`">{{ c.name }}</a></li>
<li class=" hidden-md-and-down">更多 ></li>
<li class="nav_category hidden-md-and-down"><a :href="`/categoryFilm?pid=${item.nav.id}`">更多 ></a></li>
</ul>
</el-col>
</el-row>
<el-row class="cus_content">
<el-col :md="24" :lg="20" :xl="20" class="cus_content">
<el-row style="max-width: 100%">
<template v-for=" (m,i) in item.movies">
<el-col :md="4" :sm="6" :xs="8" v-if="i <12" class="cus_content_item">
<a :href="`/filmDetail?link=${m.id}`" class="cus_content_link"
@error="handleImgError"
:style="{backgroundImage: `url('${m.picture}')`}">
<span class="cus_tag hidden-md-and-down">{{ m.year }}</span>
<span class="cus_tag hidden-md-and-down">{{ m.cName }}</span>
<span class="cus_tag hidden-md-and-down">{{ m.area }}</span>
</a>
<a :href="`/filmDetail?link=${m.id}`"
class="content_text content_text_tag">{{ m.name }}</a>
<span class="cus_remark">{{ m.remarks }}</span>
</el-col>
</template>
</el-row>
<!--影片列表-->
<FilmList :list="item.movies.slice(0,12)"/>
</el-col>
<el-col :md="0" :lg="4" :xl="4" class="hidden-md-and-down content_right">
<template v-for="(m,i) in item.movies">
<h3 class="hot_title">🔥热播{{item.nav.name}}</h3>
<template v-for="(m,i) in item.hot.slice(0,12)">
<div class="content_right_item">
<a :href="`/filmDetail?link=${m.id}`"><b class="top_item">{{ i + 1 + '.' }}</b>
<a :href="`/filmDetail?link=${m.mid}`"><b class="top_item">{{ i + 1 + '.' }}</b>
<span>{{ m.name }}</span></a>
</div>
</template>
@@ -50,9 +38,11 @@
</template>
<script lang="ts" setup>
// 顶部轮播图
import 'element-plus/theme-chalk/display.css'
import {onBeforeMount, onMounted, reactive} from "vue";
import {onBeforeMount, reactive} from "vue";
import {ApiGet} from "../../utils/request";
import FilmList from "../../components/FilmList.vue";
const data = reactive({
info: {}
@@ -65,8 +55,8 @@ onBeforeMount(() => {
</script>
<style scoped>
.container {
margin: 0 auto;
}
@@ -110,7 +100,8 @@ a {
}
.nav_category > a {
color: #999;
color: #c9c4c4;
}
.nav_category > a:hover {
@@ -118,21 +109,17 @@ a {
}
.nav_ul > li {
min-width: 60px;
/*min-width: 60px;*/
white-space: nowrap;
line-height: 40px;
margin: 0 8px;
text-align: center;
color: #999;
font-size: 14px;
font-weight: 400;
}
/*svg图标*/
embed {
width: 2rem;
height: 2rem;
margin-right: 8px;
margin-top: 5px;
}
/*影片简介区域*/
.cus_content {
@@ -140,51 +127,6 @@ embed {
padding-top: 15px;
}
.cus_content_link {
border-radius: 5px;
display: flex;
/*position: relative;*/
padding-top: 125%;
background-size: cover;
}
.cus_tag {
text-align: center;
color: rgb(255, 255, 255);
padding: 0 3px;
margin: 0 0 10px 8px;
background: rgba(0, 0, 0, 0.55);
font-size: 12px;
border-radius: 5px;
}
.content_text_tag {
font-size: 15px !important;
color: rgb(221, 221, 221);
padding: 2px 10px 2px 2px !important;
}
.cus_remark {
display: block;
width: 100%;
padding-left: 3px;
font-size: 12px;
color: #999999;
text-align: left;
}
.content_text {
display: block;
width: 100%;
padding: 2px 10px 10px 2px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.content_right {
width: 100%;
}
@@ -206,7 +148,10 @@ embed {
-o-text-overflow: ellipsis;
white-space: nowrap;
}
.hot_title {
text-align: left;
margin: 8px 0;
}
:deep(.top_item) {
color: red;

116
client/src/views/index/Play.vue
View File

@@ -1,22 +1,26 @@
<template>
<div class="player_area" v-show="data.loading">
<div class="player_p">
<video-player @mounted="handleBtn" :src="data.options.src" poster="https://s2.loli.net/2023/04/10/H23F6qDXlnwmPG9.png" controls :loop="false"
<!--preload-->
<video-player @mounted="handleBtn" :src="data.options.src" :poster="posterImg" controls
:loop="false"
@keydown="handlePlay"
:bufferedPercent="30"
:volume="data.options.volume"
crossorigin="anonymous" playsinline class="video-player"
:playback-rates="[0.5, 1.0, 1.5, 2.0]" />
:playback-rates="[0.5, 1.0, 1.5, 2.0]"/>
</div>
<div class="current_play_info">
<div class="play_info_left">
<h3 class="current_play_title">{{ `${data.detail.name}&emsp;${data.current.episode}` }}</h3>
<h3 class="current_play_title"><a :href="`/filmDetail?link=${data.detail.id}`">{{data.detail.name}}</a>{{data.current.episode}}</h3>
<div class="tags">
<b>
<el-icon>
<Promotion/>
</el-icon>
{{ data.detail.descriptor.cName }}</b>
<span>{{ data.detail.descriptor.classTag }}</span>
<span>{{ data.detail.descriptor.classTag?data.detail.descriptor.classTag:'未知' }}</span>
<span>{{ data.detail.descriptor.year }}</span>
<span>{{ data.detail.descriptor.area }}</span>
</div>
@@ -40,7 +44,7 @@
</el-tabs>
</div>
<div class="correlation">
<RelateList :relate-list="data.relate"/>
<RelateList :relateList="data.relate"/>
</div>
</div>
@@ -54,25 +58,27 @@ import {ApiGet} from "../../utils/request";
import {ElMessage} from "element-plus";
import RelateList from "../../components/RelateList.vue";
import {Promotion} from "@element-plus/icons-vue";
import posterImg from '../../assets/image/play.png'
// 引入视频播放器组件
import {VideoPlayer} from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
const handlePlay = (e:any)=>{
const handlePlay = (e: any) => {
e.preventDefault()
switch (e.keyCode) {
case 32:
console.log(e.target.paused)
if(e.target.paused) {
if (e.target.paused) {
e.target.play()
} else {
e.target.pause()
}
break
case 37:
e.target.currentTime = e.target.currentTime-5 < 0 ? 0 : e.target.currentTime-5
e.target.currentTime = e.target.currentTime - 5 < 0 ? 0 : e.target.currentTime - 5
break
case 39:
e.target.currentTime = e.target.currentTime+5 > e.target.duration ? e.target.duration : e.target.currentTime+5
e.target.currentTime = e.target.currentTime + 5 > e.target.duration ? e.target.duration : e.target.currentTime + 5
break
case 38:
data.options.volume = data.options.volume + 0.05 > 1 ? 1 : data.options.volume + 0.05
@@ -84,7 +90,7 @@ const handlePlay = (e:any)=>{
}
// 主动触发快捷键
const tiggerKeyMap = (keyCode:number)=>{
const tiggerKeyMap = (keyCode: number) => {
let player = document.getElementsByTagName("video")[0]
player.focus()
const event = document.createEvent('HTMLEvents');
@@ -92,10 +98,10 @@ const tiggerKeyMap = (keyCode:number)=>{
event.keyCode = keyCode; // 设置键码
player.dispatchEvent(event)
}
const handleBtn = (e:any)=> {
const handleBtn = (e: any) => {
let btns = document.getElementsByClassName('vjs-button')
for (let el of btns) {
el.addEventListener('keydown', function (t:any){
el.addEventListener('keydown', function (t: any) {
t.preventDefault()
tiggerKeyMap(t.keyCode)
})
@@ -107,12 +113,45 @@ const handleBtn = (e:any)=> {
// 播放页所需数据
const data = reactive({
loading: false,
detail: {descriptor: {}, playList: [[{episode: '', link: ''}]]},
detail: {
id: '',
cid: '',
pid: '',
name: '',
picture: '',
playFrom: [],
DownFrom: '',
playList: [[]],
downloadList: '',
descriptor: {
subTitle: '',
cName: '',
enName: '',
initial: '',
classTag: '',
actor: '',
director: '',
writer: '',
blurb: '',
remarks: '',
releaseDate: '',
area: '',
language: '',
year: '',
state: '',
updateTime: '',
addTime: '',
dbId: '',
dbScore: '',
hits: '',
content: '',
}
},
current: {index: 0, episode: '', link: ''},
currentTabName: '',
currentPlayFrom: 0,
currentEpisode: 0,
relate: [{}],
relate: [],
// @videojs-player 播放属性设置
options: {
title: "", //视频名称
@@ -167,33 +206,48 @@ const playChange = (play: { sourceIndex: number, episodeIndex: number, target: a
}
:deep(.vjs-big-play-button){
:deep(.vjs-big-play-button) {
line-height: 2em;
height: 2em;
width: 2em;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.65);
background: rgba(0, 0, 0, 0.65);
}
:deep(.vjs-control-bar){
background: rgba(0,0,0,0.32);
:deep(.vjs-control-bar) {
background: rgba(0, 0, 0, 0.32);
}
/*取消video被选中的白边*/
:deep(video:focus) {
border: none!important;
border: none !important;
outline: none;
}
:deep(.data-vjs-player:focus){
border: none!important;
:deep(.data-vjs-player:focus) {
border: none !important;
outline: none;
}
:deep(.vjs-tech){
:deep(.vjs-tech) {
border-radius: 6px;
}
:deep(img) {
border-radius: 6px;
}
/*进度条配色*/
:deep(.video-js .vjs-load-progress div) {
background: rgba(255,255,255,0.55)!important;
}
:deep(.video-js .vjs-play-progress){
background: #44c8cf;
}
:deep(.video-js .vjs-slider){
background-color: hsla(0,0%,100%,.2);
}
/*当前播放的影片信息展示*/
.current_play_info {
@@ -203,9 +257,17 @@ const playChange = (play: { sourceIndex: number, episodeIndex: number, target: a
}
.current_play_title {
font-weight: 500;
font-weight: 600;
color: rgb(201, 196, 196);
margin: 0 0 5px 0;
margin: 0 0 12px 0;
}
.current_play_title a {
color: rgb(201, 196, 196);
font-weight: 600;
margin-right: 16px;
}
.current_play_title a:hover {
color: orange;
}
@@ -239,8 +301,9 @@ const playChange = (play: { sourceIndex: number, episodeIndex: number, target: a
}
.play_content a {
white-space: nowrap;
font-size: 12px;
flex-basis: calc(10% - 24px);
min-width: calc(10% - 24px);
padding: 6px 10px;
color: #ffffff;
border-radius: 6px;
@@ -360,11 +423,12 @@ const playChange = (play: { sourceIndex: number, episodeIndex: number, target: a
.play_content a {
white-space: nowrap;
color: #ffffff;
border-radius: 6px;
margin: 6px 8px;
background: #888888;
flex-basis: calc(25% - 16px);
min-width: calc(25% - 16px);
font-size: 12px;
padding: 6px 12px !important;
}

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

@@ -1,10 +1,10 @@
<template>
<div class="container">
<div class="search_group">
<input v-model="data.search" @keydown="e=>{e.keyCode==13 && searchMovie()}" placeholder="搜索 动漫,剧集,电影 " class="search"/>
<input v-model="data.search" @keydown="e=>{e.keyCode==13 && searchMovie()}" placeholder="输入关键字搜索 动漫,剧集,电影 " class="search"/>
<el-button @click="searchMovie" :icon="Search" style="" />
</div>
<div v-if="data.list.length > 0 " class="search_res">
<div v-if="data.list && data.list.length > 0 " class="search_res">
<div class="title">
<h2>{{ data.oldSearch }}</h2>
<p>共找到{{ data.page.total }}部与"{{ data.oldSearch }}"相关的影视作品</p>
@@ -41,7 +41,7 @@
</div>
</div>
</div>
<el-empty v-if="data.list.length == 0 " description="输入影片名称进行搜索"/>
<el-empty v-if="data.oldSearch != '' && (!data.list || data.list.length == 0) " description="未查询到对应影片"/>
</template>
<script lang="ts" setup>