<template>
|
<view :class="['app', theme]">
|
<TopTabBar />
|
<view class="main-content">
|
<!-- 主要内容展示 -->
|
<HomeMain />
|
|
<view class="section">
|
<up-row>
|
<up-col span="6">
|
<view class="row">
|
<text class="theme-text left-text">内容精选</text>
|
</view>
|
</up-col>
|
<up-col span="3"></up-col>
|
<up-col span="3">
|
<view class="row-right">
|
<up-icon name="/static/common/left-arrow-dark.png" size="80rpx" @click="prevPage" />
|
<up-icon name="/static/common/right-arrow-dark.png" size="80rpx" @click="nextPage" />
|
</view>
|
</up-col>
|
</up-row>
|
</view>
|
|
<view class="trip-card-swiper">
|
<swiper :current="currentPage" @change="onSwiperChange" circular style="min-height: 1410rpx;">
|
<swiper-item v-for="(group, pageIndex) in pagedTripCards" :key="pageIndex">
|
<TripCard v-for="(item, index) in group" :key="index" :tag="item.tag" :title="item.title"
|
:subtitle="item.subtitle" :score="item.score" :imageUrl="item.imageUrl" :detailUrl="item.detailUrl" />
|
</swiper-item>
|
</swiper>
|
</view>
|
|
<SectionTitle title="全球影视地标" optitle="查看全部" goUrl="/pages/home/home-more" />
|
<GlobalGeo />
|
|
<SectionTitle title="场景博物馆" optitle="查看全部" goUrl="/pages/home/home-more" />
|
<SceneMuseumCard v-for="(item, index) in cardList" :key="index" :image="item.image" :title="item.title"
|
:subtitle="item.subtitle" :readTime="item.readTime" />
|
|
<SectionTitle title="光影社区" optitle="加入社区" goUrl="/pages/home/home-more" />
|
<Community v-for="(item, index) in communitys" :key="index" :avatar="item.avatar" :nickname="item.nickname"
|
:time="item.time" :image="item.image" :content="item.content" :likeCount="item.likeCount"
|
:commentCount="item.commentCount" />
|
|
<view style="height: 300rpx;"></view>
|
</view>
|
|
<CommonFooter flg="0" />
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, computed, onMounted } from 'vue'
|
|
import HomeMain from './home-main.vue'
|
import TripCard from './trip-card.vue'
|
import GlobalGeo from './global-geo.vue'
|
import SceneMuseumCard from './scene-museum-card.vue'
|
import Community from './community.vue'
|
|
import { SwiperChangeEvent } from '@dcloudio/uni-app'
|
|
|
// 主题
|
const theme = ref('light')
|
|
|
// 当前页数
|
const currentPage = ref(0)
|
// 每页显示条数
|
const pageSize = 3
|
|
// 旅行卡片数据
|
const tripCardList = ref([
|
{
|
tag: '史诗邮轮',
|
title: '《权力的游戏》君临城朝圣之旅',
|
subtitle: '克罗地亚杜布罗夫尼克5日深度游',
|
score: 4.9,
|
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
detailUrl: '/pages/detail?id=123',
|
},
|
{
|
tag: '经典路线',
|
title: '冰岛极光探索之旅',
|
subtitle: '冬季极地风光6日深度体验',
|
score: 4.8,
|
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
detailUrl: '/pages/detail?id=124',
|
},
|
{
|
tag: '文化探秘',
|
title: '日本京都文化巡游',
|
subtitle: '探访古都名刹5日行程',
|
score: 4.7,
|
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
detailUrl: '/pages/detail?id=125',
|
},
|
{
|
tag: '史诗邮轮2',
|
title: '《权力的游戏》君临城朝圣之旅',
|
subtitle: '克罗地亚杜布罗夫尼克5日深度游',
|
score: 4.9,
|
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
detailUrl: '/pages/detail?id=123',
|
},
|
{
|
tag: '经典路线2',
|
title: '冰岛极光探索之旅',
|
subtitle: '冬季极地风光6日深度体验',
|
score: 4.8,
|
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
detailUrl: '/pages/detail?id=124',
|
},
|
{
|
tag: '文化探秘2',
|
title: '日本京都文化巡游',
|
subtitle: '探访古都名刹5日行程',
|
score: 4.7,
|
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
detailUrl: '/pages/detail?id=125',
|
},
|
])
|
|
// 分页后的数组，每页3条
|
const pagedTripCards = computed(() => {
|
const pages = []
|
for (let i = 0; i < tripCardList.value.length; i += pageSize) {
|
pages.push(tripCardList.value.slice(i, i + pageSize))
|
}
|
return pages
|
})
|
|
// 总页数
|
const totalPages = computed(() => Math.ceil(tripCardList.value.length / pageSize))
|
|
// 场景博物馆卡片数据
|
const cardList = ref([
|
{
|
image: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
title: '《盗梦空间》巴黎咖啡馆',
|
subtitle: '拷素诺兰如何创造这个标志性场景',
|
readTime: '12分钟阅读',
|
},
|
{
|
image: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
title: '《星际穿越》玉米田',
|
subtitle: '诺兰如何还原地球末日场景',
|
readTime: '8分钟阅读',
|
},
|
{
|
image: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
title: '《星球大战》塔图因星球',
|
subtitle: '经典科幻电影中的沙漠设定',
|
readTime: '10分钟阅读',
|
},
|
])
|
|
// 社区帖子数据
|
const communitys = ref([
|
{
|
avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
|
nickname: '电影探索者',
|
time: '2天前',
|
image: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
content: '终于站在了《权游》中君临城的台阶上！这里的每一块石头都仿佛在讲述故事...',
|
likeCount: 128,
|
commentCount: 24,
|
},
|
{
|
avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
|
nickname: '美食家',
|
time: '1天前',
|
image: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
content: '这家巴黎咖啡馆的氛围真是太棒了，感觉回到了电影里的场景。',
|
likeCount: 76,
|
commentCount: 12,
|
},
|
])
|
|
// 生命周期
|
onMounted(() => {
|
const localTheme = uni.getStorageSync('theme') || 'light'
|
theme.value = localTheme
|
})
|
|
// 下一页
|
const nextPage = () => {
|
if (currentPage.value < totalPages.value - 1) {
|
currentPage.value++
|
}
|
}
|
|
// 上一页
|
const prevPage = () => {
|
if (currentPage.value > 0) {
|
currentPage.value--
|
}
|
}
|
|
// swiper 改变时触发
|
const onSwiperChange = (e: SwiperChangeEvent) => {
|
currentPage.value = e.detail.current
|
}
|
</script>
|
|
<style scoped>
|
.app.light {
|
background-color: #fff;
|
color: #000;
|
}
|
|
/* 其他样式保持不变或根据需要调整 */
|
</style>
|
<style scoped>
|
.main-content {
|
margin: 30rpx;
|
}
|
|
.row {
|
display: flex;
|
align-items: center;
|
margin-top: 20rpx;
|
margin-bottom: 20rpx;
|
}
|
</style>
|
|
<style scoped lang="scss">
|
.section {
|
// margin-top: 30rpx;
|
|
.space-between {
|
justify-content: space-between;
|
}
|
|
.row {
|
display: flex;
|
align-items: center;
|
padding: 10rpx 0;
|
}
|
|
.row-right {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
// justify-content: end;
|
justify-content: space-between;
|
}
|
|
.left-text {
|
font-size: 40rpx;
|
font-weight: bold;
|
color: var(--icon-color);
|
letter-spacing: 5rpx;
|
}
|
|
.right-text {
|
font-size: 25rpx;
|
margin-right: 10rpx;
|
}
|
|
.theme-text {
|
margin-left: 10rpx;
|
}
|
}
|
</style>
|
