修该关注页
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
3
src/static/userInfo/back_icon.svg
Normal file
3
src/static/userInfo/back_icon.svg
Normal 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 |
@@ -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,
|
||||||
|
|||||||
@@ -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'
|
||||||
});
|
// });
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新用户列表中的关注状态
|
// 更新用户列表中的关注状态
|
||||||
|
|||||||
Reference in New Issue
Block a user