yy

src/components/leftRightSwiperScroll.vue

@@ -15,7 +15,7 @@
       </div>
     </div>
     </template>
-    
+
     <script>
     export default {
       name: 'leftRightSwiperScroll',
@@ -46,10 +46,10 @@
       mounted() {
         // 获取 HTMLCollection 转为 数组
         this.childrenList = [...this.$refs.swiperScrollContent.children];
-        console.log('childrenList--->', this.childrenList);            
+        console.log('childrenList--->', this.childrenList);
         console.log('swiperScroll--->', this.$refs.swiperScroll);
         console.log('swiperScrollContent--->', this.$refs.swiperScrollContent);
-        
+
         // 盒子的宽度
         this.swiperScrollWidth = this.$refs.swiperScroll.getBoundingClientRect().width;
         // 内容的宽度
@@ -120,23 +120,25 @@
       }
     }
     </script>
-    
+
     <style lang='scss' scoped>
     .left-right-swiper-scroll-box {
-      position: relative;
-      display: flex;
-      width: 1230px;
-      overflow: hidden;
-      transition: all 0.3s;
-      padding: 0 30px;
-      .scroll-icon {
-        position: absolute;
-        top: 0;
-        width: 30px;
-        height: 70px;
-        z-index: 9;
-        cursor: pointer;
-        background-image: linear-gradient(270deg, invalid gradient);
+        position: relative;
+        display: flex;
+        width: 1145px;
+        overflow: hidden;
+        transition: all 0.3s;
+        padding: 0 30px;
+        margin-right: 5px;
+        .scroll-icon {
+            position: absolute;
+            top: 0;
+            width: 30px;
+            height: 70px;
+            z-index: 9;
+            cursor: pointer;
+            background-image: linear-gradient(270deg, invalid gradient);
+            z-index: 1000;
         i {
           position: absolute;
           top: 5px;
@@ -154,7 +156,7 @@
         &.left-icon:hover{
           left: 0;
           background: url("~@/assets/images/icon-arrow-left.png") 0 0 no-repeat;
-        
+
         }
 
         &.right-icon {
@@ -168,12 +170,12 @@
         &.right-icon:hover {
           right: 0;
           background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
-        
+
         }
 
-      }   
-      
-      
+      }
+
+
       .swiper-scroll-content {
         width: fit-content;
         display: flex;
@@ -183,4 +185,3 @@
       }
     }
     </style>
-