diff --git a/src/components/UploadCover/index.scss b/src/components/UploadCover/index.scss
index e16b3a0..cb89e60 100644
--- a/src/components/UploadCover/index.scss
+++ b/src/components/UploadCover/index.scss
@@ -88,6 +88,7 @@
           height: 100%;
           aspect-ratio: 1/1;
           border-radius: 20px;
+          object-fit: cover;
         }
 
         .cover-image-item-delete {
diff --git a/src/pages/detail/index.tsx b/src/pages/detail/index.tsx
index f880582..ea2820a 100644
--- a/src/pages/detail/index.tsx
+++ b/src/pages/detail/index.tsx
@@ -625,22 +625,26 @@ function GamePlayAndRequirement(props) {
 
 // 参与者
 function Participants(props) {
-  const { detail = {} } = props;
+  const { detail = {}, handleJoinGame } = props;
   const participants = detail.participants || [];
+  const { participant_count, max_participants, user_action_status = {} } = detail
+  const { can_join } = user_action_status
+  const leftCount = max_participants - participant_count
   const organizer_id = Number(detail.publisher_id);
   return (
     <View className="detail-page-content-participants">
       <View className="participants-title">
         <Text>参与者</Text>
         <Text>·</Text>
-        <Text>剩余空位 3</Text>
+        <Text>{leftCount > 0 ? `剩余空位 ${leftCount}` : '已满员'}</Text>
       </View>
       <View className="participants-list">
         {/* application */}
-        <View
+        {can_join && <View
           className="participants-list-application"
           onClick={() => {
-            Taro.showToast({ title: "To be continued", icon: "none" });
+            handleJoinGame()
+            // Taro.showToast({ title: "To be continued", icon: "none" });
           }}
         >
           <Image
@@ -648,7 +652,7 @@ function Participants(props) {
             src={img.ICON_DETAIL_APPLICATION_ADD}
           />
           <Text className="participants-list-application-text">申请加入</Text>
-        </View>
+        </View>}
         {/* participants list */}
         <ScrollView className="participants-list-scroll" scrollX>
           <View
@@ -957,7 +961,7 @@ function Index() {
         {/* gameplay requirements */}
         <GamePlayAndRequirement detail={detail} />
         {/* participants */}
-        <Participants detail={detail} />
+        <Participants detail={detail} handleJoinGame={handleJoinGame} />
         {/* supplemental notes */}
         <SupplementalNotes detail={detail} />
         {/* organizer and recommend games by organizer */}
diff --git a/src/store/listStore.ts b/src/store/listStore.ts
index 7de11ab..d48640e 100644
--- a/src/store/listStore.ts
+++ b/src/store/listStore.ts
@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import dayjs from "dayjs";
 import {
   getGamesList,
   getGamesIntegrateList,
@@ -19,9 +20,10 @@ import dateRangeUtils from '@/utils/dateRange'
 type TennisStore = ListState & ListActions;
 
 const toDate = dateRangeUtils?.formatDate(new Date())
+const defaultDateRange: [string, string] = [dayjs().format('YYYY-MM-DD'), dayjs().add(1, 'M').format('YYYY-MM-DD')]
 
 const defaultFilterOptions: IFilterOptions = {
-  dateRange: [toDate, toDate], // 日期区间
+  dateRange: defaultDateRange, // 日期区间
   timeSlot: "", // 时间段
   ntrp: [1, 5], // NTRP 水平区间
   venueType: "", // 场地类型