diff --git a/miniprogram/src/pages/content/index.jsx b/miniprogram/src/pages/content/index.jsx index a087f43..3a33ce3 100644 --- a/miniprogram/src/pages/content/index.jsx +++ b/miniprogram/src/pages/content/index.jsx @@ -25,10 +25,10 @@ function timeAgo(s) { return `${Math.floor(mins / 1440)} 天前`; } -function Ava({ it, m }) { +function Ava({ it }) { return it.publisher_avatar ? - : ; + : null; } const authorName = (it) => it.publisher_name || '云超服'; @@ -58,7 +58,7 @@ function CardRow({ it, go }) { } /** 大图卡片(整幅图 + 播放角标 + 标题 + 作者 + 点赞) */ -function CardBig({ it, go, liked, onLike }) { +function CardBig({ it, go }) { const m = catMeta(it.type); const img = it.cover || (it.video ? it.video_cover : ''); return ( @@ -74,9 +74,6 @@ function CardBig({ it, go, liked, onLike }) { {authorName(it)} · {timeAgo(it.created_at)} - { e.stopPropagation(); onLike(it.id); }}> - - @@ -90,7 +87,6 @@ export default function ContentIndex() { const [items, setItems] = useState([]); const [err, setErr] = useState(''); const [loaded, setLoaded] = useState(false); - const [liked, setLiked] = useState({}); useEffect(() => { setLoaded(false); setErr(''); @@ -102,15 +98,21 @@ export default function ContentIndex() { const go = (id) => Taro.navigateTo({ url: `/pages/content-detail/index?id=${id}` }); const goQuiz = () => Taro.navigateTo({ url: '/pages/policy/index' }); - const toggleLike = (id) => setLiked((m) => ({ ...m, [id]: !m[id] })); return ( - {/* 类别分段 */} - - {CONTENT_CATS.map((c) => ( - setCat(c.key)}>{c.label} - ))} + {/* 标准页头:kicker + 渐变大标题 + 英文注脚;类别 tab 药丸居右(对齐「我的」页头样式) */} + + + NEWS + 资讯中心 + INFORMATION + + + {CONTENT_CATS.map((c) => ( + setCat(c.key)}>{c.label} + ))} + {/* 政策测评入口(非 tab,政策分类下提供) */} @@ -126,7 +128,7 @@ export default function ContentIndex() { items.length === 0 ? 暂无{CONTENT_CATS.find((c) => c.key === cat)?.label || ''}内容 : items.map((it) => it.card_mode === "big" - ? + ? : ) ) : ( diff --git a/miniprogram/src/pages/content/index.scss b/miniprogram/src/pages/content/index.scss index 105fbd4..571d8a9 100644 --- a/miniprogram/src/pages/content/index.scss +++ b/miniprogram/src/pages/content/index.scss @@ -10,11 +10,20 @@ radial-gradient(46% 40% at 80% 96%, rgba(151,225,212,.26), transparent 60%); } -/* 类别分段(Soft 胶囊) */ -.ct-cats { display: flex; gap: 10rpx; padding: 8rpx 0 16rpx; } +/* 标准页头(对齐「我的/活动」页头: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; text-align: center; padding: 14rpx 0; border-radius: 999px; - background: rgba(255,255,255,.72); border: 1rpx solid rgba(99,132,255,.14); color: #8a94c0; font-size: 27rpx; + 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;