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,15 +120,16 @@
       }
     }
     </script>
-    
+
     <style lang='scss' scoped>
     .left-right-swiper-scroll-box {
       position: relative;
       display: flex;
-      width: 1230px;
+      width: 1145px;
       overflow: hidden;
       transition: all 0.3s;
       padding: 0 30px;
+        margin-right: 5px;
       .scroll-icon {
         position: absolute;
         top: 0;
@@ -137,6 +138,7 @@
         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>
-