Pine
a05eb8ce29
- 资讯中心：类别 tab（新增「全部」，全类型按优先级/时间排序）移出标题区，悬浮于标题区正下方固定不随滚动 - 活动页 tabs：透明毛玻璃底 + sticky 吸顶（top=标题区实测高度） - 选中态统一：蓝紫渐变(135deg #6b8bff→#8f7bff)+白字+柔投影；未选中玻璃底+淡蓝边（活动/我的 phase-tab 修正） - 留言点赞红统一 #ff5f86
99 lines
5.8 KiB
SCSS
99 lines
5.8 KiB
SCSS
/* 资讯中心 · Soft UI 风格（浅色柔彩：渐变底 + 柔和圆角卡片 + 软阴影） */
|
|
|
|
/* 页面柔彩渐变背景（浅色粉紫→薄荷→天蓝） */
|
|
.ct { position: relative; z-index: 2; display: flex; flex-direction: column;
|
|
height: 100vh; overflow: hidden; padding: 0 24rpx 0; box-sizing: border-box;
|
|
background: linear-gradient(165deg, #edf2ff 0%, #f6eefc 34%, #ecf7f6 68%, #eaf4ff 100%); }
|
|
/* 内容区独立滚动（页头固定），底部避开自定义 tabBar。
|
|
height:0 + flex-grow 强制 ScrollView 拿到确定高度，否则微信里内部高度随内容增长、整页滚动 */
|
|
.ct-scroll { flex: 1 1 0; height: 0; min-height: 0; }
|
|
/* 顶部柔光装饰（可选，营造 Soft 氛围） */
|
|
.ct::before { content: ''; position: fixed; inset: 0; z-index: -1;
|
|
background: radial-gradient(60% 46% at 12% 4%, rgba(229,167,224,.30), transparent 60%),
|
|
radial-gradient(50% 40% at 92% 8%, rgba(158,225,236,.34), transparent 60%),
|
|
radial-gradient(46% 40% at 80% 96%, rgba(151,225,212,.26), transparent 60%);
|
|
}
|
|
|
|
/* 标准页头（对齐「我的/活动」页头：kicker + 渐变标题 + 英文注脚） */
|
|
.ct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12rpx; margin: 32rpx 0 20rpx; padding: 0 8rpx; }
|
|
.ct-head-l { display: flex; flex-direction: column; flex-shrink: 0; max-width: 42%; }
|
|
.ct-no { font-family: 'BubbledotICG', monospace; color: #a3abc9; font-size: 26rpx; letter-spacing: 2rpx; }
|
|
.ct-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; }
|
|
.ct-en { font-family: 'BubbledotICG', monospace; color: #5b5b5b; font-size: 24rpx; letter-spacing: 2rpx; }
|
|
|
|
/* 类别 tab：药丸居右，4 个一行与标题同排 */
|
|
.ct-cats { min-width: 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 12rpx; }
|
|
/* 类别 tab 条：紧贴标题区下方，位于滚动区之外，固定不随内容滚动 */
|
|
.ct-cats-bar {
|
|
flex-wrap: nowrap; justify-content: flex-start; gap: 12rpx;
|
|
padding: 4rpx 0 12rpx;
|
|
background: transparent;
|
|
}
|
|
.ct-cats-bar .ct-cat { flex: 0 0 auto; padding: 10rpx 30rpx; }
|
|
.ct-cat {
|
|
flex: 1 1 0; min-width: 0; text-align: center; padding: 8rpx 0; border-radius: 999px; white-space: nowrap; overflow: hidden;
|
|
background: rgba(255,255,255,.72); border: 1rpx solid rgba(99,132,255,.14); color: #8a94c0; font-size: 22rpx;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.ct-cat.on { background: linear-gradient(135deg, #6b8bff, #8f7bff); color: #ffffff; border-color: transparent; font-weight: 600;
|
|
box-shadow: 0 8rpx 22rpx rgba(98,132,255,.28); }
|
|
|
|
/* 政策测评入口 */
|
|
.ct-quiz {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 18rpx 22rpx; margin-bottom: 12rpx; border-radius: 18rpx;
|
|
background: linear-gradient(135deg, rgba(229,167,224,.18), rgba(158,225,236,.18));
|
|
border: 1rpx solid rgba(255,255,255,.6);
|
|
}
|
|
.ct-quiz-l { font-size: 27rpx; color: #3b4f7d; font-weight: 600; }
|
|
.ct-quiz-d { font-size: 24rpx; color: #6284ff; }
|
|
|
|
/* 行式卡片（软白表面 + 软阴影 + 圆角） */
|
|
.ct-row { display: flex; gap: 18rpx; padding: 18rpx; margin-bottom: 14rpx; border-radius: 20rpx; box-sizing: border-box;
|
|
background: rgba(255,255,255,.82); box-shadow: 0 8rpx 24rpx rgba(59,79,125,.08); }
|
|
.ct-thumb {
|
|
width: 112rpx; height: 112rpx; border-radius: 16rpx; flex-shrink: 0;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.ct-thumb-char { font-size: 44rpx; color: #ffffff; font-weight: 700; }
|
|
.ct-row-bd { flex: 1; min-width: 0; }
|
|
.ct-tag { display: block; font-size: 22rpx; font-weight: 600; margin-bottom: 6rpx; }
|
|
.ct-row-title {
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
font-size: 28rpx; color: #2b3a66; line-height: 1.45; font-weight: 600;
|
|
}
|
|
.ct-row-meta { display: flex; align-items: center; gap: 8rpx; margin-top: 12rpx; }
|
|
.ct-ava { width: 28rpx; height: 28rpx; border-radius: 50%; flex-shrink: 0; }
|
|
.ct-author { font-size: 22rpx; color: #8a94c0; }
|
|
.ct-dot { font-size: 22rpx; color: #b9c0e0; }
|
|
.ct-time { font-size: 22rpx; color: #a3abc9; }
|
|
|
|
/* 大图卡片 */
|
|
.ct-card { margin: 6rpx 0 18rpx; border-radius: 24rpx; overflow: hidden; box-sizing: border-box;
|
|
background: rgba(255,255,255,.9); box-shadow: 0 12rpx 32rpx rgba(59,79,125,.10); }
|
|
.ct-cover { position: relative; width: 100%; aspect-ratio: 3.35 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
|
.ct-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
|
.ct-play {
|
|
position: relative; z-index: 2; width: 68rpx; height: 68rpx; border-radius: 50%;
|
|
background: rgba(255,255,255,.9); color: #6284ff; display: flex; align-items: center; justify-content: center;
|
|
box-shadow: 0 6rpx 20rpx rgba(59,79,125,.22);
|
|
}
|
|
.ct-play .ic { width: 36rpx; height: 36rpx; color: #6284ff; }
|
|
.ct-card-bd { padding: 18rpx 22rpx 8rpx; }
|
|
.ct-card-title {
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
font-size: 31rpx; color: #2b3a66; line-height: 1.4; font-weight: 700;
|
|
}
|
|
.ct-card-ad { display: flex; align-items: center; gap: 8rpx; margin-top: 16rpx; padding-bottom: 20rpx; }
|
|
.ct-like { margin-left: auto; width: 56rpx; height: 56rpx; border-radius: 50%; background: #eef1ff; display: flex; align-items: center; justify-content: center; }
|
|
.ct-like .ic { width: 30rpx; height: 30rpx; color: #9aa4c6; }
|
|
.ct-like.on { background: #ffe9ef; }
|
|
.ct-like.on .ic { color: #ff5f86; }
|
|
|
|
.ct-empty { padding: 80rpx 0; text-align: center; font-size: 26rpx; color: #9aa4c6; }
|
|
.ct-err { display: block; padding: 60rpx 0; text-align: center; font-size: 26rpx; color: #ff5f86; }
|
|
|
|
.ct-scroll-pad { height: 200rpx; }
|