diff --git a/src/main/resources/views/layouts/v4/home/act.js b/src/main/resources/views/layouts/v4/home/act.js
index c10e4647..2f3ef6f2 100644
--- a/src/main/resources/views/layouts/v4/home/act.js
+++ b/src/main/resources/views/layouts/v4/home/act.js
@@ -6,41 +6,39 @@ 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 class="swiper-wrapper">
-                                <div class="swiper-slide" v-for="(activity, index) in actList" :key="activity.id">
-                                    <div class="item" @click="go(activity)">
-                                        <div class="img-box">
-                                            <img :src="activity.cover || 'https://www.ncu.edu.cn/__local/8/52/2C/644986B4C9A030F7B65300178A6_8679CB08_18467.jpg'"
-                                                 alt="">
-                                            <span class="status">
-                                           {{getStatusText(activity)}}
-                                        </span>
-                                        </div>
-                                        <h4 class="title">
-                                            {{ activity.name}}
-                                        </h4>
-                                        <!--报名时间-->
-                                        <div class="time">
-                                            <p>
-                                                <i class="fa fa-clock-o"></i>
-                                                时间：{{ activity.startDate }}至{{ activity.endDate }}
-                                            </p>
-                                        </div>
+                    <!-- 活动数据 - 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)">
+                                    <div class="img-box">
+                                        <img :src="activity.cover || 'https://www.ncu.edu.cn/__local/8/52/2C/644986B4C9A030F7B65300178A6_8679CB08_18467.jpg'"
+                                             alt="">
+                                        <span class="status">
+                                       {{getStatusText(activity)}}
+                                    </span>
+                                    </div>
+                                    <h4 class="title">
+                                        {{ activity.name}}
+                                    </h4>
+                                    <!--报名时间-->
+                                    <div class="time">
+                                        <p>
+                                            <i class="fa fa-clock-o"></i>
+                                            时间：{{ activity.startDate }}至{{ activity.endDate }}
+                                        </p>
                                     </div>
                                 </div>
                             </div>
                         </div>
-
-                        <!-- 导航按钮 -->
-                        <div class="swiper-button-next"></div>
-                        <div class="swiper-button-prev"></div>
-
-                        <!-- 进度条 -->
-                        <div class="swiper-pagination"></div>
                     </div>
+
+                    <!-- 导航按钮 -->
+                    <div ref="nextButton" class="swiper-button-next"></div>
+                    <div ref="prevButton" class="swiper-button-prev"></div>
+
+                    <!-- 进度条 -->
+                    <div ref="pagination" class="swiper-pagination"></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',
-                    prevEl: '.swiper-button-prev',
+                    nextEl: this.$refs.nextButton,
+                    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;
-            margin-top: 12px;
-            height: 4px;
+            display: none;
         }
 
         .activity-swiper-container .swiper-pagination-progressbar {
diff --git a/src/main/resources/views/layouts/v4/home/index.html b/src/main/resources/views/layouts/v4/home/index.html
index 2bf702d2..347e226d 100644
--- a/src/main/resources/views/layouts/v4/home/index.html
+++ b/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 {