hookehuyr

feat(检查页面): 添加作业描述显示区域

在检查页面中添加作业描述显示区域,包括样式和空状态处理
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: 2026-01-18 21:57:29 4 + * @LastEditTime: 2026-01-18 22:09:36
5 * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue 5 * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -25,6 +25,15 @@ ...@@ -25,6 +25,15 @@
25 25
26 <!-- 可滚动的内容区域 --> 26 <!-- 可滚动的内容区域 -->
27 <div class="scrollable-content"> 27 <div class="scrollable-content">
28 + <!-- 作业描述 -->
29 + <div v-if="taskDetail.note" class="text-wrapper">
30 + <div class="text-header">作业描述</div>
31 + <div class="task-note-box">
32 + <div v-if="taskDetail.note" class="task-note-text" v-html="taskDetail.note"></div>
33 + <div v-else class="task-note-empty">暂无作业描述</div>
34 + </div>
35 + </div>
36 +
28 <div v-if="taskDetail.task_type === 'count'" class="text-wrapper" style="padding-bottom: 0;"> 37 <div v-if="taskDetail.task_type === 'count'" class="text-wrapper" style="padding-bottom: 0;">
29 <div class="text-header">我的{{ dynamicFieldText }}</div> 38 <div class="text-header">我的{{ dynamicFieldText }}</div>
30 <div style="margin: 0.5rem 0;"> 39 <div style="margin: 0.5rem 0;">
...@@ -891,6 +900,37 @@ onActivated(async () => { ...@@ -891,6 +900,37 @@ onActivated(async () => {
891 font-size: 1.15rem; 900 font-size: 1.15rem;
892 } 901 }
893 902
903 + .task-note-box {
904 + background-color: #fff;
905 + margin-top: 1rem;
906 + border-radius: 12px;
907 + padding: 0.75rem 1rem;
908 + }
909 +
910 + .task-note-text {
911 + color: #333;
912 + font-size: 0.9rem;
913 + line-height: 1.6;
914 + word-break: break-word;
915 +
916 + p {
917 + margin: 0.4rem 0;
918 + }
919 +
920 + img {
921 + max-width: 100%;
922 + height: auto;
923 + border-radius: 8px;
924 + display: block;
925 + margin: 0.5rem 0;
926 + }
927 + }
928 +
929 + .task-note-empty {
930 + color: #9ca3af;
931 + font-size: 0.9rem;
932 + }
933 +
894 .grade-percentage-main { 934 .grade-percentage-main {
895 padding: 0.75rem 1rem; 935 padding: 0.75rem 1rem;
896 } 936 }
......