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

test carousel

Browse Source
This commit is contained in:
mubai
2024-02-21 23:44:54 +08:00
parent 53a243a4fb
commit 93b9855f52
16 changed files with 807 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/components/index/FilmList.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="c_content" v-if="true">
<div class="item" v-for="item in d.list" :style="{width: `calc(${d.width-1}%)`}">
<div class="c_content" v-if="d.list" >
<template v-if="d.list.length > 0">
<div class="item" v-for="item in d.list" :style="{width: `calc(${d.width-1}%)`}">
<div v-if="item.id != -99">
<a :href="`/filmDetail?link=${item.id}`" class="default_image link_content">
<div class="tag_group">
@@ -14,7 +15,9 @@
<a :href="`/filmDetail?link=${item.id}`" class="content_text_tag">{{ item.name.split("[")[0] }}</a>
<span class="cus_remark hidden-md-and-down">{{ item.remarks }}</span>
</div>
</div>
</div>
</template>
<el-empty v-if="d.list.length <= 0" style="padding: 10px 0;margin: 0 auto" description="暂无相关数据"/>
</div>
</template>
@@ -37,18 +40,18 @@ const handleImg = (e: Event) => {
}
// 监听父组件传递的参数的变化
watchEffect(()=>{
watchEffect(() => {
// 首先获取当前设备类型
const userAgent = navigator.userAgent.toLowerCase();
let isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent)
// 如果是PC, 为防止flex布局最后一行元素不足出现错位, 使用空元素补齐list
let c = isMobile ? 3 : props.col? props.col: 0
let l:any= props.list
let c = isMobile ? 3 : props.col ? props.col : 0
let l: any = props.list
let len = l.length
d.width = isMobile ? 31 : Math.floor(100 / c)
if (len % c !=0) {
for (let i = 0; i < c - len %c ; i++) {
let temp:any = {...l[0] as any}
if (len % c != 0) {
for (let i = 0; i < c - len % c; i++) {
let temp: any = {...l[0] as any}
temp.id = -99
l.push(temp)
}
@@ -57,7 +60,6 @@ watchEffect(()=>{
})
</script>
<style scoped>
@@ -66,6 +68,18 @@ watchEffect(()=>{
background-size: cover;
}
: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%);
}
/*wrap*/
@media (max-width: 768px) {
/*展示区域*/
@@ -77,8 +91,8 @@ watchEffect(()=>{
}
.c_content .item {
/* flex-basis: calc(33% - 7px);
max-width: 33%;*/
/* flex-basis: calc(33% - 7px);
max-width: 33%;*/
margin: 0 4px 20px 4px;
box-sizing: border-box;
overflow: hidden;

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

@@ -13,10 +13,12 @@
</div>
<!--右侧顶级分类导航 -->
<div class="nav_right">
<a href="/">首页</a>
<template v-for="n in data.nav">
<a :href="`/filmClassify?Pid=${n.id}`">{{ n.name }}</a>
</template>
<div class="nav_link">
<a href="/">首页</a>
<template v-for="n in data.nav">
<a :href="`/filmClassify?Pid=${n.id}`">{{ n.name }}</a>
</template>
</div>
<div class="history-link hidden-md-and-down" v-on:mouseenter="handleHistory(true)"
v-on:mouseleave="handleHistory(false)">
<a :href="`/filmClassify?Pid=${nav.variety.id}`">
@@ -137,19 +139,31 @@ onMounted(() => {
@media (max-width: 768px) {
.nav_right {
display: flex;
width: 100%;
justify-content: space-between;
/*display: none!important;*/
height: 40px;
}
.nav_right a {
.nav_link {
display: flex;
justify-content: space-between;
height: 40px;
width: 90%;
overflow-y: scroll;
}
.nav_link a {
white-space: nowrap;
color: #ffffff;
flex-basis: calc(19% - 5px);
padding: 0 10px;
line-height: 40px;
/*border-radius: 5px;*/
/*border: 1px solid rebeccapurple;*/
}
.nav_right .hidden-md-and-up {
color: #ffffff;
flex-basis: calc(19% - 5px);
padding: 0 10px;
line-height: 40px;
}
.nav_right a:hover {
color: #ffffff;
@@ -245,7 +259,7 @@ onMounted(() => {
flex-direction: row;
}
.nav_right > a {
.nav_right a {
min-width: 60px;
height: 40px;
line-height: 40px;