双行滚动 不能添加

src/views/home/home.vue

@@ -434,66 +434,24 @@
         </div>
       </div>
     </div>
-    <div class="p0-100">
+    <div class="p0-100" style="padding-bottom:40px">
       <div class="cooperation">
         <img src="@/assets/image/icon8.png" alt="" />
       </div>
-      <div class="city_list partner">
-        <div>
-          <img src="@/assets/cooperation/1.png" alt="" />
+      <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>
-        <div>
-          <img src="@/assets/cooperation/2.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/3.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/4.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/5.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/6.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/7.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/8.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/9.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/10.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/11.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/12.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/13.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/14.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/15.png" alt="" />
-        </div>
-        <div>
-          <img src="@/assets/cooperation/16.png" alt="" />
-        </div>
-      </div>
-    </div>
-
-    <div ref="myBox" style="height:345px;overflow:hidden">
-      <div class="row" style="display:flex">
-        <div v-for="item in 100" :key="item">{{ item }}</div>
-      </div>
+      </vue-seamless-scroll>
     </div>
   </div>
 </template>
@@ -505,9 +463,52 @@ import {
   getInformation,
   getAboutUs
 } from '@/api/home/home';
+import vueSeamlessScroll from 'vue-seamless-scroll';
+import img1 from '@/assets/cooperation/1.png';
+import img2 from '@/assets/cooperation/2.png';
+import img3 from '@/assets/cooperation/3.png';
+import img4 from '@/assets/cooperation/4.png';
+import img5 from '@/assets/cooperation/5.png';
+import img6 from '@/assets/cooperation/6.png';
+import img7 from '@/assets/cooperation/7.png';
+import img8 from '@/assets/cooperation/8.png';
+import img9 from '@/assets/cooperation/9.png';
+import img10 from '@/assets/cooperation/10.png';
+import img11 from '@/assets/cooperation/11.png';
+import img12 from '@/assets/cooperation/12.png';
+import img13 from '@/assets/cooperation/13.png';
+import img14 from '@/assets/cooperation/14.png';
+import img15 from '@/assets/cooperation/15.png';
+import img16 from '@/assets/cooperation/16.png';
 export default {
+  components: {
+    vueSeamlessScroll
+  },
   data() {
     return {
+      listData: [
+        img1,
+        img2,
+        img3,
+        img4,
+        img5,
+        img6,
+        img7,
+        img8,
+        img9,
+        img10,
+        img11,
+        img12,
+        img13,
+        img14,
+        img15,
+        img16
+      ],
+      classOption: {
+        step: 0.2,
+        limitMoveNum: 10,
+        direction: 2
+      },
       bannerList: [],
       queryParams: {
         labelId: '1415156808053559296',
@@ -528,6 +529,20 @@ export default {
       aboutInfo: {}
     };
   },
+  computed: {
+    defaultOption() {
+      return {
+        step: 2, // 数值越大速度滚动越快
+        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 2, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      };
+    }
+  },
   methods: {
     // 政策列表
     handleClick(tab, event) {
@@ -557,29 +572,40 @@ export default {
     getAboutUs().then(res => {
       this.aboutInfo = res.data;
     });
-  },
-  mounted() {
-    console.log(this.$refs.myBox);
   }
 };
 </script>
-<style scoped>
-.row {
-  position: relative;
-  animation: 20s mymove infinite linear;
-  animation-iteration-count: infinite;
-  /* animation-timing-function: linear; */
-}
-@keyframes mymove {
-  from {
-    left: 0px;
-  }
-  to {
-    left: -100%;
-  }
-}
-</style>
 <style lang="scss" scoped>
+.warp {
+  // width: 144px * 8;
+  width: 100%;
+  height: 140px;
+  margin: 0 auto;
+  overflow: hidden;
+  ul {
+    list-style: none;
+    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;
+        color: #fff;
+        text-align: center;
+        font-size: 30px;
+      }
+    }
+  }
+}
 // /deep/.el-carousel__button {
 //   width: 8px;
 //   height: 8px;