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

UI update

Browse Source
This commit is contained in:
mubai
2025-02-10 23:17:23 +08:00
parent ab5a737fa3
commit 86bd33aaf5
17 changed files with 408 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/components.d.ts vendored
View File

@@ -55,7 +55,6 @@ declare module '@vue/runtime-core' {
FilmList: typeof import('./src/components/index/FilmList.vue')['default']
Footer: typeof import('./src/components/index/Footer.vue')['default']
Header: typeof import('./src/components/index/Header.vue')['default']
History: typeof import('./src/components/index/History.vue')['default']
ImageViewer: typeof import('./src/components/Global/ImageViewer.vue')['default']
Loading: typeof import('./src/components/Loading/Loading.vue')['default']
ManageHeader: typeof import('./src/components/Manage/ManageHeader.vue')['default']

2
client/index.html
View File

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

13
client/src/assets/css/film.css
View File

@@ -66,7 +66,9 @@
display: flex;
white-space: nowrap;
padding: 5px 5px 0;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: none;
background: rgba(255,255,255,0.1);
border-radius: 8px 8px 0 0;
}
.play-tab-item{
@@ -80,15 +82,16 @@
}
.tab-active{
background: #2e2e2e;
background: linear-gradient(#00000015, transparent);
border: 1px solid rgba(255, 255, 255, 0.1);
font-weight: 700;
color: orange;
}
.play-list{
background: #2e2e2e;
border: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(#ffffff14, transparent);
padding: 20px;
}
.play-list-item{
overflow-y: auto;
@@ -97,7 +100,7 @@
}
.play-link{
padding: 6px 3px 0 3px;
border: 1px solid rgba(255,255,255,0.28);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 8px;
margin: 5px;
text-align: center;

3
client/src/style.css
View File

@@ -4,7 +4,7 @@
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
color: rgba(255, 255, 255, 0.35);
background-color: #242424;
font-synthesis: none;
@@ -19,6 +19,7 @@
--text-font-content: 12px;
--text-title-color: #FBA518;
--text-content-color: #9499a0;
--text-content-color-light: rgba(255, 255, 255, 0.6);
/*公共颜色*/

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

@@ -22,7 +22,7 @@ import {provide} from "vue";
// 在全局注入一个当前是pc还是wrap的状态
const userAgent = navigator.userAgent.toLowerCase()
let isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent)
let isMobile = /Mobile|Tablet|Android|iPhone|iPad|iPod|BlackBerry|webOS|Windows Phone|SymbianOS|IEMobile|Opera Mini/i.test(userAgent)
// 传递一个全局状态对象
provide('global', {isMobile: isMobile})

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

@@ -212,6 +212,7 @@ onBeforeMount(() => {
<style scoped>
@media (max-width: 768px) {
.title_mt {
width: 100%;
padding: 0 3px;
display: flex;
flex-direction: row;
@@ -220,16 +221,15 @@ onBeforeMount(() => {
}
.picture_mt {
width: 100%;
height: 180px;
max-height: 180px;
min-width: 30%;
margin-right: 12px;
border-radius: 8px;
border-radius: 5px;
background-size: cover;
flex: 1;
}
.title_mt_right {
flex: 1.5;
flex: 1;
text-align: left;
}
@@ -290,15 +290,16 @@ onBeforeMount(() => {
.title {
width: 100%;
border-radius: 10px;
background: #2e2e2e;
background: linear-gradient(#fff2, transparent);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 5px 30px 30px 30px;
position: relative;
}
.title > h2 {
text-align: left;
color: #888888;
color: var(--text-content-color-light);
}
.picture {
@@ -324,10 +325,11 @@ onBeforeMount(() => {
.tags > li {
padding: 6px 10px;
border-radius: 5px;
background: rgba(66, 66, 66);
background: linear-gradient(#ffffff14, transparent);
border: 1px solid rgba(255, 255, 255, 0.1);
margin: 0 8px;
font-size: 12px;
color: #888888;
color: var(--text-content-color-light);
}
.tags > .t_c {
@@ -344,6 +346,7 @@ onBeforeMount(() => {
font-size: 14px;
margin: 20px 0;
max-width: 60%;
color: var(--text-content-color-light);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
@@ -353,7 +356,7 @@ onBeforeMount(() => {
.title p span {
font-size: 15px;
font-weight: bold;
color: #888888;
color: var(--text-content-color-light);
margin-right: 5px;
}

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

@@ -8,11 +8,13 @@
<h5 class="card-title"> {{ h.name }}</h5>
<div class="card-content">
<p class="card-episode">{{ `已观看: ${h.progress}` }}</p>
<p class="card-time "><b :class="`iconfont ${h.devices?'icon-mobile':'icon-pc1'}`" />{{ h.time }}</p>
<p class="card-time "><b :class="`iconfont ${h.devices?'icon-mobile':'icon-pc1'}`"/>{{ h.time }}</p>
<p class="card-episode">{{ h.episode }}</p>
</div>
</div>
<a @click="cleanHistory(h.id)" class="iconfont icon-cancel1"/>
</div>
<el-empty v-if="data.historyList && data.historyList.length <= 0" style="padding: 10px 0;" description="暂无观看记录"/>
</div>
</template>
@@ -26,7 +28,20 @@ const data = reactive({
const global = inject<any>('global')
onMounted(() => {
// 清除对应的历史记录
const cleanHistory = (id: number) => {
console.log(id)
// 获取cookie中的filmHistory
let history = cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY) ? JSON.parse(cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY)) : null
// 删除 cookie 中的对应记录
delete history[id]
// 将需改后的历史记录存储到cookie中
cookieUtil.setCookie(COOKIE_KEY_MAP.FILM_HISTORY, JSON.stringify(history))
// 更新记录数据
getHistory()
}
const getHistory = () => {
// 获取cookie中的filmHistory
let historyMap = cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY) ? JSON.parse(cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY)) : null
let arr = []
@@ -37,12 +52,18 @@ onMounted(() => {
arr.sort((item1, item2) => item2.timeStamp - item1.timeStamp)
}
data.historyList = arr
console.log(arr)
}
onMounted(() => {
getHistory()
})
</script>
<style scoped>
.container {
padding: 0 5px;
}
.card {
width: 100%;
@@ -52,19 +73,20 @@ onMounted(() => {
flex-direction: row;
background: linear-gradient(#fff2, transparent);
border: 1px solid rgba(255, 255, 255, 0.1);
/* border-bottom: 1px solid rgba(255, 255, 255, 0.1);*/
/* border-bottom: 1px solid rgba(255, 255, 255, 0.1);*/
margin: 5px auto;
border-radius: 5px;
}
.card-left {
flex-basis: 27%;
min-width: 27%;
display: flex;
}
.card-right {
flex-basis: 73%;
max-width: 73%;
flex-basis: 68%;
max-width: 68%;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -101,10 +123,34 @@ onMounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
}
.iconfont {
vertical-align: bottom;
margin-right: 10px;
}
.icon-cancel1 {
flex-basis: 5%;
margin-right: 0;
color: var(--text-content-color);
}
:deep(.el-empty) {
--el-empty-fill-color-1: rgba(155, 73, 231, 0.72);
--el-empty-fill-color-2: #67d9e891;
--el-empty-fill-color-3: rgb(106 19 187 / 72%);
--el-empty-fill-color-4: #67d9e8;
--el-empty-fill-color-5: #5abcc9;
--el-empty-fill-color-6: #9fb2d9;
--el-empty-fill-color-7: #61989f;
--el-empty-fill-color-8: #697dc5;
--el-empty-fill-color-9: rgb(43 51 63 / 44%);
margin-top: 20vh;
}
</style>

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

@@ -1,6 +1,6 @@
<template>
<div class="container">
<div v-if="true" class="hidden-sm-and-up banner_wrap" @touchstart="touchS" @touchend="touchE" @click="skipLink" >
<div v-if="global.isMobile" class=" banner_wrap" @touchstart="touchS" @touchend="touchE" @click="skipLink" >
<el-carousel v-model="data.banner.current" ref="wrap" :pause-on-hover="false" :interval="5000" trigger="hover" height="200px" arrow="never" @change="carousel" >
<el-carousel-item v-for="item in data.info.banners" :key="item" >
<el-image style="width: 100%; height: 100%;" :src="item.poster" fit="fill"/>
@@ -8,7 +8,7 @@
</el-carousel-item>
</el-carousel>
</div>
<div v-if="true" class="banner hidden-sm-and-down"
<div v-if="!global.isMobile" class="banner"
:style="{background:`url(${data.banner.current.poster})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover'}" @click="skipLink">
<div class="preview">
<el-carousel @change="carousel" :interval="5000" height="240px" arrow="always">
@@ -33,12 +33,12 @@
<a :href="`/filmClassify?Pid=${item.nav.id}`">{{ item.nav.name }}</a>
</el-col>
<el-col :span="12">
<ul class="nav_ul">
<ul v-if="!global.isMobile" class="nav_ul">
<template v-for="(c,i) in item.nav.children">
<li class="nav_category hidden-md-and-down" v-if="c.show && i < 6"><a
<li class="nav_category" v-if="c.show && i < 6"><a
:href="`/filmClassifySearch?Pid=${c.pid}&Category=${c.id}`">{{ c.name }}</a></li>
</template>
<li class="nav_category hidden-md-and-down"><a :href="`/filmClassify?Pid=${item.nav.id}`">更多 ></a></li>
<li class="nav_category"><a :href="`/filmClassify?Pid=${item.nav.id}`">更多 ></a></li>
</ul>
</el-col>
</el-row>
@@ -47,7 +47,7 @@
<!--影片列表-->
<FilmList v-if="item.movies" :col="6" :list="item.movies.slice(0,12)"/>
</el-col>
<el-col :md="0" :lg="4" :xl="4" class="hidden-md-and-down content_right">
<el-col v-if="!global.isMobile" :md="0" :lg="4" :xl="4" class="content_right hidden-sm-and-down">
<h3 class="hot_title">🔥热播{{ item.nav.name }}</h3>
<template v-for="(m,i) in item.hot.slice(0,12)">
<div class="content_right_item">
@@ -65,7 +65,7 @@
<script lang="ts" setup>
// 顶部轮播图
import 'element-plus/theme-chalk/display.css'
import {onBeforeMount, reactive, ref} from "vue";
import {inject, onBeforeMount, reactive, ref} from "vue";
import {ApiGet} from "../../utils/request";
import FilmList from "../../components/index/FilmList.vue";
import {ElMessage} from "element-plus";
@@ -79,8 +79,7 @@ const data = reactive({
}
})
const router = useRouter()
const global = inject<any>('global')
// pc 背景图同步响应
const carousel = (index: number) => {

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

@@ -257,12 +257,13 @@ const saveFilmHisroy = () => {
if (data.options.src.length > 0) {
// 处理播放历史要记录的影片相关信息
let player = document.getElementsByTagName("video")[0]
let historys = cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY) ? JSON.parse(cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY)) : {}
let history = cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY) ? JSON.parse(cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY)) : {}
let link = `/play?id=${data.detail.id}&source=${data.currentTabId}&episode=${data.current.index}&currentTime=${player.currentTime}`
// 处理播放时长
let timeStamp = new Date().getTime()
let time = fmt.dateFormat(timeStamp)
let progress = `${fmt.secondToTime(player.currentTime)} / ${fmt.secondToTime(player.duration)}`
historys[data.detail.id] = {
history[data.detail.id] = {
id: data.detail.id,
name: data.detail.name,
picture: data.detail.picture,
@@ -276,10 +277,8 @@ const saveFilmHisroy = () => {
progress: progress,
devices: global.isMobile
}
// 处理播放时长
cookieUtil.setCookie(COOKIE_KEY_MAP.FILM_HISTORY, JSON.stringify(historys))
// 将历史记录添加到cookie中
cookieUtil.setCookie(COOKIE_KEY_MAP.FILM_HISTORY, JSON.stringify(history))
}
}
@@ -421,7 +420,8 @@ onBeforeMount(() => {
.tags a {
padding: 5px 10px;
background-color: rgba(155, 73, 231, 0.72);
/* background-color: rgba(155, 73, 231, 0.72);*/
background: linear-gradient( #9B49E7B8, #9B49E799);
color: #c4c2c2;
font-size: 13px;
border-radius: 6px;
@@ -430,7 +430,9 @@ onBeforeMount(() => {
.tags span {
padding: 6px 12px;
background-color: #404042;
/*background-color: #404042;*/
background: linear-gradient(#fff2, #ffffff1a);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #b5b2b2;
border-radius: 5px;
margin: 0 8px;
@@ -511,7 +513,7 @@ onBeforeMount(() => {
.tags a {
padding: 5px 10px;
color: #c4c2c2;
background-color: rgba(155, 73, 231, 0.72);
background: linear-gradient( #9B49E7B8, #9B49E799);
font-size: 13px;
border-radius: 6px;
margin-right: 3px;
@@ -531,7 +533,7 @@ onBeforeMount(() => {
.tags span {
padding: 6px 10px;
background-color: #404042;
background: linear-gradient(#fff2, #ffffff1a);
color: #b5b2b2;
border-radius: 5px;
margin: 0 3px;

4
client/vite.config.ts
View File

@@ -12,8 +12,8 @@ export default defineConfig({
port: 3600,
proxy: {
"/api": {
target: `http://127.0.0.1:3601`,
// target: `http://1.94.30.26:3601`,
// target: `http://127.0.0.1:3601`,
target: `http://113.44.5.201:3601`,
changeOrigin: true, // 允许跨域
rewrite: path => path.replace(/^\/api/, '')
}