1

src/components/UserInfo/index.scss

@@ -1,3 +1,5 @@
+@use '../../scss/common.scss' as *;
+
 // 用户信息卡片样式
 .user_info_card {
   display: flex;
@@ -12,11 +14,7 @@
     gap: 16px;
 
     .avatar_container {
-      width: 64px;
+      @include avatar-base(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%;
@@ -32,23 +30,32 @@
       gap: 4px;
 
       .nickname {
-        font-family: 'PingFang SC';
+        @include text-primary;
-        font-weight: 600;
-        font-size: 20px;
-        line-height: 1.4em;
-        letter-spacing: 1.9%;
-        color: #000000;
       }
 
       .join_date {
-        font-family: 'PingFang SC';
+        @include text-secondary;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 1.4em;
-        letter-spacing: 2.7%;
-        color: rgba(0, 0, 0, 0.35);
       }
     }
+
+    .tag_icon {
+
+      /* Auto layout */
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 0px;
+      gap: 8px;
+
+      width: 40px;
+      height: 40px;
+
+
+      /* Inside auto layout */
+      flex: none;
+      order: 2;
+      flex-grow: 0;
+    }
   }
 
   // 统计数据
@@ -217,6 +224,11 @@
         .tag_icon {
           width: 12px;
           height: 12px;
+
+          /* Frame 1912054928 */
+
+
+
         }
 
         .tag_text {

src/components/UserInfo/index.ts

@@ -1,2 +0,0 @@
-export { UserInfoCard, GameCard, GameTabs } from './index';
-export type { UserInfo, GameRecord } from './index';

src/components/UserInfo/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, Image, Button } from '@tarojs/components';
-import Taro from '@tarojs/taro';
+import './index.scss';
 
 // 用户信息接口
 export interface UserInfo {
@@ -53,6 +53,11 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
           <Text className="nickname">{user_info.nickname}</Text>
           <Text className="join_date">{user_info.join_date}</Text>
         </View>
+        <View className='tag_item'>  
+          <Image
+          className="tag_icon"
+          src={require('../../static/userInfo/edit.svg')}
+        /> </View>
       </View>
 
       {/* 统计数据 */}
@@ -84,7 +89,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
             >
               <Image
                 className="button_icon"
-                src={require('../../../static/userInfo/plus.svg')}
+                src={require('../../static/userInfo/plus.svg')}
               />
               <Text className="button_text">
                 {is_following ? '已关注' : '关注'}
@@ -96,7 +101,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
             <Button className="message_button" onClick={on_message}>
               <Image
                 className="button_icon"
-                src={require('../../../static/userInfo/message.svg')}
+                src={require('../../static/userInfo/message.svg')}
               />
             </Button>
           )}
@@ -121,7 +126,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
           <View className="tag_item">
             <Image
               className="tag_icon"
-              src={require('../../../static/userInfo/location.svg')}
+              src={require('../../static/userInfo/location.svg')}
             />
             <Text className="tag_text">{user_info.location}</Text>
           </View>
@@ -183,7 +188,7 @@ export const GameCard: React.FC<GameCardProps> = ({
         <View className="game_type_icon">
           <Image
             className="type_icon"
-            src={require('../../../static/userInfo/tennis.svg')}
+            src={require('../../static/userInfo/tennis.svg')}
           />
         </View>
       </View>

src/pages/userInfo/myself/index.scss

@@ -1,3 +1,5 @@
+@use '../../../scss/common.scss' as *;
+
 // 个人页面样式
 .myself_page {
   min-height: 100vh;
@@ -23,59 +25,14 @@
     flex-direction: column;
     gap: 16px;
     margin-bottom: 16px;
+    margin-top: 98px;
 
-    // 基本信息
-    .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;
+      justify-content: flex-start;
       align-items: center;
-      gap: 24px;
 
       .stats_container {
         display: flex;
@@ -88,127 +45,11 @@
           align-items: center;
 
           .stat_number {
-            font-family: 'PingFang SC';
+            @include text-medium;
-            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';
+            @include text-small;
-            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;
           }
         }
       }
@@ -226,14 +67,7 @@
         flex-wrap: wrap;
 
         .tag_item {
-          display: flex;
+          @include tag-base;
-          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;
@@ -241,22 +75,13 @@
           }
 
           .tag_text {
-            font-family: 'PingFang SC';
+            @include text-tag;
-            font-weight: 500;
-            font-size: 11px;
-            line-height: 1.8em;
-            letter-spacing: -2.1%;
-            color: #000000;
           }
         }
       }
 
       .bio_text {
-        font-family: 'PingFang SC';
+        @include text-body;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 1.571em;
-        color: rgba(0, 0, 0, 0.65);
         white-space: pre-line;
       }
     }
@@ -266,18 +91,15 @@
       margin-bottom: 16px;
 
       .action_card {
+        @include card-base;
         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;
+          flex-direction: row;
           align-items: center;
           justify-content: center;
           gap: 8px;
@@ -295,18 +117,15 @@
           }
 
           .action_text {
-            font-family: 'PingFang SC';
+            @include text-style(15px, 600, 1.4em);
-            font-weight: 600;
+            color: $color-primary;
-            font-size: 15px;
-            line-height: 1.4em;
-            color: #000000;
           }
         }
 
         .action_divider {
           width: 1px;
           height: 16px;
-          background: rgba(0, 0, 0, 0.06);
+          background: $color-primary-lightest-5;
         }
       }
     }
@@ -327,24 +146,19 @@
         transition: all 0.3s ease;
 
         .tab_text {
-          font-family: 'PingFang SC';
+          @include text-primary;
-          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;
+            color: $color-primary;
           }
         }
 
         &:not(.active) {
           .tab_text {
-            color: rgba(0, 0, 0, 0.2);
+            color: $color-primary-lightest-2;
           }
         }
       }
@@ -361,30 +175,18 @@
       margin-bottom: 16px;
 
       .date_text {
-        font-family: 'PingFang SC';
+        @include text-style(14px, 600, 1.4em, 2.71%);
-        font-weight: 600;
+        color: $color-primary-light;
-        font-size: 14px;
-        line-height: 1.4em;
-        letter-spacing: 2.71%;
-        color: rgba(0, 0, 0, 0.85);
       }
 
       .separator {
-        font-family: 'PingFang SC';
+        @include text-style(18px, 400, 1.4em, 2.11%);
-        font-weight: 400;
+        color: $color-primary-lightest;
-        font-size: 18px;
-        line-height: 1.4em;
-        letter-spacing: 2.11%;
-        color: rgba(0, 0, 0, 0.35);
       }
 
       .weekday_text {
-        font-family: 'PingFang SC';
+        @include text-style(14px, 600, 1.4em, 2.71%);
-        font-weight: 600;
+        color: $color-primary-light;
-        font-size: 14px;
-        line-height: 1.4em;
-        letter-spacing: 2.71%;
-        color: rgba(0, 0, 0, 0.85);
       }
     }
 
@@ -396,11 +198,8 @@
       padding: 0 5px 15px;
 
       .game_card {
-        background: #FFFFFF;
+        @include card-base;
-        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;
@@ -417,11 +216,8 @@
           padding: 12px 15px 0;
 
           .game_title {
-            font-family: 'PingFang SC';
+            @include text-style(16px, 600, 1.5em);
-            font-weight: 600;
+            color: $color-primary;
-            font-size: 16px;
-            line-height: 1.5em;
-            color: #000000;
           }
 
           .game_type_icon {
@@ -440,11 +236,7 @@
           padding: 6px 15px 0;
 
           .time_text {
-            font-family: 'PingFang SC';
+            @include text-caption;
-            font-weight: 400;
-            font-size: 12px;
-            line-height: 1.5em;
-            color: rgba(60, 60, 67, 0.6);
           }
         }
 
@@ -458,19 +250,12 @@
           .location_text,
           .type_text,
           .distance_text {
-            font-family: 'PingFang SC';
+            @include text-caption;
-            font-weight: 400;
-            font-size: 12px;
-            line-height: 1.5em;
-            color: rgba(60, 60, 67, 0.6);
           }
 
           .separator {
-            font-family: 'PingFang SC';
+            @include text-style(14px, 400, 1.3em);
-            font-weight: 400;
+            color: $color-text-tertiary;
-            font-size: 14px;
-            line-height: 1.3em;
-            color: rgba(60, 60, 67, 0.3);
           }
         }
 
@@ -488,7 +273,7 @@
             width: 56.44px;
             height: 56.44px;
             border-radius: 9px;
-            border: 1.5px solid #FFFFFF;
+            border: 1.5px solid $color-white;
 
             &:nth-child(1) {
               top: 4.18px;
@@ -528,30 +313,17 @@
               gap: -8px;
 
               .participant_avatar {
-                width: 20px;
+                @include avatar-base(20px);
-                height: 20px;
+                border: 1px solid $color-white;
-                border-radius: 50%;
-                border: 1px solid #FFFFFF;
               }
             }
 
             .participants_count {
-              background: #FFFFFF;
+              @include tag-base;
-              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';
+                @include text-tag;
-                font-weight: 500;
-                font-size: 11px;
-                line-height: 1.8em;
-                letter-spacing: -2.1%;
-                color: #000000;
               }
             }
           }
@@ -561,22 +333,10 @@
             gap: 4px;
 
             .info_tag {
-              background: #FFFFFF;
+              @include tag-base;
-              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';
+                @include text-tag;
-                font-weight: 500;
-                font-size: 11px;
-                line-height: 1.8em;
-                letter-spacing: -2.1%;
-                color: #000000;
               }
             }
           }
@@ -594,7 +354,7 @@
   transform: translateX(-50%);
   width: 140px;
   height: 5px;
-  background: #000000;
+  background: $color-primary;
   border-radius: 2.5px;
   z-index: 10;
 } 

src/pages/userInfo/myself/index.tsx

@@ -1,47 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, Image, ScrollView, Button } from '@tarojs/components';
+import { View, Text, Image, ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import './index.scss';
 import GuideBar from '@/components/GuideBar'
-// 用户信息接口
+import { UserInfoCard, UserInfo, GameRecord } from '@/components/UserInfo/index'
-interface UserInfo {
+import { UserService } from '@/services/userService'
-  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 = () => {
   // 获取页面参数
@@ -51,51 +15,28 @@ const MyselfPage: React.FC = () => {
   // 判断是否为当前用户
   const is_current_user = !user_id;
 
-  // 模拟用户数据
+  // 用户信息状态
-  const [user_info] = useState<UserInfo>({
+  const [user_info, set_user_info] = useState<UserInfo>({
     id: '1',
-    nickname: '188的王晨',
+    nickname: '加载中...',
     avatar: require('../../../static/userInfo/default_avatar.svg'),
-    join_date: '2025年9月加入',
+    join_date: '加载中...',
     stats: {
-      following: 124,
+      following: 0,
-      friends: 24,
+      friends: 0,
-      hosted: 7,
+      hosted: 0,
-      participated: 24
+      participated: 0
     },
-    tags: ['上海黄浦', '互联网从业者', 'NTRP 4.0'],
+    tags: ['加载中...'],
-    bio: '网球入坑两年，偏好双打，正手进攻型选手\n平时在张江、世纪公园附近活动，欢迎约球！\n不卷分数，但认真对待每一拍，每一场球都想打得开心。有时候也会带相机来拍点照片📸',
+    bio: '加载中...',
-    location: '上海黄浦',
+    location: '加载中...',
-    occupation: '互联网从业者',
+    occupation: '加载中...',
-    ntrp_level: 'NTRP 4.0'
+    ntrp_level: 'NTRP 3.0'
   });
 
-  // 模拟球局数据
+  // 球局记录状态
-  const [game_records] = useState<GameRecord[]>([
+  const [game_records, set_game_records] = useState<GameRecord[]>([]);
-    {
+  const [loading, set_loading] = useState(true);
-      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);
@@ -113,24 +54,6 @@ const MyselfPage: React.FC = () => {
     });
   };
 
-  // 处理分享
-  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) => {
@@ -156,115 +79,30 @@ const MyselfPage: React.FC = () => {
   return (
     <View className="myself_page">
       {/* 主要内容 */}
-      <ScrollView className="main_content" scrollY>
+      <View className='main_content'>
         {/* 用户信息区域 */}
         <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>
 
+          <UserInfoCard user_info={user_info}
+            is_current_user={false}
+            is_following={is_following}
+            on_follow={handle_follow}
+          ></UserInfoCard>
           {/* 球局订单和收藏功能 */}
           <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')}
+                  src={require('../../../static/userInfo/order_btn.svg')}
                 />
-                <Text className="action_text">球局订单</Text>
+                <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')}
+                  src={require('../../../static/userInfo/sc.svg')}
                 />
                 <Text className="action_text">收藏</Text>
               </View>
@@ -291,85 +129,86 @@ const MyselfPage: React.FC = () => {
             <Text className="separator">/</Text>
             <Text className="weekday_text">星期三</Text>
           </View>
-
+          <ScrollView scrollY>
-          {/* 球局卡片 */}
+            {/* 球局卡片 */}
-          <View className="game_cards">
+            <View className="game_cards">
-            {game_records.map((game) => (
+              {game_records.map((game) => (
-              <View
+                <View
-                key={game.id}
+                  key={game.id}
-                className="game_card"
+                  className="game_card"
-                onClick={() => handle_game_detail(game.id)}
+                  onClick={() => handle_game_detail(game.id)}
-              >
+                >
-                {/* 球局标题和类型 */}
+                  {/* 球局标题和类型 */}
-                <View className="game_header">
+                  <View className="game_header">
-                  <Text className="game_title">{game.title}</Text>
+                    <Text className="game_title">{game.title}</Text>
-                  <View className="game_type_icon">
+                    <View className="game_type_icon">
-                    <Image
+                      <Image
-                      className="type_icon"
+                        className="type_icon"
-                      src={require('../../../static/userInfo/tennis.svg')}
+                        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 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="info_tag">
+                    <View className="game_info_tags">
-                      <Text className="tag_text">{game.game_type}</Text>
+                      <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>
-          </View>
+          </ScrollView>
         </View>
-      </ScrollView>
+      </View>
       <GuideBar currentPage='personal' />
     </View>
   );

src/pages/userInfo/other/index.tsx

@@ -46,7 +46,7 @@ const OtherUserPage: React.FC = () => {
         try {
           const user_data = await UserService.get_user_info(user_id);
           setUserInfo(user_data);
-          
+
           const games_data = await UserService.get_user_games(user_id, active_tab);
           setGameRecords(games_data);
         } catch (error) {
@@ -99,7 +99,7 @@ const OtherUserPage: React.FC = () => {
   return (
     <View className="other_user_page">
       {/* 主要内容 */}
-      <ScrollView className="main_content" scrollY>
+      <View className="main_content" >
         {/* 用户信息区域 */}
         <View className="user_info_section">
           <UserInfoCard
@@ -137,7 +137,7 @@ const OtherUserPage: React.FC = () => {
             ))}
           </View>
         </View>
-      </ScrollView>
+      </View>
       <GuideBar currentPage='personal' />
     </View>
   );

src/scss/common.scss

@@ -0,0 +1,121 @@
+// 全局通用样式变量和混入
+// 字体相关
+$font-family-primary: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !default;
+
+// 颜色相关
+$color-primary: #000000 !default;
+$color-primary-light: rgba(0, 0, 0, 0.85) !default;
+$color-primary-medium: rgba(0, 0, 0, 0.65) !default;
+$color-primary-lightest: rgba(0, 0, 0, 0.35) !default;
+$color-primary-lightest-2: rgba(0, 0, 0, 0.2) !default;
+$color-primary-lightest-3: rgba(0, 0, 0, 0.16) !default;
+$color-primary-lightest-4: rgba(0, 0, 0, 0.1) !default;
+$color-primary-lightest-5: rgba(0, 0, 0, 0.06) !default;
+$color-primary-lightest-6: rgba(0, 0, 0, 0.08) !default;
+
+$color-text-secondary: rgba(60, 60, 67, 0.6) !default;
+$color-text-tertiary: rgba(60, 60, 67, 0.3) !default;
+
+$color-white: #FFFFFF !default;
+$color-background: #FAFAFA !default;
+
+// 字体大小和行高混入
+@mixin text-style($size: 14px, $weight: 400, $line-height: 1.4em, $letter-spacing: 0) {
+  font-family: $font-family-primary;
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $line-height;
+  letter-spacing: $letter-spacing;
+}
+
+// 常用文本样式
+@mixin text-primary {
+  @include text-style(20px, 600, 1.4em, 1.9%);
+  color: $color-primary;
+}
+
+@mixin text-secondary {
+  @include text-style(14px, 400, 1.4em, 2.7%);
+  color: $color-primary-lightest;
+}
+
+@mixin text-small {
+  @include text-style(12px, 500, 1.4em, 3.2%);
+  color: $color-primary-lightest;
+}
+
+@mixin text-medium {
+  @include text-style(18px, 600, 1.4em, 2.1%);
+  color: $color-primary-light;
+}
+
+@mixin text-body {
+  @include text-style(14px, 400, 1.571em, 2.7%);
+  color: $color-primary-medium;
+}
+
+@mixin text-caption {
+  @include text-style(12px, 400, 1.5em);
+  color: $color-text-secondary;
+}
+
+@mixin text-tag {
+  @include text-style(11px, 500, 1.8em, -2.1%);
+  color: $color-primary;
+}
+
+// 按钮样式混入
+@mixin button-base {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: none;
+  outline: none;
+}
+
+@mixin button-primary {
+  @include button-base;
+  background: $color-primary;
+  border: 0.5px solid $color-primary-lightest-5;
+  border-radius: 999px;
+  color: $color-white;
+}
+
+@mixin button-secondary {
+  @include button-base;
+  background: $color-white;
+  border: 0.5px solid $color-primary-lightest-3;
+  border-radius: 999px;
+  color: $color-primary;
+}
+
+// 卡片样式混入
+@mixin card-base {
+  background: $color-white;
+  border: 0.5px solid $color-primary-lightest-6;
+  border-radius: 20px;
+  box-shadow: 0px 4px 36px 0px $color-primary-lightest-5;
+}
+
+// 标签样式混入
+@mixin tag-base {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  height: 20px;
+  background: $color-white;
+  border: 0.5px solid $color-primary-lightest-3;
+  border-radius: 999px;
+}
+
+// 头像样式混入
+@mixin avatar-base($size: 64px) {
+  width: $size;
+  height: $size;
+  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);
+}

src/static/userInfo/edit.svg

@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="white"/>
+<rect x="0.25" y="0.25" width="39.5" height="39.5" rx="19.75" stroke="black" stroke-opacity="0.1" stroke-width="0.5"/>
+<path d="M12.9167 27.5H27.9167" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5833 21.1333V24.1667H17.6321L26.2499 15.545L23.2062 12.5L14.5833 21.1333Z" stroke="black" stroke-width="1.66667" stroke-linejoin="round"/>
+</svg>

src/static/userInfo/order_btn.svg

@@ -0,0 +1,5 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5208 2.91666H16.5834C17.0436 2.91666 17.4167 3.28975 17.4167 3.74999V17.5C17.4167 17.9602 17.0436 18.3333 16.5834 18.3333H4.91671C4.45647 18.3333 4.08337 17.9602 4.08337 17.5V3.74999C4.08337 3.28975 4.45647 2.91666 4.91671 2.91666H7.41671H7.83337V4.16666H13.6667V2.91666H14.5208Z" stroke="#8D8D8D" stroke-width="1.66667" stroke-linejoin="round"/>
+<path d="M13.6667 1.66666H7.83337V4.16666H13.6667V1.66666Z" stroke="#8D8D8D" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.9998 7.91666L8.66663 11.2505H12.835L9.50008 14.5841" stroke="black" stroke-opacity="0.2" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/static/userInfo/sc.svg

@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.33325 3.33333C2.33325 2.8731 2.70635 2.5 3.16659 2.5H8.16659L10.2499 5H17.3333C17.7935 5 18.1666 5.37308 18.1666 5.83333V16.6667C18.1666 17.1269 17.7935 17.5 17.3333 17.5H3.16659C2.70635 17.5 2.33325 17.1269 2.33325 16.6667V3.33333Z" stroke="#8D8D8D" stroke-width="1.66667" stroke-linejoin="round"/>
+<path d="M10.25 8.33334L11.1846 10.3803L13.4203 10.6366L11.7622 12.158L12.2093 14.3634L10.25 13.2567L8.29075 14.3634L8.73788 12.158L7.07983 10.6366L9.31546 10.3803L10.25 8.33334Z" stroke="black" stroke-opacity="0.2" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>