730 lines
No EOL
12 KiB
Text
730 lines
No EOL
12 KiB
Text
/* 好友页面 - 简洁现代设计 */
|
|
|
|
.friends-container {
|
|
height: 100vh;
|
|
/* 深色页面背景 */
|
|
background-color: #121212;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 导航栏 */
|
|
.nav-bar {
|
|
/* background-color: #fff; */
|
|
/* border-bottom: 1px solid #e5e5e5; */
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
/* border: 1px solid white; */
|
|
box-sizing: border-box;
|
|
height: 120rpx;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.nav-content {
|
|
/* border: 1px solid rgb(74, 4, 235); */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
/* padding: 12px 16px; */
|
|
/* height: 44px; */
|
|
}
|
|
|
|
.nav-left {
|
|
/* flex: 1; */
|
|
/* border: 1px solid red; */
|
|
height: 80rpx;
|
|
width: 580rpx;
|
|
border-radius: 40rpx;
|
|
background: white;
|
|
display: flex;
|
|
align-items:center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.search-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-input{
|
|
flex: 1;
|
|
padding-left: 30rpx;
|
|
padding-right: 80rpx;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
height: 100%;
|
|
}
|
|
|
|
.search-placeholder {
|
|
color: #B3B3B3;
|
|
}
|
|
|
|
.search-icon{
|
|
position: absolute;
|
|
right: 30rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.search-clear {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
border-radius: 50%;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.search-clear:active {
|
|
transform: scale(0.9);
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.clear-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 搜索结果提示 */
|
|
.search-hint {
|
|
padding: 16rpx 32rpx;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.hint-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.nav-subtitle {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 2rpx;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.nav-icon{
|
|
width: 30px;
|
|
height: 24px;
|
|
/* background-color: #1E1E1E; */
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
|
|
/* 内容区域 */
|
|
.content-area {
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
/* 深色页面背景 */
|
|
/* background-color: #121212; */
|
|
background-color: black;
|
|
|
|
}
|
|
|
|
/* 搜索栏 */
|
|
.search-section {
|
|
padding: 12px 16px;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.search-bar {
|
|
position: relative;
|
|
background-color: #f0f0f0;
|
|
border-radius: 20px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.search-input {
|
|
height: 36px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.search-clear {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 10px;
|
|
background-color: #ccc;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.clear-icon {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 功能入口 */
|
|
.function-section {
|
|
background-color: #fff;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.function-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
align-items: center;
|
|
padding: 16px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
transition: all 0.2s ease;
|
|
/* background-color: red; */
|
|
position: relative;
|
|
background-color:#1C1C1C;
|
|
}
|
|
|
|
.function-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.function-item:active {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.function-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 12px;
|
|
position: relative;
|
|
background-color: #252525;
|
|
|
|
}
|
|
|
|
.function-icon.new-friends {
|
|
background-color: #4CAF50;
|
|
}
|
|
|
|
.function-icon.groups {
|
|
background-color: #2196F3;
|
|
}
|
|
|
|
.icon-text {
|
|
font-size: 20px;
|
|
color: #fff;
|
|
}
|
|
|
|
.badge {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -4px;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
background-color: #ff4444;
|
|
border-radius: 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
border: 2px solid #fff;
|
|
}
|
|
|
|
.function-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
align-items: stretch;
|
|
/* background-color: #191919; */
|
|
|
|
|
|
}
|
|
|
|
.function-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.function-desc {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
|
|
}
|
|
|
|
.function-arrow {
|
|
|
|
font-size: 18px;
|
|
color: #ccc;
|
|
position: absolute;
|
|
right: 20px;
|
|
}
|
|
|
|
/* 好友列表 */
|
|
.friends-section {
|
|
/* background-color: #fff; */
|
|
background-color: #13212A;
|
|
|
|
|
|
|
|
}
|
|
.friends-section-list{
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #132029;
|
|
}
|
|
|
|
.section-header {
|
|
padding: 12px 16px 8px 16px;
|
|
/* background-color: #f8f8f8; */
|
|
background-color: red;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 14px;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.friends-list {
|
|
border-radius: 12px;
|
|
width: 90%;
|
|
right: 0;
|
|
left: 0;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
align-items: center;
|
|
margin-bottom: 30%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
|
|
.friend-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: all 0.2s ease;
|
|
background-color: #26333C;
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
height: 70px;
|
|
right: 0;
|
|
left: 0;
|
|
margin: 0 auto;
|
|
margin-top: 10px;
|
|
padding-left: 10px;
|
|
|
|
}
|
|
|
|
.friend-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
|
|
/* 头像 */
|
|
.friend-avatar {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 12rpx;
|
|
margin-right: 12rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
z-index: 1; /* 建立更高层级，配合在线状态点覆盖显示 */
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.avatar-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.avatar-text {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 在线状态角标 —— 与消息页保持一致 */
|
|
.online-dot {
|
|
position: absolute;
|
|
right: 2rpx;
|
|
bottom: 2rpx;
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid #1e1e1e;
|
|
/* 与暗色卡片背景衔接，等效于 message 页的 var(--surface-color) */
|
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.35);
|
|
z-index: 1000; /* 保持顶部，避免被列表或文本遮挡 */
|
|
pointer-events: none; /* 不影响点击头像 */
|
|
}
|
|
|
|
.online-dot.online {
|
|
background: #2ECC71;
|
|
}
|
|
|
|
.online-dot.offline {
|
|
background: #9E9E9E;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* 好友信息 */
|
|
.friend-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
height: 100%;
|
|
}
|
|
|
|
.friend-name {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin-bottom: 2px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.friend-desc {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
line-height: 1.2;
|
|
margin-top: 2rpx;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.friend-id {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
margin-top: 4rpx;
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
}
|
|
|
|
.friend-status {
|
|
font-size: 12px;
|
|
color: #999;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-left: 24rpx;
|
|
display: block;
|
|
}
|
|
|
|
/* 操作按钮 */
|
|
.friend-actions {
|
|
width: 60px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
/* background-color: red; */
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.action-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
/* border-radius: 16px; */
|
|
/* background-color: #f0f0f0; */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.action-btn:active {
|
|
transform: scale(0.9);
|
|
/* background: #2c3b46; */
|
|
}
|
|
|
|
.action-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 14px;
|
|
/* background-color: red; */
|
|
margin-right:10px ;
|
|
}
|
|
.action-icon:active{
|
|
border-radius: 50px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* padding: 80px 32px; */
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
/* font-size: 64px; */
|
|
/* margin-bottom: 16px; */
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.empty-desc {
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.empty-btn {
|
|
background: linear-gradient(35deg, #667eea, #764ba2);
|
|
color: #fff;
|
|
padding: 12px 24px;
|
|
border-radius: 20px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.empty-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.btn-text {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.loading-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid #f0f0f0;
|
|
border-top: 3px solid #667eea;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
/* ================== 暗色主题覆盖（社交-好友列表） ================== */
|
|
.friends-container .nav-bar {
|
|
background:black;
|
|
/* border-bottom: 1px solid #2a2a2a; */
|
|
}
|
|
|
|
.friends-container .nav-title {
|
|
color: #f5f5f5;
|
|
}
|
|
|
|
.friends-container .nav-subtitle {
|
|
color: #b0b0b0;
|
|
}
|
|
|
|
|
|
.friends-container .nav-btn{
|
|
width: 40px;
|
|
height: 35px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.friends-container .nav-btn:active {
|
|
background: #333;
|
|
border-radius: 12px;
|
|
|
|
|
|
}
|
|
|
|
.friends-container .search-section {
|
|
background: #1e1e1e;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
|
|
}
|
|
|
|
.friends-container .search-bar {
|
|
background: #2a2a2a;
|
|
}
|
|
|
|
.friends-container .search-input {
|
|
color: black;
|
|
}
|
|
|
|
.friends-container .search-clear {
|
|
background: #444;
|
|
}
|
|
|
|
/* .friends-container .function-section,
|
|
.friends-container .friends-section,
|
|
.friends-container .friends-list {
|
|
background: #1e1e1e;
|
|
} */
|
|
|
|
.friends-container .function-item {
|
|
border-bottom: 1px solid #2a2a2a;
|
|
}
|
|
|
|
.friends-container .function-item:active {
|
|
background: #252525;
|
|
}
|
|
|
|
.friends-container .section-header {
|
|
background: #181818;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
}
|
|
|
|
.friends-container .function-title,
|
|
.friends-container .friend-name {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.friends-container .function-desc,
|
|
.friends-container .friend-status,
|
|
.friends-container .nav-subtitle {
|
|
color: #b0b0b0;
|
|
}
|
|
|
|
/* .friends-container .friend-item {
|
|
border-bottom: 1px solid #262626;
|
|
} */
|
|
/*
|
|
.friends-container .friend-item:active {
|
|
|
|
} */
|
|
|
|
/* .friends-container .action-btn {
|
|
background: #2a2a2a;
|
|
}
|
|
|
|
.friends-container .action-btn:active {
|
|
background: #333;
|
|
} */
|
|
|
|
/* 占位 */
|
|
.friends-container .avatar-placeholder {
|
|
background: linear-gradient(135deg, #2f3550, #1f2230);
|
|
}
|
|
|
|
/* 空状态 */
|
|
.friends-container .empty-title {
|
|
color: #f5f5f5;
|
|
}
|
|
|
|
.friends-container .empty-desc {
|
|
color: #b0b0b0;
|
|
}
|
|
|
|
.friends-container .empty-btn {
|
|
background: linear-gradient(135deg, #4d7dff, #246bff);
|
|
box-shadow: 0 4px 12px rgba(36, 107, 255, 0.35);
|
|
}
|
|
|
|
/* 加载 */
|
|
.friends-container .loading-text {
|
|
color: #b0b0b0;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 375px) {
|
|
.nav-content {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.function-item,
|
|
.friend-item {
|
|
padding: 12px;
|
|
}
|
|
|
|
.friend-avatar {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.avatar-text {
|
|
font-size: 16px;
|
|
}
|
|
} |