style(mini): 活动页tab区背景改为透明,与资讯页一致
- ev-tabs 背景从实心 rgba(247,249,255,0.92)+毛玻璃 改为 transparent - 移除 ::before 伪元素实心背景 - tab按钮保持白色半透明+毛玻璃药丸样式,选中态蓝紫渐变 - 上间距调整为18rpx,与资讯页一致
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user