home-marquee

src/views/home/index.vue

@@ -84,19 +84,21 @@
         ></router-link>
       </div>
       <div class="ppsjList">
-        <router-link
-          class="item"
-          v-for="({ defaultImgUrl, primaryBusiness, companyName, id },
-          index) in shops"
-          :key="`ppsjList${index}`"
-          :to="`/shop/${id}`"
-        >
-          <div class="imgDiv2">
-            <img :src="`${$basePath}${defaultImgUrl}`" alt />
-          </div>
-          <div class="name">{{ companyName }}</div>
-          <div class="company">主营商品:{{ primaryBusiness }}</div>
-        </router-link>
+        <div class="plist">
+          <router-link
+            class="item"
+            v-for="({ defaultImgUrl, primaryBusiness, companyName, id },
+            index) in [...shops, ...shops]"
+            :key="`ppsjList${index}`"
+            :to="`/shop/${id}`"
+          >
+            <div class="imgDiv2">
+              <img :src="`${$basePath}${defaultImgUrl}`" alt />
+            </div>
+            <div class="name">{{ companyName }}</div>
+            <div class="company">主营商品:{{ primaryBusiness }}</div>
+          </router-link>
+        </div>
       </div>
       <div class="partTitle"><span class="orangeLine"></span>需求供应</div>
       <div class="xqgy">
@@ -358,18 +360,24 @@ export default class extends Vue {
 .ppsjList {
   width: 100%;
   overflow: hidden;
+  .plist {
+    animation: marquee 10s linear infinite;
+    box-sizing: border-box;
+    white-space: nowrap;
+    &:hover {
+      animation-play-state: paused;
+    }
+  }
   .item {
     width: 216px;
     height: 210px;
-    float: left;
+    display: inline-block;
     margin-right: 20px;
     background: #fff;
     border-radius: 0.4rem;
     box-sizing: border-box;
     padding-bottom: 1.6rem;
-    &:last-child {
-      margin-right: 0;
-    }
+
     .name {
       height: 2rem;
       line-height: 2rem;
@@ -594,4 +602,12 @@ export default class extends Vue {
 .mt15px {
   margin-top: 1.5rem;
 }
+@keyframes marquee {
+  from {
+    transform: translateX(20px);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
 </style>

src/views/shops/details/honor.vue

@@ -4,7 +4,7 @@
       <div class="x-title">
         资质荣誉
       </div>
-      <div class="content">
+      <div class="content" v-if="curr">
         <img :src="`${$basePath}${curr.img}`" />
         <div class="desc">
           <span>{{ curr.title }}</span>
@@ -60,6 +60,7 @@ export default class extends Vue {
     [this.pIndex, this.index] = val.split("-").map(x => Number(x));
   }
   get curr() {
+    if (!this.list.length) return null;
     return this.list[this.pIndex][this.index];
   }
   prev() {