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

optimize

Browse Source
This commit is contained in:
mubai
2023-04-19 21:57:30 +08:00
parent b791a1db2b
commit 984ace88a4
45 changed files with 941 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,44 +1,32 @@
<template>
<div class="container">
<div class="content_item" v-for="item in data.info.content">
<template v-if="item.nav.name !='综艺' & item.nav.name !='综艺片'">
<el-row class="row-bg cus_nav" justify="space-between">
<el-col :span="12" class="title">
<span :class="`iconfont ${item.nav.name.search('电影') != -1?'icon-film':item.nav.name.search('剧') != -1?'icon-tv':'icon-cartoon'}`"
style="color: #79bbff;font-size: 32px;margin-right: 10px; line-height: 130%" />
style="color: #79bbff;font-size: 32px;margin-right: 10px; line-height: 130%"/>
<a :href="`/categoryFilm?pid=${item.nav.id}`">{{ item.nav.name }}</a>
</el-col>
<el-col :span="12">
<ul class="nav_ul">
<li v-for="c in item.nav.children" class="nav_category hidden-md-and-down"><a
:href="`/categoryFilm?pid=${c.pid}&cid=${c.id}`">{{ c.name }}</a></li>
<li class=" hidden-md-and-down">更多 ></li>
<li class="nav_category hidden-md-and-down"><a :href="`/categoryFilm?pid=${item.nav.id}`">更多 ></a></li>
</ul>
</el-col>
</el-row>
<el-row class="cus_content">
<el-col :md="24" :lg="20" :xl="20" class="cus_content">
<el-row style="max-width: 100%">
<template v-for=" (m,i) in item.movies">
<el-col :md="4" :sm="6" :xs="8" v-if="i <12" class="cus_content_item">
<a :href="`/filmDetail?link=${m.id}`" class="cus_content_link"
@error="handleImgError"
: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>
</a>
<a :href="`/filmDetail?link=${m.id}`"
class="content_text content_text_tag">{{ m.name }}</a>
<span class="cus_remark">{{ m.remarks }}</span>
</el-col>
</template>
</el-row>
<!--影片列表-->
<FilmList :list="item.movies.slice(0,12)"/>
</el-col>
<el-col :md="0" :lg="4" :xl="4" class="hidden-md-and-down content_right">
<template v-for="(m,i) in item.movies">
<h3 class="hot_title">🔥热播{{item.nav.name}}</h3>
<template v-for="(m,i) in item.hot.slice(0,12)">
<div class="content_right_item">
<a :href="`/filmDetail?link=${m.id}`"><b class="top_item">{{ i + 1 + '.' }}</b>
<a :href="`/filmDetail?link=${m.mid}`"><b class="top_item">{{ i + 1 + '.' }}</b>
<span>{{ m.name }}</span></a>
</div>
</template>
@@ -50,9 +38,11 @@
</template>
<script lang="ts" setup>
// 顶部轮播图
import 'element-plus/theme-chalk/display.css'
import {onBeforeMount, onMounted, reactive} from "vue";
import {onBeforeMount, reactive} from "vue";
import {ApiGet} from "../../utils/request";
import FilmList from "../../components/FilmList.vue";
const data = reactive({
info: {}
@@ -65,8 +55,8 @@ onBeforeMount(() => {
</script>
<style scoped>
.container {
margin: 0 auto;
}
@@ -110,7 +100,8 @@ a {
}
.nav_category > a {
color: #999;
color: #c9c4c4;
}
.nav_category > a:hover {
@@ -118,21 +109,17 @@ a {
}
.nav_ul > li {
min-width: 60px;
/*min-width: 60px;*/
white-space: nowrap;
line-height: 40px;
margin: 0 8px;
text-align: center;
color: #999;
font-size: 14px;
font-weight: 400;
}
/*svg图标*/
embed {
width: 2rem;
height: 2rem;
margin-right: 8px;
margin-top: 5px;
}
/*影片简介区域*/
.cus_content {
@@ -140,51 +127,6 @@ embed {
padding-top: 15px;
}
.cus_content_link {
border-radius: 5px;
display: flex;
/*position: relative;*/
padding-top: 125%;
background-size: cover;
}
.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: 15px !important;
color: rgb(221, 221, 221);
padding: 2px 10px 2px 2px !important;
}
.cus_remark {
display: block;
width: 100%;
padding-left: 3px;
font-size: 12px;
color: #999999;
text-align: left;
}
.content_text {
display: block;
width: 100%;
padding: 2px 10px 10px 2px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.content_right {
width: 100%;
}
@@ -206,7 +148,10 @@ embed {
-o-text-overflow: ellipsis;
white-space: nowrap;
}
.hot_title {
text-align: left;
margin: 8px 0;
}
:deep(.top_item) {
color: red;