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 @@ ...@@ -36,29 +36,30 @@
36 <!-- <span class="text-xs text-blue-500">查看更多</span> --> 36 <!-- <span class="text-xs text-blue-500">查看更多</span> -->
37 </div> 37 </div>
38 38
39 - <div class="flex justify-around"> 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-[4rem]"> 40 + <div class="flex flex-col items-center min-w-0">
41 - <div class="font-bold text-gray-800 px-2 leading-normal text-center w-full" style="font-size: 1.5rem;"> 41 + <div class="font-bold text-gray-800 text-xl text-center w-full truncate px-0.5">
42 {{ formatCheckInCount(checkIns?.total_days) }} 42 {{ formatCheckInCount(checkIns?.total_days) }}
43 </div> 43 </div>
44 - <div class="text-xs text-gray-500 mt-1">累计打卡</div> 44 + <div class="text-xs text-gray-500 mt-1 truncate w-full text-center">累计打卡</div>
45 </div> 45 </div>
46 - <div class="flex flex-col items-center min-w-[4rem]"> 46 + <div class="flex flex-col items-center min-w-0">
47 - <div class="font-bold text-green-600 px-2 leading-normal text-center w-full" style="font-size: 1.5rem;"> 47 + <div class="font-bold text-green-600 text-xl text-center w-full truncate px-0.5">
48 {{ formatCheckInCount(checkIns?.consecutive_days) }} 48 {{ formatCheckInCount(checkIns?.consecutive_days) }}
49 </div> 49 </div>
50 - <div class="text-xs text-gray-500 mt-1">连续打卡</div> 50 + <div class="text-xs text-gray-500 mt-1 truncate w-full text-center">连续打卡</div>
51 </div> 51 </div>
52 - <div class="flex flex-col items-center min-w-[4rem]"> 52 + <div class="flex flex-col items-center min-w-0">
53 - <div class="font-bold text-blue-600 px-2 leading-normal text-center w-full" style="font-size: 1.5rem;"> 53 + <div class="font-bold text-blue-600 text-xl text-center w-full truncate px-0.5">
54 {{ formatCheckInCount(checkIns?.longest_consecutive_days) }} 54 {{ formatCheckInCount(checkIns?.longest_consecutive_days) }}
55 </div> 55 </div>
56 - <div class="text-xs text-gray-500 mt-1">最长连续</div> 56 + <div class="text-xs text-gray-500 mt-1 truncate w-full text-center">最长连续</div>
57 </div> 57 </div>
58 +
58 <div> 59 <div>
59 <div @click="handleCheckin" class="cursor-pointer"> 60 <div @click="handleCheckin" class="cursor-pointer">
60 <button 61 <button
61 - class="bg-gradient-to-r from-green-500 to-green-600 text-white py-2 px-6 rounded-full text-sm shadow-sm" 62 + 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"
62 > 63 >
63 立即打卡 64 立即打卡
64 </button> 65 </button>
...@@ -158,6 +159,9 @@ onMounted(async () => { ...@@ -158,6 +159,9 @@ onMounted(async () => {
158 if (code) { 159 if (code) {
159 profile.value = data.user; 160 profile.value = data.user;
160 checkIns.value = data.checkin; 161 checkIns.value = data.checkin;
162 + checkIns.value.total_days = data.checkin.total_days || 0
163 + checkIns.value.consecutive_days = data.checkin.consecutive_days || 0
164 + checkIns.value.longest_consecutive_days = data.checkin.longest_consecutive_days || 0
161 isTeacher.value = data.is_teacher; 165 isTeacher.value = data.is_teacher;
162 // 处理消息中心的未读消息数量 166 // 处理消息中心的未读消息数量
163 menuItems2.value.forEach(item => { 167 menuItems2.value.forEach(item => {
......