Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8e4e7bb0 1 parent 47c409b8

style(profile): 优化打卡统计布局并添加默认值处理 

重构打卡统计部分的网格布局，使用更现代的CSS Grid实现
为打卡数据添加默认值处理，避免undefined显示问题
Inline Side-by-side
Showing 1 changed file with 15 additions and 11 deletions
......@@ -36,29 +36,30 @@
<!-- <span class="text-xs text-blue-500">查看更多</span> -->
</div>
<div class="flex justify-around">
<div class="flex flex-col items-center min-w-[4rem]">
<div class="font-bold text-gray-800 px-2 leading-normal text-center w-full" style="font-size: 1.5rem;">
<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>
<div class="text-xs text-gray-500 mt-1">累计打卡</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-[4rem]">
<div class="font-bold text-green-600 px-2 leading-normal text-center w-full" style="font-size: 1.5rem;">
<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>
<div class="text-xs text-gray-500 mt-1">连续打卡</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-[4rem]">
<div class="font-bold text-blue-600 px-2 leading-normal text-center w-full" style="font-size: 1.5rem;">
<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>
<div class="text-xs text-gray-500 mt-1">最长连续</div>
<div class="text-xs text-gray-500 mt-1 truncate w-full text-center">最长连续</div>
</div>
<div>
<div @click="handleCheckin" class="cursor-pointer">
<button
class="bg-gradient-to-r from-green-500 to-green-600 text-white py-2 px-6 rounded-full text-sm shadow-sm"
class="bg-gradient-to-r from-green-500 to-green-600 text-white py-2 px-3 rounded-full text-sm shadow-sm whitespace-nowrap"
>
立即打卡
</button>
......@@ -158,6 +159,9 @@ onMounted(async () => {
if (code) {
profile.value = data.user;
checkIns.value = data.checkin;
checkIns.value.total_days = data.checkin.total_days || 0
checkIns.value.consecutive_days = data.checkin.consecutive_days || 0
checkIns.value.longest_consecutive_days = data.checkin.longest_consecutive_days || 0
isTeacher.value = data.is_teacher;
// 处理消息中心的未读消息数量
menuItems2.value.forEach(item => {
......