3

tj

2025-05-22 14764dd7679369a650ad1d60be62aacc863755a1

 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>