样式优化

2025-09-18 23:38:20 +08:00
parent b499a57f1f
commit 3915a8cd46
6 changed files with 102 additions and 23 deletions
--- a/src/components/FollowUserCard/index.scss
+++ b/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);
+    }
+  }
 }
--- a/src/components/FollowUserCard/index.tsx
+++ b/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>
  );
 };
--- a/src/components/Picker/index.module.scss
+++ b/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 @@
      }
    }
  }
-}
+}
--- a/src/components/UserInfo/index.scss
+++ b/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 {
-            background-color: rgba(0, 0, 0, 0.05);
-          }
+          // &:hover {
+          //   background-color: rgba(0, 0, 0, 0.05);
+          // }

-          &:active {
-            background-color: rgba(0, 0, 0, 0.1);
-            transform: scale(0.98);
-          }
+          // &:active {
+          //   background-color: rgba(0, 0, 0, 0.1);
+          //   transform: scale(0.98);
+          // }

          .stat_number {
            color: rgba(0, 0, 0, 0.9);
--- a/src/components/UserInfo/index.tsx
+++ b/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 ${
-            active_tab === "participated" ? "active" : ""
-          }`}
+          className={`tab_item ${active_tab === "participated" ? "active" : ""
+            }`}
          onClick={() => on_tab_change("participated")}
        >
          <Text className="tab_text">{participated_text}</Text>
--- a/src/user_pages/edit/index.scss
+++ b/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;
 }