Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4c1c2f84 1 parent 2240c33e

refactor(teacher/taskHomePage): 重构作业切换区域的UI样式和布局 

将作业切换区域从简单的文本按钮改为包含当前作业名称和切换图标的卡片样式，提升用户体验和视觉一致性
Inline Side-by-side
Showing 1 changed file with 13 additions and 6 deletions
1 <!-- 1 <!--
2 * @Date: 2025-11-19 21:00:00 2 * @Date: 2025-11-19 21:00:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-12-15 13:21:41 4 + * @LastEditTime: 2025-12-15 18:18:51
5 * @FilePath: /mlaj/src/views/teacher/taskHomePage.vue 5 * @FilePath: /mlaj/src/views/teacher/taskHomePage.vue
6 * @Description: 教师端作业主页（头部介绍、统计、日历与学生完成情况） 6 * @Description: 教师端作业主页（头部介绍、统计、日历与学生完成情况）
7 --> 7 -->
...@@ -9,15 +9,22 @@ ...@@ -9,15 +9,22 @@
9 <div class="TaskHomePage"> 9 <div class="TaskHomePage">
10 <!-- 头部卡片：名称、介绍、细项 --> 10 <!-- 头部卡片：名称、介绍、细项 -->
11 <div class="headCard bg-white rounded-lg shadow px-4 py-4"> 11 <div class="headCard bg-white rounded-lg shadow px-4 py-4">
12 - <div class="flex justify-between items-start mb-2"> 12 + <div class="title text-2xl font-bold text-gray-900 mb-3">{{ task_title }}</div>
13 - <div class="title text-2xl font-bold text-gray-900 mr-2">{{ task_title }}</div> 13 +
14 + <!-- 作业切换区域 -->
14 <div v-if="subtask_list.length > 0" 15 <div v-if="subtask_list.length > 0"
15 - class="text-sm text-green-600 border border-green-600 rounded px-2 py-1 cursor-pointer whitespace-nowrap ml-2" 16 + class="flex items-center justify-between bg-green-50 rounded-lg p-3 mb-4 cursor-pointer active:bg-green-100 border border-green-100"
16 @click="show_subtask_picker = true"> 17 @click="show_subtask_picker = true">
17 - {{ '切换作业' }} 18 + <div class="flex items-center overflow-hidden">
19 + <span class="text-xs text-green-600 mr-2 flex-shrink-0 bg-white px-1.5 py-0.5 rounded border border-green-200">当前</span>
20 + <span class="text-sm font-bold text-gray-800 truncate">{{ current_subtask_name }}</span>
21 + </div>
22 + <div class="flex items-center text-green-600 flex-shrink-0 ml-2">
23 + <span class="text-xs mr-1 font-medium">切换作业</span>
24 + <van-icon name="exchange" size="14" />
18 </div> 25 </div>
19 </div> 26 </div>
20 - <div class="text-sm font-bold text-gray-700">{{ current_subtask_name }}</div> 27 +
21 <div class="intro text-base text-gray-700 leading-relaxed mb-3" v-html="task_intro"></div> 28 <div class="intro text-base text-gray-700 leading-relaxed mb-3" v-html="task_intro"></div>
22 <div class="details text-sm text-gray-600" v-if="!subtask_list.length || selectedSubtaskId"> 29 <div class="details text-sm text-gray-600" v-if="!subtask_list.length || selectedSubtaskId">
23 <div class="detailItem">周期：{{ task_details.cycle }}</div> 30 <div class="detailItem">周期：{{ task_details.cycle }}</div>
......