feat(discover): chip-targeted filter panel — scroll to + highlight target section

- 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
This commit is contained in:
Codex
2026-09-14 11:27:52 +08:00
parent adfa4ff31e
commit 22325ec2b0
3 changed files with 54 additions and 44 deletions
+4 -2
View File
@@ -16,8 +16,10 @@
/* 遮罩层 + 底部抽屉样式 */
.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;padding:32rpx 28rpx calc(28rpx + env(safe-area-inset-bottom));box-shadow:0 -10rpx 40rpx rgba(31,32,89,.15);overflow-y:auto}
.filter-section{margin-bottom:28rpx}
.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}