From 0e78b89260c1c618ccd47869b7d0e63248317d32 Mon Sep 17 00:00:00 2001
From: Huangze <huang.ze@ebiz-digits.com>
Date: Fri, 30 May 2025 15:40:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BD=AE=E6=92=AD?=
 =?UTF-8?q?=E5=9B=BE=E6=BB=9A=E5=8A=A8=E7=9A=84=E6=97=B6=E5=80=99=EF=BC=8C?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E5=BC=82=E5=B8=B8=E5=B1=95=E7=A4=BA=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Home/components/Header.vue | 65 +++++++++++++++-------------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/views/Home/components/Header.vue b/src/views/Home/components/Header.vue
index ada9f7ea..0e8c25de 100644
--- a/src/views/Home/components/Header.vue
+++ b/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.survey_count" :use-comma="true"  @ready-loop="readyLoop"  /> 次调研 |
-                有效回收 <CountTo :end="surveyStats.sample_count" :use-comma="true"    @ready-loop="readyLoop"  /> 份数据
+                已支持
+                <CountTo :end="surveyStats.user_count" :use-comma="true" :key="surveyStats.user_count" />
+                用户 | 发起
+                <CountTo :end="surveyStats.survey_count" :use-comma="true" />
+                次调研 | 有效回收
+                <CountTo :end="surveyStats.sample_count" :use-comma="true" />
+                份数据
               </div>
             </div>
             <!-- 动态 Banner 列表 -->
-            <div
-                v-for="(item, index) in bannerList"
-                :key="index"
-                class="swiper-slide banner-content"
-                :style="{ backgroundImage: 'url(' + item.banner_address + ')' }"
-            >
-              <p class="banner-content-title" :class="{'white': index === 0}">
+            <div v-for="(item, index) in bannerList" :key="index" 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
-                v-for="(item, index) in 3"
-                :key="'dot' + index"
-                class="custom-pagination-bullet"
-                :class="{ 'active': activeIndex === index }"
-                @click="goToSlide(index)"
-            ></span>
+            <span v-for="(item, index) in 3" :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 = ()=>{
-  if (bannerSwiper){
-    bannerSwiper.destroy()
-  }
-  initSwiper(true)
-}
+// function readyLoop(){
+//   initSwiper(true)
+// }
+// const readyLoop = ()=>{
+//   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;