Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e21ab2c3 1 parent fcc0c956

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

将flex布局改为grid布局，统一按钮样式逻辑
使用更简洁的class绑定方式
调整首页签到按钮为每行4列的布局
Inline Side-by-side
Showing 2 changed files with 25 additions and 27 deletions
...@@ -20,24 +20,23 @@ ...@@ -20,24 +20,23 @@
20 <!-- <p class="text-green-600 text-sm">+5 积分已添加到您的账户</p> --> 20 <!-- <p class="text-green-600 text-sm">+5 积分已添加到您的账户</p> -->
21 </div> 21 </div>
22 <template v-else> 22 <template v-else>
23 - <div class="flex space-x-2 py-2"> 23 + <div class="grid grid-cols-2 gap-4 py-2"> <!-- grid-cols-2 强制每行2列，gap控制间距 -->
24 <button 24 <button
25 v-for="checkInType in checkInTypes" 25 v-for="checkInType in checkInTypes"
26 :key="checkInType.id" 26 :key="checkInType.id"
27 - :class="[ 27 + class="flex flex-col items-center p-2 rounded-lg border transition-colors
28 - 'flex-1 flex flex-col items-center p-2 rounded-lg transition-colors', 28 + bg-white/70 border-gray-100 hover:bg-white"
29 - selectedCheckIn?.id === checkInType.id 29 + :class="{
30 - ? 'bg-green-100 border border-green-200' 30 + 'bg-green-100 border-green-200': selectedCheckIn?.id === checkInType.id
31 - : 'bg-white/70 border border-gray-100 hover:bg-white' 31 + }"
32 - ]"
33 @click="handleCheckInSelect(checkInType)" 32 @click="handleCheckInSelect(checkInType)"
34 > 33 >
35 - <div :class="[ 34 + <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1 transition-colors
36 - 'w-12 h-12 rounded-full flex items-center justify-center mb-1 transition-colors', 35 + bg-gray-100 text-gray-500"
37 - selectedCheckIn?.id === checkInType.id 36 + :class="{
38 - ? 'bg-green-500 text-white' 37 + 'bg-green-500 text-white': selectedCheckIn?.id === checkInType.id
39 - : 'bg-gray-100 text-gray-500' 38 + }"
40 - ]"> 39 + >
41 <van-icon v-if="checkInType.task_type === 'checkin'" name="edit" size="1.5rem" /> 40 <van-icon v-if="checkInType.task_type === 'checkin'" name="edit" size="1.5rem" />
42 <van-icon v-if="checkInType.task_type === 'upload'" name="tosend" size="1.5rem" /> 41 <van-icon v-if="checkInType.task_type === 'upload'" name="tosend" size="1.5rem" />
43 </div> 42 </div>
......
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-06-06 21:35:16 4 + * @LastEditTime: 2025-06-09 15:26:40
5 * @FilePath: /mlaj/src/views/HomePage.vue 5 * @FilePath: /mlaj/src/views/HomePage.vue
6 * @Description: 美乐爱觉教育首页组件 6 * @Description: 美乐爱觉教育首页组件
7 * 7 *
...@@ -89,24 +89,23 @@ ...@@ -89,24 +89,23 @@
89 <!-- <p class="text-green-600 text-sm">+5 积分已添加到您的账户</p> --> 89 <!-- <p class="text-green-600 text-sm">+5 积分已添加到您的账户</p> -->
90 </div> 90 </div>
91 <template v-else> 91 <template v-else>
92 - <div class="flex space-x-2 py-2"> 92 + <div class="grid grid-cols-4 gap-2 py-2">
93 <button 93 <button
94 v-for="checkInType in checkInTypes" 94 v-for="checkInType in checkInTypes"
95 :key="checkInType.id" 95 :key="checkInType.id"
96 - :class="[ 96 + class="flex flex-col items-center p-2 rounded-lg border transition-colors
97 - 'flex-1 flex flex-col items-center p-2 rounded-lg transition-colors', 97 + bg-white/70 border-gray-100 hover:bg-white"
98 - selectedCheckIn?.id === checkInType.id 98 + :class="{
99 - ? 'bg-green-100 border border-green-200' 99 + 'bg-green-100 border-green-200': selectedCheckIn?.id === checkInType.id
100 - : 'bg-white/70 border border-gray-100 hover:bg-white' 100 + }"
101 - ]"
102 @click="handleCheckInSelect(checkInType)" 101 @click="handleCheckInSelect(checkInType)"
103 > 102 >
104 - <div :class="[ 103 + <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1 transition-colors
105 - 'w-12 h-12 rounded-full flex items-center justify-center mb-1 transition-colors', 104 + bg-gray-100 text-gray-500"
106 - selectedCheckIn?.id === checkInType.id 105 + :class="{
107 - ? 'bg-green-500 text-white' 106 + 'bg-green-500 text-white': selectedCheckIn?.id === checkInType.id
108 - : 'bg-gray-100 text-gray-500' 107 + }"
109 - ]"> 108 + >
110 <van-icon v-if="checkInType.task_type === 'checkin'" name="edit" size="1.5rem" /> 109 <van-icon v-if="checkInType.task_type === 'checkin'" name="edit" size="1.5rem" />
111 <van-icon v-if="checkInType.task_type === 'upload'" name="tosend" size="1.5rem" /> 110 <van-icon v-if="checkInType.task_type === 'upload'" name="tosend" size="1.5rem" />
112 </div> 111 </div>
......