Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1e57ee6a 1 parent f898505e

style(views): 在打卡统计数字后统一添加"天"单位

Inline Side-by-side
Showing 2 changed files with 22 additions and 10 deletions
1 <!-- 1 <!--
2 * @Date: 2025-03-20 19:55:21 2 * @Date: 2025-03-20 19:55:21
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-12-15 10:29:22 4 + * @LastEditTime: 2025-12-18 11:04:24
5 * @FilePath: /mlaj/src/views/HomePage.vue 5 * @FilePath: /mlaj/src/views/HomePage.vue
6 * @Description: 美乐爱觉教育首页组件 6 * @Description: 美乐爱觉教育首页组件
7 * 7 *
...@@ -59,15 +59,24 @@ ...@@ -59,15 +59,24 @@
59 <!-- User Stats --> 59 <!-- User Stats -->
60 <div class="flex justify-between text-center py-2"> 60 <div class="flex justify-between text-center py-2">
61 <div class="border-r border-gray-200 flex-1"> 61 <div class="border-r border-gray-200 flex-1">
62 - <div class="text-lg font-bold">{{ currentUser?.total_days || 0 }}</div> 62 + <div class="text-lg font-bold flex items-baseline justify-center">
63 + <span>{{ currentUser?.total_days || 0 }}</span>
64 + <span class="text-xs ml-1 font-normal">天</span>
65 + </div>
63 <div class="text-xs text-gray-500">累计打卡</div> 66 <div class="text-xs text-gray-500">累计打卡</div>
64 </div> 67 </div>
65 <div class="border-gray-200 flex-1"> 68 <div class="border-gray-200 flex-1">
66 - <div class="text-lg font-bold">{{ currentUser?.consecutive_days || 0 }}</div> 69 + <div class="text-lg font-bold flex items-baseline justify-center">
70 + <span>{{ currentUser?.consecutive_days || 0 }}</span>
71 + <span class="text-xs ml-1 font-normal">天</span>
72 + </div>
67 <div class="text-xs text-gray-500">连续打卡</div> 73 <div class="text-xs text-gray-500">连续打卡</div>
68 </div> 74 </div>
69 <div class="border-gray-200 flex-1"> 75 <div class="border-gray-200 flex-1">
70 - <div class="text-lg font-bold">{{ currentUser?.longest_consecutive_days || 0 }}</div> 76 + <div class="text-lg font-bold flex items-baseline justify-center">
77 + <span>{{ currentUser?.longest_consecutive_days || 0 }}</span>
78 + <span class="text-xs ml-1 font-normal">天</span>
79 + </div>
71 <div class="text-xs text-gray-500">最长连续</div> 80 <div class="text-xs text-gray-500">最长连续</div>
72 </div> 81 </div>
73 </div> 82 </div>
......
...@@ -38,20 +38,23 @@ ...@@ -38,20 +38,23 @@
38 38
39 <div class="grid items-center gap-2" style="grid-template-columns: 1fr 1fr 1fr auto;"> 39 <div class="grid items-center gap-2" style="grid-template-columns: 1fr 1fr 1fr auto;">
40 <div class="flex flex-col items-center min-w-0"> 40 <div class="flex flex-col items-center min-w-0">
41 - <div class="font-bold text-gray-800 text-xl text-center w-full truncate px-0.5"> 41 + <div class="font-bold text-gray-800 text-xl text-center w-full truncate px-0.5 flex items-baseline justify-center">
42 - {{ formatCheckInCount(checkIns?.total_days) }} 42 + <span>{{ formatCheckInCount(checkIns?.total_days) }}</span>
43 + <span class="text-xs ml-1 font-normal">天</span>
43 </div> 44 </div>
44 <div class="text-xs text-gray-500 mt-1 truncate w-full text-center">累计打卡</div> 45 <div class="text-xs text-gray-500 mt-1 truncate w-full text-center">累计打卡</div>
45 </div> 46 </div>
46 <div class="flex flex-col items-center min-w-0"> 47 <div class="flex flex-col items-center min-w-0">
47 - <div class="font-bold text-green-600 text-xl text-center w-full truncate px-0.5"> 48 + <div class="font-bold text-green-600 text-xl text-center w-full truncate px-0.5 flex items-baseline justify-center">
48 - {{ formatCheckInCount(checkIns?.consecutive_days) }} 49 + <span>{{ formatCheckInCount(checkIns?.consecutive_days) }}</span>
50 + <span class="text-xs ml-1 font-normal">天</span>
49 </div> 51 </div>
50 <div class="text-xs text-gray-500 mt-1 truncate w-full text-center">连续打卡</div> 52 <div class="text-xs text-gray-500 mt-1 truncate w-full text-center">连续打卡</div>
51 </div> 53 </div>
52 <div class="flex flex-col items-center min-w-0"> 54 <div class="flex flex-col items-center min-w-0">
53 - <div class="font-bold text-blue-600 text-xl text-center w-full truncate px-0.5"> 55 + <div class="font-bold text-blue-600 text-xl text-center w-full truncate px-0.5 flex items-baseline justify-center">
54 - {{ formatCheckInCount(checkIns?.longest_consecutive_days) }} 56 + <span>{{ formatCheckInCount(checkIns?.longest_consecutive_days) }}</span>
57 + <span class="text-xs ml-1 font-normal">天</span>
55 </div> 58 </div>
56 <div class="text-xs text-gray-500 mt-1 truncate w-full text-center">最长连续</div> 59 <div class="text-xs text-gray-500 mt-1 truncate w-full text-center">最长连续</div>
57 </div> 60 </div>
......