home-marquee

src/views/home/index.vue

@@ -84,7 +84,7 @@
         ></router-link>
       </div>
       <div class="ppsjList">
-        <div class="plist">
+        <div class="plist" :style="`animation-duration:${shops.length * 3}s`">
           <router-link
             class="item"
             v-for="({ defaultImgUrl, primaryBusiness, companyName, id },
@@ -361,9 +361,10 @@ export default class extends Vue {
   width: 100%;
   overflow: hidden;
   .plist {
-    animation: marquee 10s linear infinite;
+    animation: marquee linear infinite;
     box-sizing: border-box;
     white-space: nowrap;
+    display: inline-block;
     &:hover {
       animation-play-state: paused;
     }
@@ -604,10 +605,10 @@ export default class extends Vue {
 }
 @keyframes marquee {
   from {
-    transform: translateX(20px);
+    transform: translateX(0px);
   }
   to {
-    transform: translateX(-100%);
+    transform: translateX(-50%);
   }
 }
 </style>