feat: redesign discovery and messages tabs
This commit is contained in:
Codex
@@ -1,157 +1,4 @@
|
||||
/**
|
||||
* 找对象页样式（重构后大幅简化，用户卡片主体样式封装在 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);
|
||||
}
|
||||
.page{min-height:100vh;background:#F4F5FA}.discover-hero{padding:env(safe-area-inset-top) 24rpx 24rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 34rpx 34rpx;box-shadow:var(--mini-shadow)}.discover-nav{height:88rpx;display:flex;align-items:center;justify-content:center;position:relative;color:#fff}.nav-title{font-size:31rpx;font-weight:700}.nav-search{position:absolute;right:0;width:64rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border:1rpx solid rgba(255,255,255,.18);border-radius:32rpx;background:rgba(255,255,255,.08)}.nav-search image{width:38rpx;height:38rpx;filter:brightness(0) invert(1)}
|
||||
.search-bar{display:flex;align-items:center}.search-input{height:70rpx;flex:1;display:flex;align-items:center;padding:0 20rpx;border-radius:35rpx;background:rgba(255,255,255,.12);border:1rpx solid rgba(255,255,255,.14)}.search-label{margin-right:14rpx;padding-right:14rpx;border-right:1rpx solid rgba(255,255,255,.2);font-size:20rpx;color:#fff}.search-field{flex:1;font-size:23rpx;color:#fff}.search-placeholder{font-size:23rpx;color:rgba(255,255,255,.52)}.filter-scroll{margin-top:16rpx;white-space:nowrap}.filter-chips{display:inline-flex;gap:12rpx}.filter-chip{padding:11rpx 20rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:20rpx}.filter-chip.active{background:#fff;color:var(--mini-accent-pink);font-weight:650}
|
||||
.filter-panel{position:relative;z-index:3;margin:-8rpx 24rpx 0;padding:28rpx;background:#fff;border-radius:0 0 26rpx 26rpx;box-shadow:0 14rpx 36rpx rgba(31,32,89,.12)}.filter-section{margin-bottom:28rpx}.filter-heading{display:flex;justify-content:space-between}.filter-label{display:block;font-size:24rpx;font-weight:650;color:#282D4E}.filter-value{font-size:21rpx;color:#777E99}.range-slider{margin:8rpx 0}.tag-group{display:flex;gap:14rpx;margin-top:16rpx}.tag{padding:10rpx 22rpx;border-radius:22rpx;background:#F1F2F7;color:#626981;font-size:21rpx}.tag.selected{background:#FCEBF3;color:var(--mini-accent-pink)}.filter-actions{display:flex;gap:18rpx}
|
||||
.result-head{padding:30rpx 26rpx 16rpx;display:flex;align-items:flex-end;justify-content:space-between}.result-head>view{display:flex;flex-direction:column}.result-title{font-size:30rpx;font-weight:700;color:#252A49}.result-subtitle{margin-top:5rpx;font-size:20rpx;color:#8A8FA4}.result-count{font-size:20rpx;color:#8A8FA4}.user-list{margin:0 24rpx;padding:4rpx 0;background:#fff;border-radius:28rpx;overflow:hidden;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}.card-action{display:flex;align-items:center}.like-button{width:62rpx;height:62rpx;display:flex;align-items:center;justify-content:center;border-radius:31rpx;background:#FFF0F5;box-shadow:0 6rpx 18rpx rgba(255,79,145,.16)}.like-button image{width:42rpx;height:42rpx}.like-button.loading{opacity:.45}.list-end-hint{text-align:center;padding:24rpx;font-size:20rpx;color:#9A9EB0}.discover-empty{margin:70rpx 40rpx 0;padding:34rpx;display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:28rpx;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}.discover-empty image{width:112rpx;height:112rpx}.empty-title{margin-top:12rpx;font-size:28rpx;font-weight:650;color:#252A49}.empty-desc{margin-top:10rpx;text-align:center;font-size:21rpx;line-height:1.55;color:#858A9E}.empty-action{margin-top:24rpx;min-width:180rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:23rpx;font-weight:650}
|
||||
|
||||
Reference in New Issue
Block a user