- 重写 space/index.html:左右分栏,左侧导航栏 + 右侧卡片网格 - 自己空间:显示全部关注用户卡片(头像/用户名/简介/已关注标签)+ 设置入口 - 他人空间:简化侧栏(Ta的关注/粉丝),隐私关闭时显示空状态插图 - Model UserFollow 新增头像/简介联表字段 - Repository ListFollowing/ListFollowers SELECT 增加 avatar/bio - Controller ShowSpace 注入 FollowService,获取关注列表数据 - space.css 完全重写为卡片网格布局 + 响应式适配 - follow.css 清理旧 .follow-btn/.follow-links 无用样式
67 lines
1.2 KiB
CSS
67 lines
1.2 KiB
CSS
/* 用户列表(粉丝/关注页) */
|
|
.follow-list-page {
|
|
max-width: 700px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.follow-list-page h1 {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.follow-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: .8rem 0;
|
|
border-bottom: 1px solid var(--color-border, #e5e7eb);
|
|
}
|
|
|
|
.follow-list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.follow-list-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .75rem;
|
|
text-decoration: none;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.follow-list-user:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.follow-list-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.follow-list-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.follow-list-empty {
|
|
text-align: center;
|
|
color: var(--color-secondary);
|
|
padding: 3rem 0;
|
|
}
|
|
|
|
/* 隐私提示 */
|
|
.follow-list-private {
|
|
text-align: center;
|
|
color: var(--color-secondary);
|
|
padding: 3rem 0;
|
|
}
|