From 7abdb24968bcb88f177851a30e41f282b9189a98 Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期三, 21 五月 2025 19:11:47 +0800
Subject: [PATCH] 初步框架
---
pages/home/home.vue | 142 ++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 132 insertions(+), 10 deletions(-)
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 30eade4..0e20280 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -4,14 +4,39 @@
<view class="main-content">
<!-- 主要内容展示 -->
<HomeMain></HomeMain>
- <!-- <view class="row">
- <u-icon name="star" size="40" color="yellow" />
- <text class="theme-text">内容精选</text>
- </view> -->
- <section-title title="内容精选" optitle="查看全部" goUrl="/pages/home/home-more" />
- <trip-card v-for="(item, index) in tripCardList" :key="index" :tag="item.tag" :title="item.title"
- :subtitle="item.subtitle" :score="item.score" :imageUrl="item.imageUrl" :detailUrl="item.detailUrl" />
-
+ <!--
+ <section-title-btn title="内容精选" optitle="查看全部" goUrl="/pages/home/home-more" /> -->
+ <view class="section">
+ <u-row>
+ <u-col span="6">
+ <view class="row">
+ <!-- <u-icon v-if="iconName" :name="iconName" :size="iconSize" :color="iconColor" /> -->
+ <text class="theme-text left-text">内容精选</text>
+ </view>
+ </u-col>
+ <u-col span="3"></u-col>
+ <u-col span="3">
+ <view class="row-right">
+ <u-icon name="/static/common/left-arrow-dark.png" size="80" @click="prevPage" />
+ <u-icon name="/static/common/right-arrow-dark.png" size="80" @click="nextPage" />
+ </view>
+ </u-col>
+ </u-row>
+ </view>
+
+ <view class="trip-card-swiper">
+ <swiper :current="currentPage" @change="onSwiperChange" circular style="min-height: 1500rpx;">
+ <swiper-item v-for="(group, pageIndex) in pagedTripCards" :key="pageIndex">
+ <trip-card 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>
+
+ <!-- <trip-card v-for="(item, index) in visibleTripCards" :key="index" :tag="item.tag" :title="item.title"
+ :subtitle="item.subtitle" :score="item.score" :imageUrl="item.imageUrl" :detailUrl="item.detailUrl" /> -->
+
<section-title title="全球影视地标" optitle="查看全部" goUrl="/pages/home/home-more" />
<global-geo />
@@ -53,6 +78,22 @@
return state.currentInfo || {}
},
}),
+ visibleTripCards() {
+ const start = this.currentPage * this.pageSize;
+ const end = start + this.pageSize;
+ return this.tripCardList.slice(start, end);
+ },
+ totalPages() {
+ return Math.ceil(this.tripCardList.length / this.pageSize);
+ },
+ pagedTripCards() {
+ const pageSize = 3;
+ const pages = [];
+ for (let i = 0; i < this.tripCardList.length; i += pageSize) {
+ pages.push(this.tripCardList.slice(i, i + pageSize));
+ }
+ return pages;
+ },
},
components: {
HomeMain,
@@ -91,8 +132,34 @@
score: 4.7,
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/f2262cda01488f5f44f6eabf63e5dc5a.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/1a65e5ff6452efb1e6db001fcefd0b42.jpg',
+ detailUrl: '/pages/detail?id=124'
+ },
+ {
+ tag: '文化探秘2',
+ title: '日本京都文化巡游',
+ subtitle: '探访古都名刹5日行程',
+ score: 4.7,
+ imageUrl: 'https://ai-public.mastergo.com/ai/img_res/f2262cda01488f5f44f6eabf63e5dc5a.jpg',
+ detailUrl: '/pages/detail?id=125'
}
],
+ currentPage: 0,
+ pageSize: 3,
cardList: [
{
image: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
@@ -149,7 +216,22 @@
this.theme = theme
},
methods: {
-
+ nextPage() {
+ if (this.currentPage < this.totalPages - 1) {
+ this.currentPage++;
+ }
+ // else{
+ // this.currentPage = 0;
+ // }
+ },
+ prevPage() {
+ if (this.currentPage > 0) {
+ this.currentPage--;
+ }
+ },
+ onSwiperChange(e) {
+ this.currentPage = e.detail.current;
+ },
}
}
@@ -157,7 +239,7 @@
<style scoped>
.main-content {
- margin: 40rpx;
+ margin: 30rpx;
}
.row {
@@ -166,4 +248,44 @@
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: 20rpx 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>
\ No newline at end of file
--
Gitblit v1.9.3