|
|
@@ -9,8 +9,17 @@
|
|
|
<view class="header">
|
|
|
<text class="title">{{ item.name }}</text>
|
|
|
<view v-if="item.payTypeTags && item.payTypeTags.length > 0" class="pay-box">
|
|
|
- <view v-for="(icon, index) in item.payTypeTags" :key="index" class="pay-icon-container">
|
|
|
- <image class="pay-icon" :src="imgUrl + icon" mode="widthFix" />
|
|
|
+ <view class="carousel-box">
|
|
|
+ <view class="carousel-track">
|
|
|
+ <!-- 原始图标 -->
|
|
|
+ <view v-for="(icon, index) in item.payTypeTags" :key="index" class="pay-icon-container">
|
|
|
+ <image class="pay-icon" :src="imgUrl + icon" mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ <!-- 复制一份，实现无缝循环 -->
|
|
|
+ <view v-for="(icon, index) in item.payTypeTags" :key="`copy-${index}`" class="pay-icon-container">
|
|
|
+ <image class="pay-icon" :src="imgUrl + icon" mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -66,7 +75,7 @@ const handleClick = (item) => {
|
|
|
display: grid;
|
|
|
grid-row-gap: px2rpx(16);
|
|
|
grid-column-gap: px2rpx(24);
|
|
|
- grid-template-columns: repeat(auto-fill, minmax(px2rpx(320), 1fr));
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(px2rpx(480), 1fr));
|
|
|
}
|
|
|
|
|
|
.payment-card {
|
|
|
@@ -129,11 +138,35 @@ const handleClick = (item) => {
|
|
|
margin-right: px2rpx(12);
|
|
|
}
|
|
|
|
|
|
+ // 外层容器：固定显示 3 个位置
|
|
|
.pay-box {
|
|
|
+ width: px2rpx(32 * 3 + 8 * 2);
|
|
|
+ flex-shrink: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .carousel-box {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .carousel-track {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
gap: px2rpx(8);
|
|
|
- flex-shrink: 0;
|
|
|
+ width: max-content;
|
|
|
+ // ✅ 匀速无限循环
|
|
|
+ animation: carousel 8s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ // ✅ 匀速移动：移动整整一倍长度（无缝）
|
|
|
+ @keyframes carousel {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.pay-icon-container {
|
|
|
@@ -145,6 +178,7 @@ const handleClick = (item) => {
|
|
|
background-color: var(--color-zinc-50, #f9f9f9);
|
|
|
border-radius: px2rpx(6);
|
|
|
border: 1px solid var(--color-zinc-100, #f3f4f6);
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.pay-icon {
|
