fix(mini-user): 门店核销走马灯改用 JS 位移

微信端 CSS max-content/百分比 transform 不可靠;改为测量宽度后 translateX 滚动,并上移到店名下方。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-08-03 14:33:31 +08:00
parent fd05621660
commit 021b9e0329
4 changed files with 142 additions and 45 deletions
+15 -20
View File
@@ -128,40 +128,35 @@
}
.store-detail-marquee {
margin: 0 var(--space-page) 12px;
padding: 8px 0;
border-radius: var(--radius-lg);
background: rgba(166, 29, 36, 0.06);
margin: 4px 0 12px;
padding: 10px 0;
border-radius: 8px;
background: #fff7f6;
border: 1px solid rgba(166, 29, 36, 0.12);
overflow: hidden;
height: 40px;
box-sizing: border-box;
}
.store-detail-marquee-track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: max-content;
animation-name: store-detail-marquee-scroll;
animation-timing-function: linear;
animation-iteration-count: infinite;
align-items: center;
height: 20px;
will-change: transform;
}
.store-detail-marquee-item {
flex: 0 0 auto;
padding: 0 24px;
flex: none;
white-space: nowrap;
font-size: 12px;
line-height: 1.5;
color: #666;
}
@keyframes store-detail-marquee-scroll {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
.store-detail-marquee-item-text {
font-size: 12px;
line-height: 20px;
color: #a61d24;
white-space: nowrap;
}
.store-detail-section {