样式优化

src/components/FollowUserCard/index.scss

@@ -55,9 +55,9 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 4px 16px;
+    padding: 6px 16px;
     border-radius: 20px;
-    min-width: 60px;
+    white-space: nowrap;
     
     .button_text {
       font-family: PingFang SC;
@@ -98,4 +98,28 @@
       pointer-events: none;
     }
   }
+
+  .delete_button {
+    width: 20px;
+    height: 20px;
+    margin-left: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &::before, &::after {
+      content: "";
+      display: block;
+      width: 13px;
+      height: 2px;
+      border-radius: 2px;
+      background: #8c8c8c;
+      position: absolute;
+    }
+    &::before {
+      transform: rotate(45deg);
+    }
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
 }

src/components/FollowUserCard/index.tsx

@@ -46,6 +46,28 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
     }
   };
 
+  // 加入黑名单
+  const add_to_blacklist = () => {
+    if (isProcessing) return;
+
+    try {
+      setIsProcessing(true);
+      // TODO: 加入黑名单逻辑
+       Taro.showToast({
+        title: '不会再为您推荐该用户',
+        icon: 'none'
+      });
+    } catch (error) {
+      console.error('删除推荐人员失败:', error);
+      Taro.showToast({
+        title: '操作失败',
+        icon: 'none'
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
   // 处理用户点击
   const handle_user_click = () => {
     Taro.navigateTo({
@@ -59,7 +81,7 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
       case 'follower':
       case 'recommend':
         return {
-          text: '回关',
+          text: '关注',
           className: 'follow_button'
         };
       case 'following':
@@ -105,6 +127,11 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
           {isProcessing ? '处理中...' : button_config.text}
         </Text>
       </View>
+      {
+        user.follow_status === 'recommend' && (
+          <View className='delete_button' onClick={add_to_blacklist}></View>
+        )
+      }
     </View>
   );
 };

src/components/Picker/index.module.scss

@@ -2,9 +2,11 @@
   :global {
     .nut-popup-round {
       position: relative !important;
+
       .nut-picker-control {
         display: none !important;
       }
+
       .nut-picker {
         &::after {
           content: "";
@@ -33,7 +35,26 @@
   justify-content: space-between;
   align-items: center;
   box-sizing: border-box;
-  background: linear-gradient(to bottom, #ccfff2, #f7fffd);
+  background: linear-gradient(to bottom,
+      #CCFFF2,
+      /* 开始颜色 */
+      #F7FFFD
+      /* 结束颜色 */
+    ),
+    repeating-linear-gradient(90deg,
+      /* 垂直方向 */
+      rgba(0, 0, 0, 1),
+      /* 条纹的开始颜色 */
+      rgba(0, 0, 0, 0.01) 1px,
+      /* 条纹的结束颜色及宽度 */
+      #CCFFF2 8px,
+      /* 条纹之间的开始颜色 */
+      #F7FFFD 10px
+      /* 条纹之间的结束颜色及宽度 */
+    );
+     background-blend-mode: luminosity;
+  /* 将两个渐变层叠在一起 */
+
   .text-container {
     .text-title {
       font-family: Noto Sans SC;
@@ -41,24 +62,29 @@
       color: #2a4d44;
       font-size: 16px;
       margin-bottom: 4px;
+
       Text {
         color: #00e5ad;
       }
     }
+
     .text-btn {
       font-size: 12px;
       color: #5ca693;
       display: flex;
       align-items: center;
       gap: 6px;
+
       .icon-arrow {
         width: 12px;
         height: 12px;
       }
     }
   }
+
   .img-container {
     display: flex;
+
     .img-box {
       width: 47px;
       height: 47px;
@@ -68,14 +94,17 @@
       display: flex;
       justify-content: center;
       align-items: center;
+
       Image {
         width: 100%;
         height: 100%;
       }
+
       &:nth-child(2) {
         border-radius: 8px;
         background-color: #ccfff2;
         transform: scale(0.88) rotate(15deg) translateX(-10px);
+
         Image {
           width: 66%;
           height: 66%;
@@ -83,4 +112,4 @@
       }
     }
   }
-}
+}

src/components/UserInfo/index.scss

@@ -94,19 +94,19 @@
 
         // 可点击的统计项样式
         &.clickable {
-          cursor: pointer;
+          // cursor: pointer;
           transition: all 0.2s ease;
           // padding: 4px 8px;
           // border-radius: 8px;
 
-          &:hover {
+          // &:hover {
-            background-color: rgba(0, 0, 0, 0.05);
+          //   background-color: rgba(0, 0, 0, 0.05);
-          }
+          // }
 
-          &:active {
+          // &:active {
-            background-color: rgba(0, 0, 0, 0.1);
+          //   background-color: rgba(0, 0, 0, 0.1);
-            transform: scale(0.98);
+          //   transform: scale(0.98);
-          }
+          // }
 
           .stat_number {
             color: rgba(0, 0, 0, 0.9);

src/components/UserInfo/index.tsx

@@ -331,31 +331,31 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
               )}
             </View>
           ) : is_current_user ? (
-            <View className="button_edit" onClick={() => {handle_open_edit_modal('gender')}}>
+            <View className="button_edit" onClick={() => { handle_open_edit_modal('gender') }}>
               <Text>选择性别</Text>
             </View>
           ) : null}
           {user_info.ntrp_level ? (
             <View className="tag_item">
-              <Text className="tag_text">{user_info.ntrp_level}</Text>
+              <Text className="tag_text">{`NTRP ${user_info.ntrp_level}`}</Text>
             </View>
           ) : is_current_user ? (
-            <View className="button_edit" onClick={() => {handle_open_edit_modal('ntrp_level')}}>
+            <View className="button_edit" onClick={() => { handle_open_edit_modal('ntrp_level') }}>
               <Text>测测你的NTRP水平</Text>
             </View>
           ) : null}
           {user_info.occupation ? (
             <View className="tag_item">
-              <Text className="tag_text">{user_info.occupation}</Text>
+              <Text className="tag_text">{user_info.occupation.split(" ")[1]}</Text>
             </View>
           ) : is_current_user ? (
-            <View className="button_edit" onClick={() => {handle_open_edit_modal('occupation')}}>
+            <View className="button_edit" onClick={() => { handle_open_edit_modal('occupation') }}>
               <Text>选择职业</Text>
             </View>
           ) : null}
           {user_info.country || user_info.province || user_info.city ? (
             <View className="tag_item">
-              <Text className="tag_text">{`${user_info.country} ${user_info.province} ${user_info.city}`}</Text>
+              <Text className="tag_text">{`${user_info.province}${user_info.city}`}</Text>
             </View>
           ) : is_current_user ? (
             <View className="button_edit" onClick={() => handle_open_edit_modal('location')}>
@@ -601,9 +601,8 @@ export const GameTabs: React.FC<GameTabsProps> = ({
           <Text className="tab_text">{hosted_text}</Text>
         </View>
         <View
-          className={`tab_item ${
+          className={`tab_item ${active_tab === "participated" ? "active" : ""
-            active_tab === "participated" ? "active" : ""
+            }`}
-          }`}
           onClick={() => on_tab_change("participated")}
         >
           <Text className="tab_text">{participated_text}</Text>

src/user_pages/edit/index.scss

@@ -3,7 +3,7 @@
   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;
+  // overflow: hidden;
   box-sizing: border-box;
 }