Pine
a05eb8ce29
- 资讯中心：类别 tab（新增「全部」，全类型按优先级/时间排序）移出标题区，悬浮于标题区正下方固定不随滚动 - 活动页 tabs：透明毛玻璃底 + sticky 吸顶（top=标题区实测高度） - 选中态统一：蓝紫渐变(135deg #6b8bff→#8f7bff)+白字+柔投影；未选中玻璃底+淡蓝边（活动/我的 phase-tab 修正） - 留言点赞红统一 #ff5f86
139 lines
6.7 KiB
SCSS
139 lines
6.7 KiB
SCSS
/* 活动列表 · 小程序样式（双列海报瀑布流 · 参考活动平台布局） */
|
|
.events {
|
|
padding: 24rpx 24rpx 180rpx;
|
|
position: relative; z-index: 2;
|
|
}
|
|
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
|
.events { padding-bottom: calc(180rpx + env(safe-area-inset-bottom)); }
|
|
}
|
|
|
|
/* 区块头 */
|
|
.ev-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6rpx; margin: 32rpx 0 20rpx; padding: 0 8rpx; }
|
|
.ev-no { font-family: 'BubbledotICG', monospace; color: #a3abc9; font-size: 26rpx; letter-spacing: 2rpx; }
|
|
.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（吸顶：实心背景，滚动时下方卡片不透过，无顶部间隙） */
|
|
.ev-tabs {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
padding: 16rpx 8rpx;
|
|
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;
|
|
}
|
|
.ev-tab {
|
|
font-size: 26rpx; color: #8a94c0; padding: 10rpx 30rpx;
|
|
border-radius: 999px; border: 1rpx solid rgba(99,132,255,0.14);
|
|
background: rgba(255,255,255,0.72); backdrop-filter: blur(8px);
|
|
}
|
|
.ev-tab.on {
|
|
color: #ffffff; background: linear-gradient(135deg, #6b8bff, #8f7bff); font-weight: 600; border-color: transparent;
|
|
box-shadow: 0 8rpx 22rpx rgba(98,132,255,.28);
|
|
}
|
|
|
|
/* 双列瀑布流 */
|
|
.ev-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20rpx;
|
|
}
|
|
.cell {
|
|
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
|
|
border: 1rpx solid rgba(99,132,255,0.12);
|
|
box-shadow: 0 8rpx 24rpx rgba(59,79,125,0.08);
|
|
border-radius: 18rpx;
|
|
overflow: hidden;
|
|
}
|
|
.cell-poster { position: relative; width: 100%; height: 260rpx; }
|
|
.cell-img { width: 100%; height: 100%; display: block; }
|
|
.cell-img.ph {
|
|
display: flex; flex-direction: column; justify-content: flex-end; gap: 8rpx;
|
|
padding: 20rpx; box-sizing: border-box;
|
|
background: linear-gradient(150deg, #dbe7ff 0%, #e6dcff 55%, #f3e3ff 100%);
|
|
}
|
|
.cell-img.ph.salon { background: linear-gradient(150deg, #ffe6f2 0%, #e6dcff 55%, #dbe7ff 100%); }
|
|
.cell-ph-tag {
|
|
align-self: flex-start; font-size: 20rpx; font-weight: 700; color: #23315c;
|
|
background: rgba(255,255,255,0.16); border: 1rpx solid rgba(255,255,255,0.3);
|
|
border-radius: 999px; padding: 3rpx 16rpx;
|
|
}
|
|
.cell-ph-t {
|
|
font-size: 28rpx; font-weight: 800; color: #23315c; line-height: 1.4;
|
|
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
|
|
}
|
|
.cell-tags { position: absolute; top: 14rpx; left: 14rpx; display: flex; gap: 8rpx; }
|
|
.ev-tag {
|
|
font-size: 20rpx; font-weight: 700; color: #23315c; background: rgba(255,255,255,0.92);
|
|
border-radius: 999px; padding: 3rpx 14rpx;
|
|
}
|
|
.ev-tag.alt { background: #5b8cff; color: #fff; }
|
|
.ev-tag.mode { background: rgba(20,28,54,0.78); color: #fff; }
|
|
.ev-tag.mode.online { background: rgba(140,200,255,0.92); color: #0a1a3a; }
|
|
|
|
.cell-body { padding: 18rpx 18rpx 20rpx; }
|
|
.cell-name {
|
|
display: block; font-size: 27rpx; font-weight: 700; color: #23315c; line-height: 1.4;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.cell-desc {
|
|
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
|
|
font-size: 21rpx; color: #9aa4c6; line-height: 1.5; margin-top: 8rpx;
|
|
}
|
|
.cell-meta { display: block; font-size: 21rpx; color: #4a5580; margin-top: 10rpx; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.cell-loc { display: block; font-size: 21rpx; color: #9aa4c6; margin-top: 6rpx; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.cell-cap { display: block; font-size: 21rpx; color: #a8c4ff; margin-top: 6rpx; line-height: 1.5; }
|
|
.cell-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12rpx; }
|
|
.cell-price { display: inline-block; font-size: 24rpx; font-weight: 700; color: #3fb68b; }
|
|
.cell-status { font-size: 20rpx; padding: 4rpx 16rpx; border-radius: 999px; color: #3fb68b; background: rgba(63,182,139,0.14); border: 1rpx solid rgba(63,182,139,0.4); }
|
|
.cell-status.full { color: #f5c451; background: rgba(245,196,81,0.12); border-color: rgba(245,196,81,0.4); }
|
|
.cell-status.done { color: #9aa4c6; background: rgba(154,164,198,0.12); border-color: rgba(154,164,198,0.3); }
|
|
|
|
.muted { color: #9aa4c6; font-size: 26rpx; padding: 20rpx 8rpx; }
|
|
.err-text { display: block; margin-top: 20rpx; font-size: 26rpx; color: #f0b8b8; text-align: center; }
|
|
|
|
/* ---------- 近期活动 · 首屏倒计时（从首页迁入） ---------- */
|
|
.mk-section { margin-top: 0; }
|
|
.mk-count {
|
|
/* 玻璃材质：整体更透，中心最透(从外部到中间渐隐)，边缘略实 */
|
|
background: radial-gradient(150% 150% at 50% 24%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.32) 52%, rgba(255,255,255,0.48) 100%);
|
|
backdrop-filter: blur(28px) saturate(175%); -webkit-backdrop-filter: blur(28px) saturate(175%);
|
|
border: 1rpx solid rgba(255,255,255,0.55);
|
|
box-shadow: 0 14rpx 44rpx rgba(59,79,125,0.12), inset 0 1rpx 0 rgba(255,255,255,0.6);
|
|
border-radius: 28px;
|
|
padding: 44rpx 36rpx;
|
|
text-align: center;
|
|
margin: 0 0 20rpx;
|
|
position: relative;
|
|
z-index: 5;
|
|
overflow: hidden;
|
|
}
|
|
.mk-count-lbl { display: block; position: relative; z-index: 2; font-size: 24rpx; letter-spacing: 4rpx; color: #9aa4c6; }
|
|
.mk-count-nums { position: relative; z-index: 2; display: flex; justify-content: center; gap: 24rpx; margin: 28rpx 0 18rpx; }
|
|
.mk-count-cell { display: flex; flex-direction: column; align-items: center; gap: 6rpx; }
|
|
.mk-count-cell .num { font-family: 'BubbledotICG', monospace; font-size: 56rpx; color: #23315c; line-height: 1; }
|
|
.mk-count-cell .unit { font-size: 22rpx; color: #4a5580; }
|
|
.mk-count-name { display: block; position: relative; z-index: 2; font-size: 30rpx; font-weight: 600; color: #23315c; }
|
|
|
|
/* 空状态提示：垂直留白 + 居中 */
|
|
.bk-empty {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 120rpx 40rpx;
|
|
}
|