style(ui): 优化签到对话框和首页的按钮布局和样式

将flex布局改为grid布局，统一按钮样式逻辑
使用更简洁的class绑定方式
调整首页签到按钮为每行4列的布局

@@ -20,24 +20,23 @@
         <!-- <p class="text-green-600 text-sm">+5 积分已添加到您的账户</p> -->
       </div>
       <template v-else>
-        <div class="flex space-x-2 py-2">
+        <div class="grid grid-cols-2 gap-4 py-2"> <!-- grid-cols-2 强制每行2列，gap控制间距 -->
           <button
             v-for="checkInType in checkInTypes"
             :key="checkInType.id"
-            :class="[
-              'flex-1 flex flex-col items-center p-2 rounded-lg transition-colors',
-              selectedCheckIn?.id === checkInType.id
-                ? 'bg-green-100 border border-green-200'
-                : 'bg-white/70 border border-gray-100 hover:bg-white'
-            ]"
+            class="flex flex-col items-center p-2 rounded-lg border transition-colors
+                  bg-white/70 border-gray-100 hover:bg-white"
+            :class="{
+              'bg-green-100 border-green-200': selectedCheckIn?.id === checkInType.id
+            }"
             @click="handleCheckInSelect(checkInType)"
           >
-            <div :class="[
-              'w-12 h-12 rounded-full flex items-center justify-center mb-1 transition-colors',
-              selectedCheckIn?.id === checkInType.id
-                ? 'bg-green-500 text-white'
-                : 'bg-gray-100 text-gray-500'
-            ]">
+            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1 transition-colors
+                        bg-gray-100 text-gray-500"
+                :class="{
+                  'bg-green-500 text-white': selectedCheckIn?.id === checkInType.id
+                }"
+            >
               <van-icon v-if="checkInType.task_type === 'checkin'" name="edit" size="1.5rem" />
               <van-icon v-if="checkInType.task_type === 'upload'" name="tosend" size="1.5rem" />
             </div>

 <!--
  * @Date: 2025-03-20 19:55:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-06 21:35:16
+ * @LastEditTime: 2025-06-09 15:26:40
  * @FilePath: /mlaj/src/views/HomePage.vue
  * @Description: 美乐爱觉教育首页组件
  *
@@ -89,24 +89,23 @@
               <!-- <p class="text-green-600 text-sm">+5 积分已添加到您的账户</p> -->
             </div>
             <template v-else>
-              <div class="flex space-x-2 py-2">
+              <div class="grid grid-cols-4 gap-2 py-2">
                 <button
                   v-for="checkInType in checkInTypes"
                   :key="checkInType.id"
-                  :class="[
-                    'flex-1 flex flex-col items-center p-2 rounded-lg transition-colors',
-                    selectedCheckIn?.id === checkInType.id
-                      ? 'bg-green-100 border border-green-200'
-                      : 'bg-white/70 border border-gray-100 hover:bg-white'
-                  ]"
+                  class="flex flex-col items-center p-2 rounded-lg border transition-colors
+                  bg-white/70 border-gray-100 hover:bg-white"
+                  :class="{
+                    'bg-green-100 border-green-200': selectedCheckIn?.id === checkInType.id
+                  }"
                   @click="handleCheckInSelect(checkInType)"
                 >
-                  <div :class="[
-                    'w-12 h-12 rounded-full flex items-center justify-center mb-1 transition-colors',
-                    selectedCheckIn?.id === checkInType.id
-                      ? 'bg-green-500 text-white'
-                      : 'bg-gray-100 text-gray-500'
-                  ]">
+                <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1 transition-colors
+                        bg-gray-100 text-gray-500"
+                    :class="{
+                      'bg-green-500 text-white': selectedCheckIn?.id === checkInType.id
+                    }"
+                >
                     <van-icon v-if="checkInType.task_type === 'checkin'" name="edit" size="1.5rem" />
                     <van-icon v-if="checkInType.task_type === 'upload'" name="tosend" size="1.5rem" />
                   </div>