fix(JournalDetail): 播放按钮 z-index

mack-mac
mackt 7 months ago
parent 066fe015f9
commit 2e1d9ac4f5

@ -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" />
{/* 标题 */} {/* 标题 */}
<div className={`absolute bottom-0 w-full h-[126px] ${styles.title_background}`}> {!!title && (
<p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[24px] leading-[33.6px]">{title}</p> <div className={`absolute bottom-0 w-full h-[126px] ${styles.title_background}`}>
</div> <p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[24px] leading-[33.6px]">{title}</p>
</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>
); );
} }

@ -10,7 +10,7 @@ export default function CoverCard({ journalInfo }: { journalInfo: JournalInfo })
<JournalCard image={image} journalNo={journalNo}> <JournalCard image={image} journalNo={journalNo}>
{/* 播放/暂停 */} {/* 播放/暂停 */}
</JournalCard> </JournalCard>
<VolPlayButton className="absolute right-[30px] bottom-[-26px] z-2" /> <VolPlayButton className="absolute right-[30px] bottom-[-26px]" />
</div> </div>
); );
} }

Loading…
Cancel
Save