chore: 汇总提交(小程序内容/资讯详情/网站内容页调整)

This commit is contained in:
Pine
2026-08-27 21:03:05 +08:00
parent eaa665c5dc
commit d5d30edc50
5 changed files with 38 additions and 21 deletions
@@ -31,6 +31,7 @@ export default function ContentDetail() {
const id = item.id;
const img = item.cover || (item.video ? item.video_cover : '');
const isSmall = item.card_mode === 'small'; // 小图模式:详情页不显示封面
const images = Array.isArray(item.images) ? item.images : [];
const author = item.publisher_name || '云超服';
const views = item.read_count || 0;
@@ -50,12 +51,12 @@ export default function ContentDetail() {
return (
<View className="cd page-in">
{/* 封面/视频 */}
{item.video
{/* 封面/视频(小图模式不显示封面) */}
{!isSmall && (item.video
? <Video className="cd-video" src={item.video} poster={item.video_cover || item.cover || ''} controls />
: img
? <Image className="cd-cover" src={img} mode="widthFix" />
: null}
: null)}
{/* 标题 + 元信息 */}
<Text className="cd-title">{item.title}</Text>
@@ -20,7 +20,7 @@
.cd-body img, .cd-body video { max-width: 100%; border-radius: 14rpx; }
.cd-body p { margin: 0 0 8rpx; }
.cd-gallery { display: flex; gap: 12rpx; margin: 24rpx 28rpx 0; white-space: nowrap; }
.cd-gal-img { width: 240rpx; height: 240rpx; border-radius: 14rpx; flex-shrink: 0; margin-right: 12rpx; }
.cd-gal-img { width: 509rpx; aspect-ratio: 3.35 / 1; object-fit: cover; border-radius: 14rpx; flex-shrink: 0; margin-right: 12rpx; }
.cd-link { margin: 28rpx 28rpx 0; }
/* 作者条 + 动作(软卡片) */
+1 -1
View File
@@ -35,7 +35,7 @@ const authorName = (it) => it.publisher_name || '云超服';
/** 行式卡片(缩略图左 + 类别/标题/作者 + 时间) */
function CardRow({ it, go }) {
const m = catMeta(it.type);
const img = it.cover || (it.video ? it.video_cover : '');
const img = it.cover_small || it.cover || (it.video ? it.video_cover : '');
return (
<View className={`ct-row ct-row--in`} onClick={() => go(it.id)}>
{img
+2 -2
View File
@@ -31,7 +31,7 @@
.ct-quiz-d { font-size: 24rpx; color: #6284ff; }
/* 行式卡片(软白表面 + 软阴影 + 圆角) */
.ct-row { display: flex; gap: 18rpx; padding: 18rpx; margin-bottom: 14rpx; border-radius: 20rpx;
.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;
@@ -51,7 +51,7 @@
.ct-time { font-size: 22rpx; color: #a3abc9; }
/* 大图卡片 */
.ct-card { margin: 6rpx 0 18rpx; border-radius: 24rpx; overflow: hidden;
.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; }
+28 -12
View File
@@ -40,26 +40,42 @@ const CAT_COLOR = { policy: '#6b8bff', news: '#2ea8f0', skill: '#ff72b6', dynami
/** 资讯卡片(大图/行式,点击链接到独立详情页)。 */
function NewsCard({ it, big }) {
const m = CAT_COLOR[it.type] || '#10b981';
const img = it.cover || (it.video ? it.video_cover : '');
const bigImg = it.cover || (it.video ? it.video_cover : ''); // 大图模式 → 宽封面 3.35:1
const smallThumb = it.cover_small || it.cover || (it.video ? it.video_cover : ''); // 小图模式 → 小封面 1:1(缺失回退宽封面)
const author = it.publisher_name || '云超服';
const href = `#/content-detail?id=${it.id}`;
return (
<Reveal as="a" href={href} className="bk-ev-card" style={{ marginBottom: 10, padding: big ? 0 : '14px 16px', overflow: 'hidden', display: 'block', color: 'inherit', textDecoration: 'none' }}>
{big && (
<div style={{ position: 'relative', aspectRatio: '3.35/1', background: `linear-gradient(135deg, ${m}, ${m}cc)` }}>
{img ? <img src={img} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} /> : null}
{it.video ? <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 44, height: 44, borderRadius: '50%', background: 'rgba(255,255,255,.9)', display: 'grid', placeItems: 'center' }}><svg width="20" height="20" viewBox="0 0 24 24" fill="#111"><path d="M5 3l14 9-14 9V3z"/></svg></div> : null}
</div>
)}
<div style={{ padding: big ? '14px 16px 6px' : 0 }}>
<h3 style={{ margin: 0, fontSize: big ? 17 : 15, lineHeight: 1.4 }}>{it.title}</h3>
<p className="pf-muted" style={{ margin: '8px 0 0', display: 'flex', alignItems: 'center', gap: 6 }}>
const meta = (
<p className="pf-muted" style={{ margin: '8px 0 0', display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
<span style={{ display: 'inline-block', width: 20, height: 20, borderRadius: '50%', background: `linear-gradient(135deg, ${m}, ${m}cc)`, overflow: 'hidden' }}>
{it.publisher_avatar ? <img src={it.publisher_avatar} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : null}
</span>
<span>{author}</span><span>·</span><span>{fmt(it.created_at)}</span>
</p>
);
return (
<Reveal as="a" href={href} className="bk-ev-card" style={{ marginBottom: 10, padding: big ? 0 : '14px 16px', overflow: 'hidden', display: 'block', color: 'inherit', textDecoration: 'none' }}>
{big ? (
<>
<div style={{ position: 'relative', aspectRatio: '3.35/1', background: `linear-gradient(135deg, ${m}, ${m}cc)` }}>
{bigImg ? <img src={bigImg} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} /> : null}
{it.video ? <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 44, height: 44, borderRadius: '50%', background: 'rgba(255,255,255,.9)', display: 'grid', placeItems: 'center' }}><svg width="20" height="20" viewBox="0 0 24 24" fill="#111"><path d="M5 3l14 9-14 9V3z"/></svg></div> : null}
</div>
<div style={{ padding: '14px 16px 6px' }}>
<h3 style={{ margin: 0, fontSize: 17, lineHeight: 1.4 }}>{it.title}</h3>
{meta}
</div>
</>
) : (
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
<div style={{ width: 72, height: 72, borderRadius: 12, flexShrink: 0, overflow: 'hidden', background: `linear-gradient(135deg, ${m}, ${m}cc)` }}>
{smallThumb ? <img src={smallThumb} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : null}
</div>
<div style={{ minWidth: 0 }}>
<h3 style={{ margin: 0, fontSize: 15, lineHeight: 1.4 }}>{it.title}</h3>
{meta}
</div>
</div>
)}
</Reveal>
);
}