chore: 汇总提交(小程序内容/资讯详情/网站内容页调整)
This commit is contained in:
@@ -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; }
|
||||
|
||||
/* 作者条 + 动作(软卡片) */
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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}`;
|
||||
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)` }}>
|
||||
{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}
|
||||
{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>
|
||||
)}
|
||||
<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 }}>
|
||||
<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>
|
||||
</div>
|
||||
</Reveal>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user