mirror of
https://github.com/ProudMuBai/GoFilm.git
synced 2026-04-14 19:27:31 +08:00
SearchFilm Page Refactor
This commit is contained in:
@@ -16,7 +16,7 @@
|
||||
font-weight: bold;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: #2e2e2e !important;
|
||||
background: rgba(255,255,255,0.3) !important;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
/*margin: 0 3px!important;*/
|
||||
@@ -30,7 +30,7 @@
|
||||
font-weight: bold;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: #2e2e2e !important;
|
||||
background: rgba(255,255,255,0.3) !important;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@@ -39,7 +39,7 @@
|
||||
font-weight: bold;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: #2e2e2e !important;
|
||||
background: rgba(255,255,255,0.3) !important;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@@ -48,7 +48,7 @@
|
||||
font-weight: bold;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: #2e2e2e !important;
|
||||
background: rgba(255,255,255,0.3) !important;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -25,7 +25,6 @@
|
||||
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"
|
||||
|
||||
@@ -1,47 +1,56 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search_group">
|
||||
<input v-model="data.search" @keydown="e=>{e.keyCode==13 && searchMovie()}" placeholder="输入关键字搜索 动漫,剧集,电影 " class="search"/>
|
||||
<el-button @click="searchMovie" :icon="Search" style="" />
|
||||
<div class="container">
|
||||
<div class="search_group">
|
||||
<div class="InputContainer">
|
||||
<input name="text" 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>
|
||||
<div class="header-container">
|
||||
<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-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}"/>
|
||||
<!-- 失败占位 -->
|
||||
<img v-if="m.error" src="/src/assets/image/404.png" @load="()=>{data.list[i].loading=false}" />
|
||||
</div>
|
||||
<div v-if="data.list && data.list.length > 0 " class="search_res">
|
||||
<div class="title">
|
||||
<h2>{{ data.oldSearch }}</h2>
|
||||
<p>共找到{{ data.page.total }}部与"{{ data.oldSearch }}"相关的影视作品</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="film_item" v-for="m in data.list">
|
||||
<a :href="`/filmDetail?link=${m.id}`" :style="{backgroundImage: `url('${m.picture}')`}"></a>
|
||||
<div class="film_intro">
|
||||
<h3>{{ m.name }}</h3>
|
||||
<p class="tags">
|
||||
<span class="tag_c">{{ m.cName }}</span>
|
||||
<span>{{ m.year }}</span>
|
||||
<span>{{ m.area }}</span>
|
||||
</p>
|
||||
<p><em>导演:</em>{{ m.director }}</p>
|
||||
<p><em>主演:</em>{{ m.actor }}</p>
|
||||
<p class="blurb"><em>剧情:</em>{{ m.blurb.replaceAll(' ', '') }}</p>
|
||||
<el-button :icon="CaretRight" @click="play(m.id)">立即播放</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination_container">
|
||||
<el-pagination background layout="prev, pager, next"
|
||||
v-model:current-page="data.page.current"
|
||||
@current-change="changeCurrent"
|
||||
:pager-count="5"
|
||||
:background="true"
|
||||
:page-size="data.page.pageSize"
|
||||
:total="data.page.total"
|
||||
:prev-icon="ArrowLeftBold"
|
||||
:next-icon="ArrowRightBold"
|
||||
hide-on-single-page
|
||||
class="pagination"/>
|
||||
</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>
|
||||
</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 ">
|
||||
<el-pagination background layout="prev, pager, next"
|
||||
v-model:current-page="data.page.current"
|
||||
@current-change="changeCurrent"
|
||||
:pager-count="5"
|
||||
:page-size="data.page.pageSize"
|
||||
:total="data.page.total"
|
||||
:prev-icon="ArrowLeftBold"
|
||||
:next-icon="ArrowRightBold"
|
||||
hide-on-single-page
|
||||
class="pagination"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -56,321 +65,338 @@ import {ElMessage} from "element-plus";
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const data = reactive({
|
||||
list: [],
|
||||
page: {
|
||||
current: 0,
|
||||
},
|
||||
oldSearch: '',
|
||||
search: '',
|
||||
list: [],
|
||||
page: {
|
||||
current: 0,
|
||||
pageSize: 0,
|
||||
total: 0,
|
||||
},
|
||||
oldSearch: '',
|
||||
search: '',
|
||||
})
|
||||
// 监听路由参数的变化
|
||||
watch(
|
||||
[route],
|
||||
(oldRoute, newRoute) => {
|
||||
refreshPage(router.currentRoute.value.query.search, router.currentRoute.value.query.current)
|
||||
refreshPage(router.currentRoute.value.query.search, router.currentRoute.value.query.current)
|
||||
},
|
||||
)
|
||||
|
||||
// 点击播放
|
||||
const play = (id: string | number) => {
|
||||
location.href = `/play?id=${id}&episode=0&source=0`
|
||||
location.href = `/play?id=${id}&episode=0&source=0`
|
||||
}
|
||||
|
||||
// 搜索按钮事件
|
||||
const searchMovie = ()=>{
|
||||
if (data.search.length <=0) {
|
||||
ElMessage.error({message: '搜索信息不能为空', duration:1000})
|
||||
return
|
||||
}
|
||||
location.href = location.href = `/search?search=${data.search}`
|
||||
const searchMovie = () => {
|
||||
if (data.search.length <= 0) {
|
||||
ElMessage.error({message: '搜索信息不能为空', duration: 1000})
|
||||
return
|
||||
}
|
||||
location.href = location.href = `/search?search=${data.search}`
|
||||
}
|
||||
|
||||
// 执行搜索请求
|
||||
const refreshPage = (keyword: any, current: any) => {
|
||||
ApiGet('/searchFilm', {keyword: keyword, current: current}).then((resp: any) => {
|
||||
if (resp.code == 0) {
|
||||
data.list = resp.data.list
|
||||
data.page = resp.data.page
|
||||
data.oldSearch = keyword
|
||||
} else {
|
||||
ElMessage.warning({message: resp.msg, duration: 1000})
|
||||
}
|
||||
ApiGet('/searchFilm', {keyword: keyword, current: current}).then((resp: any) => {
|
||||
if (resp.code == 0) {
|
||||
data.list = resp.data.list.map((item: any) => {
|
||||
item.blurb = item.blurb.replace(/<[^>]*>/g, '')
|
||||
// 给列表内的每个元素添加加载中和失败状态
|
||||
item.loading = true
|
||||
item.error = false
|
||||
return item
|
||||
})
|
||||
data.page = resp.data.page
|
||||
data.oldSearch = keyword
|
||||
data.search = keyword
|
||||
} else {
|
||||
ElMessage.warning({message: resp.msg, duration: 1000})
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (router.currentRoute.value.query.search == null) {
|
||||
return
|
||||
}
|
||||
refreshPage(router.currentRoute.value.query.search + '', router.currentRoute.value.query.current)
|
||||
if (router.currentRoute.value.query.search == null) {
|
||||
return
|
||||
}
|
||||
refreshPage(router.currentRoute.value.query.search + '', router.currentRoute.value.query.current)
|
||||
})
|
||||
// 分页器
|
||||
const changeCurrent = (currentVal: number) => {
|
||||
let query = router.currentRoute.value.query
|
||||
location.href = `/search?search=${query.search}¤t=${currentVal}`
|
||||
let query = router.currentRoute.value.query
|
||||
location.href = `/search?search=${query.search}¤t=${currentVal}`
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!--移动端-->
|
||||
<style scoped>
|
||||
@import "/src/assets/css/pagination.css";
|
||||
@media (max-width: 768px) {
|
||||
.title h2 {
|
||||
margin: 8px auto;
|
||||
}
|
||||
.film_item {
|
||||
flex-basis: calc(100% - 20px);
|
||||
margin: 0 10px 25px 10px;
|
||||
display: flex;
|
||||
background: #2e2e2e;
|
||||
padding: 10px;
|
||||
min-height: 180px;
|
||||
max-height: 200px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.film_item a {
|
||||
flex: 2;
|
||||
border-radius: 8px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.film_intro {
|
||||
max-width: 60%;
|
||||
margin-left: 10px;
|
||||
flex: 3;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.film_intro h3 {
|
||||
font-size: 16px;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.film_item h3, p, button {
|
||||
margin: 2px 0 2px 0;
|
||||
}
|
||||
|
||||
.film_item p {
|
||||
max-width: 90%;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
|
||||
}
|
||||
|
||||
.film_item p em {
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.film_item button {
|
||||
background-color: orange;
|
||||
border-radius: 20px;
|
||||
border: none !important;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
margin-bottom: 2px;
|
||||
bottom: 0;
|
||||
}
|
||||
.blurb{
|
||||
display: none!important;
|
||||
}
|
||||
.tags {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tags .tag_c{
|
||||
background: rgba(155, 73, 231, 0.72);
|
||||
}
|
||||
.tags span {
|
||||
border-radius: 5px;
|
||||
padding: 3px 5px;
|
||||
background: rgba(66, 66, 66);
|
||||
color: #c9c4c4;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.search_group {
|
||||
width: 80%;
|
||||
margin: 0 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;
|
||||
}
|
||||
.search::placeholder{
|
||||
font-size: 15px;
|
||||
color: #999999;
|
||||
}
|
||||
.search:focus {
|
||||
outline: none;
|
||||
}
|
||||
.search_group button {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
background-color: #2e2e2e;
|
||||
color: rgba(155,73,231,0.72);
|
||||
border: none!important;
|
||||
height: 40px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
font-size: 20px;
|
||||
/*margin-bottom: 2px*/
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<!--pc端-->
|
||||
<style scoped>
|
||||
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.search_res {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------------pc------------------------------*/
|
||||
@media (min-width: 768px) {
|
||||
.film_item {
|
||||
flex-basis: calc(50% - 18px);
|
||||
max-width: 50%;
|
||||
display: flex;
|
||||
background: #2e2e2e;
|
||||
padding: 16px;
|
||||
min-height: 250px;
|
||||
max-height: 280px;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.film_item a {
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
background-size: cover;
|
||||
}
|
||||
.InputContainer {
|
||||
width: 40%;
|
||||
}
|
||||
.card-group {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.card {
|
||||
width: calc(50% - 4%);
|
||||
min-height: 230px;
|
||||
}
|
||||
.card-left{
|
||||
width: 23%;
|
||||
}
|
||||
.card-right{
|
||||
width: 70%;
|
||||
}
|
||||
.card-right h3{
|
||||
font-size: 20px;
|
||||
}
|
||||
.card-right p {
|
||||
font-size: 15px;
|
||||
}
|
||||
.card-right span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
/*-------------------------wrap------------------------------*/
|
||||
@media (max-width: 768px) {
|
||||
.InputContainer {
|
||||
width: 80%;
|
||||
}
|
||||
.card-group {
|
||||
justify-content: center;
|
||||
}
|
||||
.card {
|
||||
width: calc(100% - 10%);
|
||||
min-height: 185px;
|
||||
}
|
||||
.card-left{
|
||||
width: 38%;
|
||||
}
|
||||
.card-right{
|
||||
width: 60%;
|
||||
}
|
||||
.card-right h3{
|
||||
font-size: 16px;
|
||||
}
|
||||
.card-right p {
|
||||
font-size: 10px;
|
||||
}
|
||||
.card-right span {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
/*--------------------Search---------------------------*/
|
||||
.InputContainer {
|
||||
height: 40px;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding-left: 15px;
|
||||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.film_intro {
|
||||
max-width: 75%;
|
||||
margin-left: 10px;
|
||||
flex: 3;
|
||||
/*flex-grow: 4;*/
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.input {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 0.9em;
|
||||
background-color: transparent !important;
|
||||
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,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
||||
box-shadow: 0 0 0px 1000px transparent inset !important;
|
||||
}
|
||||
|
||||
.film_item h3, p, button {
|
||||
margin: 3px 0 12px 0;
|
||||
}
|
||||
|
||||
.film_item p {
|
||||
max-width: 90%;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.film_item p em {
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.film_item button {
|
||||
background-color: orange;
|
||||
border-radius: 20px;
|
||||
border: none !important;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
margin-bottom: 2px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tags .tag_c{
|
||||
background: rgba(155, 73, 231, 0.72);
|
||||
}
|
||||
.tags span {
|
||||
border-radius: 5px;
|
||||
padding: 3px 5px;
|
||||
background: rgba(66, 66, 66);
|
||||
color: #c9c4c4;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.search_group {
|
||||
width: 45%;
|
||||
margin: 20px 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;
|
||||
}
|
||||
.search::placeholder{
|
||||
font-size: 15px;
|
||||
color: #999999;
|
||||
}
|
||||
.search:focus {
|
||||
outline: none;
|
||||
}
|
||||
.search_group button {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
background-color: #2e2e2e;
|
||||
color: rgba(155,73,231,0.72);
|
||||
border: none!important;
|
||||
height: 40px;
|
||||
border-radius: 0 6px 6px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
.searchIcon {
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.border {
|
||||
height: 40%;
|
||||
width: 1.3px;
|
||||
background-color: #ffffff82;
|
||||
}
|
||||
|
||||
|
||||
.micButton {
|
||||
width: 10%;
|
||||
padding: 0px 15px 0px 12px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
.searchIcon path {
|
||||
fill: #ffffffbd;
|
||||
}
|
||||
|
||||
|
||||
.micButton:hover {
|
||||
border-radius: 0 10px 10px 0;
|
||||
background-color: rgb(201 38 237 / 0.3);
|
||||
transition-duration: .3s;
|
||||
}
|
||||
/*-----------------------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);
|
||||
}
|
||||
.header-container b {
|
||||
color: #FFC570;
|
||||
}
|
||||
.header-container h3 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
/*-----------------------card style---------------------------------*/
|
||||
.card-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap
|
||||
/* aspect-ratio: 9/16;*/
|
||||
}
|
||||
.card {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
aspect-ratio: 17/5;
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
.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%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.card-right .tags {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
justify-content: start;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-right .tag-area {
|
||||
max-width: 39%;
|
||||
-webkit-line-clamp: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.card-right span {
|
||||
margin-right: 8px;
|
||||
border-radius: 3px;
|
||||
padding: 2px 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.card-right .tag_c{
|
||||
background: rgba(155, 73, 231, 0.72);
|
||||
}
|
||||
.card-right p {
|
||||
max-width: 90%;
|
||||
|
||||
overflow: hidden;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.card-right .blurb {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.card-right p em {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.card-right button {
|
||||
background-color: orange;
|
||||
border-radius: 20px;
|
||||
border: none !important;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
margin-bottom: 10px;
|
||||
bottom: 0;
|
||||
}
|
||||
.card-right h3, span, p {
|
||||
margin: 3px 0;
|
||||
}
|
||||
/*--------------------------image loading----------------------------------------------*/
|
||||
/* 容器样式 */
|
||||
.loader {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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%
|
||||
);
|
||||
/* 3. 设置条纹的大小 (宽和高相等即为正方形条纹) */
|
||||
background-size: 20px 20px;
|
||||
/* 4. 应用动画 */
|
||||
animation: stripes-move 1.5s linear infinite;
|
||||
}
|
||||
/* --- 动画定义 --- */
|
||||
@keyframes stripes-move {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 40% 40%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -103,6 +103,7 @@ const (
|
||||
|
||||
// MysqlDsn mysql服务配置信息 root:root 设置mysql账户的用户名和密码
|
||||
MysqlDsn = "root:root@(192.168.20.5:3601)/FilmSite?charset=utf8mb4&parseTime=True&loc=Local"
|
||||
//MysqlDsn = "host=db.mvmvnpnwqhbiqozgpsuu.supabase.co user=postgres password=MuBai0916$$ dbname=FilmSite port=5432 sslmode=disable TimeZone=Asia/Shanghai"
|
||||
//MysqlDsn = "root:MuBai0916$@(47.254.16.58:3610)/FilmSite?charset=utf8mb4&parseTime=True&loc=Local"
|
||||
|
||||
/*
|
||||
@@ -115,6 +116,9 @@ const (
|
||||
RedisAddr = `192.168.20.5:3602`
|
||||
RedisPassword = `root`
|
||||
RedisDBNo = 0
|
||||
//RedisAddr = `redis-18413.c340.ap-northeast-2-1.ec2.cloud.redislabs.com:18413`
|
||||
//RedisPassword = `MuBai0916$`
|
||||
//RedisDBNo = 0
|
||||
|
||||
//RedisAddr = `47.254.16.58:3620`
|
||||
//RedisPassword = `MuBai0916$`
|
||||
|
||||
@@ -57,10 +57,10 @@ require (
|
||||
go.mongodb.org/mongo-driver/v2 v2.5.0 // indirect
|
||||
go.uber.org/atomic v1.11.0 // indirect
|
||||
golang.org/x/arch v0.22.0 // indirect
|
||||
golang.org/x/crypto v0.48.0 // indirect
|
||||
golang.org/x/crypto v0.49.0 // indirect
|
||||
golang.org/x/net v0.51.0 // indirect
|
||||
golang.org/x/sys v0.41.0 // indirect
|
||||
golang.org/x/text v0.34.0 // indirect
|
||||
golang.org/x/sys v0.42.0 // indirect
|
||||
golang.org/x/text v0.35.0 // indirect
|
||||
google.golang.org/appengine v1.6.8 // indirect
|
||||
google.golang.org/protobuf v1.36.10 // indirect
|
||||
)
|
||||
|
||||
@@ -140,8 +140,8 @@ golang.org/x/crypto v0.19.0/go.mod h1:Iy9bg/ha4yyC70EfRS8jz+B6ybOBKMaSxLj6P6oBDf
|
||||
golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
|
||||
golang.org/x/crypto v0.31.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
|
||||
golang.org/x/crypto v0.32.0/go.mod h1:ZnnJkOaASj8g0AjIduWNlq2NRxL0PlBrbKVyZ6V/Ugc=
|
||||
golang.org/x/crypto v0.48.0 h1:/VRzVqiRSggnhY7gNRxPauEQ5Drw9haKdM0jqfcCFts=
|
||||
golang.org/x/crypto v0.48.0/go.mod h1:r0kV5h3qnFPlQnBSrULhlsRfryS2pmewsg+XfMgkVos=
|
||||
golang.org/x/crypto v0.49.0 h1:+Ng2ULVvLHnJ/ZFEq4KdcDd/cfjrrjjNSXNzxg0Y4U4=
|
||||
golang.org/x/crypto v0.49.0/go.mod h1:ErX4dUh2UM+CFYiXZRTcMpEcN8b/1gxEuv3nODoYtCA=
|
||||
golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
|
||||
golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
|
||||
golang.org/x/mod v0.12.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
|
||||
@@ -179,8 +179,8 @@ golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||
golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||
golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||
golang.org/x/sys v0.29.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||
golang.org/x/sys v0.41.0 h1:Ivj+2Cp/ylzLiEU89QhWblYnOE9zerudt9Ftecq2C6k=
|
||||
golang.org/x/sys v0.41.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
|
||||
golang.org/x/sys v0.42.0 h1:omrd2nAlyT5ESRdCLYdm3+fMfNFE/+Rf4bDIQImRJeo=
|
||||
golang.org/x/sys v0.42.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
|
||||
golang.org/x/telemetry v0.0.0-20240228155512-f48c80bd79b2/go.mod h1:TeRTkGYfJXctD9OcfyVLyj2J3IxLnKwHJR8f4D8a3YE=
|
||||
golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
|
||||
golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
|
||||
@@ -201,8 +201,8 @@ golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
|
||||
golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
|
||||
golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
|
||||
golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
|
||||
golang.org/x/text v0.34.0 h1:oL/Qq0Kdaqxa1KbNeMKwQq0reLCCaFtqu2eNuSeNHbk=
|
||||
golang.org/x/text v0.34.0/go.mod h1:homfLqTYRFyVYemLBFl5GgL/DWEiH5wcsQ5gSh1yziA=
|
||||
golang.org/x/text v0.35.0 h1:JOVx6vVDFokkpaq1AEptVzLTpDe9KGpj5tR4/X+ybL8=
|
||||
golang.org/x/text v0.35.0/go.mod h1:khi/HExzZJ2pGnjenulevKNX1W67CUy0AsXcNubPGCA=
|
||||
golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
|
||||
golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
|
||||
golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
|
||||
|
||||
Reference in New Issue
Block a user