@@ -607,7 +649,8 @@
gap: 2vw;
padding: 12px;
border-radius: 12px;
- background: linear-gradient(
+ background:
+ linear-gradient(
99deg,
rgba(211, 212, 213, 0.15) 12.86%,
rgba(139, 145, 147, 0.15) 15.34%,
@@ -702,7 +745,8 @@
z-index: 2;
margin: 0 4vw;
border-radius: 12px;
- background: linear-gradient(
+ background:
+ linear-gradient(
99deg,
rgba(211, 212, 213, 0.15) 12.86%,
rgba(139, 145, 147, 0.15) 15.34%,
@@ -757,7 +801,8 @@
rgba(151, 176, 255, 0.4) 60.22%,
rgba(220, 228, 255, 0.4) 103.12%
);
- box-shadow: 0 36.858px 13.981px 0 rgba(151, 176, 255, 0.02),
+ box-shadow:
+ 0 36.858px 13.981px 0 rgba(151, 176, 255, 0.02),
0 20.335px 12.71px 0 rgba(151, 176, 255, 0.08),
0 8.897px 8.897px 0 rgba(151, 176, 255, 0.13),
0 2.542px 5.084px 0 rgba(151, 176, 255, 0.15);
@@ -871,7 +916,8 @@
{
countdownTimer = setInterval(calculateCountdown, 1000)
}
+// 判断文本是否溢出（需要滚动）
+const isTextOverflow = (text) => {
+ // 创建临时元素来测量文本宽度
+ const tempDiv = document.createElement('div')
+ tempDiv.style.position = 'absolute'
+ tempDiv.style.visibility = 'hidden'
+ tempDiv.style.whiteSpace = 'nowrap'
+ tempDiv.style.fontSize = '1.5em'
+ tempDiv.style.fontWeight = '700'
+ tempDiv.style.textShadow = '0 1px 1px #712eb1'
+ tempDiv.style.lineHeight = '1.2em'
+ tempDiv.textContent = text
+ document.body.appendChild(tempDiv)
+
+ // 获取容器实际可用宽度
+ const containerWidth = window.innerWidth * 0.94 * 0.5 * 0.6 // 所在容器宽度
+ const textWidth = tempDiv.getBoundingClientRect().width
+
+ document.body.removeChild(tempDiv)
+
+ // 如果文本宽度超过容器宽度，则需要滚动
+ return textWidth > containerWidth
+}
+
const taskList = ref([])
// 展示任务目标
@@ -2008,7 +2083,7 @@ const transfer = async () => {
t('transfer_success', {
price: selectedCoin.value.price,
name: selectedPayee.value?.name,
- })
+ }),
)
} else {
showError(t('transfer_failed', { price: selectedCoin.value.price }))
@@ -2166,7 +2241,7 @@ const sweepstakes = async (consecutive = 1) => {
const resItem = resOnceDraw.body //接口获取的抽奖结果（单抽为对象）
//取抽奖结果的位置
const index = activity.value.prizeList.findIndex(
- (prize) => prize.prizeName == resItem?.prize.prizeName
+ (prize) => prize.prizeName == resItem?.prize.prizeName,
) //转盘第几位停下
console.log('index:', index)
await startLottery(index)
@@ -2183,7 +2258,7 @@ const sweepstakes = async (consecutive = 1) => {
//取第一个抽奖结果的位置
let index = activity.value.prizeList.findIndex(
- (prize) => prize.prizeName == result.value[0]?.prize.prizeName
+ (prize) => prize.prizeName == result.value[0]?.prize.prizeName,
)
console.log('index:', index)
await startLottery(index)
@@ -2760,8 +2835,56 @@ onUnmounted(() => {
display: none;
}
-/* 金币网格 */
+// 滚动效果样式
+.scroll-wrapper {
+ display: flex;
+ width: fit-content;
+}
+.scroll-content {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+@keyframes scroll-left {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
+}
+
+@keyframes scroll-right {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(50%);
+ }
+}
+
+[dir='ltr'] .scroll-content {
+ margin-left: 30px;
+}
+
+[dir='rtl'] .scroll-content {
+ margin-left: auto;
+ margin-right: 30px;
+}
+
+[dir='ltr'] .scroll-wrapper {
+ animation: scroll-left 5s linear infinite;
+ will-change: transform;
+}
+
+[dir='rtl'] .scroll-wrapper {
+ animation: scroll-right 5s linear infinite;
+ will-change: transform;
+}
+
+/* 金币网格 */
.coin-item {
display: flex;
flex-direction: column;
@@ -2779,8 +2902,10 @@ onUnmounted(() => {
rgba(151, 176, 255, 0.4) 60.22%,
rgba(220, 228, 255, 0.4) 103.12%
);
- box-shadow: 0 36.858px 13.981px 0 rgba(151, 176, 255, 0.02),
- 0 20.335px 12.71px 0 rgba(151, 176, 255, 0.08), 0 8.897px 8.897px 0 rgba(151, 176, 255, 0.13),
+ box-shadow:
+ 0 36.858px 13.981px 0 rgba(151, 176, 255, 0.02),
+ 0 20.335px 12.71px 0 rgba(151, 176, 255, 0.08),
+ 0 8.897px 8.897px 0 rgba(151, 176, 255, 0.13),
0 2.542px 5.084px 0 rgba(151, 176, 255, 0.15);
backdrop-filter: blur(4.5px);
}
@@ -2788,8 +2913,11 @@ onUnmounted(() => {
.coin-item.selected {
border-radius: 12px;
border: 2px solid #80d7ff;
- box-shadow: -0.25px -0.25px 1px 0 #16bcff, 0.25px 0.25px 1px 0 #16bcff,
- 0 0 3px 0 rgba(22, 188, 255, 0.8), 0 0 5px 0 rgba(22, 188, 255, 0.6),
+ box-shadow:
+ -0.25px -0.25px 1px 0 #16bcff,
+ 0.25px 0.25px 1px 0 #16bcff,
+ 0 0 3px 0 rgba(22, 188, 255, 0.8),
+ 0 0 5px 0 rgba(22, 188, 255, 0.6),
0 0 4px 0 rgba(0, 83, 117, 0.3);
}