fix: 修复轮播图滚动的时候，界面异常展示的问题

src/views/Home/components/Header.vue

@@ -8,24 +8,22 @@
             <div class="banner-block swiper-slide" :key="surveyStats.user_count">
               <p class="banner-block-slogan">实时链接消费者的深度洞察及日常信息采集工具</p>
               <div class="banner-block-desc">
-                已支持 <CountTo :end="surveyStats.user_count" :use-comma="true" :key="surveyStats.user_count"
+                已支持
-                                @ready-loop="readyLoop"
+                <CountTo :end="surveyStats.user_count" :use-comma="true" :key="surveyStats.user_count" />
-              /> 用户 |
+                用户 | 发起
-                发起 <CountTo :end="surveyStats.survey_count" :use-comma="true"  @ready-loop="readyLoop"  /> 次调研 |
+                <CountTo :end="surveyStats.survey_count" :use-comma="true" />
-                有效回收 <CountTo :end="surveyStats.sample_count" :use-comma="true"    @ready-loop="readyLoop"  /> 份数据
+                次调研 | 有效回收
+                <CountTo :end="surveyStats.sample_count" :use-comma="true" />
+                份数据
               </div>
             </div>
             <!-- 动态 Banner 列表 -->
-            <div
+            <div v-for="(item, index) in bannerList" :key="index" class="swiper-slide banner-content"
-                v-for="(item, index) in bannerList"
+              :style="{ backgroundImage: 'url(' + item.banner_address + ')' }">
-                :key="index"
+              <p class="banner-content-title" :class="{ 'white': index === 0 }">
-                class="swiper-slide banner-content"
-                :style="{ backgroundImage: 'url(' + item.banner_address + ')' }"
-            >
-              <p class="banner-content-title" :class="{'white': index === 0}">
                 {{ item.title }}
               </p>
-              <p class="banner-content-desc" :class="{'white': index === 0}">
+              <p class="banner-content-desc" :class="{ 'white': index === 0 }">
                 {{ item.synopsis }}
               </p>
               <p v-if="index === 0" class="banner-content-btn" @click="toBannerDetail(item)">
@@ -44,13 +42,8 @@
 
           <!-- 分页器 -->
           <div class="custom-pagination">
-            <span
+            <span v-for="(item, index) in 3" :key="'dot' + index" class="custom-pagination-bullet"
-                v-for="(item, index) in 3"
+              :class="{ 'active': activeIndex === index }" @click="goToSlide(index)"></span>
-                :key="'dot' + index"
-                class="custom-pagination-bullet"
-                :class="{ 'active': activeIndex === index }"
-                @click="goToSlide(index)"
-            ></span>
           </div>
         </div>
       </div>
@@ -108,17 +101,20 @@ const getQuesStatics = async () => {
   surveyData.value = res.data
 }
 
-const readyLoop = ()=>{
+// function readyLoop(){
-  if (bannerSwiper){
+//   initSwiper(true)
-    bannerSwiper.destroy()
+// }
-  }
+// const readyLoop = ()=>{
-  initSwiper(true)
+//   if (bannerSwiper){
-}
+//     bannerSwiper.destroy()
+//   }
+//   initSwiper(true)
+// }
 
-const initSwiper = (loop = false)=>{
+const initSwiper = (loop = false) => {
   // 初始化 Swiper
   if (bannerSwiper) {
-    bannerSwiper.destroy(true, true);
+    // bannerSwiper.destroy(true, true);
     bannerSwiper = null;
   }
   bannerSwiper = new Swiper(swiperContainer.value, {
@@ -143,7 +139,7 @@ const initSwiper = (loop = false)=>{
     },
     on: {
       slideChange: () => {
-        if (bannerSwiper){
+        if (bannerSwiper) {
           activeIndex.value = bannerSwiper.realIndex
         }
       },
@@ -166,7 +162,7 @@ const goNext = () => {
 const goToSlide = (index) => {
   if (bannerSwiper) {
     // 如果使用 loop: true，则需用 slideToLoop
-    bannerSwiper.slideToLoop(index )
+    bannerSwiper.slideToLoop(index)
     activeIndex.value = index
   }
 }
@@ -200,6 +196,7 @@ onBeforeUnmount(() => {
   width: 100%;
   padding: 20px;
 }
+
 .header-cont {
   width: 100%;
   display: flex;
@@ -341,10 +338,12 @@ onBeforeUnmount(() => {
   .header-cont {
     height: 45vh;
   }
+
   .banner-block-slogan {
     top: 35%;
     left: 18%;
   }
+
   .banner-block-desc {
     left: 5%;
   }
@@ -354,10 +353,12 @@ onBeforeUnmount(() => {
   .header-cont {
     height: 60vh;
   }
+
   .banner-block-slogan {
     top: calc(35%);
     left: calc(21%);
   }
+
   .banner-block-desc {
     top: calc(54%);
     left: calc(6%);
@@ -394,7 +395,8 @@ onBeforeUnmount(() => {
   justify-content: center;
   //background-color: rgba(255, 255, 255, 0.3);
   border-radius: 50%;
-  opacity: 0; /* 默认隐藏 */
+  opacity: 0;
+  /* 默认隐藏 */
   transition: opacity 0.3s ease;
 }
 
@@ -419,6 +421,7 @@ onBeforeUnmount(() => {
 .custom-swiper-button-next {
   right: 10px;
 }
+
 /* 自定义分页器样式 */
 .custom-pagination {
   position: absolute;