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;