mirror of
https://github.com/ProudMuBai/GoFilm.git
synced 2026-02-13 21:44:42 +08:00
fix UI bug
This commit is contained in:
mubai
@@ -33,7 +33,7 @@ html, body, #app {
|
||||
a {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
color: #888888;
|
||||
color: rgba(255,255,255,0.38);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
|
||||
115
client/src/assets/css/film.css
Normal file
115
client/src/assets/css/film.css
Normal 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;
|
||||
}
|
||||
|
||||
@@ -1,185 +1,188 @@
|
||||
<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 link_content" >
|
||||
<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 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 link_content">
|
||||
<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
|
||||
list: Array
|
||||
})
|
||||
|
||||
// 图片加载失败事件
|
||||
const handleImg =(e:Event)=>{
|
||||
e.target.style.display = "none"
|
||||
const handleImg = (e: Event) => {
|
||||
e.target.style.display = "none"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.default_image {
|
||||
background: url("/src/assets/image/404.png");
|
||||
background-size: cover;
|
||||
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: space-between;
|
||||
}
|
||||
/*展示区域*/
|
||||
.c_content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.c_content .item {
|
||||
flex-basis: calc(33% - 6px);
|
||||
max-width: 33%;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.c_content .item {
|
||||
flex-basis: calc(33% - 7px);
|
||||
max-width: 33%;
|
||||
margin: 0 4px 20px 4px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item .link_content {
|
||||
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%;
|
||||
}
|
||||
.item .link_content {
|
||||
padding-top: 125%;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.tag_group {
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 5px;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.tag_group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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: space-between;
|
||||
}
|
||||
.c_content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.c_content .item {
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.c_content .item {
|
||||
margin: 0 10px 20px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item .link_content {
|
||||
border-radius: 5px;
|
||||
padding-top: 125%;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.item .link_content {
|
||||
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%;
|
||||
}
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
text-overflow: ellipsis;
|
||||
.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;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cus_remark {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-left: 3px;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
text-align: left;
|
||||
}
|
||||
.cus_remark {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-left: 3px;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +1,43 @@
|
||||
<template>
|
||||
<div class="relate_container">
|
||||
<h2 class="title">相关推荐</h2>
|
||||
<FilmList :list="relateList"/>
|
||||
</div>
|
||||
<div class="relate_container">
|
||||
<p class="title">相关推荐</p>
|
||||
<FilmList :list="relateList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import FilmList from "./FilmList.vue";
|
||||
|
||||
defineProps({
|
||||
relateList: Array
|
||||
relateList: Array
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@media (max-width: 650px){
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 650px){
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.relate_container {
|
||||
width: 100%;
|
||||
margin-top: 36px;
|
||||
width: 100%;
|
||||
margin-top: 36px;
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0 0 5px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid #777777;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
padding-bottom: 5px;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,17 +1,14 @@
|
||||
|
||||
import {
|
||||
createRouter,
|
||||
createWebHistory,
|
||||
} from "vue-router";
|
||||
|
||||
|
||||
// 1.定义路由组件
|
||||
import IndexHome from "../views/IndexHome.vue";
|
||||
import Home from "../views/index/Home.vue";
|
||||
import FilmDetails from "../views/index/FilmDetails.vue";
|
||||
import Play from "../views/index/Play.vue";
|
||||
import SearchFilm from "../views/index/SearchFilm.vue";
|
||||
import CategoryFilm from "../views/index/CategoryFilm.vue";
|
||||
import NotFound from '../views/error/Error404.vue'
|
||||
import FilmClassifySearch from "../views/index/FilmClassifySearch.vue";
|
||||
import FilmClassify from "../views/index/FilmClassify.vue";
|
||||
@@ -28,7 +25,6 @@ const routes = [
|
||||
{path: 'filmDetail', component: FilmDetails},
|
||||
{path: 'play', component: Play},
|
||||
{path: 'search', component: SearchFilm},
|
||||
{path: 'CategoryFilm', component: CategoryFilm},
|
||||
{path: 'filmClassify', component: FilmClassify},
|
||||
{path: 'filmClassifySearch', component: FilmClassifySearch},
|
||||
]
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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)+`¤t=${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>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="container" v-if="d.content.news.length > 0">
|
||||
<div class="title">
|
||||
<a :href="`/filmClassify?Pid=${d.title.id}`" class="h_active">{{ d.title.name }}</a>
|
||||
<span class="line"/>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="container" v-if="d.list.length >0">
|
||||
<div class="title">
|
||||
<a :href="`/filmClassify?Pid=${d.title.id}`" >{{ d.title.name }}</a>
|
||||
<span class="line"/>
|
||||
@@ -44,26 +44,6 @@ 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 = '/filmClassifySearch?'+q.slice(1)+`¤t=${d.page.current}`
|
||||
}
|
||||
|
||||
// 页面所需数据
|
||||
const d = reactive({
|
||||
title: {},
|
||||
@@ -87,6 +67,7 @@ const d = reactive({
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
// 获取路由参数查询对应数据
|
||||
const router = useRouter()
|
||||
|
||||
@@ -95,7 +76,26 @@ const changeCurrent = (currentVal: number) => {
|
||||
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)+`¤t=${d.page.current}`
|
||||
}
|
||||
|
||||
// 请求数据
|
||||
const getFilmData = () => {
|
||||
let query = router.currentRoute.value.query
|
||||
ApiGet(`/filmClassifySearch`, {...query}).then((resp: any) => {
|
||||
@@ -115,6 +115,8 @@ onMounted(() => {
|
||||
getFilmData()
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -1,89 +1,97 @@
|
||||
<template>
|
||||
<div class="film" v-show="data.loading">
|
||||
<!-- hidden-sm-and-up 移动端title -->
|
||||
<div class="hidden-sm-and-up">
|
||||
<div class="title_mt ">
|
||||
<a class="picture_mt" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
|
||||
<div class="title_mt_right">
|
||||
<h3>{{ data.detail.name }}</h3>
|
||||
<ul class="tags">
|
||||
<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> {{ 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.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">
|
||||
<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(",", " ") }}
|
||||
</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 class="film" v-show="data.loading">
|
||||
<!-- hidden-sm-and-up 移动端title -->
|
||||
<div class="hidden-sm-and-up">
|
||||
<div class="title_mt ">
|
||||
<a class="picture_mt" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
|
||||
<div class="title_mt_right">
|
||||
<h3>{{ data.detail.name }}</h3>
|
||||
<ul class="tags">
|
||||
<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> {{ 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.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">
|
||||
<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(",", " ") }}
|
||||
</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>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -93,384 +101,300 @@ import {ApiGet} from "../../utils/request";
|
||||
import {ElMessage, ElLoading} from 'element-plus'
|
||||
import {Promotion, CaretRight} from "@element-plus/icons-vue";
|
||||
import RelateList from "../../components/RelateList.vue";
|
||||
|
||||
// 获取路由对象
|
||||
const router = useRouter()
|
||||
|
||||
const data = reactive({
|
||||
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,
|
||||
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,
|
||||
currentTabIndex: 0,
|
||||
})
|
||||
|
||||
// 对部分信息过长进行处理
|
||||
const handleLongText = (t: string): string => {
|
||||
let res = ''
|
||||
t.split(',').forEach((s, i) => {
|
||||
console.log(s)
|
||||
if (i < 3) {
|
||||
res += `${s} `
|
||||
}
|
||||
})
|
||||
return res.trimEnd()
|
||||
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({
|
||||
type: "error",
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: resp.message,
|
||||
})
|
||||
}
|
||||
})
|
||||
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({
|
||||
type: "error",
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: resp.message,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
// 播放源切换
|
||||
const changeTab = (index:number)=>{
|
||||
data.currentTabIndex = index
|
||||
}
|
||||
|
||||
// 选集播放点击事件
|
||||
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 textContent = ref()
|
||||
const showContent = (flag: boolean) => {
|
||||
if (flag) {
|
||||
multiBtn.value = {state: !flag, text: '展开'}
|
||||
textContent.value.style.webkitLineClamp = 2
|
||||
return
|
||||
}
|
||||
multiBtn.value = {state: !flag, text: '收起'}
|
||||
textContent.value.style.webkitLineClamp = 8
|
||||
if (flag) {
|
||||
multiBtn.value = {state: !flag, text: '展开'}
|
||||
textContent.value.style.webkitLineClamp = 2
|
||||
return
|
||||
}
|
||||
multiBtn.value = {state: !flag, text: '收起'}
|
||||
textContent.value.style.webkitLineClamp = 8
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!--移动端适配-->
|
||||
<style scoped>
|
||||
@media (max-width: 650px) {
|
||||
.title_mt {
|
||||
padding: 0 3px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.title_mt {
|
||||
padding: 0 3px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.picture_mt {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
margin-right: 12px;
|
||||
border-radius: 8px;
|
||||
background-size: cover;
|
||||
flex: 1;
|
||||
}
|
||||
.picture_mt {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
margin-right: 12px;
|
||||
border-radius: 8px;
|
||||
background-size: cover;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.title_mt_right {
|
||||
flex: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
.title_mt_right {
|
||||
flex: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_mt_right h3 {
|
||||
font-size: 14px;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.title_mt_right p {
|
||||
font-size: 12px;
|
||||
margin: 3px 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mt_content {
|
||||
margin-top: 5px;
|
||||
border-top: 1px solid #777777;
|
||||
border-bottom: 1px solid #777777;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
.mt_content {
|
||||
margin-top: 5px;
|
||||
border-top: 1px solid #777777;
|
||||
border-bottom: 1px solid #777777;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.mt_content p {
|
||||
max-width: 96%;
|
||||
margin: 0 auto;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.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;
|
||||
min-width: calc(25% - 16px);
|
||||
font-size: 12px;
|
||||
padding: 6px 12px !important;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
width: 70px;
|
||||
height: 35px !important;
|
||||
margin: 17px 5px 0 0 !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
.play_content a {
|
||||
white-space: nowrap;
|
||||
color: #ffffff;
|
||||
border-radius: 6px;
|
||||
margin: 6px 8px;
|
||||
background: #888888;
|
||||
min-width: calc(25% - 16px);
|
||||
font-size: 12px;
|
||||
padding: 6px 12px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
@import "/src/assets/css/film.css";
|
||||
|
||||
.correlation {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.film {
|
||||
width: 100%;
|
||||
padding: 0 1%;
|
||||
width: 100%;
|
||||
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 {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
background: #2e2e2e;
|
||||
padding: 5px 30px 30px 30px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
background: #2e2e2e;
|
||||
padding: 5px 30px 30px 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title > h2 {
|
||||
text-align: left;
|
||||
color: #888888;
|
||||
text-align: left;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.picture {
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
height: 270px;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
border-radius: 8px;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
height: 270px;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
border-radius: 8px;
|
||||
background-size: cover;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.tags {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tags > li {
|
||||
padding: 6px 10px;
|
||||
border-radius: 5px;
|
||||
background: rgba(66, 66, 66);
|
||||
margin: 0 8px;
|
||||
font-size: 12px;
|
||||
color: #888888;
|
||||
padding: 6px 10px;
|
||||
border-radius: 5px;
|
||||
background: rgba(66, 66, 66);
|
||||
margin: 0 8px;
|
||||
font-size: 12px;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.tags > .t_c {
|
||||
background: rgba(155, 73, 231, 0.72);
|
||||
margin-left: 0;
|
||||
background: rgba(155, 73, 231, 0.72);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.t_c a {
|
||||
color: #c4c2c2;
|
||||
color: #c4c2c2;
|
||||
}
|
||||
|
||||
.title p {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
margin: 20px 0;
|
||||
max-width: 60%;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
margin: 20px 0;
|
||||
max-width: 60%;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title p span {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #888888;
|
||||
margin-right: 5px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #888888;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#score {
|
||||
color: #1cbeb9;
|
||||
color: #1cbeb9;
|
||||
}
|
||||
|
||||
.cus_wap {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.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;*/
|
||||
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;*/
|
||||
|
||||
}
|
||||
|
||||
.text_content::before {
|
||||
content: '';
|
||||
float: right;
|
||||
width: 0; /*设置为0，或者不设置宽度*/
|
||||
height: calc(100% - 20px); /*先随便设置一个高度*/
|
||||
content: '';
|
||||
float: right;
|
||||
width: 0; /*设置为0，或者不设置宽度*/
|
||||
height: calc(100% - 20px); /*先随便设置一个高度*/
|
||||
}
|
||||
|
||||
.text_content .cus_info {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-size: 15px !important;
|
||||
font-weight: normal;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-size: 15px !important;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.multi_text {
|
||||
float: right;
|
||||
clear: both;
|
||||
margin-right: 10px;
|
||||
float: right;
|
||||
clear: both;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,57 +1,60 @@
|
||||
<template>
|
||||
<div class="player_area" v-show="data.loading">
|
||||
<div class="player_p">
|
||||
<!--preload-->
|
||||
<div class="player_area" v-show="data.loading">
|
||||
<div class="player_p">
|
||||
<!--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]"/>
|
||||
</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>
|
||||
<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]"/>
|
||||
</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>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import {onBeforeMount, onMounted, reactive, ref, withDirectives} from "vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import {ApiGet} from "../../utils/request";
|
||||
@@ -63,265 +66,276 @@ import posterImg from '../../assets/image/play.png'
|
||||
import {VideoPlayer} from '@videojs-player/vue'
|
||||
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({
|
||||
loading: false,
|
||||
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: [],
|
||||
// @videojs-player 播放属性设置
|
||||
options: {
|
||||
title: "", //视频名称
|
||||
src: "", //视频源
|
||||
volume: 0.6, // 音量
|
||||
currentTime: 0,
|
||||
loading: false,
|
||||
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: [],
|
||||
currentTabIndex:0,
|
||||
// @videojs-player 播放属性设置
|
||||
options: {
|
||||
title: "", //视频名称
|
||||
src: "", //视频源
|
||||
volume: 0.6, // 音量
|
||||
currentTime: 0,
|
||||
}
|
||||
})
|
||||
|
||||
// 获取路由信息
|
||||
const router = useRouter()
|
||||
onBeforeMount(() => {
|
||||
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
|
||||
data.current = {index: resp.data.currentEpisode, ...resp.data.current}
|
||||
data.currentPlayFrom = resp.data.currentPlayFrom
|
||||
data.currentEpisode = resp.data.currentEpisode
|
||||
data.relate = resp.data.relate
|
||||
// 设置当前选中的播放源
|
||||
data.currentTabName = `tab-${query.source}`
|
||||
// 设置当前的视频播放url
|
||||
data.options.src = data.current.link
|
||||
data.loading = true
|
||||
} else {
|
||||
ElMessage.error("影片信息加载失败,请尝试刷新页面!!!")
|
||||
}
|
||||
})
|
||||
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
|
||||
data.current = {index: resp.data.currentEpisode, ...resp.data.current}
|
||||
data.currentPlayFrom = resp.data.currentPlayFrom
|
||||
data.currentEpisode = resp.data.currentEpisode
|
||||
data.relate = resp.data.relate
|
||||
// 设置当前选中的播放源
|
||||
data.currentTabName = `tab-${query.source}`
|
||||
// 设置当前的视频播放url
|
||||
data.options.src = data.current.link
|
||||
data.loading = true
|
||||
} else {
|
||||
ElMessage.error("影片信息加载失败,请尝试刷新页面!!!")
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 点击播集数播放对应影片
|
||||
const playChange = (play: { sourceIndex: number, episodeIndex: number, target: any }) => {
|
||||
let currPlay = data.detail.playList[play.sourceIndex][play.episodeIndex]
|
||||
data.current = {index: play.episodeIndex, episode: currPlay.episode, link: currPlay.link}
|
||||
data.options.src = currPlay.link
|
||||
data.options.title = data.detail.name + " " + currPlay.episode
|
||||
let currPlay = data.detail.playList[play.sourceIndex][play.episodeIndex]
|
||||
data.current = {index: play.episodeIndex, episode: currPlay.episode, link: currPlay.link}
|
||||
data.options.src = currPlay.link
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
@import "/src/assets/css/film.css";
|
||||
/*vue3-video-play 相关设置*/
|
||||
/*//播放器控件区域大小*/
|
||||
.video-player {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
|
||||
}
|
||||
|
||||
:deep(.vjs-big-play-button) {
|
||||
line-height: 2em;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
line-height: 2em;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
:deep(.vjs-control-bar) {
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
/*取消video被选中的白边*/
|
||||
:deep(video:focus) {
|
||||
border: none !important;
|
||||
outline: none;
|
||||
border: none !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:deep(.data-vjs-player:focus) {
|
||||
border: none !important;
|
||||
outline: none;
|
||||
border: none !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:deep(.vjs-tech) {
|
||||
border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
:deep(img) {
|
||||
border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/*进度条配色*/
|
||||
: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 {
|
||||
width: 100%;
|
||||
padding: 15px 5px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
padding: 15px 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.current_play_title {
|
||||
font-weight: 600;
|
||||
color: rgb(201, 196, 196);
|
||||
margin: 0 0 12px 0;
|
||||
font-weight: 600;
|
||||
color: rgb(201, 196, 196);
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.current_play_title a {
|
||||
color: rgb(201, 196, 196);
|
||||
font-weight: 600;
|
||||
margin-right: 16px;
|
||||
color: rgb(201, 196, 196);
|
||||
font-weight: 600;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.current_play_title a:hover {
|
||||
color: orange;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
|
||||
/* 播放区域*/
|
||||
.player_area {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 650px) {
|
||||
.player_area {
|
||||
padding: 10px 6%;
|
||||
}
|
||||
.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 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;
|
||||
}
|
||||
.tags span {
|
||||
padding: 6px 12px;
|
||||
background-color: #404042;
|
||||
color: #b5b2b2;
|
||||
border-radius: 5px;
|
||||
margin: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.play_content a {
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
min-width: calc(10% - 24px);
|
||||
padding: 6px 10px;
|
||||
color: #ffffff;
|
||||
border-radius: 6px;
|
||||
margin: 8px 12px;
|
||||
background: #888888;
|
||||
}
|
||||
.play_content a {
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
min-width: calc(10% - 24px);
|
||||
padding: 6px 10px;
|
||||
color: #ffffff;
|
||||
border-radius: 6px;
|
||||
margin: 8px 12px;
|
||||
background: #888888;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.player_p {
|
||||
width: 100%;
|
||||
/*height: 700px;*/
|
||||
margin: 0;
|
||||
padding-bottom: 56.25% !important;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
/*height: 700px;*/
|
||||
margin: 0;
|
||||
padding-bottom: 56.25% !important;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
@@ -329,77 +343,33 @@ background-color: hsla(0,0%,100%,.2);
|
||||
/*影片播放列表信息展示*/
|
||||
/*影片播放列表信息展示*/
|
||||
.play_list {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
background: #2e2e2e;
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
background: #2e2e2e;
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.play_content {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 10px 10px 10px 10px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 10px 10px 10px 10px;
|
||||
|
||||
}
|
||||
|
||||
.play_list > h2 {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: -10px;
|
||||
z-index: 50;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: -10px;
|
||||
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 {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -409,45 +379,45 @@ background-color: hsla(0,0%,100%,.2);
|
||||
|
||||
/*适应小尺寸*/
|
||||
@media (max-width: 650px) {
|
||||
.player_area {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.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 b {
|
||||
padding: 5px 10px;
|
||||
background-color: rgba(155, 73, 231, 0.72);
|
||||
font-size: 13px;
|
||||
border-radius: 6px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
|
||||
.play_content a {
|
||||
white-space: nowrap;
|
||||
color: #ffffff;
|
||||
border-radius: 6px;
|
||||
margin: 6px 8px;
|
||||
background: #888888;
|
||||
min-width: calc(25% - 16px);
|
||||
font-size: 12px;
|
||||
padding: 6px 12px !important;
|
||||
}
|
||||
.play_content a {
|
||||
white-space: nowrap;
|
||||
color: #ffffff;
|
||||
border-radius: 6px;
|
||||
margin: 6px 8px;
|
||||
background: #888888;
|
||||
min-width: calc(25% - 16px);
|
||||
font-size: 12px;
|
||||
padding: 6px 12px !important;
|
||||
}
|
||||
|
||||
.tags span {
|
||||
padding: 6px 10px;
|
||||
background-color: #404042;
|
||||
color: #b5b2b2;
|
||||
border-radius: 5px;
|
||||
margin: 0 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.tags span {
|
||||
padding: 6px 10px;
|
||||
background-color: #404042;
|
||||
color: #b5b2b2;
|
||||
border-radius: 5px;
|
||||
margin: 0 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
margin: 17px 5px 0 0 !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
:deep(.el-tabs__item) {
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
margin: 17px 5px 0 0 !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -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} ${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>
|
||||
Reference in New Issue
Block a user