首页底部轮播图优化

components/Services/services.vue

@@ -3,9 +3,9 @@
     <up-waterfall>
       <template #left>
         <view class="demo-warter" v-for="(item, index) in props.leftList" :key="index" @click="goToDetail(item)">
-          <view v-if="item.type == 'slideshow'" class="home-swiper">
+          <view v-if="item.type == 'slideshow'" class="home-swiper" @click.stop>
             <view v-if="ValueZoneSwiper.length > 0">
-              <up-swiper :list="ValueZoneSwiper" :indicator="false" class="Up-swiper"></up-swiper>
+              <up-swiper :list="ValueZoneSwiper" :indicator="false" class="Up-swiper" @click="handleSwiperClick" :height="'516rpx'"></up-swiper>
             </view>
           </view>
 
@@ -71,6 +71,12 @@ const props = defineProps({
   }
 });
 
+// 轮播图点击事件
+const handleSwiperClick = (item) => {
+  console.log('轮播图点击', item);
+  // 这里可以添加轮播图的点击处理逻辑
+}
+
 const goToDetail = async (item) => {
   const params = {
     volunteerId: item.volunteerId, // 获取 volunteerId
@@ -90,9 +96,10 @@ const goToDetail = async (item) => {
 .home-swiper {
   width: 340rpx;
   height: 516rpx;
-  .Up-swiper {
-    width: 340rpx;
-    height: 516rpx;
+  
+  :deep(.Up-swiper) {
+    width: 100%;
+    height: 100%;
   }
 }
 

pages/index.vue

@@ -28,51 +28,48 @@
       </view>
     </view>
 
-    <!-- <view class="home-grid hot-box" v-if="userType === 1">
-        <view
-          v-for="(item, index) in hotList"
-          :key="index + 'hot'"
-          class="hot-item"
-        >
-          <img :src="item" alt="" style="width: 100%; height: 160rpx" />
-        </view>
-       
-      </view> -->
-
-    <!-- <view class="hot-swiper">
+    <view class="home-grid hot-box" v-if="userType === 1">
+      <view v-for="(item, index) in hotList" :key="index + 'hot'" class="hot-item">
+        <img :src="item" alt="" style="width: 100%; height: 160rpx" />
+      </view>
+
+    </view>
+
+    <view class="hot-swiper">
       <view v-if="ValueZone.length > 0">
         <up-swiper :list="ValueZone" :indicator="false" indicatorMode="line" circular></up-swiper>
       </view>
-    </view> -->
+    </view>
 
 
     <view class="home-ranking">
-      <ServIces :leftList="leftList" :rightList="rightList" :ValueZoneSwiper="ValueZoneSwiper" v-if="userType == 1"></ServIces>
-      <!-- <RankingList v-if="userType === 2" /> -->
+      <ServIces :leftList="leftList" :rightList="rightList" :ValueZoneSwiper="ValueZoneSwiper" v-if="userType == 1">
+      </ServIces>
+      <RankingList v-if="userType === 2" />
     </view>
 
-    <!-- <up-loadmore style="margin-top: 40rpx" :status="loadmoreInfo.status" :loadmoreText="loadmoreInfo.loadingText"
+    <up-loadmore style="margin-top: 40rpx" :status="loadmoreInfo.status" :loadmoreText="loadmoreInfo.loadingText"
       :loadingText="loadmoreInfo.loadmoreText" :nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore"
-      v-if="userType == 1" /> -->
+      v-if="userType == 1" />
 
-    <!-- <view class="Wrapper">
+    <view class="Wrapper">
       <view class="home-g-bgc">
         <Client />
-      </view> -->
-    <!-- 
+      </view>
+
       <view class="hot-swiper" v-if="ValueZone.length > 0">
         <up-swiper :list="ValueZone" :indicator="false" indicatorMode="line" circular></up-swiper>
-      </view> -->
+      </view>
 
-    <!-- <view class="home-ranking">
+      <view class="home-ranking">
         <ServIces :leftList="leftList" :rightList="rightList" v-if="userType == 1"></ServIces>
         <RankingList v-if="userType === 2" />
-      </view> -->
-    <custom-tab-bar page="home" class="customTabBar" />
+      </view>
+      <custom-tab-bar page="home" class="customTabBar" />
 
-    <!-- 底部安全区域，防止内容被TabBar遮挡 -->
-    <view class="safe-area-bottom"></view>
-  </view>
+
+      <view class="safe-area-bottom"></view>
+    </view>
 </template>
 
 <script setup>
@@ -180,7 +177,7 @@ const getList = async () => {
 
     // 如果是第一页，先清空
     if (pages.value.current === 1) {
-      leftList.value = [{ type: 'slideshow'}]
+      leftList.value = [{ type: 'slideshow' }]
       rightList.value = []
     }
 
@@ -350,7 +347,7 @@ onUnload(() => { })
     align-items: center;
     padding-left: 10rpx;
     box-sizing: border-box;
-    margin-top:80rpx;
+    margin-top: 80rpx;
 
     .map-pin-fill {
       width: 34rpx;