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

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

 <!--
  * @Date: 2025-05-29 15:34:17
  * @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
  * @Description: 文件描述
 -->
@@ -15,43 +15,45 @@
 
       <div class="text-wrapper">
         <div class="text-header">目标进度</div>
-        <div class="grade-percentage-main">
-          <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;">
-            <van-col span="12">
-              <span>年级目标</span>
-            </van-col>
-            <van-col span="12" style="text-align: right;">
-              <span style="font-weight: bold;">{{ progress1 }}%</span>
-            </van-col>
-          </van-row>
-          <van-progress :percentage="progress1" color="#4caf50" :show-pivot="false" />
-        </div>
-        <div class="class-percentage-main">
-          <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;">
-            <van-col span="12">
-              <span>班级目标</span>
-            </van-col>
-            <van-col span="12" style="text-align: right;">
-              <span style="font-weight: bold;">{{ progress2 }}%</span>
-            </van-col>
-          </van-row>
-          <van-progress :percentage="progress2" color="#4caf50" :show-pivot="false" />
-        </div>
-        <div style="padding: 0.75rem 1rem;">
-          <van-image round width="2.8rem" height="2.8rem" src="https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg"
-            v-for="(item, index) in teamAvatars" :key="index"
-            :style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #FFF' }" />
+        <div style="background-color: #FFF; margin-top: 1rem;">
+          <div class="grade-percentage-main">
+            <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;">
+              <van-col span="12">
+                <span>年级目标</span>
+              </van-col>
+              <van-col span="12" style="text-align: right;">
+                <span style="font-weight: bold;">{{ progress1 }}%</span>
+              </van-col>
+            </van-row>
+            <van-progress :percentage="progress1" color="#4caf50" :show-pivot="false" />
+          </div>
+          <div class="class-percentage-main">
+            <van-row justify="space-between" style="margin: 0.5rem 0; font-size: 0.9rem;">
+              <van-col span="12">
+                <span>班级目标</span>
+              </van-col>
+              <van-col span="12" style="text-align: right;">
+                <span style="font-weight: bold;">{{ progress2 }}%</span>
+              </van-col>
+            </van-row>
+            <van-progress :percentage="progress2" color="#4caf50" :show-pivot="false" />
+          </div>
+          <div style="padding: 0.75rem 1rem;">
+            <van-image round width="2.8rem" height="2.8rem" src="https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg"
+              v-for="(item, index) in teamAvatars" :key="index"
+              :style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #FFF' }" />
+          </div>
         </div>
       </div>
 
       <div class="text-wrapper">
         <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 style="font-size: 0.85rem;">图文上传</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 style="font-size: 0.85rem;">视频/语音</div>
           </div>
@@ -144,9 +146,11 @@ import AppLayout from "@/components/layout/AppLayout.vue";
 import FrostedGlass from "@/components/ui/FrostedGlass.vue";
 import VideoPlayer from "@/components/ui/VideoPlayer.vue";
 import AudioPlayer from "@/components/ui/AudioPlayer.vue";
+import { useTitle } from '@vueuse/core';
 
 const route = useRoute()
 const router = useRouter()
+useTitle(route.meta.title);
 
 // 存储所有视频播放器的引用
 const videoPlayers = ref([]);
@@ -520,6 +524,20 @@ const handLike = (post) => {
   .class-percentage-main {
     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 {