|
|
@ -19,14 +19,12 @@ export default function JournalCard({
|
|
|
|
title,
|
|
|
|
title,
|
|
|
|
journalNo,
|
|
|
|
journalNo,
|
|
|
|
showPlay = false,
|
|
|
|
showPlay = false,
|
|
|
|
children,
|
|
|
|
|
|
|
|
className,
|
|
|
|
className,
|
|
|
|
}: {
|
|
|
|
}: {
|
|
|
|
image: string;
|
|
|
|
image: string;
|
|
|
|
title?: string;
|
|
|
|
title?: string;
|
|
|
|
journalNo: string;
|
|
|
|
journalNo: string;
|
|
|
|
showPlay?: boolean;
|
|
|
|
showPlay?: boolean;
|
|
|
|
children?: React.ReactNode;
|
|
|
|
|
|
|
|
className?: string;
|
|
|
|
className?: string;
|
|
|
|
}) {
|
|
|
|
}) {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
@ -37,14 +35,15 @@ export default function JournalCard({
|
|
|
|
{/* banner */}
|
|
|
|
{/* banner */}
|
|
|
|
<Image width={712} height={420} src={image} unoptimized alt={`Vol${journalNo}`} className="absolute bottom-0" />
|
|
|
|
<Image width={712} height={420} src={image} unoptimized alt={`Vol${journalNo}`} className="absolute bottom-0" />
|
|
|
|
{/* 标题 */}
|
|
|
|
{/* 标题 */}
|
|
|
|
|
|
|
|
{!!title && (
|
|
|
|
<div className={`absolute bottom-0 w-full h-[126px] ${styles.title_background}`}>
|
|
|
|
<div className={`absolute bottom-0 w-full h-[126px] ${styles.title_background}`}>
|
|
|
|
<p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[24px] leading-[33.6px]">{title}</p>
|
|
|
|
<p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[24px] leading-[33.6px]">{title}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
)}
|
|
|
|
{/* 播放按钮 */}
|
|
|
|
{/* 播放按钮 */}
|
|
|
|
{showPlay && (
|
|
|
|
{showPlay && (
|
|
|
|
<div className="absolute bottom-[24px] right-[24px] w-[46px] h-[32px] bg-[url(/img/icon/play-journal-card.svg)] bg-no-repeat z-2 opacity-0 group-hover:opacity-100 transition-opacity-500" />
|
|
|
|
<div className="absolute bottom-[24px] right-[24px] w-[46px] h-[32px] bg-[url(/img/icon/play-journal-card.svg)] bg-no-repeat z-2 opacity-0 group-hover:opacity-100 transition-opacity-500" />
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
{children}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|