feat(打卡页面): 添加悬浮打卡按钮的紧凑模式

在页面滚动超过200px时，将悬浮打卡按钮切换为紧凑的圆形模式以节省空间

feat(打卡页面): 添加悬浮打卡按钮的紧凑模式
在页面滚动超过200px时，将悬浮打卡按钮切换为紧凑的圆形模式以节省空间
hookehuyr
Commit b87af20dac982f5cb032312591ef520ff055b2e7 b87af20d 1 parent 01c115ff
Showing 1 changed file with 54 additions and 4 deletions
src/views/checkin/IndexCheckInPage.vue
--- a/src/views/checkin/IndexCheckInPage.vue
View file @b87af20
+++ b/src/views/checkin/IndexCheckInPage.vue
View file @b87af20
 <!--
   * @Date: 2025-05-29 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-18 14:43:10
+ * @LastEditTime: 2025-12-18 22:47:39
  * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
   * @Description: 文件描述
 -->
@@ -123,7 +123,7 @@
     <van-back-top right="5vw" bottom="25vh" offset="600" />
     <!-- 底部悬浮打卡按钮 -->
-    <div v-if="!taskDetail.is_finish" class="floating-checkin-button">
+    <div v-if="!taskDetail.is_finish" class="floating-checkin-button" :class="{ 'is-compact': isCompactButton }">
       <van-button
         type="primary"
         round
@@ -131,7 +131,7 @@
         class="checkin-action-button"
       >
         <van-icon name="edit" size="1.2rem" />
-        <span style="margin-left: 0.5rem;">我要打卡</span>
+        <span class="button-text">我要打卡</span>
       </van-button>
     </div>
   </AppLayout>
@@ -146,7 +146,7 @@ import FrostedGlass from "@/components/ui/FrostedGlass.vue";
 import CollapsibleCalendar from "@/components/ui/CollapsibleCalendar.vue";
 import PostCountModel from "@/components/count/postCountModel.vue";
 import CheckinCard from "@/components/checkin/CheckinCard.vue";
-import { useTitle, useResizeObserver } from '@vueuse/core';
+import { useTitle, useResizeObserver, useScroll } from '@vueuse/core';
 import dayjs from 'dayjs';
 import { getTaskDetailAPI, getUploadTaskListAPI, delUploadTaskInfoAPI, likeUploadTaskInfoAPI, dislikeUploadTaskInfoAPI } from "@/api/checkin";
@@ -156,6 +156,10 @@ const route = useRoute()
 const router = useRouter()
 useTitle(route.meta.title);
+// 滚动监听
+const { y } = useScroll(window)
+const isCompactButton = computed(() => y.value > 200)
+
 // 动态字段文字
 const dynamicFieldText = ref('感恩')
@@ -792,15 +796,61 @@ const formatData = (data) => {
   right: 1rem;
   z-index: 10;
   padding: 0 1rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none; /* 允许点击穿透，只响应按钮点击 */
+  display: flex;
+  justify-content: center;
 }
 .floating-checkin-button .checkin-action-button {
+  pointer-events: auto;
   width: 100%;
   height: 3rem;
   font-size: 1rem;
   font-weight: 600;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   border: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.floating-checkin-button .button-text {
+  margin-left: 0.5rem;
+  transition: all 0.3s ease;
+  max-width: 100px;
+  opacity: 1;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 紧凑模式（圆形按钮） */
+.floating-checkin-button.is-compact {
+  left: auto;
+  right: 1.5rem;
+  width: auto;
+  padding: 0;
+}
+
+.floating-checkin-button.is-compact .checkin-action-button {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  padding: 0;
+}
+
+/* 放大图标 */
+.floating-checkin-button.is-compact .checkin-action-button :deep(.van-icon) {
+  font-size: 1.5rem !important;
+}
+
+.floating-checkin-button.is-compact .button-text {
+  max-width: 0;
+  margin-left: 0;
+  opacity: 0;
+  /* 确保隐藏后完全不占位 */
+  display: none;
 }
 :deep(.van-calendar__footer) {