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;
-      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);
+      @include avatar-base(64px);
 
       .avatar {
         width: 100%;
@@ -32,23 +30,32 @@
       gap: 4px;
 
       .nickname {
-        font-family: 'PingFang SC';
-        font-weight: 600;
-        font-size: 20px;
-        line-height: 1.4em;
-        letter-spacing: 1.9%;
-        color: #000000;
+        @include text-primary;
       }
 
       .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);
+        @include text-secondary;
       }
     }
+
+    .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>