From c6772a28e2de1890d9945cd367fb1c2d1d81249e Mon Sep 17 00:00:00 2001 From: Pine Date: Tue, 1 Sep 2026 23:25:04 +0800 Subject: [PATCH] =?UTF-8?q?style(mini):=20=E6=B4=BB=E5=8A=A8=E9=A1=B5tab?= =?UTF-8?q?=E5=8C=BA=E8=83=8C=E6=99=AF=E6=94=B9=E4=B8=BA=E9=80=8F=E6=98=8E?= =?UTF-8?q?=EF=BC=8C=E4=B8=8E=E8=B5=84=E8=AE=AF=E9=A1=B5=E4=B8=80=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ev-tabs 背景从实心 rgba(247,249,255,0.92)+毛玻璃 改为 transparent - 移除 ::before 伪元素实心背景 - tab按钮保持白色半透明+毛玻璃药丸样式,选中态蓝紫渐变 - 上间距调整为18rpx,与资讯页一致 --- miniprogram/src/pages/booking/index.scss | 23 +++++------------------ 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/miniprogram/src/pages/booking/index.scss b/miniprogram/src/pages/booking/index.scss index 03d8c47..ffd8d0a 100644 --- a/miniprogram/src/pages/booking/index.scss +++ b/miniprogram/src/pages/booking/index.scss @@ -13,36 +13,23 @@ .ev-title { font-size: 40rpx; font-weight: 800; letter-spacing: -0.5rpx; line-height: 1.3; background: linear-gradient(120deg, #8fc3ff 0%, #a8a0ff 45%, #e0a0ff 80%, #7fe0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .ev-en { font-family: 'BubbledotICG', monospace; color: #5b5b5b; font-size: 24rpx; letter-spacing: 2rpx; } -/* 筛选 tab(吸顶:实心背景,滚动时下方卡片不透过,无顶部间隙) */ +/* 筛选 tab(吸顶:透明背景,与资讯页一致,页面渐变背景透出) */ .ev-tabs { display: flex; flex-wrap: nowrap; /* 单行横滑,绝不换行 */ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; - gap: 16rpx; - padding: 16rpx 16rpx; + gap: 12rpx; + padding: 18rpx 0 16rpx; margin-top: 0; position: sticky; top: 0; /* 运行时由内联 style 覆盖为标题区实测高度 */ z-index: 3; - /* 常驻毛玻璃底:非吸顶时与页面底色几乎一致(视觉透明),吸顶悬浮时遮挡滚过的卡片 */ - background: rgba(247, 249, 255, 0.92); - backdrop-filter: blur(20px) saturate(160%); - -webkit-backdrop-filter: blur(20px) saturate(160%); - /* 顶部用伪元素延伸到视口外,确保吸顶时完全贴合、无透光间隙 */ -} -.ev-tabs::before { - content: ''; - position: absolute; - top: -60rpx; - left: 0; - right: 0; - height: 60rpx; - background: #f4f6ff; + background: transparent; } .ev-tab { - font-size: 26rpx; color: #8a94c0; padding: 10rpx 30rpx; + font-size: 22rpx; color: #8a94c0; padding: 10rpx 28rpx; white-space: nowrap; /* 文字绝不允许换行显示 */ flex-shrink: 0; /* 超出一行时横向滚动而非压缩换行 */ border-radius: 999px; border: 1rpx solid rgba(99,132,255,0.14);