小程序端门店核销记录走马灯效果

apps/mini-user/src/styles/store-detail.css

@@ -136,60 +136,23 @@
   overflow: hidden;
   height: 40px;
   box-sizing: border-box;
-}
-
-.store-detail-marquee-track {
+  position: relative;
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
   align-items: center;
-  height: 20px;
-  transform: translateX(0);
-}
-
-.store-detail-marquee-track.is-running {
-  animation-name: store-detail-marquee-scroll;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  -webkit-animation-name: store-detail-marquee-scroll;
-  -webkit-animation-timing-function: linear;
-  -webkit-animation-iteration-count: infinite;
-}
-
-.store-detail-marquee-seg {
-  display: inline-block;
-  flex: none;
-  box-sizing: content-box;
-  white-space: nowrap;
-  overflow: hidden;
-  vertical-align: top;
 }
 
 .store-detail-marquee-text {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -10px;
+  display: inline-block;
   white-space: nowrap;
   font-size: 12px;
   line-height: 20px;
   color: #a61d24;
-}
-
-@keyframes store-detail-marquee-scroll {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-50%);
-  }
-}
-
-@-webkit-keyframes store-detail-marquee-scroll {
-  0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-  100% {
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
+  will-change: transform;
+  pointer-events: none;
 }
 
 .store-detail-section {