Ma/GoFilm
1
0
Fork 0
mirror of https://github.com/ProudMuBai/GoFilm.git synced 2026-05-07 20:27:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui optimize

Browse Source
This commit is contained in:
mubai
2026-04-19 14:23:29 +08:00
parent f539091ea8
commit 3e6db8b5d6
24 changed files with 737 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/components.d.ts vendored
View File

@@ -23,6 +23,7 @@ declare module 'vue' {
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']

6
client/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
@@ -9,8 +9,8 @@
<meta name="HandheldFriendly" content="true">
<meta name="referrer" content="never">
<meta charset="UTF-8"/>
<title>(╥﹏╥)</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_d9xdu8zk04f.css">
<title>o(^▽^)o</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_d1lr2rjk376.css">
</head>
<body>
<div id="app"></div>

88
client/src/App.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-config-provider :locale="zhCn">
<div class="main" >
<div class="main dark" >
<router-view></router-view>
<Util/>
</div>
@@ -40,4 +40,90 @@ a {
a:hover {
color: #888888;
}
/*明暗主题背景设置*/
.dark {
background: #16161a;
.is-drawer .cus-drawer {
background-color: rgba(0, 0, 0, 0.55)!important;
}
.el-drawer__header{
border-bottom: 1px solid var(--border-color-highlight);
}
.el-drawer__close-btn{
color: #ddddddbf;
}
.drawer-nav a {
color: #ddd;
}
.drawer-nav a:before{
color: #79bbff;
}
}
.light{
background: linear-gradient(45deg, #356697, rgb(105, 68, 140), rgb(151, 109, 133), rgb(92 104 149));
.is-drawer .cus-drawer {
background: linear-gradient(315deg, #fcb8e2ad 0.000%, #ffc8edcf 20.000%, #fbe8f9d4 40.000%, #e8f9ffde 60.000%, #d0ecffd6 80.000%, #b8cdfadb 100.000%);
}
.el-drawer__header{
border-bottom: 1px solid var(--border-gray-color);
}
.el-drawer__close-btn{
color: #2222223d;
}
.drawer-nav a {
color: #222222c7;
}
.drawer-nav a:before{
color: #3A9AFF;
}
}
/*wrap侧边栏菜单样式*/
.drawer-nav{
display: flex;
flex-direction: column;
width: 100%;
padding: 0 10%;
}
.el-drawer__header{
margin-left: 8px;
margin-right: 8px;
border-bottom: 1px solid var(--border-gray-color);
}
.el-drawer__header .drawer-title {
margin: 20px 0;
padding-left: 15px;
text-align: start !important;
}
.el-drawer__close-btn{
color: #2222223d;
padding-right: 0;
}
.drawer-nav a {
width: 100%;
color: #22222296;
text-align: start;
padding: 6px 10px;
margin-bottom: 15px;
transition: transform 0.3s ease;
}
.drawer-nav a:before{
font-size: 20px;
color: #3A9AFF;
margin-right: 6px;
}
.el-drawer__body .drawer-nav a:hover, .el-drawer__body .drawer-nav a:hover a:active{
color: var(--active--color);
transform: translateY(-4px);
}
</style>

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 MiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 531 KiB

9
client/src/components/index/FilmList.vue
View File

@@ -53,9 +53,9 @@
</template>
<script setup lang="ts">
import {inject, reactive, watchEffect} from 'vue'
import {Discount} from "@element-plus/icons-vue";
import notFoundImg from '/src/assets/image/404.png'
const props = defineProps({
list: Array,
@@ -63,7 +63,7 @@ const props = defineProps({
})
const d = reactive({
col: 0,
list: Array,
list: [],
width: 0,
})
@@ -71,7 +71,7 @@ const global = inject('global')
// 图片加载失败事件
const handleImg = (e: Event) => {
// e.target.style.display = "none"
e.target.src = '/src/assets/image/404.png'
e.target.src = notFoundImg
}
// 图片加载完成事件
const handLoadImg = (e: Event) => {
@@ -95,6 +95,9 @@ watchEffect(() => {
let isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent)
// 如果是PC, 为防止flex布局最后一行元素不足出现错位, 使用空元素补齐list
let c = isMobile ? 3 : props.col ? props.col : 0
if (!props.list) {
return;
}
let l: any = props.list
let len = l.length
d.width = isMobile ? 31 : Math.floor(100 / c)

288
client/src/components/index/Header.vue
View File

@@ -1,67 +1,97 @@
<template>
<div class="header">
<!-- 左侧logo以及搜索 -->
<div class="nav_left">
<!-- <img class="logo" src="/src/assets/logo.png">-->
<!--<el-avatar class="logo" :size="45" :src="data.site.logo" alt="GoFilm"/>-->
<!-- pc -->
<template v-if="!global.isMobile">
<!-- 左侧logo以及搜索 -->
<div class="nav_left">
<!-- <img class="logo" src="/src/assets/logo.png">-->
<!--<el-avatar class="logo" :size="45" :src="data.site.logo" alt="GoFilm"/>-->
<a href="/" class="site">{{ data.site.siteName }}</a>
<div class="search_group">
<input v-model="keyword" @keydown="(e)=>{e.keyCode == 13 && searchFilm()}" placeholder="搜索 动漫,剧集,电影 "
class="search"/>
<el-button @click="searchFilm" :icon="Search"/>
</div>
</div>
<!--右侧顶级分类导航 -->
<div class="nav_right">
<div class="nav_link">
<a href="/">首页</a>
<template v-for="n in data.nav">
<a :href="`/filmClassify?Pid=${n.id}`">{{ n.name }}</a>
</template>
</div>
<div class="history-link" v-on:mouseenter="handleHistory(true)"
v-on:mouseleave="handleHistory(false)">
<a :href="`/filmClassify?Pid=${nav.variety.id}`">
<b style="font-size: 22px;" class="iconfont icon-history"/>
</a>
<Transition name="fade-slide" duration="300">
<div v-if="data.historyFlag" class="dropdown-container" >
<div class="history-h">
<b class="iconfont icon-record history-h-icon"/>
<span class="history-h-title">历史观看记录</span>
<a v-if="data.historyList.length > 0" class="iconfont icon-clear1 history-del" @click="clearHistory"/>
</div>
<div v-if="data.historyList.length > 0" class="history-c">
<a :href="h.link" class="history-c-item" v-for="h in data.historyList">
<span class="history-c-item-t">{{ h.name }}</span>
<span class="history-c-item-e">{{ h.episode }}</span>
</a>
</div>
<el-empty style="padding: 10px 0;" v-else description="暂无观看记录"/>
</div>
</Transition>
</div>
</div>
</template>
<!-- wrap -->
<template v-else>
<a href="/" class="site">{{ data.site.siteName }}</a>
<div class="search_group">
<input v-model="keyword" @keydown="(e)=>{e.keyCode == 13 && searchFilm()}" placeholder="搜索 动漫,剧集,电影 "
class="search"/>
<el-button @click="searchFilm" :icon="Search"/>
<div class="menu-group">
<div class="search_group">
<input v-model="keyword" @keydown="(e)=>{e.keyCode == 13 && searchFilm()}" placeholder="搜索 动漫,电影 "
class="search"/>
<el-button @click="searchFilm" :icon="Search"/>
</div>
<!-- <a href="/search" class="iconfont icon-search2"/>-->
<b class="iconfont icon-caidan" @click="data.drawer = !data.drawer" />
</div>
</div>
<!--右侧顶级分类导航 -->
<div class="nav_right">
<div class="nav_link">
<a href="/">首页</a>
<template v-for="n in data.nav">
<a :href="`/filmClassify?Pid=${n.id}`">{{ n.name }}</a>
<el-drawer v-model="data.drawer" title="I am the title" direction="ltr" :append-to="el" size="65%" :show-close="false"
class="cus-drawer" @opened="handleDrawer(0)" @closed="handleDrawer(1)" >
<template #header>
<a href="/" class="drawer-title site">{{ data.site.siteName }}</a>
</template>
</div>
<div class="history-link hidden-md-and-down" v-on:mouseenter="handleHistory(true)"
v-on:mouseleave="handleHistory(false)">
<a :href="`/filmClassify?Pid=${nav.variety.id}`">
<b style="font-size: 22px;" class="iconfont icon-history"/>
</a>
<Transition name="fade-slide" duration="300">
<div v-if="data.historyFlag" class="dropdown-container" >
<div class="history-h">
<b class="iconfont icon-record history-h-icon"/>
<span class="history-h-title">历史观看记录</span>
<a v-if="data.historyList.length > 0" class="iconfont icon-clear1 history-del" @click="clearHistory"/>
</div>
<div v-if="data.historyList.length > 0" class="history-c">
<a :href="h.link" class="history-c-item" v-for="h in data.historyList">
<span class="history-c-item-t">{{ h.name }}</span>
<span class="history-c-item-e">{{ h.episode }}</span>
</a>
</div>
<el-empty style="padding: 10px 0;" v-else description="暂无观看记录"/>
</div>
</Transition>
</div>
<!-- <span style="color:#777; font-weight: bold">|</span>-->
<a href="/search" class="hidden-md-and-up">
<el-icon style="font-size: 18px">
<Search/>
</el-icon>
</a>
</div>
<div class="drawer-nav">
<a href="/" class="iconfont icon-home">首页&emsp;</a>
<a v-for="n in data.nav" :href="`/filmClassify?Pid=${n.id}`" :class="`iconfont ${n.name.search('电影') != -1?'icon-film':n.name.search('剧') != -1?'icon-tv':n.name.search('动漫')!= -1?'icon-cartoon':'icon-variety'}`">{{ n.name }}</a>
</div>
</el-drawer>
</template>
<!--弹窗模块,显示按钮对应信息-->
</div>
</template>
<script lang="ts" setup>
import {onMounted, reactive, ref, watch} from "vue";
import {inject, onMounted, reactive, ref, watch} from "vue";
import {useRouter} from "vue-router";
import {Search, CircleClose} from '@element-plus/icons-vue'
import {Search, CircleClose, CircleCloseFilled } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {ApiGet} from "../../utils/request";
import {cookieUtil, COOKIE_KEY_MAP} from "../../utils/cookie";
const handleDrawer = (model:number) => {
switch (model) {
case 0:
document.body.style.overflow="hidden";
return
case 1:
document.body.style.overflow="auto";
return
}
}
// 获取全局属性
const global = inject('global')
// 搜索关键字
const keyword = ref<string>('')
// 弹窗隐藏显示
@@ -70,8 +100,12 @@ const data = reactive({
historyList: [{}],
nav: Array,
site: Object,
drawer: false,
})
// 获取侧边菜单的挂载元素
const el = document.getElementsByClassName('main')[0]
// 加载观看历史记录信息
const handleHistory = (flag: boolean) => {
data.historyFlag = flag
@@ -138,62 +172,103 @@ onMounted(() => {
</script>
<!--移动端适配-->
<style>
/*小尺寸时隐藏状态栏*/
@media (max-width: 768px) {
.nav_right {
display: flex;
width: 100%;
justify-content: space-between;
height: 40px;
}
.nav_link {
display: flex;
justify-content: space-between;
height: 40px;
width: 90%;
overflow-y: scroll;
}
.nav_link a {
white-space: nowrap;
color: #ffffff;
flex-basis: calc(19% - 5px);
padding: 0 10px;
line-height: 40px;
}
.nav_right .hidden-md-and-up {
color: #ffffff;
flex-basis: calc(19% - 5px);
padding: 0 10px;
line-height: 40px;
}
.nav_right a:hover {
color: #ffffff;
/*background-color: transparent;*/
}
.header {
width: 100% !important;
height: 40px;
/* background: radial-gradient(circle, #d275cd, rgba(155, 73, 231, 0.72), #4ad1e5);*/
background: radial-gradient(circle, #d275cd91, rgb(155 73 231 / 65%), #4ad1e5c2);;
}
.nav_left {
display: none !important;
width: 90% !important;
margin: 0 auto;
}
}
</style>
<!--双端适配-->
<style scoped>
/*wrap*/
@media (max-width: 768px) {
.header {
width: 100%;
z-index: 0;
max-height: 40px;
margin: 0 auto;
display: flex;
padding: 0 6%;
height: 40px;
background: rgb(0, 0, 0, 0.25);
/* background: radial-gradient(circle, #d275cd91, rgb(155 73 231 / 65%), #4ad1e5c2);*/
justify-content: space-between;
}
.site {
font-weight: 600;
font-style: italic;
font-size: 24px;
margin-right: 5px;
text-align: center;
background: linear-gradient(118deg, #e91a90, #c965b3, #988cd7, #00acfd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.menu-group{
display: flex;
flex: 1;
justify-content: end;
}
.menu-group .iconfont{
margin-left: 10px;
line-height: 40px;
color: #F3F2EC;
}
.icon-caidan{
font-size: 22px;
}
.icon-caidan:active{
color: #EBD6FB;
}
.icon-search2{
font-size: 26px;
}
.search_group {
width: 60%;
display: flex;
justify-content: start;
padding-top: 5px;
}
.search {
width: 80%;
background-color: transparent;
border: 1px solid #ffffff40;
height: 30px;
border-radius: 15px 0 0 15px;
padding-left: 12px;
color: #F9F6C4;
font-size: 15px;
font-weight: bold;
line-height: 40px;
}
.search::placeholder {
flex: 1;
font-size: 12px;
color: #999999;
}
.search:focus {
outline: none;
}
.search_group button {
flex: 1;
margin: 0;
background-color: transparent;
border: 1px solid #ffffff40;
border-left: none;
color: #F9F6C4;
height: 30px;
padding: 0 6px;
border-radius: 0 15px 15px 0;
font-size: 20px;
}
.search_group button:active {
background: rgb(0 0 0 / 0.1);
border: 1px solid #ffffff40;
}
}
/*pc*/
@media (min-width: 768px) {
.header {
width: 78%;
@@ -264,7 +339,8 @@ onMounted(() => {
font-size: 20px;
}
.search_group button:hover {
background: rgb(0 0 0 / 0.15);
background: rgb(0 0 0 / 0.1);
border: 1px solid #ffffff1a;
}
.nav_right {
@@ -455,4 +531,4 @@ onMounted(() => {
transform: translate3d(-50%, -10px, 0);
}
}
</style>
</style>

7
client/src/components/index/Util.vue
View File

@@ -64,12 +64,15 @@ const changeStyle = (type: string) => {
case 'light':
control.darkTheme = false
localStorage.setItem("theme", 'light')
document.getElementsByClassName('main')[0].style.background = `linear-gradient(45deg, #356697, rgb(105, 68, 140), rgb(151, 109, 133), rgb(92 104 149))`
document.getElementsByClassName('main')[0].classList.remove('dark')
document.getElementsByClassName('main')[0].classList.add('light')
break
case 'dark':
control.darkTheme = true
localStorage.setItem("theme", 'dark')
document.getElementsByClassName('main')[0].style.background = `#16161a`
document.getElementsByClassName('main')[0].classList.remove('light')
document.getElementsByClassName('main')[0].classList.add('dark')
break
case 'more':
control.show = !control.show

3
client/src/style.css
View File

@@ -23,13 +23,12 @@
--text-content-color-highlight: rgb(255, 255, 255);
/*公共颜色*/
--bg-light: #ffffff;
--bg-dark: #21252b;
--active--text-color: #ffb22cd6;
--active--bg-color: #ffb22c0d;
--active--color: #FFBB64;
--text-color-primary: #ffffff;
--content-text-color: #888888;

2
client/src/views/Login.vue
View File

@@ -55,7 +55,7 @@ const login = ()=>{
width: 100vw;
height: 100vh;
color: #343333;
background: url("../assets/image/managebg.png");
background: url("https://pic1.imgdb.cn/item/69e4378a3c746ca9770a0364.png");
}
.container-bg {
background-color: #b07ada;

28
client/src/views/index/CustomPlay.vue
View File

@@ -19,9 +19,6 @@
</template>
<script setup lang="ts">
import {Search} from "@element-plus/icons-vue";
import posterImg from "../../assets/image/play.png";
// import {VideoPlayer} from "@videojs-player/vue";
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import Player from "xgplayer"
@@ -52,7 +49,7 @@ onMounted(() => {
playerInstance.value = new Player({
el: playerContainer.value,
url: data.options.url,
poster: posterImg,
poster: 'https://pic1.imgdb.cn/item/69e4378a3c746ca9770a0363.jpg',
width: "",
height: "",
autoplay: data.options.autoplay,
@@ -133,26 +130,35 @@ const play = () => {
font-size: 16px;
width: 100%;
padding: 0 40px;
border: none;
outline-style: none;
border-radius: 16px 0 0 16px;
border-radius: 50px 0 0 50px;
min-height: 40px;
background: rgba(255,255,255,0.8);
background: rgba(255,255,255,0.1);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
color: #ffffffbd;
border: 1px solid var(--border-color-highlight);
border-right: none;
}
.cus-input:focus{
border: 0;
}
.cus-input::placeholder{
color: rgb(255 255 255 / 0.53);
}
.icon-play {
height: 100%;
font-size: 16px;
border-radius: 0 16px 16px 0;
background: deeppink;
border-radius: 0 50px 50px 0;
background: #f56c6ca3;
color: rgba(255,255,255,0.8);
outline-style: none;
border: 1px solid var(--border-color-highlight);
}
.icon-play:hover {
background: hotpink;
.icon-play:hover, .icon-play:active {
background: #FF69B4A6;
outline-style: none;
border: none;
}
/*播放器样式.*/

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

@@ -10,9 +10,9 @@
<div class="t_item" v-for="k in d.search.sortList ">
<div class="t_title">{{d.search.titles[k]}} <b class="iconfont icon-triangle"/> </div>
<div class="tag_group">
<a href="javascript:void(false)" :class="`tag ${t['Value'] === d.searchParams[k]?'t_active':''}`" v-for="t in d.search.tags[k]" @click="handleTag(k,t['Value'])" >
<span :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>
</span>
</div>
</div>
</div>
@@ -144,7 +144,7 @@ onMounted(() => {
display: block;
font-size: 14px;
padding-bottom: 10px;
margin-bottom: 30px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(255,255,255, 0.12);
}
@@ -177,15 +177,22 @@ onMounted(() => {
.tag {
display: inline-block;
cursor: pointer;
color: var(--text-content-color-light);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 5px;
text-align: center;
}
.tag:hover, .tag:active{
color: #F7C85C;
}
.t_active {
background: rgba(255,255,255,0.12);
color: #ffa500cc!important;
border: none!important;
color: #F7C85C;
vertical-align: top; /* 或 middle，消除基线影响 */
}

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

@@ -1,9 +1,11 @@
<template>
<div class="film" v-show="data.loading">
<!-- 移动端title -->
<div class="hidden-sm-and-up">
<div v-if="global.isMobile">
<div class="title_mt ">
<a class="picture_mt" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
<a class="picture_mt" href="" >
<img class="picture-c" :src="data.detail.picture" alt="load error" @error="handleImg" />
</a>
<div class="title_mt_right">
<h3>{{ data.detail.name }}</h3>
<ul class="tags">
@@ -25,8 +27,10 @@
</div>
</div>
<!-- pc端title-->
<div class="title hidden-sm-and-down ">
<a class="picture" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"><span class="full-c" /></a>
<div v-else class="title" >
<a href="" class="picture">
<img class="pic" :src="data.detail.picture" alt="load error" @error="handleImg" >
</a>
<h2>{{ data.detail.name }}</h2>
<ul class="tags">
<li class="t_c">
@@ -101,11 +105,12 @@
<script setup lang="ts">
import {useRouter} from "vue-router";
import {onBeforeMount, reactive, ref,} from "vue";
import {inject, onBeforeMount, reactive, ref,} from "vue";
import {ApiGet} from "../../utils/request";
import {ElMessage} from 'element-plus'
import {Promotion, CaretRight, Star} from "@element-plus/icons-vue";
import RelateList from "../../components/index/RelateList.vue";
import notFoundImg from '/src/assets/image/404.png'
// 获取路由对象
const router = useRouter()
@@ -148,6 +153,9 @@ const data = reactive({
currentTabId: '',
})
// 获取全局属性
const global = inject('global')
// 对部分信息过长进行处理
const handleLongText = (t: string): string => {
let res = ''
@@ -159,6 +167,10 @@ const handleLongText = (t: string): string => {
return res.trimEnd()
}
// 图片加载失败事件
const handleImg = (e: Event) =>{
e.target && (e.target.src = notFoundImg)
}
// 播放源切换
const changeTab = (id: string) => {
@@ -225,7 +237,7 @@ onBeforeMount(() => {
.picture_mt {
min-width: 35%;
aspect-ratio: 3/4;
max-width: 35%;
margin-right: 12px;
border-radius: 5px;
background-size: cover;
@@ -235,6 +247,12 @@ onBeforeMount(() => {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.picture-c {
width: 100%;
aspect-ratio: 3/4;
border-radius: 5px;
}
.title_mt_right {
flex: 1;
text-align: left;
@@ -257,8 +275,8 @@ onBeforeMount(() => {
.mt_content {
margin-top: 5px;
border-top: 1px solid #777777;
border-bottom: 1px solid #777777;
border-top: 1px solid var(--border-color-highlight);
border-bottom: 1px solid var(--border-color-highlight);
width: 100%;
padding: 5px;
}
@@ -322,38 +340,33 @@ onBeforeMount(() => {
top: 30px;
border-radius: 8px;
background-size: cover;
overflow: hidden;
}
.picture:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.picture .full-c {
display: block;
.picture .pic {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
aspect-ratio: 3/4;
}
.full-c::before {
.picture::before {
content: '';
position: absolute;
top: 0;
left: -30%;
width: 30%;
left: -60%;
width: 25%;
height: 100%;
opacity: 0;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgb(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 100%
);
opacity: 1;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-25deg);
}
.full-c:hover::before {
.picture:hover::before {
left: 130%;
transition: all 0.6s ease-in-out;
opacity: 1;

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

@@ -42,7 +42,7 @@
</el-col>
</el-row>
<el-row class="cus_content">
<el-col :md="24" :lg="20" :xl="20" class="cus_content">
<el-col :md="24" :lg="20" :xl="20">
<!--影片列表-->
<FilmList v-if="item.movies" :col="6" :list="item.movies.slice(0,12)"/>
</el-col>

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

@@ -72,7 +72,6 @@ import {ApiGet} from "@/utils/request";
import {ElMessage} from "element-plus";
import RelateList from "../../components/index/RelateList.vue";
import {Promotion} from "@element-plus/icons-vue";
import posterImg from '../../assets/image/play.png'
import {cookieUtil, COOKIE_KEY_MAP} from '@/utils/cookie'
// 引入视频播放器组件
import Player, {Events, Plugin} from "xgplayer"
@@ -233,7 +232,7 @@ onBeforeMount(() => {
mPlayer = new Player({
el: playerContainer.value,
url: data.options.url,
poster: posterImg,
poster: 'https://pic1.imgdb.cn/item/69e4378a3c746ca9770a0363.jpg',
width: "100%",
height: "100%",
fluid: true,

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

@@ -1,44 +1,46 @@
<template>
<div class="container">
<div class="search_group">
<div class="InputContainer">
<input class="input" placeholder="输入关键字搜索 动漫,剧集,电影" v-model="data.search" @keydown="e=>{e.keyCode==13 && searchMovie()}" />
<div class="border" />
<button class="micButton" @click="searchMovie">
<svg viewBox="0 0 512 512" class="searchIcon"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path>
</svg>
</button>
</div>
<div class="InputContainer">
<input class="input" placeholder="输入关键字搜索 动漫,剧集,电影" v-model="data.search"
@keydown="e=>{e.keyCode==13 && searchMovie()}"/>
<div class="border"/>
<button class="micButton" @click="searchMovie">
<svg viewBox="0 0 512 512" class="searchIcon">
<path
d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path>
</svg>
</button>
</div>
<div class="header-container">
<h3>{{ data.oldSearch }}</h3>
<span>共找到<b>{{ data.page.total }}</b>部与"<b>{{ data.oldSearch }}</b>"相关的影视作品</span>
<h3>{{ data.oldSearch }}</h3>
<span>共找到<b>{{ data.page.total }}</b>部与"<b>{{ data.oldSearch }}</b>"相关的影视作品</span>
</div>
<div class="card-group" v-if="data.list && data.list.length > 0">
<div class="card" v-for="(m,i) in data.list" >
<div class="card" v-for="(m,i) in data.list" @click="play(m.id)" >
<div class="card-left">
<div class="loader" v-if="m.loading" />
<img v-show="!m.loading && !m.error" :src="m.picture" @load="()=>{data.list[i].loading=false}" @error="()=>{data.list[i].error=true}"/>
<div class="loader" v-if="m.loading"/>
<img v-show="!m.loading && !m.error" :src="m.picture" @load="()=>{data.list[i].loading=false}"
@error="()=>{data.list[i].error=true}"/>
<!-- 失败占位 -->
<img v-if="m.error" src="/src/assets/image/404.png" @load="()=>{data.list[i].loading=false}" />
<img v-if="m.error" src="/src/assets/image/404.png" @load="()=>{data.list[i].loading=false}"/>
</div>
<div class="card-right">
<h3>{{ m.name }}</h3>
<p class="tags">
<span class="tag_c">{{ `${m.cName?m.cName:'暂未分类'}` }}</span>
<span>{{ `${m.year?m.year:'未知'}` }}</span>
<span class="tag-area">{{ `${m.area?m.area:'未知'}` }}</span>
<span class="tag_c">{{ `${m.cName ? m.cName : '暂未分类'}` }}</span>
<span>{{ `${m.year ? m.year : '未知'}` }}</span>
<span class="tag-area">{{ `${m.area ? m.area : '未知'}` }}</span>
</p>
<p><em>导演:</em>{{ `${m.director?m.director:'未知'}` }}</p>
<p><em>主演:</em>{{ `${m.actor?m.actor:'未知'}` }}</p>
<p class="blurb"><em>剧情:</em>{{ `${m.blurb.trim()?m.blurb.replace(/\s/g, ''):'暂无简介'}` }}</p>
<p><em>导演:</em>{{ `${m.director ? m.director : '未知'}` }}</p>
<p><em>主演:</em>{{ `${m.actor ? m.actor : '未知'}` }}</p>
<p class="blurb"><em>剧情:</em>{{ `${m.blurb.trim() ? m.blurb.replace(/\s/g, '') : '暂无简介'}` }}</p>
<el-button :icon="CaretRight" @click="play(m.id)">立即播放</el-button>
</div>
</div>
</div>
<el-empty v-if="data.oldSearch != '' && (!data.list || data.list.length == 0) " description="未查询到对应影片"/>
<div class="pagination_container" v-if="data.list && data.list.length > 0" >
<div class="pagination_container" v-if="data.list && data.list.length > 0">
<el-pagination background layout="prev, pager, next"
v-model:current-page="data.page.current"
@current-change="changeCurrent"
@@ -139,70 +141,90 @@ const changeCurrent = (currentVal: number) => {
.InputContainer {
width: 40%;
}
.input {
width: 90%;
}
.micButton {
width: 10%;
}
.card-group {
justify-content: space-between;
}
.card {
width: calc(50% - 4%);
min-height: 230px;
}
.card-left{
.card-left {
width: 23%;
}
.card-right{
.card-right {
width: 70%;
}
.card-right h3{
.card-right h3 {
font-size: 20px;
}
.card-right p {
font-size: 15px;
margin-bottom: 5px;
}
.card-right span {
font-size: 12px;
}
}
/*-------------------------wrap------------------------------*/
@media (max-width: 768px) {
.InputContainer {
width: 80%;
}
.input {
width: 80%;
}
.micButton {
width: 20%;
}
.card-group {
justify-content: center;
}
.card {
width: calc(100% - 10%);
min-height: 185px;
}
.card-left{
.card-left {
width: 38%;
}
.card-right{
.card-right {
width: 60%;
}
.card-right h3{
.card-right h3 {
font-size: 16px;
}
.card-right p {
font-size: 10px;
}
.card-right span {
font-size: 10px;
}
}
/*--------------------Search---------------------------*/
.InputContainer {
height: 40px;
@@ -227,9 +249,11 @@ const changeCurrent = (currentVal: number) => {
color: #ffffffbd;
caret-color: #ffffff;
}
.input::placeholder {
color: rgb(255 255 255 / 0.69);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
@@ -268,21 +292,25 @@ input:-webkit-autofill:active {
background-color: #fde2e245;
transition-duration: .3s;
}
/*-----------------------header-container-------------------------------------------*/
.header-container{
.header-container {
margin: 20px auto;
padding: 0 20px;
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid rgba(255,255,255, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.header-container b {
color: #FFC570;
}
.header-container h3 {
margin: 0 auto;
}
/*-----------------------card style---------------------------------*/
.card-group {
width: 100%;
@@ -290,6 +318,7 @@ input:-webkit-autofill:active {
flex-wrap: wrap
/* aspect-ratio: 9/16;*/
}
.card {
display: flex;
justify-content: start;
@@ -305,23 +334,28 @@ input:-webkit-autofill:active {
overflow: hidden;
transform: translateY(0%);
}
.card:active {
.card:active, .card:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: translateY(-3%);
transition: 0.5s;
}
.card-left {
height: 100%;
}
.card img {
width: 100%;
height: 100%;
border-radius: 6px;
}
.card-right {
text-align: start;
padding-left: 2%;
}
.card-right h3 {
color: #FFC570;
max-width: 100%;
@@ -329,6 +363,7 @@ input:-webkit-autofill:active {
white-space: nowrap;
text-overflow: ellipsis;
}
.card-right .tags {
display: flex;
width: 90%;
@@ -344,6 +379,7 @@ input:-webkit-autofill:active {
white-space: nowrap;
overflow: hidden;
}
.card-right span {
margin-right: 8px;
border-radius: 3px;
@@ -351,15 +387,18 @@ input:-webkit-autofill:active {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-right .tag_c{
.card-right .tag_c {
background: rgba(155, 73, 231, 0.72);
}
.card-right p:not(.blurb) {
max-width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-right .blurb {
max-width: 90%;
display: -webkit-box;
@@ -367,11 +406,13 @@ input:-webkit-autofill:active {
-webkit-line-clamp: 2;
overflow: hidden;
}
.card-right p em {
font-weight: bold;
color: #fff;
margin-right: 5px;
}
.card-right button {
background-color: orange;
border-radius: 20px;
@@ -382,9 +423,11 @@ input:-webkit-autofill:active {
margin-bottom: 10px;
bottom: 0;
}
.card-right h3, span, p {
margin: 3px 0;
}
/*--------------------------image loading----------------------------------------------*/
/* 容器样式 */
.loader {
@@ -393,19 +436,20 @@ input:-webkit-autofill:active {
background-color: transparent;
background-image: linear-gradient(
45deg,
rgba(255,255,255,0.1) 25%,
rgba(255,255,255,0.3) 25%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0.1) 50%,
rgba(255,255,255,0.1) 75%,
rgba(255,255,255,0.3) 75%,
rgba(255,255,255,0.3) 100%
rgba(255, 255, 255, 0.1) 25%,
rgba(255, 255, 255, 0.3) 25%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.1) 75%,
rgba(255, 255, 255, 0.3) 75%,
rgba(255, 255, 255, 0.3) 100%
);
/* 3. 设置条纹的大小 (宽和高相等即为正方形条纹) */
background-size: 20px 20px;
/* 4. 应用动画 */
animation: stripes-move 1.5s linear infinite;
}
/* --- 动画定义 --- */
@keyframes stripes-move {
0% {