hookehuyr

style(views): 调整作业标题的布局样式

将作业标题的横向布局改为纵向布局,优化标签和标题的宽度及间距
1 <!-- 1 <!--
2 * @Date: 2025-05-29 15:34:17 2 * @Date: 2025-05-29 15:34:17
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-12-18 21:00:53 4 + * @LastEditTime: 2025-12-18 21:14:29
5 * @FilePath: /mlaj/src/views/teacher/checkinPage.vue 5 * @FilePath: /mlaj/src/views/teacher/checkinPage.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -109,13 +109,13 @@ ...@@ -109,13 +109,13 @@
109 @audio-play="handleAudioPlay" 109 @audio-play="handleAudioPlay"
110 > 110 >
111 <template #content-top> 111 <template #content-top>
112 - <div class="flex items-center mb-4 w-full"> 112 + <div class="flex flex-col mb-4 w-full">
113 <!-- 大作业名称作为标签显示 --> 113 <!-- 大作业名称作为标签显示 -->
114 - <div v-if="post.task_title" class="bg-green-50 text-green-600 px-2 py-0.5 rounded text-xs border border-green-100 mr-2 max-w-[40%] truncate flex-shrink-0"> 114 + <div v-if="post.task_title" class="w-fit max-w-[80%] bg-green-50 text-green-600 px-2 py-0.5 rounded text-xs border border-green-100 mb-2 truncate">
115 {{ post.task_title }} 115 {{ post.task_title }}
116 </div> 116 </div>
117 <!-- 小作业名称 --> 117 <!-- 小作业名称 -->
118 - <div class="flex-1 font-bold text-gray-700 text-sm truncate"> 118 + <div class="font-bold text-gray-700 text-sm truncate w-full ml-2">
119 {{ post.subtask_title || '' }} 119 {{ post.subtask_title || '' }}
120 </div> 120 </div>
121 </div> 121 </div>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2025-06-19 17:12:19 3 * @Date: 2025-06-19 17:12:19
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2025-12-18 20:56:09 5 + * @LastEditTime: 2025-12-18 21:14:40
6 * @FilePath: /mlaj/src/views/teacher/studentPage.vue 6 * @FilePath: /mlaj/src/views/teacher/studentPage.vue
7 * @Description: 学生详情页面 7 * @Description: 学生详情页面
8 --> 8 -->
...@@ -209,13 +209,13 @@ ...@@ -209,13 +209,13 @@
209 @audio-play="handleAudioPlay" 209 @audio-play="handleAudioPlay"
210 > 210 >
211 <template #content-top> 211 <template #content-top>
212 - <div class="flex items-center mb-4 w-full"> 212 + <div class="flex flex-col mb-4 w-full">
213 <!-- 大作业名称作为标签显示 --> 213 <!-- 大作业名称作为标签显示 -->
214 - <div v-if="post.task_title" class="bg-green-50 text-green-600 px-2 py-0.5 rounded text-xs border border-green-100 mr-2 max-w-[40%] truncate flex-shrink-0"> 214 + <div v-if="post.task_title" class="w-fit max-w-[80%] bg-green-50 text-green-600 px-2 py-0.5 rounded text-xs border border-green-100 mb-2 truncate">
215 {{ post.task_title }} 215 {{ post.task_title }}
216 </div> 216 </div>
217 <!-- 小作业名称 --> 217 <!-- 小作业名称 -->
218 - <div class="flex-1 font-bold text-gray-700 text-sm truncate"> 218 + <div class="font-bold text-gray-700 text-sm truncate w-full ml-2">
219 {{ post.subtask_title || '' }} 219 {{ post.subtask_title || '' }}
220 </div> 220 </div>
221 </div> 221 </div>
......