fix(content): 封面统一裁切 3.35:1(小程序/网站 卡片+详情)
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
/* 资讯详情 · 小程序样式(微信文章式) */
|
||||
.cd { position: relative; z-index: 2; padding: 0 0 60rpx; }
|
||||
.cd-cover { display: block; width: 100%; border-radius: 20rpx; }
|
||||
.cd-cover { width: 100%; aspect-ratio: 3.35 / 1; object-fit: cover; border-radius: 20rpx; }
|
||||
.cd-video { width: 100%; height: 400rpx; border-radius: 20rpx; margin-bottom: 24rpx; }
|
||||
.cd-title { display: block; margin-top: 24rpx; padding: 0 28rpx; font-size: 40rpx; color: #fff; font-weight: 700; line-height: 1.4; }
|
||||
.cd-meta-row { display: flex; align-items: center; gap: 10rpx; padding: 20rpx 28rpx 0; }
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
/* ---------- 大图卡片 ---------- */
|
||||
.ct-card { margin: 6rpx 0 18rpx; border-radius: 22rpx; overflow: hidden; background: #111116; border: 1rpx solid #222228; }
|
||||
.ct-cover { position: relative; width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.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; }
|
||||
.ct-play {
|
||||
|
||||
@@ -46,7 +46,7 @@ function NewsCard({ it, big }) {
|
||||
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: '16/9', background: `linear-gradient(135deg, ${m}, ${m}cc)` }}>
|
||||
<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>
|
||||
|
||||
@@ -46,7 +46,7 @@ export default function ContentDetail() {
|
||||
return (
|
||||
<ContentTemplate active="content" kicker="News" title={item.title} desc="">
|
||||
<article className="section" style={{ maxWidth: 720, margin: '0 auto' }}>
|
||||
{item.cover && <img src={item.cover} alt="" style={{ width: '100%', borderRadius: 12, marginBottom: 14 }} />}
|
||||
{item.cover && <img src={item.cover} alt="" style={{ width: '100%', aspectRatio: '3.35/1', objectFit: 'cover', borderRadius: 12, marginBottom: 14 }} />}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
|
||||
{item.publisher_avatar
|
||||
? <img src={item.publisher_avatar} alt="" style={{ width: 28, height: 28, borderRadius: '50%', objectFit: 'cover' }} />
|
||||
|
||||
Reference in New Issue
Block a user