From e93da8dca59c6a237722c5087d714094d0d74083 Mon Sep 17 00:00:00 2001 From: hzj <1304805162@qq.com> Date: Wed, 7 Jan 2026 11:29:52 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E5=B9=B4=E6=B4=BB=E5=8A=A8):=20?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E9=95=BF=E6=96=87=E6=9C=AC=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Activities/NewYear/index.vue | 174 +++++++++++++++++++++---- 1 file changed, 151 insertions(+), 23 deletions(-) diff --git a/src/views/Activities/NewYear/index.vue b/src/views/Activities/NewYear/index.vue index 4aab818..3d0aeb0 100644 --- a/src/views/Activities/NewYear/index.vue +++ b/src/views/Activities/NewYear/index.vue @@ -122,6 +122,7 @@ v-for="tag in tabList" style=" width: 50%; + min-width: 0; height: 100%; display: flex; @@ -131,18 +132,59 @@ @click="handleBt(tag.value)" >
+ +
+ +
+
+ {{ tag.name }} +
+
+ + +
+
+ {{ tag.name }} +
+
+
+
+ + +
@@ -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); }