From fab4645132aa96b3af694b55da5a0b60913e7783 Mon Sep 17 00:00:00 2001
From: AoXuan <aoxuan233@gmail.com>
Date: Sun, 31 Aug 2025 22:23:47 +0800
Subject: [PATCH] =?UTF-8?q?refactor(Home.vue):=20=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=95=88=E6=9E=9C=EF=BC=8C=E6=B4=BB=E5=8A=A8?=
 =?UTF-8?q?=E5=89=A9=E4=BD=99=E6=97=B6=E9=97=B4=E5=B0=8F=E4=BA=8E=E4=B8=A4?=
 =?UTF-8?q?=E5=A4=A9=E6=97=B6=E7=BA=A2=E8=89=B2=E6=AF=AB=E7=A7=92=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/Home.vue | 38 +++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index de03376..47bc73e 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -40,11 +40,31 @@
           </div>
 
           <div class="activity-right">
+            <!-- 剩余时间小于两天时显示红色倒计时 -->
             <a-statistic-countdown
+              v-if="isLessThanTwoDays(currentActivity.UtcExpireTime)"
               title="当期活动剩余时间"
               :value="getCountdownValue(currentActivity.UtcExpireTime)"
-              format="D 天 H 时 m 分 ss 秒 SSS 毫秒"
-              :value-style="getCountdownStyle(currentActivity.UtcExpireTime)"
+              format="活动时间仅剩 D 天 H 时 m 分 ss 秒 SSS 毫秒，请尽快完成喵~"
+              :value-style="{
+                color: '#ff4d4f',
+                fontWeight: 'bold',
+                fontSize: '18px',
+              }"
+              @finish="onCountdownFinish"
+            />
+
+            <!-- 剩余时间大于等于两天时显示常规倒计时 -->
+            <a-statistic-countdown
+              v-else
+              title="当期活动剩余时间"
+              :value="getCountdownValue(currentActivity.UtcExpireTime)"
+              format="D 天 H 时 m 分"
+              :value-style="{
+                color: 'var(--ant-color-text)',
+                fontWeight: '600',
+                fontSize: '20px',
+              }"
               @finish="onCountdownFinish"
             />
           </div>
@@ -241,6 +261,7 @@ interface ApiResponse {
 interface ResourceItem {
   Display: string
   Value: string
+  Drop: string
   DropName: string
   Activity: {
     Tip: string
@@ -291,6 +312,19 @@ const getCountdownValue = (expireTime: string) => {
   }
 }
 
+// 检查剩余时间是否小于两天
+const isLessThanTwoDays = (expireTime: string) => {
+  try {
+    const expire = new Date(expireTime)
+    const now = new Date()
+    const remaining = expire.getTime() - now.getTime()
+    const twoDaysInMs = 20 * 24 * 60 * 60 * 1000
+    return remaining <= twoDaysInMs
+  } catch {
+    return false
+  }
+}
+
 // 获取倒计时样式 - 如果剩余时间小于2天则显示红色
 const getCountdownStyle = (expireTime: string) => {
   try {