feat: 让活动剩余时间过少时的倒计时更加炫酷

This commit is contained in:
Alirea
2025-09-16 18:37:03 +08:00
parent 481a204a19
commit 139fd0bcc3

View File

@@ -67,17 +67,13 @@
@finish="onCountdownFinish"
/>
<!-- 剩余时间小于两天时显示红色倒计时 -->
<!-- 剩余时间小于两天时显示炫彩倒计时 -->
<a-statistic-countdown
v-else-if="getActivityTimeStatus(currentActivity.UtcExpireTime) === 'warning'"
title="当期活动剩余时间"
:value="getCountdownValue(currentActivity.UtcExpireTime)"
format="活动时间仅剩 D 天 H 时 m 分 ss 秒 SSS 毫秒,请尽快完成喵~"
:value-style="{
color: '#ff4d4f',
fontWeight: 'bold',
fontSize: '18px',
}"
class="rainbow-text"
@finish="onCountdownFinish"
/>
@@ -731,6 +727,26 @@ onMounted(() => {
gap: 16px;
}
.rainbow-text {
font-weight: bold;
font-size: 18px;
background: linear-gradient(270deg, #ff4d4f, #fffa00, #00ffea, #ff4d4f, #ff4d4f);
background-size: 400% 400%;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
animation: rainbow-move 4s linear infinite;
}
@keyframes rainbow-move {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
/* 响应式设计 */
@media (max-width: 1500px) {
.activity-list,