style(小程序): 资讯中心标准页头(渐变标题+INFORMATION注脚) + 类别tab药丸与标题同排一行

This commit is contained in:
Pine
2026-08-28 17:19:37 +08:00
parent a039abf378
commit d23b6976eb
2 changed files with 29 additions and 18 deletions
+16 -14
View File
@@ -25,10 +25,10 @@ function timeAgo(s) {
return `${Math.floor(mins / 1440)} 天前`; return `${Math.floor(mins / 1440)} 天前`;
} }
function Ava({ it, m }) { function Ava({ it }) {
return it.publisher_avatar return it.publisher_avatar
? <Image className="ct-ava" src={it.publisher_avatar} mode="aspectFill" /> ? <Image className="ct-ava" src={it.publisher_avatar} mode="aspectFill" />
: <View className="ct-ava" style={{ background: `linear-gradient(135deg, ${m.from}, ${m.to})` }} />; : null;
} }
const authorName = (it) => it.publisher_name || '云超服'; 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 m = catMeta(it.type);
const img = it.cover || (it.video ? it.video_cover : ''); const img = it.cover || (it.video ? it.video_cover : '');
return ( return (
@@ -74,9 +74,6 @@ function CardBig({ it, go, liked, onLike }) {
<Text className="ct-author">{authorName(it)}</Text> <Text className="ct-author">{authorName(it)}</Text>
<Text className="ct-dot">·</Text> <Text className="ct-dot">·</Text>
<Text className="ct-time">{timeAgo(it.created_at)}</Text> <Text className="ct-time">{timeAgo(it.created_at)}</Text>
<View className={`ct-like${liked ? ' on' : ''}`} onClick={(e) => { e.stopPropagation(); onLike(it.id); }}>
<View className="ic ic-heart" />
</View>
</View> </View>
</View> </View>
</View> </View>
@@ -90,7 +87,6 @@ export default function ContentIndex() {
const [items, setItems] = useState([]); const [items, setItems] = useState([]);
const [err, setErr] = useState(''); const [err, setErr] = useState('');
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
const [liked, setLiked] = useState({});
useEffect(() => { useEffect(() => {
setLoaded(false); setErr(''); setLoaded(false); setErr('');
@@ -102,15 +98,21 @@ export default function ContentIndex() {
const go = (id) => Taro.navigateTo({ url: `/pages/content-detail/index?id=${id}` }); const go = (id) => Taro.navigateTo({ url: `/pages/content-detail/index?id=${id}` });
const goQuiz = () => Taro.navigateTo({ url: '/pages/policy/index' }); const goQuiz = () => Taro.navigateTo({ url: '/pages/policy/index' });
const toggleLike = (id) => setLiked((m) => ({ ...m, [id]: !m[id] }));
return ( return (
<View className="ct page-in"> <View className="ct page-in">
{/* 类别分段 */} {/* 标准页头:kicker + 渐变大标题 + 英文注脚;类别 tab 药丸居右(对齐「我的」页头样式) */}
<View className="ct-cats"> <View className="ct-head">
{CONTENT_CATS.map((c) => ( <View className="ct-head-l">
<View key={c.key} className={`ct-cat${cat === c.key ? ' on' : ''}`} onClick={() => setCat(c.key)}>{c.label}</View> <Text className="ct-no">NEWS</Text>
))} <Text className="ct-title">资讯中心</Text>
<Text className="ct-en">INFORMATION</Text>
</View>
<View className="ct-cats">
{CONTENT_CATS.map((c) => (
<View key={c.key} className={`ct-cat${cat === c.key ? ' on' : ''}`} onClick={() => setCat(c.key)}>{c.label}</View>
))}
</View>
</View> </View>
{/* 政策测评入口(非 tab,政策分类下提供) */} {/* 政策测评入口(非 tab,政策分类下提供) */}
@@ -126,7 +128,7 @@ export default function ContentIndex() {
items.length === 0 items.length === 0
? <View className="ct-empty"><Text>暂无{CONTENT_CATS.find((c) => c.key === cat)?.label || ''}内容</Text></View> ? <View className="ct-empty"><Text>暂无{CONTENT_CATS.find((c) => c.key === cat)?.label || ''}内容</Text></View>
: items.map((it) => it.card_mode === "big" : items.map((it) => it.card_mode === "big"
? <CardBig key={it.id} it={it} go={go} liked={!!liked[it.id]} onLike={toggleLike} /> ? <CardBig key={it.id} it={it} go={go} />
: <CardRow key={it.id} it={it} go={go} />) : <CardRow key={it.id} it={it} go={go} />)
) : ( ) : (
<Skeleton /> <Skeleton />
+13 -4
View File
@@ -10,11 +10,20 @@
radial-gradient(46% 40% at 80% 96%, rgba(151,225,212,.26), transparent 60%); radial-gradient(46% 40% at 80% 96%, rgba(151,225,212,.26), transparent 60%);
} }
/* 类别分段(Soft 胶囊 */ /* 标准页头(对齐「我的/活动」页头:kicker + 渐变标题 + 英文注脚 */
.ct-cats { display: flex; gap: 10rpx; padding: 8rpx 0 16rpx; } .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 { .ct-cat {
flex: 1; text-align: center; padding: 14rpx 0; border-radius: 999px; 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: 27rpx; background: rgba(255,255,255,.72); border: 1rpx solid rgba(99,132,255,.14); color: #8a94c0; font-size: 22rpx;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
.ct-cat.on { background: linear-gradient(135deg, #6b8bff, #8f7bff); color: #ffffff; border-color: transparent; font-weight: 600; .ct-cat.on { background: linear-gradient(135deg, #6b8bff, #8f7bff); color: #ffffff; border-color: transparent; font-weight: 600;