style(IndexCheckInPage): 格式化代码并调整样式

- 统一代码缩进和换行格式 - 调整样式部分的代码结构 - 保持功能不变的情况下优化代码可读性

style(IndexCheckInPage): 格式化代码并调整样式
- 统一代码缩进和换行格式 - 调整样式部分的代码结构 - 保持功能不变的情况下优化代码可读性
hookehuyr
Commit 79c301006f90b5526c14d47767eadd008899a0b7 79c30100 1 parent 2df11411
Showing 1 changed file with 40 additions and 59 deletions
src/views/checkin/IndexCheckInPage.vue
--- a/src/views/checkin/IndexCheckInPage.vue
View file @79c3010
+++ b/src/views/checkin/IndexCheckInPage.vue
View file @79c3010
 <!--
  * @Date: 2025-05-29 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-05-30 15:07:29
+ * @LastEditTime: 2025-05-30 15:11:36
  * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
  * @Description: 文件描述
 -->
 <template>
   <AppLayout :hasTitle="false">
     <van-config-provider :theme-vars="themeVars">
-      <van-calendar
+      <van-calendar title="每日打卡" :poppable="false" :show-confirm="false" :style="{ height: '24rem' }"
-        title="每日打卡"
+        switch-mode="year-month" color="#4caf50" :formatter="formatter" row-height="42" :show-mark="false"
-        :poppable="false"
+        @click-subtitle="onClickSubtitle">
-        :show-confirm="false"
-        :style="{ height: '24rem' }"
-        switch-mode="year-month"
-        color="#4caf50"
-        :formatter="formatter"
-        row-height="42"
-        :show-mark="false"
-        @click-subtitle="onClickSubtitle"
-      >
       </van-calendar>
       <div class="text-wrapper">
@@ -47,7 +38,9 @@
           <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://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" v-for="(item, index) in teamAvatars" :key="index" :style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #FFF' }" />
+          <van-image round width="2.8rem" height="2.8rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+            v-for="(item, index) in teamAvatars" :key="index"
+            :style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #FFF' }" />
         </div>
       </div>
@@ -85,42 +78,28 @@
             <div class="post-text">{{ post.content }}</div>
             <div class="post-media">
               <div v-if="post.images.length" class="post-images">
-                <van-image
+                <van-image width="100" height="100" v-for="(image, index) in post.images" :key="index" :src="image"
-                  width="100"
+                  @click="openImagePreview(index, post)" />
-                  height="100"
-                  v-for="(image, index) in post.images"
-                  :key="index"
-                  :src="image"
-                  @click="openImagePreview(index, post)"
-                />
               </div>
-              <van-image-preview
+              <van-image-preview v-if="currentPost" v-model:show="showImagePreview" :images="currentPost.images"
-                v-if="currentPost"
+                :start-position="startPosition" :show-index="true" @change="onChange" />
-                v-model:show="showImagePreview"
-                :images="currentPost.images"
-                :start-position="startPosition"
-                :show-index="true"
-                @change="onChange"
-              />
               <!-- 视频封面和播放按钮 -->
-              <div v-if="post.video && !post.isPlaying" class="relative w-full rounded-lg overflow-hidden" style="aspect-ratio: 16/9;">
+              <div v-if="post.video && !post.isPlaying" class="relative w-full rounded-lg overflow-hidden"
-                <img :src="post.videoCover || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" :alt="post.content" class="w-full h-full object-cover" />
+                style="aspect-ratio: 16/9;">
+                <img :src="post.videoCover || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
+                  :alt="post.content" class="w-full h-full object-cover" />
                 <div class="absolute inset-0 flex items-center justify-center cursor-pointer bg-black/20"
                   @click="startPlay(post)">
-                  <div class="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center hover:bg-black/70 transition-colors">
+                  <div
+                    class="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center hover:bg-black/70 transition-colors">
                     <van-icon name="play-circle-o" class="text-white" size="30" />
                   </div>
                 </div>
               </div>
               <!-- 视频播放器 -->
-              <VideoPlayer
+              <VideoPlayer v-if="post.video && post.isPlaying" :video-url="post.video"
-                v-if="post.video && post.isPlaying"
+                class="post-video rounded-lg overflow-hidden" ref="(el) => { if(el) videoPlayers.value.push(el) }"
-                :video-url="post.video"
+                @onPlay="(player) => handleVideoPlay(player, post)" @onPause="() => handleVideoPause(post)" />
-                class="post-video rounded-lg overflow-hidden"
-                ref="(el) => { if(el) videoPlayers.value.push(el) }"
-                @onPlay="(player) => handleVideoPlay(player, post)"
-                @onPause="() => handleVideoPause(post)"
-              />
               <AudioPlayer v-if="post.audio.length" :songs="post.audio" class="post-audio" />
             </div>
           </div>
@@ -318,7 +297,7 @@ const formatter = (day) => {
   if (month === 5) {
     if (checkin_days.includes(date)) {
       day.className = 'calendar-checkin';
-      day.type ='selected';
+      day.type = 'selected';
     }
   }
@@ -331,27 +310,28 @@ const onClickSubtitle = (evt) => {
 </script>
 <style lang="less">
-  .calendar-checkin {
+.calendar-checkin {
-    .van-calendar__selected-day {
+  .van-calendar__selected-day {
-      background: #a2d8a3 !important;
+    background: #a2d8a3 !important;
-    }
   }
+}
-  .text-wrapper {
+.text-wrapper {
-    padding: 1rem;
+  padding: 1rem;
-    color: #4caf50;
+  color: #4caf50;
-    .text-header {
-      font-size: 1.15rem;
-    }
-    .grade-percentage-main {
+  .text-header {
-      padding: 0.75rem 1rem;
+    font-size: 1.15rem;
-    }
-    .class-percentage-main {
-      padding: 0.75rem 1rem;
-    }
   }
-</style>
+
+  .grade-percentage-main {
+    padding: 0.75rem 1rem;
+  }
+
+  .class-percentage-main {
+    padding: 0.75rem 1rem;
+  }
+}
 .post-card {
   margin: 1rem 0;
@@ -415,3 +395,4 @@ const onClickSubtitle = (evt) => {
     }
   }
 }
+</style>