diff --git a/src/components/FollowUserCard/index.scss b/src/components/FollowUserCard/index.scss index 44c844f..109f2ab 100644 --- a/src/components/FollowUserCard/index.scss +++ b/src/components/FollowUserCard/index.scss @@ -5,7 +5,9 @@ align-items: center; padding: 8px 20px; background: #ffffff; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); + height: 56px; + margin-top: 12px; + box-sizing: border-box; .user_info { display: flex; diff --git a/src/components/FollowUserCard/index.tsx b/src/components/FollowUserCard/index.tsx index 6cd45b1..5a4eb89 100644 --- a/src/components/FollowUserCard/index.tsx +++ b/src/components/FollowUserCard/index.tsx @@ -92,7 +92,7 @@ const FollowUserCard: React.FC = ({ user, onFollowChange }) {user.nickname} - {user.personal_profile || '签名写在这里'} + {user.personal_profile?.replace(/\n/g, ' ') || '签名写在这里'} diff --git a/src/components/UserInfo/index.scss b/src/components/UserInfo/index.scss index 38a68bd..784e8e8 100644 --- a/src/components/UserInfo/index.scss +++ b/src/components/UserInfo/index.scss @@ -96,8 +96,8 @@ &.clickable { cursor: pointer; transition: all 0.2s ease; - padding: 4px 8px; - border-radius: 8px; + // padding: 4px 8px; + // border-radius: 8px; &:hover { background-color: rgba(0, 0, 0, 0.05); diff --git a/src/static/userInfo/back_icon.svg b/src/static/userInfo/back_icon.svg new file mode 100644 index 0000000..b35bb4f --- /dev/null +++ b/src/static/userInfo/back_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/user_pages/follow/index.scss b/src/user_pages/follow/index.scss index 146ee60..8400038 100644 --- a/src/user_pages/follow/index.scss +++ b/src/user_pages/follow/index.scss @@ -1,8 +1,9 @@ // 球友关注页面样式 .follow_page { min-height: 100vh; - background: #FAFAFA; - + display: flex; + flex-direction: column; + // 导航栏内容 .navbar_content { display: flex; @@ -10,7 +11,7 @@ align-items: center; width: 100%; height: 44px; - + .navbar_back { display: flex; align-items: center; @@ -18,15 +19,15 @@ width: 32px; height: 32px; margin-left: 10px; - + .back_icon { - width: 8px; height: 16px; - background: url("data:image/svg+xml,%3Csvg width='8' height='16' viewBox='0 0 8 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66667 2L1.33333 8L6.66667 14' stroke='%23000000' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; + width: 8px; + background: url("../../static/userInfo/back_icon.svg") no-repeat center; background-size: contain; } } - + .navbar_title { font-family: PingFang SC; font-weight: 600; @@ -37,7 +38,7 @@ position: absolute; left: 50px; } - + .navbar_action { display: flex; align-items: center; @@ -45,7 +46,7 @@ width: 83px; height: 30px; margin-right: 7px; - + .action_icon { width: 20px; height: 20px; @@ -54,7 +55,7 @@ } } } - + // 标签页导航 .tab_navigation { display: flex; @@ -64,9 +65,14 @@ background: #ffffff; height: 44px; overflow-x: auto; - margin-top: 110px; - - + position: fixed; + top: 110px; + left: 0; + right: 0; + z-index: 100; + flex-shrink: 0; + + .tab_item { display: flex; align-items: center; @@ -75,7 +81,7 @@ position: relative; flex-shrink: 0; min-width: fit-content; - + .tab_text { font-family: PingFang SC; font-weight: 400; @@ -85,24 +91,24 @@ color: rgba(0, 0, 0, 0.5); transition: all 0.2s ease; white-space: nowrap; - + // 小屏幕适配 @media (max-width: 375px) { font-size: 13px; } } - + // 推荐图标 .recommend_icon { .icon_container { width: 10px; height: 10px; position: relative; - + .star_icon { width: 100%; height: 100%; - + &::before { content: ''; position: absolute; @@ -116,7 +122,7 @@ } } } - + // 激活状态 &.active { /* 添加调试背景色 */ @@ -124,31 +130,36 @@ .tab_text { font-weight: 600 !important; color: #000000 !important; - } - - // 下边框 - &::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background: #000000 !important; - z-index: 1; + position: relative; + + // 下边框只应用在文字上 + &::after { + content: ''; + position: absolute; + bottom: -8px; // 调整距离文字底部的位置 + left: 0; + right: 0; + height: 2px; + background: #000000 !important; + z-index: 1; + } } } - + // 移除默认的粉丝标签激活样式，完全依赖 active 类 } } - + // 用户列表容器 .user_list_container { - flex: 1; - margin-top: 12px; + position: absolute; + top: 154px; // 110px(导航栏高度) + 44px(tab导航高度) + left: 0; + right: 0; + bottom: 0; background: #ffffff; - + overflow-y: auto; + // 加载状态提示 .loading_tip, .empty_tip, @@ -157,7 +168,7 @@ justify-content: center; align-items: center; padding: 40px 20px; - + text { font-family: PingFang SC; font-weight: 400; @@ -165,11 +176,11 @@ color: rgba(0, 0, 0, 0.5); } } - + .empty_tip { padding: 80px 20px; } - + .load_more_tip { padding: 20px; } diff --git a/src/user_pages/follow/index.tsx b/src/user_pages/follow/index.tsx index e02dd41..e5bfd0d 100644 --- a/src/user_pages/follow/index.tsx +++ b/src/user_pages/follow/index.tsx @@ -97,10 +97,8 @@ const FollowPage: React.FC = () => { set_active_tab(tab); - // 如果该标签页还没有数据，则加载 - if (user_lists[tab].length === 0) { - load_user_list(tab, true); - } + // 每次切换tab都重新加载数据 + load_user_list(tab, true); }; // 处理关注状态变化 @@ -108,16 +106,16 @@ const FollowPage: React.FC = () => { try { if (is_following) { await FollowService.follow_user(user_id); - Taro.showToast({ - title: '关注成功', - icon: 'success' - }); + // Taro.showToast({ + // title: '关注成功', + // icon: 'success' + // }); } else { await FollowService.unfollow_user(user_id); - Taro.showToast({ - title: '取消关注成功', - icon: 'success' - }); + // Taro.showToast({ + // title: '取消关注成功', + // icon: 'success' + // }); } // 更新用户列表中的关注状态