Pine
86 lines
5.1 KiB
SCSS
86 lines
5.1 KiB
SCSS
/* 资讯中心 · Soft UI 风格（浅色柔彩：渐变底 + 柔和圆角卡片 + 软阴影） */
|
|
|
|
/* 页面柔彩渐变背景（浅色粉紫→薄荷→天蓝） */
|
|
.ct { position: relative; z-index: 2; padding: 16rpx 24rpx 60rpx; min-height: 100vh;
|
|
background: linear-gradient(165deg, #edf2ff 0%, #f6eefc 34%, #ecf7f6 68%, #eaf4ff 100%); }
|
|
/* 顶部柔光装饰（可选，营造 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; padding: 8rpx 0 20rpx; }
|
|
.ct-head-l { display: flex; flex-direction: column; flex-shrink: 0; max-width: 42%; }
|
|
.ct-no { font-family: 'BubbledotICG', monospace; font-size: 22rpx; color: #b9c2dd; letter-spacing: 3rpx; }
|
|
.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: 22rpx; letter-spacing: 2rpx; }
|
|
|
|
/* 类别 tab：药丸居右，4 个一行与标题同排 */
|
|
.ct-cats { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 8rpx; padding: 0 0 6rpx; }
|
|
.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; }
|