158 lines
3.0 KiB
Plaintext
158 lines
3.0 KiB
Plaintext
|
/**
|
||
|
|
* 找对象页样式（重构后大幅简化，用户卡片主体样式封装在 ui-user-card 内）
|
||
|
|
*/
|
||
|
|
.page {
|
||
|
|
min-height: 100vh;
|
||
|
|
background: var(--color-bg-page);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ============ 搜索栏 ============ */
|
||
|
|
.search-bar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: var(--spacing-3) var(--spacing-page-x);
|
||
|
|
background: var(--color-bg-card);
|
||
|
|
gap: var(--spacing-2);
|
||
|
|
border-bottom: var(--border-width) solid var(--color-divider);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input {
|
||
|
|
flex: 1;
|
||
|
|
height: 72rpx;
|
||
|
|
background: var(--color-bg-page);
|
||
|
|
border-radius: var(--radius-full);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 var(--spacing-3);
|
||
|
|
gap: var(--spacing-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-icon {
|
||
|
|
font-size: var(--font-size-md);
|
||
|
|
color: var(--color-text-placeholder);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-field {
|
||
|
|
flex: 1;
|
||
|
|
font-size: var(--font-size-md);
|
||
|
|
color: var(--color-text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-placeholder {
|
||
|
|
color: var(--color-text-placeholder);
|
||
|
|
font-size: var(--font-size-md);
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-btn {
|
||
|
|
min-width: 120rpx;
|
||
|
|
height: 72rpx;
|
||
|
|
background: var(--color-primary-light);
|
||
|
|
border-radius: var(--radius-full);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: var(--font-size-sm);
|
||
|
|
color: var(--color-primary);
|
||
|
|
position: relative;
|
||
|
|
padding: 0 var(--spacing-3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-btn.active {
|
||
|
|
background: var(--color-primary);
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-dot {
|
||
|
|
width: 12rpx;
|
||
|
|
height: 12rpx;
|
||
|
|
background: var(--color-primary);
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
top: 12rpx;
|
||
|
|
right: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-btn.active .filter-dot {
|
||
|
|
background: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ============ 筛选面板 ============ */
|
||
|
|
.filter-panel {
|
||
|
|
background: var(--color-bg-card);
|
||
|
|
padding: var(--spacing-4) var(--spacing-page-x);
|
||
|
|
border-bottom: var(--border-width) solid var(--color-divider);
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-section {
|
||
|
|
margin-bottom: var(--spacing-4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-label {
|
||
|
|
font-size: var(--font-size-md);
|
||
|
|
font-weight: var(--font-weight-semibold);
|
||
|
|
color: var(--color-text-primary);
|
||
|
|
display: block;
|
||
|
|
margin-bottom: var(--spacing-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.range-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--spacing-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.range-value {
|
||
|
|
min-width: 96rpx;
|
||
|
|
font-size: var(--font-size-sm);
|
||
|
|
color: var(--color-text-secondary);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.range-slider {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag-group {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: var(--spacing-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag {
|
||
|
|
padding: var(--spacing-1) var(--spacing-3);
|
||
|
|
border-radius: var(--radius-full);
|
||
|
|
font-size: var(--font-size-sm);
|
||
|
|
background: var(--color-bg-page);
|
||
|
|
color: var(--color-text-secondary);
|
||
|
|
border: 2rpx solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag.selected {
|
||
|
|
background: var(--color-primary);
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: var(--spacing-3);
|
||
|
|
margin-top: var(--spacing-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ============ 用户列表 ============ */
|
||
|
|
.user-list {
|
||
|
|
background: var(--color-bg-card);
|
||
|
|
margin-top: var(--spacing-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-action {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-end-hint {
|
||
|
|
text-align: center;
|
||
|
|
padding: var(--spacing-3);
|
||
|
|
color: var(--color-text-tertiary);
|
||
|
|
font-size: var(--font-size-xs);
|
||
|
|
}
|