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

developing

Browse Source
This commit is contained in:
mubai
2024-11-24 18:05:29 +08:00
parent 1f37515a39
commit cdd93d2c42
10 changed files with 199 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/components.d.ts vendored
View File

@@ -55,6 +55,7 @@ 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_cesmizkmqka.css">
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_mevt6vhsvc.css">
</head>
<body>
<div id="app"></div>

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

@@ -96,7 +96,7 @@
flex-wrap: wrap;
}
.play-link{
padding: 3px;
padding: 6px 3px 0 3px;
border: 1px solid rgba(255,255,255,0.28);
border-radius: 8px;
margin: 5px;
@@ -113,3 +113,47 @@
background: #b36d3824;
}
/*film item loading style */
.loading-wave {
height: 8px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.loading-bar {
width: 3px;
margin: 0 1px;
background-color: #FFB22C;
border-radius: 2px 2px 0 0;
animation: loading-wave-animation 1s ease-in-out infinite;
}
.loading-bar:nth-child(2) {
animation-delay: 0.1s;
}
.loading-bar:nth-child(3) {
animation-delay: 0.2s;
}
.loading-bar:nth-child(4) {
animation-delay: 0.3s;
}
@keyframes loading-wave-animation {
0% {
height: 3px;
}
50% {
height: 10px;
}
100% {
height: 3px;
}
}

79
client/src/components/index/Footer.vue
View File

@@ -1,23 +1,82 @@
<template>
<div class="custom-footer">
本站所有内容均来自互联网分享站点所提供的公开引用资源，未提供资源上传、存储服务。
<div class="custom-footer">
<!--Mobile bottom Btn Group-->
<div v-if="global.isMobile" class="nav-bottom">
<a href="/"><b class="iconfont icon-ziyuan"/>首页</a>
<a href="javascript:void(0)"><b class="iconfont icon-gengxin"/>更新</a>
<a href="/history"><b class="iconfont icon-lishi"/>历史</a>
<a href="javascript:void(0)"><b class="iconfont icon-shoucang2"/>收藏</a>
<a href="/manage"><b class="iconfont icon-ziyuan-copy"/>我的</a>
</div>
<p>本站所有内容均来自互联网分享站点所提供的公开引用资源，未提供资源上传、存储服务。</p>
</div>
</template>
<script lang="ts" setup>
// 获取全局状态对象
import {inject} from "vue";
const global = inject('global')
</script>
<style scoped>
.custom-footer {
text-align: center;
width: 100%;
height: 30px;
text-align: center;
line-height: 15px;
font-size: 15px;
color: #888888;
margin-top: 25px;
text-align: center;
width: 100%;
height: 30px;
margin-top: 25px;
}
.custom-footer p {
line-height: 15px;
font-size: 15px;
color: #888888;
}
/*底部导航*/
.nav-bottom {
display: flex;
justify-content: space-between;
position: fixed;
width: 100%;
bottom: 0;
background: rgba(0, 0, 0, 0.65);
}
.nav-bottom > a {
display: flex;
flex-direction: column;
color: var(--content-text-color);
flex-basis: 20%;
font-size: 10px;
}
.iconfont {
font-size: 24px;
}
.icon-ziyuan {
color: #B1AFFF;
}
.icon-gengxin {
color: #5AB2FF;
}
.icon-lishi {
color: #FFBE98;
}
.icon-shoucang2 {
color: #6AD4DD;
}
.icon-ziyuan-copy {
color: #E89ABEFF;
}
</style>

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

@@ -49,20 +49,14 @@
</el-icon>
</a>
<!--Mobile bottom Btn Group-->
<div v-if="global.isMobile" class="nav-bottom" >
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</div>
<!--弹窗模块,显示按钮对应信息-->
</div>
</template>
<script lang="ts" setup>
import {inject, onMounted, reactive, ref, watch} from "vue";
import { onMounted, reactive, ref, watch} from "vue";
import {useRouter} from "vue-router";
import {Search, CircleClose} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
@@ -78,8 +72,7 @@ const data = reactive({
nav: Array,
site: Object,
})
// 获取全局状态对象
const global = inject('global')
// 加载观看历史记录信息
const handleHistory = (flag: boolean) => {

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

@@ -26,6 +26,7 @@ import FileUpload from "../views/manage/file/FileUpload.vue";
import FilmAdd from "../views/manage/film/FilmAdd.vue";
import CustomPlay from "../views/index/CustomPlay.vue";
import Banners from "../views/manage/system/Banners.vue";
import FilmHistory from "../views/index/FilmHistory.vue";
// 2. 定义一个路由
@@ -42,6 +43,7 @@ const routes = [
{path: 'filmClassify', component: FilmClassify},
{path: 'filmClassifySearch', component: FilmClassifySearch},
{path: '/custom/player', component: CustomPlay},
{path: '/history', component: FilmHistory},
]
},
{path: '/login', component: Login},

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

@@ -48,6 +48,10 @@ provide('global', {isMobile: isMobile})
top: 0;
}
:deep(.el-footer) {
--el-footer-padding: 0 0;
}
@media (min-width: 768px) {
.el-main {

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

@@ -82,7 +82,6 @@
<a class="play-link" v-for="(v,i) in item.linkList" href="javascript:;"
@click="play({source: item.id, episode: i})">{{ v.episode }}</a>
</div>
</div>
</div>
</div>
@@ -400,4 +399,5 @@ onBeforeMount(() => {
margin-right: 10px;
}
</style>
</style>

57
client/src/views/index/FilmHistory.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div class="container">
<div class="card" v-for="item in data.historyList">
<div class="card-left">
<a :href="item.link"></a>
</div>
<div class="card-right">
<h5>{{item.name}}</h5>
<span>{{item.episode}}</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {onMounted, reactive} from "vue";
import {COOKIE_KEY_MAP, cookieUtil} from "../../utils/cookie";
const data = reactive({
historyList: [{}]
})
onMounted(() => {
// 获取cookie中的filmHistory
let historyMap = cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY) ? JSON.parse(cookieUtil.getCookie(COOKIE_KEY_MAP.FILM_HISTORY)) : null
let arr = []
if (historyMap) {
for (let k in historyMap) {
arr.push(historyMap[k])
}
arr.sort((item1, item2) => item2.timeStamp - item1.timeStamp)
}
data.historyList = arr
console.log(arr)
})
</script>
<style scoped>
.card {
border: 1px solid red;
display: flex;
flex-direction: row;
}
.card-left {
flex-basis: 20%;
border: 1px solid greenyellow;
}
.card-right {
flex-basis: 80%;
border: 1px solid deepskyblue;
}
</style>

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

@@ -49,7 +49,15 @@
<div class="play-list">
<div class="play-list-item" v-show="data.currentTabId == item.id" v-for="item in data.detail.list">
<a :class="`play-link ${v.link == data.current.link?'play-link-active':''}`" v-for="(v,i) in item.linkList"
href="javascript:;" @click="playChange({sourceId: item.id, episodeIndex: i, target: this})">{{ v.episode }}</a>
href="javascript:;" @click="playChange({sourceId: item.id, episodeIndex: i, target: this})">{{ v.episode }}
<div class="loading-wave" v-if="v.link == data.current.link" >
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<div class="loading-wave" v-else></div>
</a>
</div>
</div>
</div>
@@ -538,4 +546,9 @@ onBeforeMount(() => {
background: rgb(0, 0, 0, 0.2);
}
}
</style>
</style>