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

fix UI bug

Browse Source
This commit is contained in:
mubai
2023-07-09 22:46:39 +08:00
parent 54ec510721
commit c4ecdde7f6
12 changed files with 906 additions and 1663 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.vue
View File

@@ -33,7 +33,7 @@ html, body, #app {
a { a {
outline: none; outline: none;
text-decoration: none; text-decoration: none;
color: #888888; color: rgba(255,255,255,0.38);
} }
a:hover { a:hover {

115
client/src/assets/css/film.css Normal file
View File

@@ -0,0 +1,115 @@
/*wrap*/
@media (max-width: 650px) {
.play-link{
line-height: 22px;
min-width: calc(25% - 10px);
}
.play-list-item {
max-height: 240px;
}
.play-module-title{
display: none;
}
.play-tab-item{
height: 34px;
line-height: 34px;
font-size: 12px;
padding: 0 8px;
}
.play-list{
border-radius: 0 8px 8px 8px;
}
}
/*pc*/
@media (min-width: 650px) {
.play-link{
line-height: 34px;
min-width: calc(16.7% - 12px);
}
.play-list-item {
max-height: 380px;
}
.play-module-title{
height: 45px;
line-height: 45px;
font-size: 24px;
color: rgba(255,255,255,0.55);
}
.play-tab-item{
height: 45px;
line-height: 45px;
font-size: 14px;
padding: 0 15px;
}
.play-list{
border-radius: 8px 0 8px 8px;
}
}
/*播放列表样式*/
.play-module{
width: 100%;
border-radius: 10px;
margin-top: 50px;
}
.module-heading{
display: flex;
justify-content: space-between;
}
.play-module-title{
font-weight: 700;
margin: 0 0;
}
.play-tab-group{
display: flex;
white-space: nowrap;
padding: 5px 5px 0;
background: rgba(255,255,255,0.15);
border-radius: 8px 8px 0 0;
}
.play-tab-item{
display: inline-block;
border-radius: 6px 6px 0 0;
font-weight: 700;
box-shadow: 0 0 5px 0 rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.1)
}
.play-tab-item:hover{
color: orange;
}
.tab-active{
background: #2e2e2e;
font-weight: 700;
color: orange;
}
.play-list{
background: #2e2e2e;
padding: 20px;
}
.play-list-item{
overflow-y: auto;
display: flex;
flex-wrap: wrap;
}
.play-link{
padding: 3px;
border: 1px solid rgba(255,255,255,0.28);
border-radius: 8px;
margin: 5px;
text-align: center;
font-size: 14px;
display: inline-block;
}
.play-link:hover {
color: orange;
background: #b36d3824;
}
.play-link-active {
color: orange;
background: #b36d3824;
}

297
client/src/components/FilmList.vue
View File

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

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

@@ -1,29 +1,43 @@
<template> <template>
<div class="relate_container"> <div class="relate_container">
<h2 class="title">相关推荐</h2> <p class="title">相关推荐</p>
<FilmList :list="relateList"/> <FilmList :list="relateList"/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import FilmList from "./FilmList.vue"; import FilmList from "./FilmList.vue";
defineProps({ defineProps({
relateList: Array relateList: Array
}) })
</script> </script>
<style scoped> <style scoped>
@media (max-width: 650px){
.title {
font-size: 20px;
}
}
@media (min-width: 650px){
.title {
font-size: 24px;
}
}
.relate_container { .relate_container {
width: 100%; width: 100%;
margin-top: 36px; margin-top: 36px;
} }
.title { .title {
padding: 0 0 5px 10px; font-weight: 700;
text-align: left; color: rgba(255, 255, 255, 0.55);
border-bottom: 2px solid #777777; padding-bottom: 5px;
text-align: left;
border-bottom: 2px solid rgba(255, 255, 255, 0.12);
} }
</style> </style>

4
client/src/router/router.ts
View File

@@ -1,17 +1,14 @@
import { import {
createRouter, createRouter,
createWebHistory, createWebHistory,
} from "vue-router"; } from "vue-router";
// 1.定义路由组件 // 1.定义路由组件
import IndexHome from "../views/IndexHome.vue"; import IndexHome from "../views/IndexHome.vue";
import Home from "../views/index/Home.vue"; import Home from "../views/index/Home.vue";
import FilmDetails from "../views/index/FilmDetails.vue"; import FilmDetails from "../views/index/FilmDetails.vue";
import Play from "../views/index/Play.vue"; import Play from "../views/index/Play.vue";
import SearchFilm from "../views/index/SearchFilm.vue"; import SearchFilm from "../views/index/SearchFilm.vue";
import CategoryFilm from "../views/index/CategoryFilm.vue";
import NotFound from '../views/error/Error404.vue' import NotFound from '../views/error/Error404.vue'
import FilmClassifySearch from "../views/index/FilmClassifySearch.vue"; import FilmClassifySearch from "../views/index/FilmClassifySearch.vue";
import FilmClassify from "../views/index/FilmClassify.vue"; import FilmClassify from "../views/index/FilmClassify.vue";
@@ -28,7 +25,6 @@ const routes = [
{path: 'filmDetail', component: FilmDetails}, {path: 'filmDetail', component: FilmDetails},
{path: 'play', component: Play}, {path: 'play', component: Play},
{path: 'search', component: SearchFilm}, {path: 'search', component: SearchFilm},
{path: 'CategoryFilm', component: CategoryFilm},
{path: 'filmClassify', component: FilmClassify}, {path: 'filmClassify', component: FilmClassify},
{path: 'filmClassifySearch', component: FilmClassifySearch}, {path: 'filmClassifySearch', component: FilmClassifySearch},
] ]

13
client/src/style.css
View File

@@ -94,6 +94,19 @@ button:focus-visible {
} }
/*滚动条样式*/
@media (min-width: 650px) {
::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
height: 10px;
background: rgba(255,255,255,0.25);
}
}

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

@@ -1,437 +0,0 @@
<template>
<div class="container">
<div class="header">
<div class="h_title">
<span class="header_t">{{ d.title.name }}</span>
</div>
<!--影片分类检索-->
<div class="t_container">
<div class="t_item" v-for="k in d.search.sortList ">
<div class="t_title">{{d.search.titles[k]}}</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']}}
</a>
</div>
</div>
</div>
</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>
</template>
<script setup lang="ts">
import {onMounted, reactive, toRefs} from "vue";
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";
// 分类tag点击事件
const handleTag = (k:string,v:string)=>{
// 设置被点击的tag属性值
d.searchParams[k as keyof typeof d.searchParams] = v
// searchTag改变, 重置 current当前页码
d.page.current = 1
handleParams()
}
const handleParams = ()=> {
let q = ''
for (let k in d.searchParams) {
let val = d.searchParams[k as keyof typeof d.searchParams]
if (val != '') {
q += `&${k}=${val}`
}
}
location.href = '/categoryFilm?'+q.slice(1)+`&current=${d.page.current}`
}
// 页面所需数据
const d = reactive({
title: {},
list: [],
search: {
sortList:[],
titles: [],
tags: [],
},
page: {
current: 0,
},
searchParams:{
Pid: '',
Category: '',
Plot: '',
Area: '',
Language: '',
Year: '',
Sort: '',
},
})
// 获取路由参数查询对应数据
const router = useRouter()
// 点击分页按钮事件 current-change
const changeCurrent = (currentVal: number) => {
handleParams()
}
const getFilmData = () => {
let url = `filmClassifyHome`
let query = router.currentRoute.value.query
ApiGet(url, {...query}).then((resp: any) => {
if (resp.status === 'ok') {
d.title = resp.data.title
d.list = resp.data.list
d.page = resp.page
d.search = resp.data.search
d.searchParams = resp.data.params
} else {
ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1000})
}
})
}
onMounted(() => {
getFilmData()
// let query = router.currentRoute.value.query
// getFilmData({pid: query.pid, cid: query.cid, current: query.current})
})
</script>
<style scoped>
.h_title {
display: flex;
justify-content: start;
padding-bottom: 20px;
border-bottom: 1px solid #777777;
margin-bottom: 10px;
}
.h_title_active {
color: #212121
}
.header_t {
color: #a0a0a0;
font-size: 30px;
font-weight: 700;
line-height: 1.1;
}
.t_container {
display: block;
font-size: 14px;
padding: 20px 0;
//background-color: rgb(117, 116, 116);
}
.t_item {
display: flex;
justify-content: start;
margin: 14px 0;
}
.t_title {
display: inline-block;
font-size: 17px;
font-weight: 700;
text-align: left;
color: rgba(255,255,255,0.35);
border-radius: 6px;
margin-right: 12px;
padding: 3px 0;
}
.tag_group {
display: flex;
justify-content: start;
flex-flow: wrap;
}
.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 {
background: rgba(255,255,255,0.12);
color: #ffa500cc!important;
border: none!important;
}
</style>
<!--移动端修改-->
<style scoped>
@media (max-width: 650px) {
.container {
padding: 0 10px;
}
/*顶部内容区域*/
.header {
width: 100%;
margin-bottom: 100px;
background: none !important;
}
.header p {
text-align: left;
font-weight: 600;
font-size: 24px;
color: #c9c4c4;
margin-top: 0;
padding-left: 10px;
height: 100%;
/*background: rgb(34, 34, 34);*/
}
.c_header {
max-width: 100%;
display: flex;
/*justify-content: start;*/
flex-wrap: nowrap;
overflow-x: scroll;
margin-bottom: 20px;
}
.c_header a {
white-space: nowrap;
margin-right: 10px;
color: #000;
font-weight: 400;
background: rgba(255, 255, 255, 0.94);
padding: 6px 10px;
border-radius: 10px;
}
.c_header a:hover {
color: orange;
}
.nav:before {
width: 36px;
height: 4px;
background: orange;
content: '';
position: absolute;
left: 35%;
bottom: 12px;
border-radius: 50px;
transform: scaleX(0);
transition: transform 0.5s ease-out;
}
.nav:hover:before {
width: 36px;
height: 4px;
background: orange;
content: '';
position: absolute;
left: 35%;
bottom: 12px;
border-radius: 50px;
transform: scaleX(1);
}
.active {
background: rgb(249 230 195) !important;
color: #e52424 !important;
}
}
</style>
<style scoped>
.container {
max-width: 100vw;
}
@media (min-width: 650px) {
/*顶部内容区域*/
.header {
width: 100%;
}
.header p {
text-align: left;
font-weight: 800;
font-size: 32px;
color: #c9c4c4;
margin-top: 0;
/*border-bottom: 2px solid #ffffff;*/
/*padding-bottom: 30px;*/
}
.c_header {
width: 100%;
display: flex;
justify-content: start;
margin-bottom: 20px;
}
.c_header a {
flex-basis: calc(14% - 16px);
white-space: nowrap;
margin-right: 20px;
color: #000;
font-weight: 800;
background: rgba(255, 255, 255, 0.94);
padding: 1.35% 0;
border-radius: 10px;
position: relative;
}
.c_header a:hover {
color: orange;
}
.nav:before {
width: 36px;
height: 4px;
background: orange;
content: '';
position: absolute;
left: 35%;
bottom: 12px;
border-radius: 50px;
transform: scaleX(0);
transition: transform 0.5s ease-out;
}
.nav:hover:before {
width: 36px;
height: 4px;
background: orange;
content: '';
position: absolute;
left: 35%;
bottom: 12px;
border-radius: 50px;
transform: scaleX(1);
}
.active {
background: rgb(249 230 195) !important;
color: #e52424 !important;
}
}
</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>

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

@@ -1,5 +1,5 @@
<template> <template>
<div class="container"> <div class="container" v-if="d.content.news.length > 0">
<div class="title"> <div class="title">
<a :href="`/filmClassify?Pid=${d.title.id}`" class="h_active">{{ d.title.name }}</a> <a :href="`/filmClassify?Pid=${d.title.id}`" class="h_active">{{ d.title.name }}</a>
<span class="line"/> <span class="line"/>

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

@@ -1,5 +1,5 @@
<template> <template>
<div class="container"> <div class="container" v-if="d.list.length >0">
<div class="title"> <div class="title">
<a :href="`/filmClassify?Pid=${d.title.id}`" >{{ d.title.name }}</a> <a :href="`/filmClassify?Pid=${d.title.id}`" >{{ d.title.name }}</a>
<span class="line"/> <span class="line"/>
@@ -44,26 +44,6 @@ import {ElMessage} from "element-plus";
import {ArrowRightBold, ArrowLeftBold} from '@element-plus/icons-vue' import {ArrowRightBold, ArrowLeftBold} from '@element-plus/icons-vue'
import FilmList from "../../components/FilmList.vue"; import FilmList from "../../components/FilmList.vue";
// 分类tag点击事件
const handleTag = (k:string,v:string)=>{
// 设置被点击的tag属性值
d.searchParams[k as keyof typeof d.searchParams] = v
// searchTag改变, 重置 current当前页码
d.page.current = 1
handleParams()
}
const handleParams = ()=> {
let q = ''
for (let k in d.searchParams) {
let val = d.searchParams[k as keyof typeof d.searchParams]
if (val != '') {
q += `&${k}=${val}`
}
}
location.href = '/filmClassifySearch?'+q.slice(1)+`&current=${d.page.current}`
}
// 页面所需数据 // 页面所需数据
const d = reactive({ const d = reactive({
title: {}, title: {},
@@ -87,6 +67,7 @@ const d = reactive({
}, },
}) })
// 获取路由参数查询对应数据 // 获取路由参数查询对应数据
const router = useRouter() const router = useRouter()
@@ -95,7 +76,26 @@ const changeCurrent = (currentVal: number) => {
handleParams() handleParams()
} }
// 分类tag点击事件
const handleTag = (k:string,v:string)=>{
// 设置被点击的tag属性值
d.searchParams[k as keyof typeof d.searchParams] = v
// searchTag改变, 重置 current当前页码
d.page.current = 1
handleParams()
}
const handleParams = ()=> {
let q = ''
for (let k in d.searchParams) {
let val = d.searchParams[k as keyof typeof d.searchParams]
if (val != '') {
q += `&${k}=${val}`
}
}
location.href = '/filmClassifySearch?'+q.slice(1)+`&current=${d.page.current}`
}
// 请求数据
const getFilmData = () => { const getFilmData = () => {
let query = router.currentRoute.value.query let query = router.currentRoute.value.query
ApiGet(`/filmClassifySearch`, {...query}).then((resp: any) => { ApiGet(`/filmClassifySearch`, {...query}).then((resp: any) => {
@@ -115,6 +115,8 @@ onMounted(() => {
getFilmData() getFilmData()
}) })
</script> </script>

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

@@ -1,89 +1,97 @@
<template> <template>
<div class="film" v-show="data.loading"> <div class="film" v-show="data.loading">
<!-- hidden-sm-and-up 移动端title --> <!-- hidden-sm-and-up 移动端title -->
<div class="hidden-sm-and-up"> <div class="hidden-sm-and-up">
<div class="title_mt "> <div class="title_mt ">
<a class="picture_mt" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a> <a class="picture_mt" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
<div class="title_mt_right"> <div class="title_mt_right">
<h3>{{ data.detail.name }}</h3> <h3>{{ data.detail.name }}</h3>
<ul class="tags"> <ul class="tags">
<li style="margin: 2px 0">{{ <li style="margin: 2px 0">{{
data.detail.descriptor.classTag ? `${data.detail.descriptor.classTag}`.replaceAll(",", " | ") : '未知' data.detail.descriptor.classTag ? `${data.detail.descriptor.classTag}`.replaceAll(",", " | ") : '未知'
}} }}
</li> </li>
</ul> </ul>
<p><span>导演:</span> {{ data.detail.descriptor.director }}</p> <p><span>导演:</span> {{ data.detail.descriptor.director }}</p>
<p><span>主演:</span> {{ handleLongText(data.detail.descriptor.actor) }}</p> <p><span>主演:</span> {{ handleLongText(data.detail.descriptor.actor) }}</p>
<p><span>上映:</span> {{ data.detail.descriptor.releaseDate }}</p> <p><span>上映:</span> {{ data.detail.descriptor.releaseDate }}</p>
<p><span>地区:</span> {{ data.detail.descriptor.area }}</p> <p><span>地区:</span> {{ data.detail.descriptor.area }}</p>
<p v-if="data.detail.descriptor.remarks"><span>连载:</span>{{ data.detail.descriptor.remarks }}</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>--> <!--<p><span>评分:</span><b id="score">{{ data.detail.descriptor.dbScore }}</b></p>-->
</div>
</div>
<div class="mt_content">
<p v-html="`${data.detail.descriptor.content}`.replaceAll('　　', '')"></p>
</div>
</div>
<!-- pc端title-->
<div class="title hidden-sm-and-down ">
<a class="picture" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
<h2>{{ data.detail.name }}</h2>
<ul class="tags">
<li class="t_c">
<a :href="`/categoryFilm?pid=${data.detail.pid}`">
<el-icon>
<Promotion/>
</el-icon>
{{ data.detail.descriptor.cName }}
</a>
</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.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 > 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"></span>
</p>
</div>
<p>
<el-button type="warning" class="player" size="large" @click="play({episode:0,source:0})" round>
<el-icon>
<CaretRight/>
</el-icon>
立即播放
</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}`">
<div class="play_content">
<a v-for="(item,index) in p" href="javascript:;"
@click="play({source: i, episode: index})">{{ item.episode }}</a>
</div>
</el-tab-pane>
</el-tabs>
</div>
<!--相关系列影片-->
<div class="correlation">
<RelateList :relate-list="data.relate"/>
</div> </div>
</div>
<div class="mt_content">
<p v-html="`${data.detail.descriptor.content}`.replaceAll('　　', '')"></p>
</div>
</div> </div>
<!-- pc端title-->
<div class="title hidden-sm-and-down ">
<a class="picture" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
<h2>{{ data.detail.name }}</h2>
<ul class="tags">
<li class="t_c">
<a :href="`/categoryFilm?pid=${data.detail.pid}`">
<el-icon>
<Promotion/>
</el-icon>
{{ data.detail.descriptor.cName }}
</a>
</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.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 > 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"></span>
</p>
</div>
<p>
<el-button type="warning" class="player" size="large" @click="play({episode:0,source:0})" round>
<el-icon>
<CaretRight/>
</el-icon>
立即播放
</el-button>
</p>
</div>
<!--播放列表-->
<div class="play-module">
<div class="play-module-item" >
<div class="module-heading">
<p class=" play-module-title">播放列表</p>
<div class="play-tab-group">
<a href="javascript:;" :class="`play-tab-item ${data.currentTabIndex ==i ? 'tab-active':''}`"
v-for="(item,i) in data.detail.playList" @click="changeTab(i)" >{{`播放地址${i+1}`}}</a>
</div>
</div>
<div class="play-list">
<div class="play-list-item" v-show="data.currentTabIndex == i" v-for="(l,i) in data.detail.playList">
<a class="play-link" v-for="(item,index) in l" href="javascript:;"
@click="play({source: i, episode: index})">{{ item.episode }}</a>
</div>
</div>
</div>
</div>
<!--相关系列影片-->
<div class="correlation">
<RelateList :relate-list="data.relate"/>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -93,384 +101,300 @@ import {ApiGet} from "../../utils/request";
import {ElMessage, ElLoading} from 'element-plus' import {ElMessage, ElLoading} from 'element-plus'
import {Promotion, CaretRight} from "@element-plus/icons-vue"; import {Promotion, CaretRight} from "@element-plus/icons-vue";
import RelateList from "../../components/RelateList.vue"; import RelateList from "../../components/RelateList.vue";
// 获取路由对象 // 获取路由对象
const router = useRouter() const router = useRouter()
const data = reactive({ const data = reactive({
detail: { detail: {
id: '', id: '',
cid: '', cid: '',
pid: '', pid: '',
name: '', name: '',
picture: '', picture: '',
playFrom: [], playFrom: [],
DownFrom: '', DownFrom: '',
playList: [[]], playList: [[]],
downloadList: '', downloadList: '',
descriptor: { descriptor: {
subTitle: '', subTitle: '',
cName: '', cName: '',
enName: '', enName: '',
initial: '', initial: '',
classTag: '', classTag: '',
actor: '', actor: '',
director: '', director: '',
writer: '', writer: '',
blurb: '', blurb: '',
remarks: '', remarks: '',
releaseDate: '', releaseDate: '',
area: '', area: '',
language: '', language: '',
year: '', year: '',
state: '', state: '',
updateTime: '', updateTime: '',
addTime: '', addTime: '',
dbId: '', dbId: '',
dbScore: '', dbScore: '',
hits: '', hits: '',
content: '', content: '',
} }
}, },
relate: [], relate: [],
loading: false, loading: false,
currentTabIndex: 0,
}) })
// 对部分信息过长进行处理 // 对部分信息过长进行处理
const handleLongText = (t: string): string => { const handleLongText = (t: string): string => {
let res = '' let res = ''
t.split(',').forEach((s, i) => { t.split(',').forEach((s, i) => {
console.log(s) console.log(s)
if (i < 3) { if (i < 3) {
res += `${s} ` res += `${s} `
} }
}) })
return res.trimEnd() return res.trimEnd()
} }
onBeforeMount(() => { onBeforeMount(() => {
let link = router.currentRoute.value.query.link let link = router.currentRoute.value.query.link
ApiGet('/filmDetail', {id: link}).then((resp: any) => { ApiGet('/filmDetail', {id: link}).then((resp: any) => {
if (resp.status === "ok") { if (resp.status === "ok") {
data.detail = resp.data.detail data.detail = resp.data.detail
// 去除影视简介中的无用内容和特殊标签格式等 // 去除影视简介中的无用内容和特殊标签格式等
data.detail.name = data.detail.name.replace(/(～.*～)/g, '') data.detail.name = data.detail.name.replace(/(～.*～)/g, '')
data.detail.descriptor.content = data.detail.descriptor.content.replace(/(&.*;)|( )|(　　)|(\n)|(<[^>]+>)/g, '') data.detail.descriptor.content = data.detail.descriptor.content.replace(/(&.*;)|( )|(　　)|(\n)|(<[^>]+>)/g, '')
data.relate = resp.data.relate data.relate = resp.data.relate
// 处理过长数据 // 处理过长数据
data.detail.descriptor.actor = handleLongText(data.detail.descriptor.actor) data.detail.descriptor.actor = handleLongText(data.detail.descriptor.actor)
console.log(handleLongText(data.detail.descriptor.actor)) console.log(handleLongText(data.detail.descriptor.actor))
data.detail.descriptor.director = handleLongText(data.detail.descriptor.director) data.detail.descriptor.director = handleLongText(data.detail.descriptor.director)
data.loading = true data.loading = true
} else { } else {
ElMessage({ ElMessage({
type: "error", type: "error",
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
message: resp.message, message: resp.message,
}) })
} }
}) })
}) })
// 播放源切换
const changeTab = (index:number)=>{
data.currentTabIndex = index
}
// 选集播放点击事件 // 选集播放点击事件
const play = (change: { source: number, episode: number }) => { const play = (change: { source: number, episode: number }) => {
router.push({path: `/play`, query: {id: `${router.currentRoute.value.query.link}`, ...change}}) router.push({path: `/play`, query: {id: `${router.currentRoute.value.query.link}`, ...change}})
} }
// 内容展开收起效果 // 内容展开收起效果
const multiBtn = ref({state: false, text: '展开'}) const multiBtn = ref({state: false, text: '展开'})
const textContent = ref() const textContent = ref()
const showContent = (flag: boolean) => { const showContent = (flag: boolean) => {
if (flag) { if (flag) {
multiBtn.value = {state: !flag, text: '展开'} multiBtn.value = {state: !flag, text: '展开'}
textContent.value.style.webkitLineClamp = 2 textContent.value.style.webkitLineClamp = 2
return return
} }
multiBtn.value = {state: !flag, text: '收起'} multiBtn.value = {state: !flag, text: '收起'}
textContent.value.style.webkitLineClamp = 8 textContent.value.style.webkitLineClamp = 8
} }
</script> </script>
<!--移动端适配--> <!--移动端适配-->
<style scoped> <style scoped>
@media (max-width: 650px) { @media (max-width: 650px) {
.title_mt { .title_mt {
padding: 0 3px; padding: 0 3px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-flow: nowrap; flex-flow: nowrap;
overflow: hidden; overflow: hidden;
} }
.picture_mt { .picture_mt {
width: 100%; width: 100%;
height: 180px; height: 180px;
margin-right: 12px; margin-right: 12px;
border-radius: 8px; border-radius: 8px;
background-size: cover; background-size: cover;
flex: 1; flex: 1;
} }
.title_mt_right { .title_mt_right {
flex: 1.5; flex: 1.5;
text-align: left; text-align: left;
} }
.title_mt_right h3 { .title_mt_right h3 {
font-size: 14px; font-size: 14px;
margin: 0 0 5px 0; margin: 0 0 5px 0;
} }
.title_mt_right p { .title_mt_right p {
font-size: 12px; font-size: 12px;
margin: 3px 2px; margin: 3px 2px;
white-space: nowrap; white-space: nowrap;
} }
.mt_content { .mt_content {
margin-top: 5px; margin-top: 5px;
border-top: 1px solid #777777; border-top: 1px solid #777777;
border-bottom: 1px solid #777777; border-bottom: 1px solid #777777;
width: 100%; width: 100%;
padding: 5px; padding: 5px;
} }
.mt_content p { .mt_content p {
max-width: 96%; max-width: 96%;
margin: 0 auto; margin: 0 auto;
font-size: 12px; font-size: 12px;
text-align: left; text-align: left;
word-wrap: break-word; word-wrap: break-word;
} }
.play_content a { .play_content a {
white-space: nowrap; white-space: nowrap;
color: #ffffff; color: #ffffff;
border-radius: 6px; border-radius: 6px;
margin: 6px 8px; margin: 6px 8px;
background: #888888; background: #888888;
min-width: calc(25% - 16px); min-width: calc(25% - 16px);
font-size: 12px; font-size: 12px;
padding: 6px 12px !important; padding: 6px 12px !important;
} }
:deep(.el-tabs__item) {
width: 70px;
height: 35px !important;
margin: 17px 5px 0 0 !important;
font-size: 13px;
}
} }
</style> </style>
<style scoped> <style scoped>
@import "/src/assets/css/film.css";
.correlation { .correlation {
width: 100%; width: 100%;
} }
.film { .film {
width: 100%; width: 100%;
padding: 0 1%; padding: 0 1%;
} }
/*影片播放列表信息展示*/ /*影片播放列表信息展示*/
.play_list {
width: 100%;
border-radius: 10px;
background: #2e2e2e;
margin-top: 50px;
position: relative;
}
.play_content {
display: flex;
flex-flow: row wrap;
padding: 20px 10px 20px 18px;
}
.play_list > h2 {
position: absolute;
left: 10px;
top: -10px;
z-index: 50;
}
@media (min-width: 650px) {
.play_content a {
white-space: nowrap;
font-size: 12px;
min-width: calc(10% - 24px);
padding: 6px 15px;
color: #ffffff;
border-radius: 6px;
margin: 8px 12px;
background: #888888;
}
}
.play_active {
color: orange !important;
background: #424242 !important;
}
.play_content .play_tabs {
background: #2e2e2e;
}
:deep(.el-tabs__nav-scroll) {
display: flex;
justify-content: end;
}
:deep(.el-tabs__header) {
/*border-bottom: 1px solid #888888!important;*/
margin-bottom: 0;
border-bottom: none !important;
background: rgb(34, 34, 34);
height: 50px !important;
}
:deep(.el-tabs__nav) {
border: none !important;
}
:deep(.el-tabs__item.is-active) {
color: #ee9600;
}
:deep(.el-tabs__item:hover) {
color: orange;
background: #484646;
}
:deep(.el-tabs__item) {
height: 50px;
line-height: 50px;
margin-left: 2px;
border-radius: 8px 8px 0 0;
border: none !important;
color: #ffffff;
background: #2e2e2e;
}
/*顶部影片信息显示区域*/ /*顶部影片信息显示区域*/
.title { .title {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
background: #2e2e2e; background: #2e2e2e;
padding: 5px 30px 30px 30px; padding: 5px 30px 30px 30px;
position: relative; position: relative;
} }
.title > h2 { .title > h2 {
text-align: left; text-align: left;
color: #888888; color: #888888;
} }
.picture { .picture {
position: absolute; position: absolute;
width: 190px; width: 190px;
height: 270px; height: 270px;
right: 30px; right: 30px;
top: 30px; top: 30px;
border-radius: 8px; border-radius: 8px;
background-size: cover; background-size: cover;
} }
.tags { .tags {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
justify-content: left; justify-content: left;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.tags > li { .tags > li {
padding: 6px 10px; padding: 6px 10px;
border-radius: 5px; border-radius: 5px;
background: rgba(66, 66, 66); background: rgba(66, 66, 66);
margin: 0 8px; margin: 0 8px;
font-size: 12px; font-size: 12px;
color: #888888; color: #888888;
} }
.tags > .t_c { .tags > .t_c {
background: rgba(155, 73, 231, 0.72); background: rgba(155, 73, 231, 0.72);
margin-left: 0; margin-left: 0;
} }
.t_c a { .t_c a {
color: #c4c2c2; color: #c4c2c2;
} }
.title p { .title p {
text-align: left; text-align: left;
font-size: 14px; font-size: 14px;
margin: 20px 0; margin: 20px 0;
max-width: 60%; max-width: 60%;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
.title p span { .title p span {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
color: #888888; color: #888888;
margin-right: 5px; margin-right: 5px;
} }
#score { #score {
color: #1cbeb9; color: #1cbeb9;
} }
.cus_wap { .cus_wap {
display: flex; display: flex;
} }
.title .text_content { .title .text_content {
max-width: 70%; max-width: 70%;
margin: 20px 3px; margin: 20px 3px;
line-height: 22.5px; line-height: 22.5px;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
vertical-align: top; vertical-align: top;
/*margin-top: 5px;*/ /*margin-top: 5px;*/
} }
.text_content::before { .text_content::before {
content: ''; content: '';
float: right; float: right;
width: 0; /*设置为0，或者不设置宽度*/ width: 0; /*设置为0，或者不设置宽度*/
height: calc(100% - 20px); /*先随便设置一个高度*/ height: calc(100% - 20px); /*先随便设置一个高度*/
} }
.text_content .cus_info { .text_content .cus_info {
height: 100%; height: 100%;
margin: 0; margin: 0;
font-size: 15px !important; font-size: 15px !important;
font-weight: normal; font-weight: normal;
} }
.multi_text { .multi_text {
float: right; float: right;
clear: both; clear: both;
margin-right: 10px; margin-right: 10px;
} }
</style> </style>

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

@@ -1,57 +1,60 @@
<template> <template>
<div class="player_area" v-show="data.loading"> <div class="player_area" v-show="data.loading">
<div class="player_p"> <div class="player_p">
<!--preload--> <!--preload-->
<video-player @mounted="handleBtn" :src="data.options.src" :poster="posterImg" controls <video-player @mounted="handleBtn" :src="data.options.src" :poster="posterImg" controls
:loop="false" :loop="false"
@keydown="handlePlay" @keydown="handlePlay"
:bufferedPercent="30" :bufferedPercent="30"
:volume="data.options.volume" :volume="data.options.volume"
crossorigin="anonymous" playsinline class="video-player" 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"><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?data.detail.descriptor.classTag:'未知' }}</span>
<span>{{ data.detail.descriptor.year }}</span>
<span>{{ data.detail.descriptor.area }}</span>
</div>
</div>
</div>
<!-- 播放选集 -->
<div class="play_list">
<h2 class="hidden-md-and-down">播放列表:(右侧切换播放源)</h2>
<el-tabs type="card" v-model="data.currentTabName" class="plya_tabs">
<el-tab-pane v-for="(p,i) in data.detail.playList"
:name="`tab-${i}`"
:label="`播放列表${i+1}`">
<div class="play_content">
<a v-for="(item,index) in p" href="javascript:void(false)"
@click="playChange({sourceIndex: i, episodeIndex: index, target: this})"
:class="item.link == data.current.link?'play_active':''">{{ item.episode }}</a>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="correlation">
<RelateList :relateList="data.relate"/>
</div>
</div> </div>
<div class="current_play_info">
<div class="play_info_left">
<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 ? data.detail.descriptor.classTag : '未知' }}</span>
<span>{{ data.detail.descriptor.year }}</span>
<span>{{ data.detail.descriptor.area }}</span>
</div>
</div>
</div>
<!-- 播放选集 -->
<div class="play-module">
<div class="play-module-item">
<div class="module-heading">
<p class=" play-module-title">播放列表</p>
<div class="play-tab-group">
<a href="javascript:;" :class="`play-tab-item ${data.currentTabIndex ==i ? 'tab-active':''}`"
v-for="(item,i) in data.detail.playList" @click="changeTab(i)">{{ `播放地址${i + 1}` }}</a>
</div>
</div>
<div class="play-list">
<div class="play-list-item" v-show="data.currentTabIndex == i" v-for="(l,i) in data.detail.playList">
<a :class="`play-link ${item.link == data.current.link?'play-link-active':''}`" v-for="(item,index) in l" href="javascript:;"
@click="playChange({sourceIndex: i, episodeIndex: index, target: this})">{{ item.episode }}</a>
</div>
</div>
</div>
</div>
<!--相关推荐-->
<div class="correlation">
<RelateList :relateList="data.relate"/>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {onBeforeMount, onMounted, reactive, ref, withDirectives} from "vue"; import {onBeforeMount, onMounted, reactive, ref, withDirectives} from "vue";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import {ApiGet} from "../../utils/request"; import {ApiGet} from "../../utils/request";
@@ -63,265 +66,276 @@ import posterImg from '../../assets/image/play.png'
import {VideoPlayer} from '@videojs-player/vue' import {VideoPlayer} from '@videojs-player/vue'
import 'video.js/dist/video-js.css' import 'video.js/dist/video-js.css'
const handlePlay = (e: any) => {
e.preventDefault()
switch (e.keyCode) {
case 32:
console.log(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
break
case 39:
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
break
case 40:
data.options.volume = data.options.volume - 0.05 < 0 ? 0 : data.options.volume - 0.05
break
}
}
// 主动触发快捷键
const tiggerKeyMap = (keyCode: number) => {
let player = document.getElementsByTagName("video")[0]
player.focus()
const event = document.createEvent('HTMLEvents');
event.initEvent('keydown', true, false);
event.keyCode = keyCode; // 设置键码
player.dispatchEvent(event)
}
const handleBtn = (e: any) => {
let btns = document.getElementsByClassName('vjs-button')
for (let el of btns) {
el.addEventListener('keydown', function (t: any) {
t.preventDefault()
tiggerKeyMap(t.keyCode)
})
} // 播放源切换事件
const changeTab = (index:number)=>{
data.currentTabIndex = index
} }
// 播放页所需数据 // 播放页所需数据
const data = reactive({ const data = reactive({
loading: false, loading: false,
detail: { detail: {
id: '', id: '',
cid: '', cid: '',
pid: '', pid: '',
name: '', name: '',
picture: '', picture: '',
playFrom: [], playFrom: [],
DownFrom: '', DownFrom: '',
playList: [[]], playList: [[]],
downloadList: '', downloadList: '',
descriptor: { descriptor: {
subTitle: '', subTitle: '',
cName: '', cName: '',
enName: '', enName: '',
initial: '', initial: '',
classTag: '', classTag: '',
actor: '', actor: '',
director: '', director: '',
writer: '', writer: '',
blurb: '', blurb: '',
remarks: '', remarks: '',
releaseDate: '', releaseDate: '',
area: '', area: '',
language: '', language: '',
year: '', year: '',
state: '', state: '',
updateTime: '', updateTime: '',
addTime: '', addTime: '',
dbId: '', dbId: '',
dbScore: '', dbScore: '',
hits: '', hits: '',
content: '', content: '',
}
},
current: {index: 0, episode: '', link: ''},
currentTabName: '',
currentPlayFrom: 0,
currentEpisode: 0,
relate: [],
// @videojs-player 播放属性设置
options: {
title: "", //视频名称
src: "", //视频源
volume: 0.6, // 音量
currentTime: 0,
} }
},
current: {index: 0, episode: '', link: ''},
currentTabName: '',
currentPlayFrom: 0,
currentEpisode: 0,
relate: [],
currentTabIndex:0,
// @videojs-player 播放属性设置
options: {
title: "", //视频名称
src: "", //视频源
volume: 0.6, // 音量
currentTime: 0,
}
}) })
// 获取路由信息 // 获取路由信息
const router = useRouter() const router = useRouter()
onBeforeMount(() => { onBeforeMount(() => {
let query = router.currentRoute.value.query let query = router.currentRoute.value.query
ApiGet(`/filmPlayInfo`, {id: query.id, playFrom: query.source, episode: query.episode}).then((resp: any) => { ApiGet(`/filmPlayInfo`, {id: query.id, playFrom: query.source, episode: query.episode}).then((resp: any) => {
if (resp.status === 'ok') { if (resp.status === 'ok') {
data.detail = resp.data.detail data.detail = resp.data.detail
data.current = {index: resp.data.currentEpisode, ...resp.data.current} data.current = {index: resp.data.currentEpisode, ...resp.data.current}
data.currentPlayFrom = resp.data.currentPlayFrom data.currentPlayFrom = resp.data.currentPlayFrom
data.currentEpisode = resp.data.currentEpisode data.currentEpisode = resp.data.currentEpisode
data.relate = resp.data.relate data.relate = resp.data.relate
// 设置当前选中的播放源 // 设置当前选中的播放源
data.currentTabName = `tab-${query.source}` data.currentTabName = `tab-${query.source}`
// 设置当前的视频播放url // 设置当前的视频播放url
data.options.src = data.current.link data.options.src = data.current.link
data.loading = true data.loading = true
} else { } else {
ElMessage.error("影片信息加载失败,请尝试刷新页面!!!") ElMessage.error("影片信息加载失败,请尝试刷新页面!!!")
} }
}) })
}) })
// 点击播集数播放对应影片 // 点击播集数播放对应影片
const playChange = (play: { sourceIndex: number, episodeIndex: number, target: any }) => { const playChange = (play: { sourceIndex: number, episodeIndex: number, target: any }) => {
let currPlay = data.detail.playList[play.sourceIndex][play.episodeIndex] let currPlay = data.detail.playList[play.sourceIndex][play.episodeIndex]
data.current = {index: play.episodeIndex, episode: currPlay.episode, link: currPlay.link} data.current = {index: play.episodeIndex, episode: currPlay.episode, link: currPlay.link}
data.options.src = currPlay.link data.options.src = currPlay.link
data.options.title = data.detail.name + " " + currPlay.episode data.options.title = data.detail.name + " " + currPlay.episode
} }
// player相关事件
const handlePlay = (e: any) => {
e.preventDefault()
switch (e.keyCode) {
case 32:
console.log(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
break
case 39:
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
break
case 40:
data.options.volume = data.options.volume - 0.05 < 0 ? 0 : data.options.volume - 0.05
break
}
}
// 主动触发快捷键
const tiggerKeyMap = (keyCode: number) => {
let player = document.getElementsByTagName("video")[0]
player.focus()
const event = document.createEvent('HTMLEvents');
event.initEvent('keydown', true, false);
event.keyCode = keyCode; // 设置键码
player.dispatchEvent(event)
}
const handleBtn = (e: any) => {
let btns = document.getElementsByClassName('vjs-button')
for (let el of btns) {
el.addEventListener('keydown', function (t: any) {
t.preventDefault()
tiggerKeyMap(t.keyCode)
})
}
}
</script> </script>
<style scoped> <style scoped>
@import "/src/assets/css/film.css";
/*vue3-video-play 相关设置*/ /*vue3-video-play 相关设置*/
/*//播放器控件区域大小*/ /*//播放器控件区域大小*/
.video-player { .video-player {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
position: absolute; position: absolute;
border-radius: 6px; border-radius: 6px;
} }
:deep(.vjs-big-play-button) { :deep(.vjs-big-play-button) {
line-height: 2em; line-height: 2em;
height: 2em; height: 2em;
width: 2em; width: 2em;
border-radius: 50%; border-radius: 50%;
border: none; border: none;
background: rgba(0, 0, 0, 0.65); background: rgba(0, 0, 0, 0.65);
} }
:deep(.vjs-control-bar) { :deep(.vjs-control-bar) {
background: rgba(0, 0, 0, 0.32); background: rgba(0, 0, 0, 0.32);
} }
/*取消video被选中的白边*/ /*取消video被选中的白边*/
:deep(video:focus) { :deep(video:focus) {
border: none !important; border: none !important;
outline: none; outline: none;
} }
:deep(.data-vjs-player:focus) { :deep(.data-vjs-player:focus) {
border: none !important; border: none !important;
outline: none; outline: none;
} }
:deep(.vjs-tech) { :deep(.vjs-tech) {
border-radius: 6px; border-radius: 6px;
} }
:deep(img) { :deep(img) {
border-radius: 6px; border-radius: 6px;
} }
/*进度条配色*/ /*进度条配色*/
:deep(.video-js .vjs-load-progress div) { :deep(.video-js .vjs-load-progress div) {
background: rgba(255,255,255,0.55)!important; background: rgba(255, 255, 255, 0.55) !important;
} }
:deep(.video-js .vjs-play-progress){
background: #44c8cf; :deep(.video-js .vjs-play-progress) {
background: #44c8cf;
} }
:deep(.video-js .vjs-slider){
background-color: hsla(0,0%,100%,.2); :deep(.video-js .vjs-slider) {
background-color: hsla(0, 0%, 100%, .2);
} }
/*当前播放的影片信息展示*/ /*当前播放的影片信息展示*/
.current_play_info { .current_play_info {
width: 100%; width: 100%;
padding: 15px 5px; padding: 15px 5px;
text-align: left; text-align: left;
} }
.current_play_title { .current_play_title {
font-weight: 600; font-weight: 600;
color: rgb(201, 196, 196); color: rgb(201, 196, 196);
margin: 0 0 12px 0; margin: 0 0 12px 0;
} }
.current_play_title a { .current_play_title a {
color: rgb(201, 196, 196); color: rgb(201, 196, 196);
font-weight: 600; font-weight: 600;
margin-right: 16px; margin-right: 16px;
} }
.current_play_title a:hover { .current_play_title a:hover {
color: orange; color: orange;
} }
/* 播放区域*/ /* 播放区域*/
.player_area { .player_area {
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
} }
@media (min-width: 650px) { @media (min-width: 650px) {
.player_area { .player_area {
padding: 10px 6%; padding: 10px 6%;
} }
.tags b { .tags b {
padding: 5px 10px; padding: 5px 10px;
background-color: rgba(155, 73, 231, 0.72); background-color: rgba(155, 73, 231, 0.72);
font-size: 13px; font-size: 13px;
border-radius: 6px; border-radius: 6px;
margin-right: 15px; margin-right: 15px;
} }
.tags span { .tags span {
padding: 6px 12px; padding: 6px 12px;
background-color: #404042; background-color: #404042;
color: #b5b2b2; color: #b5b2b2;
border-radius: 5px; border-radius: 5px;
margin: 0 8px; margin: 0 8px;
font-size: 12px; font-size: 12px;
} }
.play_content a { .play_content a {
white-space: nowrap; white-space: nowrap;
font-size: 12px; font-size: 12px;
min-width: calc(10% - 24px); min-width: calc(10% - 24px);
padding: 6px 10px; padding: 6px 10px;
color: #ffffff; color: #ffffff;
border-radius: 6px; border-radius: 6px;
margin: 8px 12px; margin: 8px 12px;
background: #888888; background: #888888;
} }
} }
.player_p { .player_p {
width: 100%; width: 100%;
/*height: 700px;*/ /*height: 700px;*/
margin: 0; margin: 0;
padding-bottom: 56.25% !important; padding-bottom: 56.25% !important;
position: relative; position: relative;
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
} }
@@ -329,77 +343,33 @@ background-color: hsla(0,0%,100%,.2);
/*影片播放列表信息展示*/ /*影片播放列表信息展示*/
/*影片播放列表信息展示*/ /*影片播放列表信息展示*/
.play_list { .play_list {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
background: #2e2e2e; background: #2e2e2e;
margin-top: 50px; margin-top: 50px;
position: relative; position: relative;
} }
.play_content { .play_content {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
} }
.play_list > h2 { .play_list > h2 {
position: absolute; position: absolute;
left: 10px; left: 10px;
top: -10px; top: -10px;
z-index: 50; z-index: 50;
} }
/*集数选中效果*/
.play_active {
color: orange !important;
background: #424242 !important;
}
.play_content .play_tabs {
background: #2e2e2e;
}
:deep(.el-tabs__nav-scroll) {
display: flex;
justify-content: end;
}
:deep(.el-tabs__header) {
/*border-bottom: 1px solid #888888!important;*/
margin-bottom: 0;
border-bottom: none !important;
background: rgb(34, 34, 34);
height: 50px !important;
}
:deep(.el-tabs__nav) {
border: none !important;
}
:deep(.el-tabs__item.is-active) {
color: #ee9600;
}
:deep(.el-tabs__item:hover) {
color: orange;
background: #484646;
}
:deep(.el-tabs__item) {
height: 50px;
line-height: 50px;
margin-left: 2px;
border-radius: 8px 8px 0 0;
border: none !important;
color: #ffffff;
background: #2e2e2e;
}
/*推荐列表区域*/ /*推荐列表区域*/
.correlation { .correlation {
width: 100%; width: 100%;
} }
</style> </style>
@@ -409,45 +379,45 @@ background-color: hsla(0,0%,100%,.2);
/*适应小尺寸*/ /*适应小尺寸*/
@media (max-width: 650px) { @media (max-width: 650px) {
.player_area { .player_area {
padding: 5px 10px; padding: 5px 10px;
} }
.tags b { .tags b {
padding: 5px 10px; padding: 5px 10px;
background-color: rgba(155, 73, 231, 0.72); background-color: rgba(155, 73, 231, 0.72);
font-size: 13px; font-size: 13px;
border-radius: 6px; border-radius: 6px;
margin-right: 3px; margin-right: 3px;
} }
.play_content a { .play_content a {
white-space: nowrap; white-space: nowrap;
color: #ffffff; color: #ffffff;
border-radius: 6px; border-radius: 6px;
margin: 6px 8px; margin: 6px 8px;
background: #888888; background: #888888;
min-width: calc(25% - 16px); min-width: calc(25% - 16px);
font-size: 12px; font-size: 12px;
padding: 6px 12px !important; padding: 6px 12px !important;
} }
.tags span { .tags span {
padding: 6px 10px; padding: 6px 10px;
background-color: #404042; background-color: #404042;
color: #b5b2b2; color: #b5b2b2;
border-radius: 5px; border-radius: 5px;
margin: 0 3px; margin: 0 3px;
font-size: 12px; font-size: 12px;
} }
:deep(.el-tabs__item) { :deep(.el-tabs__item) {
width: 70px; width: 70px;
height: 35px; height: 35px;
margin: 17px 5px 0 0 !important; margin: 17px 5px 0 0 !important;
font-size: 13px; font-size: 13px;
} }
} }
</style> </style>

357
client/src/views/index/PlayV1.vue
View File

@@ -1,357 +0,0 @@
<template>
<div class="player_area">
<!-- 视频播放区域-->
<div class="player_p">
<iframe ref="iframe" class="player" :src="data.current.link"
:name="data.detail.name"
marginheight="0"
marginwidth="0"
framespacing="0"
vspale="0"
allow="fullscreen"
frameborder="0" scolling="no"
sandbox="allow-scripts allow-same-origin allow-downloads">
</iframe>
</div>
<div class="current_play_info">
<div class="play_info_left">
<h3 class="current_play_title">{{ `${data.detail.name}&emsp;${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.year }}</span>
<span>{{ data.detail.descriptor.area }}</span>
</div>
</div>
</div>
<!-- 播放选集 -->
<div class="play_list">
<h2 class="hidden-md-and-down">播放列表:(右侧切换播放源)</h2>
<el-tabs type="card" v-model="data.currentTabName" class="plya_tabs" @tab-change="changeSource">
<el-tab-pane v-for="(p,i) in data.detail.playList"
:name="`tab-${i}`"
:label="`播放地址${i+1}`">
<div class="play_content">
<a v-for="(item,index) in p" href="javascript:void(false)" @click="playChange(item)"
:class="data.current.link.search(item.link) !== -1?'play_active':''">{{ item.episode }}</a>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="correlation">
<RelateList :relate-list="data.relate"/>
</div>
</div>
</template>
<script lang="ts" setup>
import {onMounted, reactive, ref, withDirectives} from "vue";
import {useRouter} from "vue-router";
import {ApiGet} from "../../utils/request";
import RelateList from "../../components/RelateList.vue";
import {Promotion} from "@element-plus/icons-vue";
// 播放页所需数据
const data = reactive({
detail: {descriptor: {}, playList: [[{episode: '', link: ''}]]},
current: {episode: '', link: ''},
currentTabName: '',
currentPlayFrom: 0,
currentEpisode: 0,
relate: [],
})
// 获取路由信息
const router = useRouter()
onMounted(() => {
let query = router.currentRoute.value.query
ApiGet(`/filmPlayInfo`, {id: query.id, playFrom: query.source, episode: query.episode}).then((resp: any) => {
if (resp.status === 'ok') {
data.detail = resp.data.detail
resp.data.current.link = converLink(resp.data.current.link)
data.current = resp.data.current
data.currentPlayFrom = resp.data.currentPlayFrom
data.currentEpisode = resp.data.currentEpisode
data.relate = resp.data.relate
// 设置当前选中的播放源
data.currentTabName = `tab-${query.source}`
}
})
})
// ===============================视频播放处理=======================================
// 视频解析接口地址, 默认使用第一个
const resolver = [
// m3u8使用此解析
'https://jx.jsonplayer.com/player/?url=',
// 'https://jx.m3u8.tv/jiexi/?url=',
// 'https://jx.jsonplayer.com/player/?url=',
// 'https://vip.bljiex.com/?url=',
// 'https://jx.bozrc.com:4433/player/?url=',
// html视频使用此解析
'http://www.82190555.com/index/qqvod.php?url=',
// 'https://jx.bozrc.com:4433/player/?url=',
// 'https://vip.bljiex.com/?url=',
// Google上随便找的
'https://vip.bljiex.com/?url=',
'https://jx.kingtail.xyz/?url=',
'http://www.82190555.com/index/qqvod.php?url=',
'https://www.nxflv.com/?url=',
'http://www.wmxz.wang/video.php?url=',
'https://www.feisuplayer.com/m3u8/?url=',
// tampermonkey 脚本使用的解析
'https://jx.bozrc.com:4433/player/?url=',
'https://z1.m1907.top/?jx=',
'https://jx.aidouer.net/?url=',
'https://www.gai4.com/?url=',
'https://okjx.cc/?url=',
'https://jx.rdhk.net/?v=',
'https://jx.blbo.cc:4433/?url=',
'https://jsap.attakids.com/?url=',
'https://jx.dj6u.com/?url=',
]
// 添加视频解析前缀
const converLink = (link: string): string => {
// 视频统一使用第三方解析
if (link.search("m3u8") != -1) {
return `${resolver[0] + link}`
}
// return `${resolver[1]+link}`
return `${link}`
}
// 点击播放对应影片
const playChange = (info: { link: string, episode: string }) => {
// 判断是否是m3u8播放器, 如果是则添加前缀
data.current.link = converLink(info.link)
data.current.episode = info.episode
}
// 点击播放源标签事件
const changeSource = (tabName: any) => {
data.currentTabName = tabName
data.detail.playList.find((item, index) => {
if (tabName.split("-")[1] - index == 0) {
item.find(i => {
if (i.episode == data.current.episode) {
data.current.link = converLink(i.link)
}
})
}
})
}
// 测试滑动音量调节
const iframe = ref()
// document.querySelector('#brightnessSlider').addEventListener('change', function() {
// // 获取滑块的值
// var brightness = this.value;
//
// // 设置亮度为滑块的值
// iframe.style.filter = 'brightness(' + brightness + '%)';
// })
</script>
<style scoped>
/*当前播放的影片信息展示*/
.current_play_info {
width: 100%;
padding: 15px 5px;
text-align: left;
}
.current_play_title {
font-weight: 500;
color: rgb(201, 196, 196);
margin: 0 0 5px 0;
}
/* 播放区域*/
.player_area {
width: 100%;
min-height: 100%;
/*height: 1400px;*/
/*background: red;*/
}
@media (min-width: 650px) {
.player_area {
padding: 10px 6%;
}
.tags b {
padding: 5px 10px;
background-color: rgba(155, 73, 231, 0.72);
font-size: 13px;
border-radius: 6px;
margin-right: 15px;
}
.tags span {
padding: 6px 12px;
background-color: #404042;
color: #b5b2b2;
border-radius: 5px;
margin: 0 8px;
font-size: 12px;
}
}
.player_p {
width: 100%;
min-height: 200px;
margin: 0;
padding-bottom: 56.25% !important;
/*padding-bottom: 42.25% !important;*/
position: relative;
background-image: url("/src/assets/image/play.png");
background-size: cover;
border-radius: 6px;
}
iframe {
border-radius: 6px;
left: 0;
width: 100%; /* 设置iframe元素的宽度为父容器的100% */
height: 100%; /* 设置iframe元素的高度为0，以便自适应高度 */
/*padding-bottom: 56.25%; !* 使用padding-bottom属性计算iframe元素的高度，这里假设视频的宽高比为16:9 *!*/
/*border: none; !* 去除iframe元素的边框 *!*/
/*transform: scale(1);*/
position: absolute;
}
/*右侧播放源选择区域*/
/*影片播放列表信息展示*/
/*影片播放列表信息展示*/
.play_list {
width: 100%;
border-radius: 10px;
background: #2e2e2e;
margin-top: 50px;
position: relative;
}
.play_content {
display: flex;
flex-flow: row wrap;
padding: 10px 10px 10px 18px;
}
.play_list > h2 {
position: absolute;
left: 10px;
top: -10px;
z-index: 50;
}
.play_content a {
font-size: 12px;
min-width: 65px;
padding: 6px 15px;
color: #ffffff;
border-radius: 6px;
margin: 8px 8px;
background: #888888;
}
/*集数选中效果*/
.play_active {
color: orange !important;
background: #424242 !important;
}
.play_content .play_tabs {
background: #2e2e2e;
}
:deep(.el-tabs__nav-scroll) {
display: flex;
justify-content: end;
}
:deep(.el-tabs__header) {
/*border-bottom: 1px solid #888888!important;*/
margin-bottom: 0;
border-bottom: none !important;
background: rgb(34, 34, 34);
height: 50px !important;
}
:deep(.el-tabs__nav) {
border: none !important;
}
:deep(.el-tabs__item.is-active) {
color: #ee9600;
}
:deep(.el-tabs__item:hover) {
color: orange;
background: #484646;
}
:deep(.el-tabs__item) {
height: 50px;
line-height: 50px;
margin-left: 2px;
border-radius: 8px 8px 0 0;
border: none !important;
color: #ffffff;
background: #2e2e2e;
}
/*推荐列表区域*/
.correlation {
width: 100%;
}
</style>
<!--移动端-->
<style scoped>
/*适应小尺寸*/
@media (max-width: 650px) {
.player_area {
padding: 5px 10px;
}
.tags b {
padding: 5px 10px;
background-color: rgba(155, 73, 231, 0.72);
font-size: 13px;
border-radius: 6px;
margin-right: 3px;
}
.tags span {
padding: 6px 10px;
background-color: #404042;
color: #b5b2b2;
border-radius: 5px;
margin: 0 3px;
font-size: 12px;
}
}
</style>