style(mini): 活动页tab区背景改为透明,与资讯页一致

- ev-tabs 背景从实心 rgba(247,249,255,0.92)+毛玻璃 改为 transparent
- 移除 ::before 伪元素实心背景
- tab按钮保持白色半透明+毛玻璃药丸样式,选中态蓝紫渐变
- 上间距调整为18rpx,与资讯页一致
This commit is contained in:
Pine
2026-09-01 23:25:04 +08:00
parent 007a33c6de
commit c6772a28e2
+5 -18
View File
@@ -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);