diff --git a/src/app.config.ts b/src/app.config.ts
index 7b1fcad..7520adf 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -1,10 +1,13 @@
 export default defineAppConfig({
   pages: [
-    'pages/list/index',
+     'pages/list/index',
     'pages/publishBall/index',
+    // 'pages/userInfo/myself/index',
     // 'pages/login/index/index',
     // 'pages/login/verification/index',
     // 'pages/login/terms/index',
+    
+   
     // 'pages/mapDisplay/index',
     //  'pages/index/index'
   ],
diff --git a/src/pages/userInfo/myself/index.config.ts b/src/pages/userInfo/myself/index.config.ts
new file mode 100644
index 0000000..eb44728
--- /dev/null
+++ b/src/pages/userInfo/myself/index.config.ts
@@ -0,0 +1,9 @@
+export default {
+  navigationBarTitleText: '个人主页',
+  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarTextStyle: 'black',
+  backgroundColor: '#FAFAFA',
+  enablePullDownRefresh: false,
+  disableScroll: false,
+  navigationStyle: 'custom'
+} 
\ No newline at end of file
diff --git a/src/pages/userInfo/myself/index.scss b/src/pages/userInfo/myself/index.scss
new file mode 100644
index 0000000..2aa9ace
--- /dev/null
+++ b/src/pages/userInfo/myself/index.scss
@@ -0,0 +1,600 @@
+// 个人页面样式
+.myself_page {
+  min-height: 100vh;
+  background: radial-gradient(circle at 50% 0%, rgba(238, 255, 220, 1) 0%, rgba(255, 255, 255, 1) 37%);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+// 主要内容区域
+.main_content {
+  position: relative;
+  z-index: 5;
+  flex: 1;
+  margin-top: 0;
+  box-sizing: border-box;
+  overflow-y: auto;
+  padding: 15px 15px 15px;
+
+  // 用户信息区域
+  .user_info_section {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 16px;
+
+    // 基本信息
+    .basic_info {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      .avatar_container {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        overflow: hidden;
+        box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
+
+        .avatar {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .info_container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .nickname {
+          font-family: 'PingFang SC';
+          font-weight: 600;
+          font-size: 20px;
+          line-height: 1.4em;
+          letter-spacing: 1.9%;
+          color: #000000;
+        }
+
+        .join_date {
+          font-family: 'PingFang SC';
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 1.4em;
+          letter-spacing: 2.7%;
+          color: rgba(0, 0, 0, 0.35);
+        }
+      }
+    }
+
+    // 统计数据
+    .stats_section {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 24px;
+
+      .stats_container {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+
+        .stat_item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .stat_number {
+            font-family: 'PingFang SC';
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 1.4em;
+            letter-spacing: 2.1%;
+            color: rgba(0, 0, 0, 0.85);
+          }
+
+          .stat_label {
+            font-family: 'PingFang SC';
+            font-weight: 500;
+            font-size: 12px;
+            line-height: 1.4em;
+            letter-spacing: 3.2%;
+            color: rgba(0, 0, 0, 0.35);
+          }
+        }
+      }
+
+      .action_buttons {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        
+      
+
+        .follow_button {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          padding: 12px 16px 12px 12px;
+          height: 40px;
+          background: #000000;
+          border: 0.5px solid rgba(0, 0, 0, 0.06);
+          border-radius: 999px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+
+          &.following {
+            background: #FFFFFF;
+            color: #000000;
+          }
+
+          .button_icon {
+            width: 20px;
+            height: 20px;
+          }
+
+          .button_text {
+            font-family: 'PingFang SC';
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 1.4em;
+            color: #FFFFFF;
+
+            .following & {
+              color: #000000;
+            }
+          }
+        }
+
+        .message_button {
+          width: 40px;
+          height: 40px;
+          background: #FFFFFF;
+          border: 0.5px solid rgba(0, 0, 0, 0.12);
+          border-radius: 999px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: all 0.3s ease;
+
+          .button_icon {
+            width: 18px;
+            height: 18px;
+          }
+        }
+
+        .edit_button {
+          min-width: 60px;
+          height: 40px;
+          background: #FFFFFF;
+          border: 0.5px solid rgba(0, 0, 0, 0.12);
+          border-radius: 999px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          padding: 0 12px;
+
+          .button_text {
+            font-family: 'PingFang SC';
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 1.4em;
+            color: #000000;
+          }
+        }
+
+        .share_button {
+          min-width: 60px;
+          height: 40px;
+          background: #FFFFFF;
+          border: 0.5px solid rgba(0, 0, 0, 0.12);
+          border-radius: 999px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          padding: 0 12px;
+          margin: 0px !important;
+
+          .button_text {
+            font-family: 'PingFang SC';
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 1.4em;
+            color: #000000;
+          }
+        }
+      }
+    }
+
+    // 标签和简介
+    .tags_bio_section {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      .tags_container {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+
+        .tag_item {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          padding: 6px 8px;
+          height: 20px;
+          background: #FFFFFF;
+          border: 0.5px solid rgba(0, 0, 0, 0.16);
+          border-radius: 999px;
+
+          .tag_icon {
+            width: 12px;
+            height: 12px;
+          }
+
+          .tag_text {
+            font-family: 'PingFang SC';
+            font-weight: 500;
+            font-size: 11px;
+            line-height: 1.8em;
+            letter-spacing: -2.1%;
+            color: #000000;
+          }
+        }
+      }
+
+      .bio_text {
+        font-family: 'PingFang SC';
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 1.571em;
+        color: rgba(0, 0, 0, 0.65);
+        white-space: pre-line;
+      }
+    }
+
+    // 球局订单和收藏功能
+    .quick_actions_section {
+      margin-bottom: 16px;
+
+      .action_card {
+        display: flex;
+        align-items: center;
+        background: #FFFFFF;
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        border-radius: 12px;
+        box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
+        overflow: hidden;
+
+        .action_content {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          padding: 20px 0;
+          cursor: pointer;
+          transition: background-color 0.3s ease;
+
+          &:hover {
+            background-color: rgba(0, 0, 0, 0.02);
+          }
+
+          .action_icon {
+            width: 20px;
+            height: 20px;
+          }
+
+          .action_text {
+            font-family: 'PingFang SC';
+            font-weight: 600;
+            font-size: 15px;
+            line-height: 1.4em;
+            color: #000000;
+          }
+        }
+
+        .action_divider {
+          width: 1px;
+          height: 16px;
+          background: rgba(0, 0, 0, 0.06);
+        }
+      }
+    }
+  }
+
+  // 球局类型标签页
+  .game_tabs_section {
+    margin-bottom: 16px;
+
+    .tab_container {
+      display: flex;
+      gap: 16px;
+      padding: 12px 15px;
+
+      .tab_item {
+        padding: 12px 0;
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        .tab_text {
+          font-family: 'PingFang SC';
+          font-weight: 600;
+          font-size: 20px;
+          line-height: 1.4em;
+          letter-spacing: 1.9%;
+          color: rgba(0, 0, 0, 0.85);
+          transition: color 0.3s ease;
+        }
+
+        &.active {
+          .tab_text {
+            color: #000000;
+          }
+        }
+
+        &:not(.active) {
+          .tab_text {
+            color: rgba(0, 0, 0, 0.2);
+          }
+        }
+      }
+    }
+  }
+
+  // 球局列表区域
+  .game_list_section {
+    .date_header {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 10px 15px;
+      margin-bottom: 16px;
+
+      .date_text {
+        font-family: 'PingFang SC';
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 1.4em;
+        letter-spacing: 2.71%;
+        color: rgba(0, 0, 0, 0.85);
+      }
+
+      .separator {
+        font-family: 'PingFang SC';
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 1.4em;
+        letter-spacing: 2.11%;
+        color: rgba(0, 0, 0, 0.35);
+      }
+
+      .weekday_text {
+        font-family: 'PingFang SC';
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 1.4em;
+        letter-spacing: 2.71%;
+        color: rgba(0, 0, 0, 0.85);
+      }
+    }
+
+    // 球局卡片
+    .game_cards {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      padding: 0 5px 15px;
+
+      .game_card {
+        background: #FFFFFF;
+        border: 0.5px solid rgba(0, 0, 0, 0.08);
+        border-radius: 20px;
+        padding: 0 0 12px;
+        box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
+        cursor: pointer;
+        transition: all 0.3s ease;
+        position: relative;
+
+        &:active {
+          transform: scale(0.98);
+        }
+
+        // 球局标题和类型
+        .game_header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 12px 15px 0;
+
+          .game_title {
+            font-family: 'PingFang SC';
+            font-weight: 600;
+            font-size: 16px;
+            line-height: 1.5em;
+            color: #000000;
+          }
+
+          .game_type_icon {
+            width: 16px;
+            height: 16px;
+
+            .type_icon {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+
+        // 球局时间
+        .game_time {
+          padding: 6px 15px 0;
+
+          .time_text {
+            font-family: 'PingFang SC';
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 1.5em;
+            color: rgba(60, 60, 67, 0.6);
+          }
+        }
+
+        // 球局地点和类型
+        .game_location {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          padding: 4px 15px 0;
+
+          .location_text,
+          .type_text,
+          .distance_text {
+            font-family: 'PingFang SC';
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 1.5em;
+            color: rgba(60, 60, 67, 0.6);
+          }
+
+          .separator {
+            font-family: 'PingFang SC';
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 1.3em;
+            color: rgba(60, 60, 67, 0.3);
+          }
+        }
+
+        // 球局图片
+        .game_images {
+          position: absolute;
+          top: 11px;
+          right: 5px;
+          width: 100px;
+          height: 100px;
+          box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
+
+          .game_image {
+            position: absolute;
+            width: 56.44px;
+            height: 56.44px;
+            border-radius: 9px;
+            border: 1.5px solid #FFFFFF;
+
+            &:nth-child(1) {
+              top: 4.18px;
+              left: 19.18px;
+            }
+
+            &:nth-child(2) {
+              top: 26.5px;
+              left: 38px;
+              width: 61.86px;
+              height: 61.86px;
+            }
+
+            &:nth-child(3) {
+              top: 32.5px;
+              left: 0;
+              width: 62.04px;
+              height: 62.04px;
+            }
+          }
+        }
+
+        // 球局信息标签
+        .game_tags {
+          display: flex;
+          flex-direction: row;
+          gap: 6px;
+          padding: 8px 15px 0;
+
+          .participants_info {
+            display: flex;
+            gap: 4px;
+
+            .avatars {
+              display: flex;
+              align-items: center;
+              gap: -8px;
+
+              .participant_avatar {
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                border: 1px solid #FFFFFF;
+              }
+            }
+
+            .participants_count {
+              background: #FFFFFF;
+              border: 0.5px solid rgba(0, 0, 0, 0.16);
+              border-radius: 999px;
+              padding: 6px;
+              height: 20px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .count_text {
+                font-family: 'PingFang SC';
+                font-weight: 500;
+                font-size: 11px;
+                line-height: 1.8em;
+                letter-spacing: -2.1%;
+                color: #000000;
+              }
+            }
+          }
+
+          .game_info_tags {
+            display: flex;
+            gap: 4px;
+
+            .info_tag {
+              background: #FFFFFF;
+              border: 0.5px solid rgba(0, 0, 0, 0.16);
+              border-radius: 999px;
+              padding: 6px 8px;
+              height: 20px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .tag_text {
+                font-family: 'PingFang SC';
+                font-weight: 500;
+                font-size: 11px;
+                line-height: 1.8em;
+                letter-spacing: -2.1%;
+                color: #000000;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 底部指示器
+.home_indicator {
+  position: absolute;
+  bottom: 21px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 140px;
+  height: 5px;
+  background: #000000;
+  border-radius: 2.5px;
+  z-index: 10;
+} 
\ No newline at end of file
diff --git a/src/pages/userInfo/myself/index.tsx b/src/pages/userInfo/myself/index.tsx
new file mode 100644
index 0000000..d4ca486
--- /dev/null
+++ b/src/pages/userInfo/myself/index.tsx
@@ -0,0 +1,377 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, Image, ScrollView, Button } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import './index.scss';
+
+// 用户信息接口
+interface UserInfo {
+  id: string;
+  nickname: string;
+  avatar: string;
+  join_date: string;
+  stats: {
+    following: number;
+    friends: number;
+    hosted: number;
+    participated: number;
+  };
+  tags: string[];
+  bio: string;
+  location: string;
+  occupation: string;
+  ntrp_level: string;
+}
+
+// 球局记录接口
+interface GameRecord {
+  id: string;
+  title: string;
+  date: string;
+  time: string;
+  duration: string;
+  location: string;
+  type: string;
+  distance: string;
+  participants: {
+    avatar: string;
+    nickname: string;
+  }[];
+  max_participants: number;
+  current_participants: number;
+  level_range: string;
+  game_type: string;
+  images: string[];
+}
+
+const MyselfPage: React.FC = () => {
+  // 获取页面参数
+  const instance = Taro.getCurrentInstance();
+  const user_id = instance.router?.params?.userid;
+  
+  // 判断是否为当前用户
+  const is_current_user = !user_id;
+  
+  // 模拟用户数据
+  const [user_info] = useState<UserInfo>({
+    id: '1',
+    nickname: '188的王晨',
+    avatar: require('../../../static/userInfo/default_avatar.svg'),
+    join_date: '2025年9月加入',
+    stats: {
+      following: 124,
+      friends: 24,
+      hosted: 7,
+      participated: 24
+    },
+    tags: ['上海黄浦', '互联网从业者', 'NTRP 4.0'],
+    bio: '网球入坑两年，偏好双打，正手进攻型选手\n平时在张江、世纪公园附近活动，欢迎约球！\n不卷分数，但认真对待每一拍，每一场球都想打得开心。有时候也会带相机来拍点照片📸',
+    location: '上海黄浦',
+    occupation: '互联网从业者',
+    ntrp_level: 'NTRP 4.0'
+  });
+
+  // 模拟球局数据
+  const [game_records] = useState<GameRecord[]>([
+    {
+      id: '1',
+      title: '女生轻松双打',
+      date: '明天(周五)',
+      time: '下午5点',
+      duration: '2小时',
+      location: '仁恒河滨花园网球场',
+      type: '室外',
+      distance: '3.5km',
+      participants: [
+        { avatar: require('../../../static/userInfo/user1.svg'), nickname: '用户1' },
+        { avatar: require('../../../static/userInfo/user2.svg'), nickname: '用户2' }
+      ],
+      max_participants: 4,
+      current_participants: 2,
+      level_range: '2.0 至 2.5',
+      game_type: '双打',
+      images: [
+        require('../../../static/userInfo/game1.svg'),
+        require('../../../static/userInfo/game2.svg'),
+        require('../../../static/userInfo/game3.svg')
+      ]
+    }
+  ]);
+
+  // 关注状态
+  const [is_following, setIsFollowing] = useState(false);
+
+  // 当前激活的标签页
+  const [active_tab, setActiveTab] = useState<'hosted' | 'participated'>('hosted');
+
+  // 处理关注/取消关注
+  const handle_follow = () => {
+    setIsFollowing(!is_following);
+    Taro.showToast({
+      title: is_following ? '已取消关注' : '关注成功',
+      icon: 'success',
+      duration: 1500
+    });
+  };
+
+  // 处理分享
+  const handle_share = () => {
+    Taro.showShareMenu({
+      withShareTicket: true
+    });
+  };
+
+  // 处理返回
+  const handle_back = () => {
+    Taro.navigateBack();
+  };
+
+  // 处理编辑资料
+  const handle_edit_profile = () => {
+    Taro.navigateTo({
+      url: '/pages/userInfo/edit/index'
+    });
+  };
+
+  // 处理球局详情
+  const handle_game_detail = (game_id: string) => {
+    Taro.navigateTo({
+      url: `/pages/game/detail/index?id=${game_id}`
+    });
+  };
+
+  // 处理球局订单
+  const handle_game_orders = () => {
+    Taro.navigateTo({
+      url: '/pages/game/orders/index'
+    });
+  };
+
+  // 处理收藏
+  const handle_favorites = () => {
+    Taro.navigateTo({
+      url: '/pages/game/favorites/index'
+    });
+  };
+
+  return (
+    <View className="myself_page">
+      {/* 主要内容 */}
+      <ScrollView className="main_content" scrollY>
+        {/* 用户信息区域 */}
+        <View className="user_info_section">
+          {/* 头像和基本信息 */}
+          <View className="basic_info">
+            <View className="avatar_container">
+              <Image className="avatar" src={user_info.avatar} />
+            </View>
+            <View className="info_container">
+              <Text className="nickname">{user_info.nickname}</Text>
+              <Text className="join_date">{user_info.join_date}</Text>
+            </View>
+          </View>
+
+          {/* 统计数据 */}
+          <View className="stats_section">
+            <View className="stats_container">
+              <View className="stat_item">
+                <Text className="stat_number">{user_info.stats.following}</Text>
+                <Text className="stat_label">关注</Text>
+              </View>
+              <View className="stat_item">
+                <Text className="stat_number">{user_info.stats.friends}</Text>
+                <Text className="stat_label">球友</Text>
+              </View>
+              <View className="stat_item">
+                <Text className="stat_number">{user_info.stats.hosted}</Text>
+                <Text className="stat_label">主办</Text>
+              </View>
+              <View className="stat_item">
+                <Text className="stat_number">{user_info.stats.participated}</Text>
+                <Text className="stat_label">参加</Text>
+              </View>
+            </View>
+            <View className="action_buttons">
+              {/* 只有非当前用户才显示关注按钮 */}
+              {!is_current_user && (
+                <Button 
+                  className={`follow_button ${is_following ? 'following' : ''}`}
+                  onClick={handle_follow}
+                >
+                  <Image 
+                    className="button_icon" 
+                    src={require('../../../static/userInfo/plus.svg')} 
+                  />
+                  <Text className="button_text">
+                    {is_following ? '已关注' : '关注'}
+                  </Text>
+                </Button>
+              )}
+              {/* 只有非当前用户才显示消息按钮 */}
+              {!is_current_user && (
+                <Button className="message_button">
+                  <Image 
+                    className="button_icon" 
+                    src={require('../../../static/userInfo/message.svg')} 
+                  />
+                </Button>
+              )}
+              {/* 只有当前用户才显示编辑按钮 */}
+              {is_current_user && (
+                <Button className="edit_button" onClick={handle_edit_profile}>
+                  <Text className="button_text">编辑</Text>
+                </Button>
+              )}
+              {/* 只有当前用户才显示分享按钮 */}
+              {is_current_user && (
+                <Button className="share_button" onClick={handle_share}>
+                  <Text className="button_text">分享</Text>
+                </Button>
+              )}
+            </View>
+          </View>
+
+          {/* 标签和简介 */}
+          <View className="tags_bio_section">
+            <View className="tags_container">
+              <View className="tag_item">
+                <Image 
+                  className="tag_icon" 
+                  src={require('../../../static/userInfo/location.svg')} 
+                />
+                <Text className="tag_text">{user_info.location}</Text>
+              </View>
+              <View className="tag_item">
+                <Text className="tag_text">{user_info.occupation}</Text>
+              </View>
+              <View className="tag_item">
+                <Text className="tag_text">{user_info.ntrp_level}</Text>
+              </View>
+            </View>
+            <Text className="bio_text">{user_info.bio}</Text>
+          </View>
+
+          {/* 球局订单和收藏功能 */}
+          <View className="quick_actions_section">
+            <View className="action_card">
+              <View className="action_content" onClick={handle_game_orders}>
+                <Image 
+                  className="action_icon" 
+                  src={require('../../../static/userInfo/tennis.svg')} 
+                />
+                <Text className="action_text">球局订单</Text>
+              </View>
+              <View className="action_divider"></View>
+              <View className="action_content" onClick={handle_favorites}>
+                <Image 
+                  className="action_icon" 
+                  src={require('../../../static/userInfo/tennis.svg')} 
+                />
+                <Text className="action_text">收藏</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* 球局类型标签页 */}
+        <View className="game_tabs_section">
+          <View className="tab_container">
+            <View className={`tab_item ${active_tab === 'hosted' ? 'active' : ''}`} onClick={() => setActiveTab('hosted')}>
+              <Text className="tab_text">我主办的</Text>
+            </View>
+            <View className={`tab_item ${active_tab === 'participated' ? 'active' : ''}`} onClick={() => setActiveTab('participated')}>
+              <Text className="tab_text">我参与的</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* 球局列表 */}
+        <View className="game_list_section">
+          <View className="date_header">
+            <Text className="date_text">5月28日</Text>
+            <Text className="separator">/</Text>
+            <Text className="weekday_text">星期三</Text>
+          </View>
+          
+          {/* 球局卡片 */}
+          <View className="game_cards">
+            {game_records.map((game) => (
+              <View 
+                key={game.id} 
+                className="game_card"
+                onClick={() => handle_game_detail(game.id)}
+              >
+                {/* 球局标题和类型 */}
+                <View className="game_header">
+                  <Text className="game_title">{game.title}</Text>
+                  <View className="game_type_icon">
+                    <Image 
+                      className="type_icon" 
+                      src={require('../../../static/userInfo/tennis.svg')} 
+                    />
+                  </View>
+                </View>
+
+                {/* 球局时间 */}
+                <View className="game_time">
+                  <Text className="time_text">
+                    {game.date} {game.time} {game.duration}
+                  </Text>
+                </View>
+
+                {/* 球局地点和类型 */}
+                <View className="game_location">
+                  <Text className="location_text">{game.location}</Text>
+                  <Text className="separator">·</Text>
+                  <Text className="type_text">{game.type}</Text>
+                  <Text className="separator">·</Text>
+                  <Text className="distance_text">{game.distance}</Text>
+                </View>
+
+                {/* 球局图片 */}
+                <View className="game_images">
+                  {game.images.map((image, index) => (
+                    <Image 
+                      key={index} 
+                      className="game_image" 
+                      src={image} 
+                    />
+                  ))}
+                </View>
+
+                {/* 球局信息标签 */}
+                <View className="game_tags">
+                  <View className="participants_info">
+                    <View className="avatars">
+                      {game.participants.map((participant, index) => (
+                        <Image 
+                          key={index} 
+                          className="participant_avatar" 
+                          src={participant.avatar} 
+                        />
+                      ))}
+                    </View>
+                    <View className="participants_count">
+                      <Text className="count_text">
+                        报名人数 {game.current_participants}/{game.max_participants}
+                      </Text>
+                    </View>
+                  </View>
+                  <View className="game_info_tags">
+                    <View className="info_tag">
+                      <Text className="tag_text">{game.level_range}</Text>
+                    </View>
+                    <View className="info_tag">
+                      <Text className="tag_text">{game.game_type}</Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default MyselfPage;
diff --git a/src/static/userInfo/default_avatar.svg b/src/static/userInfo/default_avatar.svg
new file mode 100644
index 0000000..5cf5917
--- /dev/null
+++ b/src/static/userInfo/default_avatar.svg
@@ -0,0 +1,5 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="40" cy="40" r="40" fill="#E5E7EB"/>
+  <circle cx="40" cy="32" r="16" fill="#9CA3AF"/>
+  <path d="M16 64C16 52.9543 24.9543 44 36 44H44C55.0457 44 64 52.9543 64 64V80H16V64Z" fill="#9CA3AF"/>
+</svg> 
\ No newline at end of file
diff --git a/src/static/userInfo/game1.svg b/src/static/userInfo/game1.svg
new file mode 100644
index 0000000..ca4f985
--- /dev/null
+++ b/src/static/userInfo/game1.svg
@@ -0,0 +1,6 @@
+<svg width="60" height="40" viewBox="0 0 60 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="60" height="40" rx="4" fill="#E5E7EB"/>
+  <circle cx="20" cy="20" r="8" fill="#9CA3AF"/>
+  <circle cx="40" cy="20" r="8" fill="#6B7280"/>
+  <path d="M16 28L44 28" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"/>
+</svg> 
\ No newline at end of file
diff --git a/src/static/userInfo/game2.svg b/src/static/userInfo/game2.svg
new file mode 100644
index 0000000..ab7fe76
--- /dev/null
+++ b/src/static/userInfo/game2.svg
@@ -0,0 +1,6 @@
+<svg width="60" height="40" viewBox="0 0 60 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="60" height="40" rx="4" fill="#FEF3C7"/>
+  <rect x="15" y="12" width="30" height="16" rx="2" fill="#F59E0B"/>
+  <circle cx="20" cy="20" r="3" fill="#FFFFFF"/>
+  <circle cx="40" cy="20" r="3" fill="#FFFFFF"/>
+</svg> 
\ No newline at end of file
diff --git a/src/static/userInfo/game3.svg b/src/static/userInfo/game3.svg
new file mode 100644
index 0000000..875bdaa
--- /dev/null
+++ b/src/static/userInfo/game3.svg
@@ -0,0 +1,6 @@
+<svg width="60" height="40" viewBox="0 0 60 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="60" height="40" rx="4" fill="#DBEAFE"/>
+  <path d="M20 15L30 25L40 15" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="20" cy="20" r="2" fill="#3B82F6"/>
+  <circle cx="40" cy="20" r="2" fill="#3B82F6"/>
+</svg> 
\ No newline at end of file
diff --git a/src/static/userInfo/location.svg b/src/static/userInfo/location.svg
new file mode 100644
index 0000000..a1c89f9
--- /dev/null
+++ b/src/static/userInfo/location.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 2C5.79086 2 4 3.79086 4 6C4 8.20914 5.79086 10 8 10C10.2091 10 12 8.20914 12 6C12 3.79086 10.2091 2 8 2Z" stroke="currentColor" stroke-width="2"/>
+  <path d="M8 10V14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="8" cy="6" r="1" fill="currentColor"/>
+</svg> 
\ No newline at end of file
diff --git a/src/static/userInfo/message.svg b/src/static/userInfo/message.svg
new file mode 100644
index 0000000..f22ed89
--- /dev/null
+++ b/src/static/userInfo/message.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V10C14 11.1046 13.1046 12 12 12H6L2 16V4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+  <circle cx="6" cy="7" r="1" fill="currentColor"/>
+  <circle cx="10" cy="7" r="1" fill="currentColor"/>
+  <circle cx="6" cy="10" r="1" fill="currentColor"/>
+</svg> 
\ No newline at end of file
diff --git a/src/static/userInfo/plus.svg b/src/static/userInfo/plus.svg
new file mode 100644
index 0000000..a4e5876
--- /dev/null
+++ b/src/static/userInfo/plus.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 3V13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M13 8H3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg> 
\ No newline at end of file
diff --git a/src/static/userInfo/tennis.svg b/src/static/userInfo/tennis.svg
new file mode 100644
index 0000000..2405eb1
--- /dev/null
+++ b/src/static/userInfo/tennis.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="8" cy="8" r="6" fill="#FFFFFF" stroke="currentColor" stroke-width="2"/>
+  <path d="M2 8H14" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+  <path d="M8 2V14" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+  <path d="M3.5 3.5L12.5 12.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+  <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+</svg> 
\ No newline at end of file
diff --git a/src/static/userInfo/user1.svg b/src/static/userInfo/user1.svg
new file mode 100644
index 0000000..605867e
--- /dev/null
+++ b/src/static/userInfo/user1.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="20" cy="20" r="20" fill="#F3F4F6"/>
+  <circle cx="20" cy="16" r="8" fill="#6B7280"/>
+  <path d="M8 32C8 26.4772 12.4772 22 18 22H22C27.5228 22 32 26.4772 32 32V40H8V32Z" fill="#6B7280"/>
+</svg> 
\ No newline at end of file
diff --git a/src/static/userInfo/user2.svg b/src/static/userInfo/user2.svg
new file mode 100644
index 0000000..86e660b
--- /dev/null
+++ b/src/static/userInfo/user2.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="20" cy="20" r="20" fill="#FEF3C7"/>
+  <circle cx="20" cy="16" r="8" fill="#F59E0B"/>
+  <path d="M8 32C8 26.4772 12.4772 22 18 22H22C27.5228 22 32 26.4772 32 32V40H8V32Z" fill="#F59E0B"/>
+</svg> 
\ No newline at end of file