fix(CheckinDetailPage): 修复作业描述显示逻辑并优化富文本样式

重构作业描述显示逻辑，根据选中的子任务显示对应的描述或主任务描述
优化富文本内容的样式，确保图片、表格等元素在容器内正确显示且不溢出

@@ -3,10 +3,10 @@
         <!-- 页面内容 -->
         <div class="page-content">
             <!-- 作业描述 -->
-            <div v-if="taskDetail.note" class="section-wrapper">
+            <div class="section-wrapper">
                 <div class="section-title">作业描述</div>
                 <div class="section-content">
-                    <div v-if="taskDetail.note" class="description-text" v-html="taskDetail.note">
+                    <div v-if="displayTaskNote" class="description-text" v-html="displayTaskNote">
                     </div>
                     <div v-else class="no-description">
                         暂无作业描述
@@ -218,6 +218,16 @@ const dynamicFieldText = ref('感恩')
 // 任务详情数据
 const taskDetail = ref({})
 
+// 显示的作业描述
+const displayTaskNote = computed(() => {
+    const selected_subtask_id = selectedTaskValue.value?.[0]
+    if (selected_subtask_id) {
+        const option = taskOptions.value.find(o => o.value === selected_subtask_id)
+        return option?.note || taskDetail.value?.note || ''
+    }
+    return taskDetail.value?.note || ''
+})
+
 // 打卡类型
 const taskType = computed(() => route.query.task_type)
 
@@ -951,6 +961,7 @@ onMounted(async () => {
         taskOptions.value = [...subtask_list.data.map(item => ({
                 text: item.is_makeup ? '补卡：' + item.title : item.title,
                 value: item.id,
+                note: item.note, // 作业描述
                 is_makeup: item.is_makeup, // 是否为补录
                 field_list: item.field_list, // 动态字段列表
                 person_type: item.person_type, // 打卡对象类型
@@ -1040,18 +1051,47 @@ onMounted(async () => {
 
 .section-content {
     padding: 1rem;
+    overflow: hidden;
 }
 
 .description-text {
     color: #666;
     line-height: 1.6;
     font-size: 0.95rem;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
 
+    :deep(*) {
+        max-width: 100% !important;
+        box-sizing: border-box;
+    }
 
-    :deep(&) {
-        img {
-            width: 100%;
-        }
+    :deep(img) {
+        max-width: 100% !important;
+        height: auto;
+        display: block;
+    }
+
+    :deep(p) {
+        margin: 0.5rem 0;
+    }
+
+    :deep(table) {
+        max-width: 100% !important;
+        border-collapse: collapse;
+        overflow-x: auto;
+        display: table;
+        width: 100%;
+    }
+
+    :deep(pre) {
+        max-width: 100% !important;
+        overflow-x: auto;
+        white-space: pre-wrap;
+        word-wrap: break-word;
     }
 
     // 富文本内容样式