up

src/views/home/home.vue

@@ -438,20 +438,30 @@
       <div class="cooperation">
         <img src="@/assets/image/icon8.png" alt="" />
       </div>
+      <div @mouseover="classOption.step = 0" @mouseleave="classOption.step = 1">
         <vue-seamless-scroll
           :data="listData"
           :class-option="classOption"
           class="warp"
         >
-        <div style="width:1200px">
           <ul class="ul-item">
             <li class="li-item" v-for="(item, index) in listData" :key="index">
               <img :src="item" alt="" />
-              <!-- {{ item }} -->
             </li>
           </ul>
-        </div>
         </vue-seamless-scroll>
+        <vue-seamless-scroll
+          :data="listData2"
+          :class-option="classOption"
+          class="warp"
+        >
+          <ul class="ul-item">
+            <li class="li-item" v-for="(item, index) in listData2" :key="index">
+              <img :src="item" alt="" />
+            </li>
+          </ul>
+        </vue-seamless-scroll>
+      </div>
     </div>
   </div>
 </template>
@@ -486,27 +496,11 @@ export default {
   },
   data() {
     return {
-      listData: [
-        img1,
-        img2,
-        img3,
-        img4,
-        img5,
-        img6,
-        img7,
-        img8,
-        img9,
-        img10,
-        img11,
-        img12,
-        img13,
-        img14,
-        img15,
-        img16
-      ],
+      listData: [img1, img3, img5, img7, img9, img11, img13, img15, img1],
+      listData2: [img2, img4, img6, img8, img10, img12, img14, img16, img1],
       classOption: {
-        step: 0.2,
-        limitMoveNum: 10,
+        step: 1,
+        limitMoveNum: 8,
         direction: 2
       },
       bannerList: [],
@@ -577,9 +571,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .warp {
-  // width: 144px * 8;
-  width: 100%;
-  height: 140px;
+  width: 144px * 8;
+  height: 70px;
   margin: 0 auto;
   overflow: hidden;
   ul {
@@ -587,18 +580,9 @@ export default {
     padding: 0;
     margin: 0 auto;
     &.ul-item {
-      text-align: center;
       display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      margin-top: 10px;
-      padding: 10px 0;
       .li-item {
-        // width: 144px;
-        width: 12%;
-        height: 70px;
-        // line-height: 120px;
-        // background-color: #999;
+        width: 144px;
         color: #fff;
         text-align: center;
         font-size: 30px;