|
|
|
|
@ -1,13 +1,15 @@
|
|
|
|
|
import Image from 'next/image';
|
|
|
|
|
|
|
|
|
|
function VolNo({ no }: { no: string }) {
|
|
|
|
|
import styles from './index.module.css';
|
|
|
|
|
|
|
|
|
|
function VolNo({ text }: { text: string }) {
|
|
|
|
|
return (
|
|
|
|
|
<div className="flex flex-col justify-between absolute top-0 left-0 w-[64px] h-[64px] mt-[16px] ml-[16px] pt-[9.35px] pb-[9.2px] px-[11.13px] rounded-[2px] bg-[rgba(255,255,255,0.9)] z-2">
|
|
|
|
|
<p className="h-[23.2px] w-full text-[16px] leading-[23.2px] text-[#000] text-left">
|
|
|
|
|
{no.toString().padStart(4, '0')}
|
|
|
|
|
<div className="absolute top-[16px] left-[16px] w-[48px] h-[48px] pt-[8px] rounded-[2px] bg-[rgba(255,255,255,0.9)] z-2">
|
|
|
|
|
<p className="w-full h-[15px] ml-[5px] text-[15px] font-normal leading-[15px] text-[rgba(0,0,0,0.9)] text-left">
|
|
|
|
|
{text.toString().padStart(4, '0')}
|
|
|
|
|
</p>
|
|
|
|
|
<div className="w-[37.1px] h-[1.4px] bg-gradient-to-r from-red-700 via-red-700 to-transparent" />
|
|
|
|
|
<p className="w-full text-[10px] leading-[18px] text-[rgba(0,0,0,0.4)]">VOL</p>
|
|
|
|
|
<div className="w-[14px] h-[1.4px] my-[3px] ml-[6px] bg-brand" />
|
|
|
|
|
<p className="ml-[6px] text-[9px] leading-[10px] text-[rgba(0,0,0,0.4)]">VOL</p>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
@ -15,9 +17,9 @@ function VolNo({ no }: { no: string }) {
|
|
|
|
|
export default function JournalCard({ image, title, journalNo }: { image: string; title?: string; journalNo: string }) {
|
|
|
|
|
return (
|
|
|
|
|
/* banner container */
|
|
|
|
|
<div className={`relative w-[712px] h-[420px] rounded-[6px] overflow-hidden bg-[url(${image})]`}>
|
|
|
|
|
{/* 左上角标 */}
|
|
|
|
|
<VolNo no={journalNo} />
|
|
|
|
|
<div className={`relative w-[712px] h-[420px] rounded-[6px] overflow-hidden bg-[url(${image})] group`}>
|
|
|
|
|
{/* 左上方 角标 */}
|
|
|
|
|
<VolNo text={journalNo} />
|
|
|
|
|
{/* banner */}
|
|
|
|
|
<Image
|
|
|
|
|
width={712}
|
|
|
|
|
@ -28,7 +30,11 @@ export default function JournalCard({ image, title, journalNo }: { image: string
|
|
|
|
|
className="absolute bottom-0 cursor-pointer"
|
|
|
|
|
/>
|
|
|
|
|
{/* 标题 */}
|
|
|
|
|
{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}`}>
|
|
|
|
|
<p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[24px] leading-[33.6px]">{title}</p>
|
|
|
|
|
</div>
|
|
|
|
|
{/* 遮罩层 */}
|
|
|
|
|
<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>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
