修该关注页

This commit is contained in:
张成
2025-09-18 00:19:59 +08:00
parent 33ebba64a9
commit 2f5bfc537c
6 changed files with 69 additions and 55 deletions

View File

@@ -5,7 +5,9 @@
align-items: center; align-items: center;
padding: 8px 20px; padding: 8px 20px;
background: #ffffff; background: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); height: 56px;
margin-top: 12px;
box-sizing: border-box;
.user_info { .user_info {
display: flex; display: flex;

View File

@@ -92,7 +92,7 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
<View className="user_details"> <View className="user_details">
<Text className="nickname">{user.nickname}</Text> <Text className="nickname">{user.nickname}</Text>
<Text className="signature"> <Text className="signature">
{user.personal_profile || '签名写在这里'} {user.personal_profile?.replace(/\n/g, ' ') || '签名写在这里'}
</Text> </Text>
</View> </View>
</View> </View>

View File

@@ -96,8 +96,8 @@
&.clickable { &.clickable {
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
padding: 4px 8px; // padding: 4px 8px;
border-radius: 8px; // border-radius: 8px;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);

View File

@@ -0,0 +1,3 @@
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.66675 18L1.66675 10L9.66675 2" stroke="black" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 233 B

View File

@@ -1,7 +1,8 @@
// 球友关注页面样式 // 球友关注页面样式
.follow_page { .follow_page {
min-height: 100vh; min-height: 100vh;
background: #FAFAFA; display: flex;
flex-direction: column;
// 导航栏内容 // 导航栏内容
.navbar_content { .navbar_content {
@@ -20,9 +21,9 @@
margin-left: 10px; margin-left: 10px;
.back_icon { .back_icon {
width: 8px;
height: 16px; 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; background-size: contain;
} }
} }
@@ -64,7 +65,12 @@
background: #ffffff; background: #ffffff;
height: 44px; height: 44px;
overflow-x: auto; overflow-x: auto;
margin-top: 110px; position: fixed;
top: 110px;
left: 0;
right: 0;
z-index: 100;
flex-shrink: 0;
.tab_item { .tab_item {
@@ -124,13 +130,13 @@
.tab_text { .tab_text {
font-weight: 600 !important; font-weight: 600 !important;
color: #000000 !important; color: #000000 !important;
} position: relative;
// 下边框 // 下边框只应用在文字上
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: -8px; // 调整距离文字底部的位置
left: 0; left: 0;
right: 0; right: 0;
height: 2px; height: 2px;
@@ -138,6 +144,7 @@
z-index: 1; z-index: 1;
} }
} }
}
// 移除默认的粉丝标签激活样式,完全依赖 active 类 // 移除默认的粉丝标签激活样式,完全依赖 active 类
} }
@@ -145,9 +152,13 @@
// 用户列表容器 // 用户列表容器
.user_list_container { .user_list_container {
flex: 1; position: absolute;
margin-top: 12px; top: 154px; // 110px(导航栏高度) + 44px(tab导航高度)
left: 0;
right: 0;
bottom: 0;
background: #ffffff; background: #ffffff;
overflow-y: auto;
// 加载状态提示 // 加载状态提示
.loading_tip, .loading_tip,

View File

@@ -97,10 +97,8 @@ const FollowPage: React.FC = () => {
set_active_tab(tab); set_active_tab(tab);
// 如果该标签页还没有数据,则加载 // 每次切换tab都重新加载数据
if (user_lists[tab].length === 0) {
load_user_list(tab, true); load_user_list(tab, true);
}
}; };
// 处理关注状态变化 // 处理关注状态变化
@@ -108,16 +106,16 @@ const FollowPage: React.FC = () => {
try { try {
if (is_following) { if (is_following) {
await FollowService.follow_user(user_id); await FollowService.follow_user(user_id);
Taro.showToast({ // Taro.showToast({
title: '关注成功', // title: '关注成功',
icon: 'success' // icon: 'success'
}); // });
} else { } else {
await FollowService.unfollow_user(user_id); await FollowService.unfollow_user(user_id);
Taro.showToast({ // Taro.showToast({
title: '取消关注成功', // title: '取消关注成功',
icon: 'success' // icon: 'success'
}); // });
} }
// 更新用户列表中的关注状态 // 更新用户列表中的关注状态