style(IndexCheckInPage): 优化页面样式布局和代码结构

- 为目标进度区域添加白色背景提升视觉层次
- 将上传附件区域的样式提取为单独的CSS类
- 使用VueUse的useTitle设置页面标题
- 保持原有功能不变的情况下改进代码可维护性

 <!--
 <!--
  * @Date: 2025-05-29 15:34:17
  * @Date: 2025-05-29 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-03 13:43:53
+ * @LastEditTime: 2025-06-03 14:36:54
  * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
  * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -15,6 +15,7 @@
 
 
       <div class="text-wrapper">
       <div class="text-wrapper">
         <div class="text-header">目标进度</div>
         <div class="text-header">目标进度</div>
+        <div style="background-color: #FFF; margin-top: 1rem;">
           <div class="grade-percentage-main">
           <div class="grade-percentage-main">
             <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;">
             <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;">
               <van-col span="12">
               <van-col span="12">
@@ -43,15 +44,16 @@
               :style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #FFF' }" />
               :style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #FFF' }" />
           </div>
           </div>
         </div>
         </div>
+      </div>
 
 
       <div class="text-wrapper">
       <div class="text-wrapper">
         <div class="text-header">上传附件</div>
         <div class="text-header">上传附件</div>
-        <div style="display: flex; margin: 1rem 0; gap: 1rem;">
-          <div @click="goToCheckinImagePage" style="text-align: center; border: 1px solid #a2d8a3; border-radius: 5px; padding: 1rem 0; flex: 1;">
+        <div class="upload-wrapper">
+          <div @click="goToCheckinImagePage" class="upload-boxer">
             <div><van-icon name="photo" size="2.5rem" /></div>
             <div><van-icon name="photo" size="2.5rem" /></div>
             <div style="font-size: 0.85rem;">图文上传</div>
             <div style="font-size: 0.85rem;">图文上传</div>
           </div>
           </div>
-          <div @click="goToCheckinFilePage" style="text-align: center; border: 1px solid #a2d8a3; border-radius: 5px; padding: 1rem 0; flex: 1;">
+          <div @click="goToCheckinFilePage" class="upload-boxer">
             <div><van-icon name="video" size="2.5rem" /></div>
             <div><van-icon name="video" size="2.5rem" /></div>
             <div style="font-size: 0.85rem;">视频/语音</div>
             <div style="font-size: 0.85rem;">视频/语音</div>
           </div>
           </div>
@@ -144,9 +146,11 @@ import AppLayout from "@/components/layout/AppLayout.vue";
 import FrostedGlass from "@/components/ui/FrostedGlass.vue";
 import FrostedGlass from "@/components/ui/FrostedGlass.vue";
 import VideoPlayer from "@/components/ui/VideoPlayer.vue";
 import VideoPlayer from "@/components/ui/VideoPlayer.vue";
 import AudioPlayer from "@/components/ui/AudioPlayer.vue";
 import AudioPlayer from "@/components/ui/AudioPlayer.vue";
+import { useTitle } from '@vueuse/core';
 
 
 const route = useRoute()
 const route = useRoute()
 const router = useRouter()
 const router = useRouter()
+useTitle(route.meta.title);
 
 
 // 存储所有视频播放器的引用
 // 存储所有视频播放器的引用
 const videoPlayers = ref([]);
 const videoPlayers = ref([]);
@@ -520,6 +524,20 @@ const handLike = (post) => {
   .class-percentage-main {
   .class-percentage-main {
     padding: 0.75rem 1rem;
     padding: 0.75rem 1rem;
   }
   }
+
+  .upload-wrapper {
+    display: flex;
+    margin: 1rem 0;
+    gap: 1rem;
+    .upload-boxer {
+      text-align: center;
+      border: 1px solid #a2d8a3;
+      border-radius: 5px;
+      padding: 1rem 0;
+      flex: 1;
+      background-color: #fff;
+    }
+  }
 }
 }
 
 
 .post-card {
 .post-card {