Codex
22325ec2b0
- Each filter chip (年龄/学历/婚姻) carries data-target pointing to its section - openFilterPanel receives TouchEvent, maps target to section id, sets panelScrollTo + panelHighlight - Panel uses scroll-view scroll-into-view with scroll-with-animation for smooth scroll - Targeted section gets pink outline highlight via .hl class - Non-targeted sections remain normally visible for context
48 lines
4.1 KiB
Plaintext
48 lines
4.1 KiB
Plaintext
.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);position:relative;z-index:1}
|
|
.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-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:10}
|
|
.filter-panel-wrap{position:fixed;left:0;right:0;bottom:0;z-index:11;background:#fff;border-radius:28rpx 28rpx 0 0;max-height:78vh;box-shadow:0 -10rpx 40rpx rgba(31,32,89,.15);display:flex;flex-direction:column;padding:24rpx 28rpx 28rpx}
|
|
.filter-scroll-wrap{flex:1;max-height:calc(78vh - 140rpx);padding:8rpx 0 0}
|
|
.filter-section{margin-bottom:28rpx;padding:16rpx 20rpx;border-radius:16rpx;transition:background .2s,box-shadow .2s}
|
|
.filter-section.hl{background:#FFF5F8;box-shadow:inset 0 0 0 2rpx var(--mini-accent-pink)}
|
|
.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;flex-wrap:wrap;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;margin-top:8rpx}
|
|
|
|
.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}
|