fix:swiper滚动bug修复

_id1.vue

@@ -3,19 +3,10 @@
     <!-- 头部和对话框部分保持不变 -->
     <BackToTopButton />
     <Header :activeIndex="4" />
-    <CommonDialog
-      :show="dialogVisible"
-      @close-dialog="handleCloseDialog"
-      :omDemandName="omDemandName"
-    />
+    <CommonDialog :show="dialogVisible" @close-dialog="handleCloseDialog" :omDemandName="omDemandName" />
 
     <!-- 留言对话框 -->
-    <el-dialog
-      :title="conDia.lifeCycleName"
-      :visible.sync="showConfirmButton"
-      width="30%"
-      center
-    >
+    <el-dialog :title="conDia.lifeCycleName" :visible.sync="showConfirmButton" width="30%" center>
       <!-- 对话框内容保持不变 -->
     </el-dialog>
 
@@ -36,27 +27,14 @@
               <!-- 主内容轮播 -->
               <div class="swiper main-swiper">
                 <div class="swiper-wrapper">
-                  <div
-                    class="swiper-slide"
-                    v-for="parentItem in lifeServiceList"
-                    :key="parentItem.lifeCycleId"
-                  >
+                  <div class="swiper-slide" v-for="parentItem in lifeServiceList" :key="parentItem.lifeCycleId">
                     <div class="slide-content">
-                      <div
-                        v-for="childItem in parentItem.children"
-                        :key="childItem.lifeCycleId"
-                        class="service-item"
-                        @click="showTip(childItem)"
-                      >
-                        <img
-                          src="~/static/images/technicalDocking/circle.png"
-                        />
+                      <div v-for="childItem in parentItem.children" :key="childItem.lifeCycleId" class="service-item"
+                        @click="showTip(childItem)">
+                        <img src="~/static/images/technicalDocking/circle.png" />
                         <span>{{ childItem.lifeCycleName }}</span>
                       </div>
-                      <div
-                        class="placeholder"
-                        v-if="parentItem.children.length % 2"
-                      ></div>
+                      <div class="placeholder" v-if="parentItem.children.length % 2"></div>
                     </div>
                   </div>
                 </div>
@@ -67,19 +45,12 @@
               <!-- 缩略图轮播 -->
               <div class="swiper thumb-swiper">
                 <div class="swiper-wrapper">
-                  <div
-                    class="swiper-slide"
-                    v-for="(item, index) in lifeServiceList"
-                    :key="item.lifeCycleId"
-                  >
+                  <div class="swiper-slide" v-for="(item, index) in lifeServiceList" :key="item.lifeCycleId">
                     <span>
-                      <img
-                        :src="`${baseApi}${
-                          currentLifeServiceItemIndex === index
+                      <img :src="`${baseApi}${currentLifeServiceItemIndex === index
                           ? item.revealIcon
                           : item.hiddenIcon
-                        }`"
-                      />
+                        }`" />
                       {{ item.lifeCycleName }}
                     </span>
                   </div>
@@ -98,17 +69,9 @@
         <div class="tec-com">
           <div class="swiper unit-swiper">
             <div class="swiper-wrapper">
-              <div
-                class="swiper-slide"
-                v-for="(item, index) in unitList"
-                :key="index"
-              >
+              <div class="swiper-slide" v-for="(item, index) in unitList" :key="index">
                 <ul>
-                  <li
-                    v-for="(subItem, idx) in item"
-                    :key="idx"
-                    @click="goto(subItem.id)"
-                  >
+                  <li v-for="(subItem, idx) in item" :key="idx" @click="goto(subItem.id)">
                     <!-- 单位详情内容保持不变 -->
                   </li>
                 </ul>
@@ -467,9 +430,11 @@ export default {
 <style lang="scss" scoped>
 /* 通用轮播样式 */
 .swiper {
+
   &-button-next,
   &-button-prev {
     background-size: contain;
+
     &::after {
       display: none;
     }
@@ -526,8 +491,7 @@ export default {
   }
 
   .swiper-button-next {
-    background: url(~/static/images/technicalDocking/zzbl_next.png) no-repeat
-      center;
+    background: url(~/static/images/technicalDocking/zzbl_next.png) no-repeat center;
     width: 85px;
     height: 44px;
     top: 390px;
@@ -535,8 +499,7 @@ export default {
   }
 
   .swiper-button-prev {
-    background: url(~/static/images/technicalDocking/zzbl_prev.png) no-repeat
-      center;
+    background: url(~/static/images/technicalDocking/zzbl_prev.png) no-repeat center;
     width: 94px;
     height: 44px;
     top: 390px;
@@ -556,8 +519,7 @@ export default {
   .swiper-slide {
     height: 60px !important;
     line-height: 60px;
-    background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat
-      left center;
+    background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat left center;
 
     span {
       font-size: 18px;
@@ -575,6 +537,7 @@ export default {
 
     &-thumb-active {
       background-image: url(~/static/images/technicalDocking/zzbl_hd_li_on.png);
+
       span {
         color: #fff;
         font-weight: bold;
@@ -586,16 +549,14 @@ export default {
 /* 技术服务方轮播 */
 .mySwiper3 {
   .swiper-button-next {
-    background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat
-      center;
+    background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat center;
     top: 160px;
     right: 0;
     width: 27px;
   }
 
   .swiper-button-prev {
-    background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat
-      center;
+    background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat center;
     top: 160px;
     left: 0;
     width: 27px;

pages/TechnicalDocking/index.vue

@@ -2,52 +2,25 @@
   <div class="tech">
     <BackToTopButton />
     <Header :activeIndex="4" />
-    <CommonDialog
-      :show="dialogVisible"
-      @close-dialog="handleCloseDialog"
-      :omDemandName="omDemandName"
-    />
-    <el-dialog
-      :title="conDia.lifeCycleName"
-      :visible.sync="showConfirmButton"
-      width="30%"
-      center
-    >
+    <CommonDialog :show="dialogVisible" @close-dialog="handleCloseDialog" :omDemandName="omDemandName" />
+    <el-dialog :title="conDia.lifeCycleName" :visible.sync="showConfirmButton" width="30%" center>
       <span>
         {{ conDia.intro }}
       </span>
       <div class="mt20"></div>
       <div>
-        <el-form
-          label-width="90px"
-          :model="formDia"
-          :rules="rules"
-          ref="formDia"
-          label-position="right"
-        >
+        <el-form label-width="90px" :model="formDia" :rules="rules" ref="formDia" label-position="right">
           <el-form-item label="姓名:" prop="omContactName">
-            <el-input
-              v-model="formDia.omContactName"
-              placeholder="请输入联系人姓名"
-            ></el-input>
+            <el-input v-model="formDia.omContactName" placeholder="请输入联系人姓名"></el-input>
           </el-form-item>
           <el-form-item label="联系方式:" prop="omContactTel">
-            <el-input
-              v-model="formDia.omContactTel"
-              placeholder="请输入联系方式"
-            ></el-input>
+            <el-input v-model="formDia.omContactTel" placeholder="请输入联系方式"></el-input>
           </el-form-item>
           <el-form-item label="留言内容:" prop="omInquiryContent">
-            <el-input
-              type="textarea"
-              v-model="formDia.omInquiryContent"
-              placeholder="请输入留言内容"
-            ></el-input>
+            <el-input type="textarea" v-model="formDia.omInquiryContent" placeholder="请输入留言内容"></el-input>
           </el-form-item>
           <el-form-item style="display: flex; justify-content: center">
-            <el-button type="primary" @click="formSub('formDia')"
-              >我要留言</el-button
-            >
+            <el-button type="primary" @click="formSub('formDia')">我要留言</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -66,102 +39,46 @@
             <div class="zzbl" style="display: block">
               <!-- 轮播详情模块 -->
               <div class="swiper mySwiper2 swiper-initialized swiper-vertical">
-                <div
-                  class="swiper-wrapper"
-                  id="certificationList"
-                  aria-live="polite"
-                  style="
+                <div class="swiper-wrapper" id="certificationList" aria-live="polite" style="
                     transition-duration: 0ms;
                     transition-delay: 0ms;
                     transform: translate3d(0px, 0px, 0px);
-                  "
-                >
-                  <div
-                    class="swiper-slide"
-                    style="height: 435px; margin-bottom: 10px"
-                    v-for="item1 in lifeServiceList"
-                    :key="item1.lifeCycleId"
-                  >
-                    <div
-                      style="
+                  ">
+                  <div class="swiper-slide" style="height: 435px; margin-bottom: 10px" v-for="item in lifeServiceList2"
+                    :key="item.lifeCycleId" @mouseenter="swiper2.autoplay.stop()"
+                    @mouseleave="swiper2.autoplay.start()">
+                    <div style="
                         overflow-y: scroll;
                         display: flex;
                         max-height: 430px;
-                        justify-content: space-evenly;
+                        justify-content: space-between;
                         flex-wrap: wrap;
                         width: 100%;
-                      "
-                    >
-                      <div
-                        v-for="(item1, index) in item1.children"
-                        :key="item1.lifeCycleId"
-                        class="items-class"
-                      >
-                        <img
-                          src="~/static/images/technicalDocking/circle.png"
-                          alt=""
-                        />
+                      ">
+                      <div v-for="(item1, index) in item.children" :key="item1.lifeCycleId" class="items-class">
+                        <img src="~/static/images/technicalDocking/circle.png" alt="" />
                         <span @click="showTip(item1)">{{
                           item1.lifeCycleName
                         }}</span>
                       </div>
-                      <div
-                        class="items-class"
-                        v-if="item1.children.length % 2 == 1"
-                      ></div>
+                      <!-- <div class="items-class" v-if="item.children.length % 2 == 1"></div> -->
                     </div>
                   </div>
                 </div>
-                <div
-                  class="swiper-button-next"
-                  tabindex="0"
-                  role="button"
-                  aria-label="Next slide"
-                  aria-controls="certificationList"
-                  aria-disabled="false"
-                ></div>
-                <div
-                  class="swiper-button-prev swiper-button-disabled"
-                  tabindex="-1"
-                  role="button"
-                  aria-label="Previous slide"
-                  aria-controls="certificationList"
-                  aria-disabled="true"
-                ></div>
-                <span
-                  class="swiper-notification"
-                  aria-live="assertive"
-                  aria-atomic="true"
-                ></span>
+                <div class="swiper-button-next" @click="handleNextClick"></div>
+                <div class="swiper-button-prev" @click="handlePrevClick"></div>
               </div>
-              <div class="swiper mySwiper">
-                <div
-                  class="swiper-wrapper"
-                  id="certificationOrg"
-                  style="
-                    transition-duration: 0ms;
-                    transition-delay: 0ms;
-                    transform: translate3d(0px, 0px, 0px);
-                  "
-                >
-                  <div
-                    class="swiper-slide"
-                    v-for="(item, index) in lifeServiceList"
-                    :key="item.lifeCycleId"
-                  >
-                    <!-- @click="currentLifeServiceItemIndex=index" -->
+              <div class="mySwiper">
+                <div class="scroll-outer">
+                  <div id="certificationOrg">
+                    <div :class="['mySwiper-item', { 'active': currentIndex === index }]"
+                      v-for="(item, index) in lifeServiceList.concat(lifeServiceList)" :key="index + '-'"
+                      @click="handleItemClick(index)">
                       <span>
-                      <!-- <img :src="`${baseApi}${item.revealIcon}`" alt="" /> -->
-                      <img
-                        :src="`${baseApi}${
-                          currentLifeServiceItemIndex === index
-                            ? item.revealIcon
-                            : item.hiddenIcon
-                        }`"
-                        alt=""
-                      />
-                      {{ item.lifeCycleName }}</span
-                    >
+                        <img :src="`${baseApi}${currentIndex === index ? item.revealIcon : item.hiddenIcon}`" alt="" />
+                        {{ item.lifeCycleName }}
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -183,81 +100,42 @@
           <div class="mt30"></div>
           <div class="tec-com">
             <div class="swiper mySwiper3 swiper-initialized swiper-horizontal">
-              <div
-                class="swiper-wrapper"
-                id="certificationList"
-                aria-live="polite"
-                style="
+              <div class="swiper-wrapper" id="certificationList" aria-live="polite" style="
                   transition-duration: 0ms;
                   transition-delay: 0ms;
                   transform: translate3d(0px, 0px, 0px);
-                "
-              >
-                <div
-                  class="swiper-slide"
-                  style="height: 435px; margin-bottom: 10px"
-                  v-for="(item, index) in unitList"
-                  :key="index"
-                >
+                ">
+                <div class="swiper-slide" style="height: 435px; margin-bottom: 10px" v-for="(item, index) in unitList"
+                  :key="index">
                   <ul>
                     <!-- <li v-for="item in unitList" :key="item.chkqCompanyId"><img :src="`${baseApi}${item.chkqCompanyLogo}`" alt="" @click="goto(item.chkqCompanyId)"></li> -->
-                    <li
-                      v-for="(subItem, index) in item"
-                      :key="index"
-                      @click="goto(subItem.id)"
-                    >
+                    <li v-for="(subItem, index) in item" :key="index" @click="goto(subItem.id)">
                       <div class="top">
                         <div class="left">
-                          <!-- <img :src="`${baseApi}${subItem.caseAvatarList.length ? subItem.caseAvatarList[0] : ''}`" /> -->
-                          <img
-                            :src="
-                              subItem.caseAvatarList &&
+                          <img :src="subItem.caseAvatarList &&
                             subItem.caseAvatarList.length
                             ? baseApi + subItem.caseAvatarList[0]
                             : ''
-                            "
-                          />
+                            " />
                         </div>
                         <div class="right">
                           <p>{{ subItem.commodityName }}</p>
-                          <p>
-                            <span>{{ subItem.commoditySign }}</span>
-                          </p>
-                          <p>
-                            <span>{{ subItem.registeredAddress }}</span>
-                          </p>
+                          <p><span>{{ subItem.commoditySign }}</span></p>
+                          <p><span>{{ subItem.registeredAddress }}</span></p>
                         </div>
                       </div>
                       <div class="bottom">
-                        <p class="ellipsis">
-                          主营业务：{{ subItem.commodityBusiness }}
-                        </p>
+                        <p class="ellipsis">主营业务：{{ subItem.commodityBusiness }}</p>
                       </div>
                     </li>
                   </ul>
                 </div>
               </div>
-              <div
-                class="swiper-button-next"
-                tabindex="0"
-                role="button"
-                aria-label="Next slide"
-                aria-controls="certificationList"
-                aria-disabled="false"
-              ></div>
-              <div
-                class="swiper-button-prev swiper-button-disabled"
-                tabindex="-1"
-                role="button"
-                aria-label="Previous slide"
-                aria-controls="certificationList"
-                aria-disabled="true"
-              ></div>
-              <span
-                class="swiper-notification"
-                aria-live="assertive"
-                aria-atomic="true"
-              ></span>
+              <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
+                aria-controls="certificationList" aria-disabled="false" @click="handleMySwiper3NextClick"></div>
+              <div class="swiper-button-prev" tabindex="-1" role="button" aria-label="Previous slide"
+                aria-controls="certificationList" aria-disabled="false" @click="handleMySwiper3PrevClick"></div>
+              <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
             </div>
           </div>
         </section>
@@ -275,7 +153,8 @@ import Header from "~/components/header/Header.vue";
 import Footer from "~/components/Footer.vue";
 import CommonDialog from "~/components/dialog/CommonDialog.vue";
 import BackToTopButton from "~/components/BackToTopButton.vue";
-import Swiper from "swiper";
+import Swiper, { Navigation, Autoplay, Controller } from 'swiper';
+import 'swiper/swiper-bundle.css';
 export default {
   components: {
     Footer,
@@ -288,7 +167,8 @@ export default {
   data() {
     return {
       omDemandName: null,
-      currentLifeServiceItemIndex: 0,
+      currentIndex: 0,
+      scrollContainer: null, // 滚动容器
       items: [
         { id: 1, text: "Item 1" },
         { id: 2, text: "Item 2" },
@@ -303,6 +183,7 @@ export default {
       ],
       baseApi: process.env.VUE_APP_File_VIEW, //"/prod-api",
       lifeServiceList: [],
+      lifeServiceList2: [],
       lifeServiceItemList: [],
       currentIndex4lifeItem: 0,
       expertList: [],
@@ -338,88 +219,63 @@ export default {
             trigger: "blur",
           },
         ],
-        // omCompanyName: [
-        //   { required: true, message: "请输入公司名称", trigger: "blur" },
-        // ],
         omInquiryContent: [
           { required: true, message: "请输入需求内容", trigger: "blur" },
         ],
       },
+      swiper3: null, // Swiper 实例
+      swiper2: null, // Swiper 实例
     };
   },
+  created() {
+    this.getLifeCycleList();
+  },
   mounted() {
     var _this = this;
     this.$nextTick(() => {
       this.$wow.init({ animateClass: "animate__animated" });
-
+      this.scrollContainer = document.getElementById('certificationOrg');
       setTimeout(() => {
-        var swiper = new Swiper(".mySwiper", {
+
+        this.$nextTick(() => {
+          this.swiper2 = new Swiper('.mySwiper2', {
+            modules: [Navigation, Autoplay, Controller],
             spaceBetween: 10,
-          slidesPerView: 5,
-          freeMode: true,
-          watchSlidesProgress: true,
-          direction: "vertical",
-          on: {
-            tap: function (swiperEle, event) {
-              // alert('你碰了Swiper');
-              const clickedIndex = swiperEle.clickedIndex; // 获取被点击的索引
-              if (clickedIndex !== undefined) {
-                swiper.slideTo(clickedIndex, 300, true); // 滑动到点击的那一项，带有动画效果
-                _that.currentLifeServiceItemIndex = clickedIndex;
-              }
-            },
-            slideChange: function () {
-              // alert('改变了，activeIndex为'+this.activeIndex);
-              _that.currentLifeServiceItemIndex = this.activeIndex;
-            },
+            slidesPerView: 1,
+            loop: false,
+            direction: 'vertical',
+            autoplay: {
+              delay: 2500,
+              disableOnInteraction: false,
             },
           });
-        var swiper2 = new Swiper(".mySwiper2", {
-          spaceBetween: 10,
-          direction: "vertical",
-          navigation: {
-            nextEl: ".swiper-button-next",
-            prevEl: ".swiper-button-prev",
-          },
-          thumbs: {
-            swiper: swiper,
-          },
-          on: {
-            tap: function (swiperEle, event) {
-              // alert('你碰了Swiper');
-              const clickedIndex = swiperEle.clickedIndex; // 获取被点击的索引
-              if (clickedIndex !== undefined) {
-                _that.currentLifeServiceItemIndex = clickedIndex;
-              }
-            },
-            slideChange: function () {
-              // alert('改变了，activeIndex为'+this.activeIndex);
-              _that.currentLifeServiceItemIndex = this.activeIndex;
-            },
-          },
         });
-        var swiper3 = new Swiper(".mySwiper3", {
+        this.swiper3 = new Swiper(".mySwiper3", {
+          modules: [Autoplay],
           spaceBetween: 10,
           slidesPerView: 1,
           direction: "horizontal",
           autoplay: {
-            delay: 2500,
+            delay: 3000,
             disableOnInteraction: false,
           },
-          navigation: {
-            nextEl: ".swiper-button-next",
-            prevEl: ".swiper-button-prev",
-          },
         });
       }, 1200);
+
+
     });
     this.getUnitTypeList();
     this.getExpertList();
-    this.getLifeCycleList();
+  },
+  beforeDestroy() {
+    // 清理 Swiper 实例
+    if (this.swiper2) {
+      this.swiper2.destroy();
+      this.swiper2 = null;
+    }
   },
   methods: {
     showTip(item) {
-      console.log(item, "item");
       this.showConfirmButton = true;
       this.conDia = item;
       this.omDemandName = item.lifeCycleName;
@@ -436,6 +292,37 @@ export default {
     handleCloseDialog(newState) {
       this.dialogVisible = newState;
     },
+    // 项目点击处理
+    handleItemClick(index) {
+      let timer = null
+      this.currentIndex = index;
+
+      this.lifeServiceList2 = this.sortLifeServiceList(index, JSON.parse(JSON.stringify(this.lifeServiceList)));
+
+      // swiper2停止自动滚动
+      this.swiper2.autoplay.stop();
+      if (timer) {
+        clearTimeout(timer);
+      }
+
+      timer = setTimeout(() => {
+        this.swiper2.autoplay.start();
+      }, 3000);
+    },
+    sortLifeServiceList(idx, arr) {
+      // 1. 找到目标元素的下标
+      const index = arr.findIndex((item, i) => i === idx);
+
+      if (index !== -1) { // 如果找到了
+        // 2. 从原位置删除
+        const [removedItem] = arr.splice(index, 1);
+
+        // 3. 添加到数组开头
+        arr.unshift(removedItem);
+      }
+      return arr;
+    },
+
     showUnitDetail(item) {
       this.unitDetailShow = true;
       this.unitDetail = item;
@@ -462,10 +349,6 @@ export default {
         this.expertList.push(experts.slice(i, i + 4));
       }
     },
-    changeLifeCycleItem(index) {
-      this.currentIndex4lifeItem = index;
-      this.lifeServiceItemList = this.lifeServiceList[index]["children"];
-    },
     async getUnitTypeList1() {
       const res = await sendRequest(
         "/business/companyInformation/technical/service/UnitCategory",
@@ -513,7 +396,6 @@ export default {
         for (let i = 0; i < unitsTemp.length; i += 6) {
           this.unitList.push(unitsTemp.slice(i, i + 6));
         }
-        console.log(this.unitList);
       }
     },
     async getExpertList() {
@@ -541,6 +423,7 @@ export default {
       const res = await sendRequest("/business/lifeCycle/tree", "get", {});
       if (res.code === 200 && res.data.length) {
         this.lifeServiceList = res.data;
+        this.lifeServiceList2 = res.data;
         this.lifeServiceItemList = res.data[0]["children"]; // 默认显示第一个菜单
       }
     },
@@ -617,6 +500,126 @@ export default {
         return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
       }
     },
+    handleNextClick() {
+      let timer = null
+      // 滚动到下一个项目
+      if (this.currentIndex < this.lifeServiceList.length - 1) {
+        this.currentIndex = this.currentIndex + 1;
+      } else {
+        this.currentIndex = 0; // 循环到第一个
+      }
+      this.lifeServiceList2 = this.sortLifeServiceList(this.currentIndex, JSON.parse(JSON.stringify(this.lifeServiceList)));
+      // 自动滚动到激活项位置
+      this.scrollToActiveItem();
+      // swiper2停止自动滚动
+      this.swiper2.autoplay.stop();
+      if (timer) {
+        clearTimeout(timer);
+      }
+
+      timer = setTimeout(() => {
+        this.swiper2.autoplay.start();
+      }, 3000);
+    },
+    scrollToActiveItem() {
+      // 自动滚动到当前激活的项目
+      this.$nextTick(() => {
+        setTimeout(() => {
+          const container = this.scrollContainer;
+          // if (container) {
+          const itemEls = container.querySelectorAll('.mySwiper-item');
+          const activeIndex = this.currentIndex;
+
+          // 由于模板中使用了 concat，需要找到正确的元素
+          // 找到第一个匹配的激活项（在第一个 lifeServiceList 中）
+          let targetElement = null;
+          for (let i = 0; i < itemEls.length; i++) {
+            const item = itemEls[i];
+            const itemIndex = i % this.lifeServiceList.length;
+            if (itemIndex === activeIndex) {
+              targetElement = item;
+              break;
+            }
+          }
+
+          if (targetElement) {
+            const itemTop = targetElement.offsetTop;
+            const containerHeight = container.clientHeight;
+            const itemHeight = targetElement.offsetHeight;
+
+            // 计算目标滚动位置，让激活的菜单项居中显示
+            const targetScrollTop = itemTop - (containerHeight / 2) + (itemHeight / 2);
+
+            // 平滑滚动到目标位置
+            container.scrollTo({
+              top: targetScrollTop,
+              behavior: 'smooth'
+            });
+          } else {
+            // 如果找不到目标元素，尝试直接使用索引
+            if (itemEls[activeIndex]) {
+              const itemTop = itemEls[activeIndex].offsetTop;
+              const containerHeight = container.clientHeight;
+              const itemHeight = itemEls[activeIndex].offsetHeight;
+              const targetScrollTop = itemTop - (containerHeight / 2) + (itemHeight / 2);
+
+              container.scrollTo({
+                top: targetScrollTop,
+                behavior: 'smooth'
+              });
+            }
+          }
+          // }
+        }, 100); // 100ms 延迟确保 DOM 渲染完成
+      });
+    },
+    handlePrevClick() {
+      let timer = null
+      // 滚动到上一个项目
+      if (this.currentIndex > 0) {
+        this.currentIndex--;
+      } else {
+        this.currentIndex = this.lifeServiceList.length - 1; // 循环到最后一个
+      }
+      this.lifeServiceList2 = this.sortLifeServiceList(this.currentIndex, JSON.parse(JSON.stringify(this.lifeServiceList)));
+      // 自动滚动到激活项位置
+      this.scrollToActiveItem();
+      // swiper2停止自动滚动
+      this.swiper2.autoplay.stop();
+      if (timer) {
+        clearTimeout(timer);
+      }
+
+      timer = setTimeout(() => {
+        this.swiper2.autoplay.start();
+      }, 3000);
+    },
+    handleMySwiper3NextClick() {
+
+      // 使用 Swiper 实例进行下一个 slide 的切换
+      if (this.swiper3) {
+        this.swiper3.slideNext();
+      }
+    },
+    handleMySwiper3PrevClick() {
+
+      // 使用 Swiper 实例进行上一个 slide 的切换
+      if (this.swiper3) {
+        this.swiper3.slidePrev();
+      }
+    },
+    // 新增：暂停和恢复 mySwiper3 自动播放
+    // pauseMySwiper3Autoplay() {
+    //   if (this.swiper3 && this.swiper3.autoplay) {
+    //     this.swiper3.autoplay.stop();
+    //   }
+    // },
+    // resumeMySwiper3Autoplay() {
+    //   if (this.swiper3 && this.swiper3.autoplay) {
+    //     this.swiper3.autoplay.start();
+    //   }
+    // },
+
   },
 };
 </script>
@@ -650,6 +653,7 @@ export default {
   position: relative;
   margin-left: auto;
   margin-right: auto;
+
   .mySwiper2 {
     position: absolute;
     left: 40px;
@@ -657,6 +661,8 @@ export default {
     width: 750px;
     padding-left: 370px;
     height: 435px;
+    overflow: hidden; // 添加这个确保切换可见
+
     img {
       width: 8px;
       height: 8px;
@@ -664,27 +670,29 @@ export default {
       border-radius: 50%;
       border: 1px solid #0777d1;
     }
-    span {
-    }
+
+    span {}
+
     .swiper-button-next {
       width: 85px;
       height: 44px;
       display: block;
       position: absolute;
-      background: url(~/static/images/technicalDocking/zzbl_next.png) no-repeat
-        center;
+      background: url(~/static/images/technicalDocking/zzbl_next.png) no-repeat center;
       top: 390px;
       left: 3px;
+      cursor: pointer;
     }
+
     .swiper-button-prev {
       width: 94px;
       height: 44px;
       display: block;
       position: absolute;
-      background: url(~/static/images/technicalDocking/zzbl_prev.png) no-repeat
-        center;
+      background: url(~/static/images/technicalDocking/zzbl_prev.png) no-repeat center;
       top: 390px;
       left: 80px;
+      cursor: pointer;
     }
   }
 
@@ -697,6 +705,76 @@ export default {
     font-variant: initial;
     line-height: 1;
   }
+
+  .scroll-outer {
+    max-height: 340px;
+    height: 340px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  #certificationOrg {
+    height: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    cursor: grab;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+
+  .mySwiper-item {
+    margin-bottom: 10px;
+    float: left;
+    width: 368px;
+    height: 60px !important;
+    line-height: 60px;
+    background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat left center;
+
+    &.active {
+      background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png) no-repeat left center;
+
+      span {
+        color: #fff;
+        font-weight: bold;
+      }
+    }
+
+    span {
+      font-size: 18px;
+      color: #5c5c5c;
+      display: block;
+      padding-left: 30px;
+      padding-right: 5px;
+
+      font-family: Microsoft YaHei;
+      box-sizing: border-box;
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    img {
+      width: 19px;
+      height: 18px;
+      margin-right: 10px;
+    }
+
+  }
+
   .mySwiper {
     left: 30px;
     top: 30px;
@@ -704,13 +782,23 @@ export default {
     height: 340px;
     z-index: 1;
     position: absolute;
+
     .swiper-slide {
       float: left;
       width: 368px;
       height: 60px !important;
       line-height: 60px;
-      background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat
-        left center;
+      background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat left center;
+
+      &.active {
+        background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png) no-repeat left center;
+
+        span {
+          color: #fff;
+          font-weight: bold;
+        }
+      }
+
       span {
         font-size: 18px;
         color: #5c5c5c;
@@ -732,9 +820,10 @@ export default {
         margin-right: 10px;
       }
     }
+
     .swiper-slide-thumb-active {
-      background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png)
-        no-repeat left center;
+      background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png) no-repeat left center;
+
       span {
         color: #ffffff;
         font-weight: bold;
@@ -754,21 +843,69 @@ export default {
   }
 
   .swiper-button-next {
-    background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat
-      center;
+    background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat center;
     top: 160px;
     right: 0px;
     width: 27px;
   }
+
   .swiper-button-prev {
     top: 160px;
     left: 0px;
     width: 27px;
-    background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat
-      center;
+    background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat center;
     // top: 390px;
     // left: 80px;
   }
+
+  // 添加新的导航按钮样式
+  .swiper3-button-next {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    width: 40px;
+    height: 40px;
+    background: rgba(71, 154, 255, 0.8) url(~/static/images/technicalDocking/swiper3next.png) no-repeat center;
+    background-size: 20px;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 10;
+    transform: translateY(-50%);
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: rgba(71, 154, 255, 1);
+      transform: translateY(-50%) scale(1.1);
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  .swiper3-button-prev {
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    width: 40px;
+    height: 40px;
+    background: rgba(71, 154, 255, 0.8) url(~/static/images/technicalDocking/swiper3prev.png) no-repeat center;
+    background-size: 20px;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 10;
+    transform: translateY(-50%);
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: rgba(71, 154, 255, 1);
+      transform: translateY(-50%) scale(1.1);
+    }
+
+    &:after {
+      display: none;
+    }
+  }
 }
 
 .swiper-button-next:after,
@@ -786,6 +923,7 @@ export default {
 $color: #479aff;
 
 .commonMarker {
+
   // 公用图标样式类代码块
   .stackBlock {
     position: absolute;
@@ -793,6 +931,7 @@ $color: #479aff;
     height: 30px;
     top: 20px;
     left: 10px;
+
     p:first-child {
       width: 15px;
       height: 15px;
@@ -802,6 +941,7 @@ $color: #479aff;
       top: 5px;
       z-index: 1;
     }
+
     p:last-child {
       width: 10px;
       height: 10px;
@@ -815,6 +955,7 @@ $color: #479aff;
 ::v-deep .banner .el-carousel__container {
   height: 460px;
 }
+
 .el-row {
   margin-top: 50px;
 }
@@ -831,33 +972,40 @@ $color: #479aff;
   background-repeat: no-repeat;
   margin-bottom: -3px;
   @extend .commonMarker;
+
   .part-tit {
     width: 1250px;
     margin: 0 auto;
   }
+
   header {
     text-align: center;
     margin: 20px 0px 20px 0px;
+
     h1 {
       font-size: 28px;
       color: #479aff;
     }
-    > p {
+
+    >p {
       font-size: 12px;
       color: #b4b4b4;
       letter-spacing: 1px;
     }
   }
+
   article {
     section {
       display: flex;
       justify-content: center;
     }
+
     .menu {
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
       width: 700px;
+
       li {
         width: 110px;
         height: 100px;
@@ -872,6 +1020,7 @@ $color: #479aff;
         position: relative;
         cursor: pointer;
         transition: all 0.5s linear;
+
         p {
           margin-top: 6px;
           word-break: break-all;
@@ -880,13 +1029,16 @@ $color: #479aff;
           font-weight: bold;
           color: #a8a8a8;
         }
+
         &.active {
           background-color: $color;
           color: #fff;
+
           p {
             color: #fff;
           }
         }
+
         // &.active:after {
         //   content: "|";
         //   height: 50px;
@@ -896,12 +1048,18 @@ $color: #479aff;
         //   bottom: -50px;
         // }
       }
+
       img {
         width: 55px;
         height: 55px;
       }
     }
-    $colors: (1, 2, 3);
+
+    $colors: (
+      1,
+      2,
+      3
+    );
 
   .submenu {
     margin-top: 20px;
@@ -934,6 +1092,7 @@ $color: #479aff;
       //   font-size: 24px;
       // }
     }
+
     @for $i from 1 through 6 {
       li:nth-child(n + #{$i}) {
         background-image: url("~/static/images/NEWER/i_#{$i}.png");
@@ -949,6 +1108,7 @@ $color: #479aff;
     flex-wrap: wrap;
     // height: 240px;
     max-height: 240px;
+
     li {
       padding: 0;
       position: relative;
@@ -967,7 +1127,7 @@ $color: #479aff;
       margin-top: 12px;
     }
   }
-  }
+}
 }
 
 .wrapper {
@@ -992,11 +1152,13 @@ $color: #479aff;
     text-align: center;
     padding: 50px 0;
     margin-top: 20px;
+
     div {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
+
       h1 {
         font-size: 30px;
         color: #000;
@@ -1005,6 +1167,7 @@ $color: #479aff;
         font-weight: bold;
         letter-spacing: 10px;
       }
+
       p {
         font-size: 16px;
         text-align: center;
@@ -1013,6 +1176,7 @@ $color: #479aff;
         font-weight: normal;
       }
     }
+
     img {
       width: 90%;
     }
@@ -1026,6 +1190,7 @@ $color: #479aff;
     padding-top: 30px;
     margin-top: -2px;
     height: 510px;
+
     .introduce {
       h1 {
         font-size: 32px;
@@ -1034,11 +1199,13 @@ $color: #479aff;
         margin-bottom: 6px;
         padding: 24px 0;
       }
+
       p {
         font-size: 12px;
         color: #c3c3c3;
       }
     }
+
     .nav {
       margin-right: 90px;
       display: flex;
@@ -1049,6 +1216,7 @@ $color: #479aff;
       margin-left: 80px;
       height: 440px;
       margin-top: 30px;
+
       li {
         width: 100px;
         height: 90px;
@@ -1062,20 +1230,24 @@ $color: #479aff;
         background-color: #dedede;
         cursor: pointer;
         transition: all 0.2s;
+
         &.active {
           background-color: $color;
           color: #fff;
         }
       }
+
       img {
         width: 40px;
         height: 40px;
       }
     }
+
     .detail {
       position: relative;
       width: 880px;
       margin-top: 20px;
+
       .prevBtn,
       .nextBtn {
         position: absolute;
@@ -1085,12 +1257,15 @@ $color: #479aff;
         cursor: pointer;
         z-index: 9;
       }
+
       .prevBtn {
         left: 0;
       }
+
       .nextBtn {
         right: 0;
       }
+
       ul {
         display: flex;
         flex-wrap: wrap;
@@ -1098,6 +1273,7 @@ $color: #479aff;
         margin: 30px auto;
         height: 260px;
       }
+
       li {
         position: relative;
         width: 240px;
@@ -1108,30 +1284,37 @@ $color: #479aff;
         margin-right: 60px;
         margin-left: 22px;
         cursor: pointer;
+
         img {
           width: 80px;
           margin-right: 15px;
         }
+
         h2 {
           font-size: 12px;
           color: rgb(27, 29, 27);
         }
+
         span {
           font-size: 12px;
           color: #c8c7c7;
         }
-        & > p {
+
+        &>p {
           width: 180px;
           padding-top: 10px;
+
           div {
             display: block;
             height: 60px;
             overflow: hidden;
           }
         }
+
         &:hover {
           .extend {
             display: block;
+
             span {
               color: #fff !important;
             }
@@ -1149,16 +1332,19 @@ $color: #479aff;
           overflow-y: auto;
           color: #fff;
           padding: 10px 20px;
+
           h2 {
             color: #fff;
           }
-          & > p {
+
+          &>p {
             color: #fff !important;
             font-size: 10px;
           }
         }
 
         :deep(.extend) {
+
           span,
           em,
           strong {
@@ -1176,22 +1362,26 @@ $color: #479aff;
     // height: 560px;
     // padding-bottom: 70px;
     @extend .commonMarker;
+
     .detail {
       position: relative;
       height: 300px;
       overflow: hidden;
+
       .item {
         img {
           width: 106px;
           height: 30px;
           margin-right: 4px;
         }
+
         .bgImg {
           position: absolute;
           top: -30px;
           width: 220px;
           height: 100px;
         }
+
         width: 250px;
         min-width: 60px;
         height: 40px;
@@ -1210,28 +1400,34 @@ $color: #479aff;
     }
 
     .popover {
+
       // display: none;
       .title {
         display: flex;
         margin-bottom: 12px;
+
         .closeBtn {
           position: absolute;
           right: 16px;
           top: 14px;
           cursor: pointer;
         }
+
         img {
           width: 40px;
           height: 40px;
           margin-right: 20px;
         }
+
         .label {
           font-size: 18px;
         }
+
         .text {
           font-size: 12px;
         }
       }
+
       .body {
         height: 140px;
         overflow-y: auto;
@@ -1249,6 +1445,7 @@ $color: #479aff;
       transform: translate(-50%, -50%);
       padding: 10px 20px;
       z-index: 1;
+
       :deep(.body) {
         p {
           font-size: 12px;
@@ -1262,6 +1459,7 @@ $color: #479aff;
       box-shadow: 0px 0px 1px#d3bbbb;
       border: 1px solid #eee;
       padding: 35px 15px;
+
       li {
         display: flex;
         justify-content: space-around;
@@ -1273,21 +1471,22 @@ $color: #479aff;
         text-align: center;
         color: #fff;
         background: rgb(69, 190, 255);
-        background: linear-gradient(
-          90deg,
+        background: linear-gradient(90deg,
             rgb(69, 190, 255) 0%,
-          rgb(1, 139, 244) 100%
-        );
+            rgb(1, 139, 244) 100%);
         cursor: pointer;
       }
     }
+
     header {
       text-align: center;
       margin: 20px 0px 40px 0px;
+
       h1 {
         font-size: 28px;
         color: #479aff;
       }
+
       p {
         font-size: 12px;
         color: #b4b4b4;
@@ -1299,6 +1498,7 @@ $color: #479aff;
   .tec-com {
     width: 100%;
     height: 370px;
+
     ul {
       width: 100%;
       display: flex;
@@ -1306,6 +1506,7 @@ $color: #479aff;
       flex-wrap: wrap;
       padding: 10px 10px;
       box-sizing: border-box;
+
       li {
         // width: 345px;
         // height: 143px;
@@ -1330,17 +1531,21 @@ $color: #479aff;
           margin-right: 20px;
           margin-left: 10px;
         }
+
         .top {
           display: flex;
           padding-top: 10px;
+
           // padding-left: 10px;
           .right {
             margin-right: 30px;
             width: 260px;
           }
+
           p {
             margin-bottom: 7px;
           }
+
           p:nth-child(1) {
             font-size: 18px;
             font-weight: bold;
@@ -1348,6 +1553,7 @@ $color: #479aff;
             overflow: hidden;
             text-overflow: ellipsis;
           }
+
           p:nth-child(2) {
             font-size: 14px;
             background-color: rgb(193, 131, 76);
@@ -1355,12 +1561,13 @@ $color: #479aff;
             width: 20px;
             text-align: center;
           }
+
           p:nth-child(3) {
             color: rgb(107, 107, 107);
+
             span {
               display: block;
-              background: url(~/static/images/technicalDocking/location.png)
-                no-repeat;
+              background: url(~/static/images/technicalDocking/location.png) no-repeat;
               background-position: 0px 2px;
               text-indent: 20px;
               color: rgb(126, 126, 126);
@@ -1372,6 +1579,7 @@ $color: #479aff;
             }
           }
         }
+
         .bottom {
           color: rgb(36, 90, 119);
           background-color: rgb(235, 249, 253);
@@ -1381,6 +1589,7 @@ $color: #479aff;
           padding-top: 6px;
           padding-bottom: 6px;
           text-indent: 12px;
+
           p {
             background-color: rgb(235, 249, 253);
           }
@@ -1400,6 +1609,7 @@ $color: #479aff;
 ::v-deep .el-dialog__header {
   border-bottom: 1px solid #efefef !important;
 }
+
 .items-class {
   flex: 0 0 35%;
   box-sizing: border-box;
@@ -1410,6 +1620,7 @@ $color: #479aff;
   margin-bottom: 28px;
   max-width: 250px;
   height: 38px;
+
   span {
     float: left;
     font-size: 18px;
@@ -1424,6 +1635,7 @@ $color: #479aff;
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 300px;
+
     &:hover {
       color: rgb(67, 110, 228);
     }