hookehuyr

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

<!--
* @Date: 2025-03-20 19:55:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-15 10:29:22
* @LastEditTime: 2025-12-18 11:04:24
* @FilePath: /mlaj/src/views/HomePage.vue
* @Description: 美乐爱觉教育首页组件
*
......@@ -59,15 +59,24 @@
<!-- User Stats -->
<div class="flex justify-between text-center py-2">
<div class="border-r border-gray-200 flex-1">
<div class="text-lg font-bold">{{ currentUser?.total_days || 0 }}</div>
<div class="text-lg font-bold flex items-baseline justify-center">
<span>{{ currentUser?.total_days || 0 }}</span>
<span class="text-xs ml-1 font-normal">天</span>
</div>
<div class="text-xs text-gray-500">累计打卡</div>
</div>
<div class="border-gray-200 flex-1">
<div class="text-lg font-bold">{{ currentUser?.consecutive_days || 0 }}</div>
<div class="text-lg font-bold flex items-baseline justify-center">
<span>{{ currentUser?.consecutive_days || 0 }}</span>
<span class="text-xs ml-1 font-normal">天</span>
</div>
<div class="text-xs text-gray-500">连续打卡</div>
</div>
<div class="border-gray-200 flex-1">
<div class="text-lg font-bold">{{ currentUser?.longest_consecutive_days || 0 }}</div>
<div class="text-lg font-bold flex items-baseline justify-center">
<span>{{ currentUser?.longest_consecutive_days || 0 }}</span>
<span class="text-xs ml-1 font-normal">天</span>
</div>
<div class="text-xs text-gray-500">最长连续</div>
</div>
</div>
......
......@@ -38,20 +38,23 @@
<div class="grid items-center gap-2" style="grid-template-columns: 1fr 1fr 1fr auto;">
<div class="flex flex-col items-center min-w-0">
<div class="font-bold text-gray-800 text-xl text-center w-full truncate px-0.5">
{{ formatCheckInCount(checkIns?.total_days) }}
<div class="font-bold text-gray-800 text-xl text-center w-full truncate px-0.5 flex items-baseline justify-center">
<span>{{ formatCheckInCount(checkIns?.total_days) }}</span>
<span class="text-xs ml-1 font-normal">天</span>
</div>
<div class="text-xs text-gray-500 mt-1 truncate w-full text-center">累计打卡</div>
</div>
<div class="flex flex-col items-center min-w-0">
<div class="font-bold text-green-600 text-xl text-center w-full truncate px-0.5">
{{ formatCheckInCount(checkIns?.consecutive_days) }}
<div class="font-bold text-green-600 text-xl text-center w-full truncate px-0.5 flex items-baseline justify-center">
<span>{{ formatCheckInCount(checkIns?.consecutive_days) }}</span>
<span class="text-xs ml-1 font-normal">天</span>
</div>
<div class="text-xs text-gray-500 mt-1 truncate w-full text-center">连续打卡</div>
</div>
<div class="flex flex-col items-center min-w-0">
<div class="font-bold text-blue-600 text-xl text-center w-full truncate px-0.5">
{{ formatCheckInCount(checkIns?.longest_consecutive_days) }}
<div class="font-bold text-blue-600 text-xl text-center w-full truncate px-0.5 flex items-baseline justify-center">
<span>{{ formatCheckInCount(checkIns?.longest_consecutive_days) }}</span>
<span class="text-xs ml-1 font-normal">天</span>
</div>
<div class="text-xs text-gray-500 mt-1 truncate w-full text-center">最长连续</div>
</div>
......