commit

src/main/resources/views/layouts/v4/home/act.js

@@ -6,9 +6,8 @@ const act = {
                 <!-- Swiper容器 -->
 
                 <div v-if="actList && actList.length > 0" class="activity-swiper-container">
-                    <div class="activity-swiper-container">
                     <!-- 活动数据 - Swiper -->
-                        <div class="swiper activity-swiper">
+                    <div ref="activitySwiper" class="swiper activity-swiper">
                         <div class="swiper-wrapper">
                             <div class="swiper-slide" v-for="(activity, index) in actList" :key="activity.id">
                                 <div class="item" @click="go(activity)">
@@ -35,12 +34,11 @@ const act = {
                     </div>
 
                     <!-- 导航按钮 -->
-                        <div class="swiper-button-next"></div>
+                    <div ref="nextButton" class="swiper-button-next"></div>
-                        <div class="swiper-button-prev"></div>
+                    <div ref="prevButton" class="swiper-button-prev"></div>
 
                     <!-- 进度条 -->
-                        <div class="swiper-pagination"></div>
+                    <div ref="pagination" class="swiper-pagination"></div>
-                    </div>
                 </div>
 
                 <div v-else class="no-activity-placeholder">
@@ -80,17 +78,33 @@ const act = {
                 this.swiper.destroy(true, true)
                 this.swiper = null
             }
-            this.swiper = new Swiper('.activity-swiper', {
+            const swiperElement = this.$refs.activitySwiper
+            if (!swiperElement) {
+                return
+            }
+            // 仅操作当前组件的轮播节点，避免页面其他轮播或尺寸观察器影响卡片宽度。
+            this.swiper = new Swiper(swiperElement, {
                 slidesPerView: 1,
                 spaceBetween: 18,
                 centeredSlides: false,
                 loop: false,
+                watchOverflow: true,
+                observer: false,
+                observeParents: false,
+                resizeObserver: false,
+                // 鼠标停留在活动区域时可横向浏览，到首尾后释放页面滚动。
+                mousewheel: {
+                    enabled: true,
+                    forceToAxis: false,
+                    releaseOnEdges: true,
+                    sensitivity: 0.8,
+                },
                 navigation: {
-                    nextEl: '.swiper-button-next',
+                    nextEl: this.$refs.nextButton,
-                    prevEl: '.swiper-button-prev',
+                    prevEl: this.$refs.prevButton,
                 },
                 pagination: {
-                    el: '.swiper-pagination',
+                    el: this.$refs.pagination,
                     type: 'progressbar',
                 },
                 breakpoints: {
@@ -134,10 +148,25 @@ const act = {
     mounted() {
         this.listAct()
     },
+    beforeDestroy() {
+        if (this.swiper) {
+            this.swiper.destroy(true, true)
+            this.swiper = null
+        }
+    },
     style: /*language=CSS*/ `
         .activity-section-wrapper {
             width: 100%;
             min-width: 0;
+            max-width: 100%;
+            box-sizing: border-box;
+            overflow: hidden;
+        }
+
+        .section-act {
+            width: 100%;
+            min-width: 0;
+            max-width: 100%;
         }
 
         .section-act .section-act-title span {
@@ -182,8 +211,9 @@ const act = {
             position: relative;
             width: 100%;
             min-width: 0;
+            max-width: 100%;
             box-sizing: border-box;
-            padding: 9px 14px;
+            padding: 9px 54px 12px;
             /*margin-top: 30px;*/
             overflow: hidden;
         }
@@ -207,6 +237,8 @@ const act = {
             background: white;
             width: 40px;
             height: 40px;
+            top: 72px;
+            margin-top: 0;
             border-radius: 50%;
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
             transition: all 0.3s ease;
@@ -225,11 +257,9 @@ const act = {
             font-weight: bold;
         }
 
-        /* 进度条样式 */
+        /* 进度条不展示，活动通过左右箭头或区域内滚轮浏览。 */
         .activity-swiper-container .swiper-pagination {
-            position: relative;
+            display: none;
-            margin-top: 12px;
-            height: 4px;
         }
 
         .activity-swiper-container .swiper-pagination-progressbar {

src/main/resources/views/layouts/v4/home/index.html

@@ -53,16 +53,23 @@ layout("/layouts/v4/baseLayout.html"){
     .act-card {
 	    display: flex;
 	    align-items: center;
-	    min-width: 320px;
+	    width: 100%;
+	    min-width: 0;
+	    max-width: 100%;
 	    background: white;
 	    border-radius: 8px;
 	    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
-	    padding: 11px;
+	    padding: 22px 11px;
+	    box-sizing: border-box;
+	    overflow: hidden;
 	    transition: transform 0.2s, box-shadow 0.2s;
     }
 
     .home-section {
 	    width: 100%;
+	    min-width: 0;
+	    max-width: 100%;
+	    box-sizing: border-box;
     }
 
     .home-section-header {