mirror of
https://github.com/ProudMuBai/GoFilm.git
synced 2026-05-07 04:07:28 +08:00
init
This commit is contained in:
lizhuang
23
client/src/components/Footer.vue
Normal file
23
client/src/components/Footer.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="custom-footer">
|
||||
本站所有内容均来自互联网分享站点所提供的公开引用资源，未提供资源上传、存储服务。
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
203
client/src/components/Header.vue
Normal file
203
client/src/components/Header.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<!-- 左侧logo以及搜索 -->
|
||||
<div class="nav_left">
|
||||
<!-- <img class="logo" src="/src/assets/logo.png">-->
|
||||
<a href="/" style="font-weight: 600;font-style: italic;font-size: 24px;margin-right: 5px">Boat</a>
|
||||
<div class="search_group">
|
||||
<input v-model="keyword" placeholder="搜索 动漫,剧集,电影 " class="search"/>
|
||||
<el-button @click="searchFilm" :icon="Search"/>
|
||||
</div>
|
||||
</div>
|
||||
<!--右侧顶级分类导航 -->
|
||||
<div class="nav_right">
|
||||
<el-link :underline="false" href="/">首页</el-link>
|
||||
<el-link :underline="false" :href="`/categoryFilm?pid=${nav.film.id}`">电影</el-link>
|
||||
<el-link :underline="false" :href="`/categoryFilm?pid=${nav.tv.id}`">剧集</el-link>
|
||||
<el-link :underline="false" :href="`/categoryFilm?pid=${nav.cartoon.id}`">动漫</el-link>
|
||||
<el-link :underline="false" :href="`/categoryFilm?pid=${nav.variety.id}`">综艺</el-link>
|
||||
<!-- <span style="color:#777; font-weight: bold">|</span>-->
|
||||
<el-link href="/search" class="hidden-md-and-up" :underline="false">
|
||||
<el-icon style="font-size: 18px">
|
||||
<Search/>
|
||||
</el-icon>
|
||||
</el-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
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";
|
||||
import {ApiGet} from "../utils/request";
|
||||
|
||||
//
|
||||
const keyword = ref<string>('')
|
||||
|
||||
|
||||
// 从父组件获取当前路由对象
|
||||
const router = useRouter()
|
||||
// 影片搜索
|
||||
const searchFilm = () => {
|
||||
if (keyword.value.length <= 0) {
|
||||
ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1500})
|
||||
return
|
||||
}
|
||||
location.href = `/search?search=${keyword.value}`
|
||||
// router.push({path: '/search', query:{search: keyword.value}, replace: true})
|
||||
}
|
||||
|
||||
// 导航栏挂载完毕时发送一次请求拿到对应的分类id数据
|
||||
const nav = reactive({
|
||||
cartoon: {},
|
||||
film: {},
|
||||
tv: {},
|
||||
variety: {},
|
||||
})
|
||||
onMounted(() => {
|
||||
ApiGet('/navCategory').then((resp: any) => {
|
||||
if (resp.status === 'ok') {
|
||||
nav.tv = resp.data.tv
|
||||
nav.film = resp.data.film
|
||||
nav.cartoon = resp.data.cartoon
|
||||
nav.variety = resp.data.variety
|
||||
} else {
|
||||
ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1000})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!--移动端适配-->
|
||||
<style>
|
||||
/*小尺寸时隐藏状态栏*/
|
||||
@media (max-width: 650px) {
|
||||
.nav_right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/*display: none!important;*/
|
||||
}
|
||||
|
||||
.nav_right a {
|
||||
color: #ffffff;
|
||||
flex-basis: calc(19% - 5px);
|
||||
padding: 0 10px;
|
||||
line-height: 40px;
|
||||
/*border-radius: 5px;*/
|
||||
/*border: 1px solid rebeccapurple;*/
|
||||
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.nav_left {
|
||||
display: none !important;
|
||||
width: 90% !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
@media (min-width: 650px) {
|
||||
.header {
|
||||
width: 78%;
|
||||
z-index: 0;
|
||||
max-height: 40px;
|
||||
line-height: 60px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav_left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/*搜索栏*/
|
||||
.search_group {
|
||||
width: 80%;
|
||||
margin: 10px auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 10;
|
||||
background-color: #2e2e2e !important;
|
||||
border: none !important;
|
||||
height: 40px;
|
||||
border-radius: 6px 0 0 6px;
|
||||
padding-left: 20px;
|
||||
color: #c9c4c4;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.search::placeholder {
|
||||
font-size: 15px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.search:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search_group button {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
background-color: #2e2e2e;
|
||||
color: rgb(171, 44, 68);
|
||||
border: none !important;
|
||||
height: 40px;
|
||||
border-radius: 0 6px 6px 0;
|
||||
font-size: 20px;
|
||||
/*margin-bottom: 2px*/
|
||||
}
|
||||
|
||||
.nav_right {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.nav_right a {
|
||||
min-width: 60px;
|
||||
height: 40px;
|
||||
line-height: 60px;
|
||||
margin: 10px 10px;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav_right a:hover {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
154
client/src/components/RelateList.vue
Normal file
154
client/src/components/RelateList.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h2 class="title">相关影片</h2>
|
||||
<div class="content">
|
||||
<div class="item" v-for="m in relateList">
|
||||
<a :href="`/filmDetail?link=${m.id}`" class="cus_content_link"
|
||||
:style="{backgroundImage: `url('${m.picture}')`}">
|
||||
<span class="cus_tag hidden-md-and-down">{{ m.year }}</span>
|
||||
<span class="cus_tag hidden-md-and-down">{{ m.cName }}</span>
|
||||
<span class="cus_tag hidden-md-and-down">{{ m.area }}</span>
|
||||
<span class="cus_remark hidden-md-and-up">{{ m.remarks }}</span>
|
||||
</a>
|
||||
<a :href="`/filmDetail?link=${m.id}`"
|
||||
class=" content_text_tag">{{ m.name }}</a>
|
||||
<span class="cus_remark hidden-md-and-down">{{ m.remarks }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
relateList : []
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media (min-width: 650px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
margin-top: 36px;
|
||||
}
|
||||
.title {
|
||||
padding: 0 0 5px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid #777777;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.container .item {
|
||||
width: calc(14% - 18px);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.cus_content_link {
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
padding-top: 125%;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cus_tag {
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
padding: 0 3px;
|
||||
margin: 0 0 10px 8px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.content_text_tag {
|
||||
display: block;
|
||||
font-size: 13px !important;
|
||||
color: rgb(221, 221, 221);
|
||||
padding: 2px 2px 2px 2px !important;
|
||||
text-align: left;
|
||||
max-width: 80%;
|
||||
max-height: 20px;
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 使用省略号表示被截断的部分 */
|
||||
}
|
||||
.cus_remark {
|
||||
display: block;
|
||||
color: #888888;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
margin-top: 36px;
|
||||
}
|
||||
.title {
|
||||
padding: 0 0 5px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid #777777;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.container .item {
|
||||
width: calc(33% - 5px);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.cus_content_link {
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
padding-top: 125%;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cus_tag {
|
||||
text-align: center;
|
||||
color: rgb(255, 255, 255);
|
||||
padding: 0 3px;
|
||||
margin: 0 0 10px 8px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.content_text_tag {
|
||||
font-size: 12px !important;
|
||||
color: rgb(221, 221, 221);
|
||||
width: 100%;
|
||||
padding: 2px 0 2px 0 !important;
|
||||
text-align: left;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cus_remark {
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
105
client/src/components/Util.vue
Normal file
105
client/src/components/Util.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="util">
|
||||
<el-collapse-transition>
|
||||
<div v-show="control.show">
|
||||
<a href="javascript:;" @click="changeStyle('top')">
|
||||
<el-icon>
|
||||
<ArrowUp />
|
||||
</el-icon>
|
||||
</a>
|
||||
<a v-if="control.darkTheme" href="javascript:;" @click="changeStyle('light')">
|
||||
<el-icon>
|
||||
<Sunny/>
|
||||
</el-icon>
|
||||
</a>
|
||||
<a v-if="!control.darkTheme" href="javascript:;" @click="changeStyle('dark')">
|
||||
<el-icon>
|
||||
<Moon/>
|
||||
</el-icon>
|
||||
</a>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
<a href="javascript:;" @click="changeStyle('more')" class="more">
|
||||
<el-icon>
|
||||
<MoreFilled/>
|
||||
</el-icon>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ArrowUp,Sunny, Moon, MoreFilled} from '@element-plus/icons-vue'
|
||||
import {onBeforeMount, onMounted, onUnmounted, reactive} from "vue";
|
||||
|
||||
const control = reactive({
|
||||
show: false,
|
||||
darkTheme: true,
|
||||
})
|
||||
|
||||
//
|
||||
onMounted(()=>{
|
||||
|
||||
changeStyle(localStorage.getItem("theme")+'')
|
||||
})
|
||||
|
||||
|
||||
const changeStyle = (type:string)=>{
|
||||
switch (type) {
|
||||
case 'top':
|
||||
let top = document.documentElement.scrollTop
|
||||
if (top > 0) {
|
||||
// 创建定时器，平滑滚动
|
||||
const interval = setInterval(() => {
|
||||
document.documentElement.scrollTop -= 10;
|
||||
if (document.documentElement.scrollTop === 0) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 5);
|
||||
}
|
||||
break
|
||||
case 'light':
|
||||
control.darkTheme = false
|
||||
localStorage.setItem("theme", 'light')
|
||||
document.getElementsByClassName('main')[0].style.background = `radial-gradient(circle, #C147E9, #810CA8, #2D033B)`
|
||||
break
|
||||
case 'dark':
|
||||
control.darkTheme = true
|
||||
localStorage.setItem("theme", 'dark')
|
||||
document.getElementsByClassName('main')[0].style.background = `rgb(34,34,34)`
|
||||
break
|
||||
case 'more':
|
||||
control.show = !control.show
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*窗口工具栏设置*/
|
||||
.util {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 15%;
|
||||
width: 35px;
|
||||
}
|
||||
.util a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 3px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0,0,0,0.35);
|
||||
}
|
||||
.util a:hover{
|
||||
background: #d329a4;
|
||||
}
|
||||
:deep(.el-icon) {
|
||||
font-size: 18px;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
}
|
||||
.more {
|
||||
background: rgb(238, 150, 0) !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user