|
|
@ -2,14 +2,14 @@ import Image from 'next/image';
|
|
|
|
|
|
|
|
|
|
|
|
import styles from './index.module.css';
|
|
|
|
import styles from './index.module.css';
|
|
|
|
|
|
|
|
|
|
|
|
function VolNo({ text, className }: { text: string; className?: string }) {
|
|
|
|
function VolNo({ text }: { text: string }) {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className={`w-48px h-48px pt-8px rounded-2px bg-#fff/90 z-2 ${className}`}>
|
|
|
|
<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-#000/90 text-left">
|
|
|
|
<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')}
|
|
|
|
{text.toString().padStart(4, '0')}
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<div className="w-14px h-1.4px my-3px ml-6px bg-brand" />
|
|
|
|
<div className="w-[14px] h-[1.4px] my-[3px] ml-[6px] bg-brand" />
|
|
|
|
<p className="ml-6px text-9px leading-10px text-#000/40">VOL</p>
|
|
|
|
<p className="ml-[6px] text-[9px] leading-[10px] text-[rgba(0,0,0,0.4)]">VOL</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -31,9 +31,9 @@ export default function JournalCard({
|
|
|
|
}) {
|
|
|
|
}) {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
/* banner container */
|
|
|
|
/* banner container */
|
|
|
|
<div className={`relative w-712px h-420px rounded-6px overflow-hidden bg-[url(${image})] group ${className}`}>
|
|
|
|
<div className={`relative w-[712px] h-[420px] rounded-[6px] overflow-hidden bg-[url(${image})] group ${className}`}>
|
|
|
|
{/* 左上方 角标 */}
|
|
|
|
{/* 左上方 角标 */}
|
|
|
|
<VolNo className="absolute top-16px left-16px" text={journalNo} />
|
|
|
|
<VolNo text={journalNo} />
|
|
|
|
{/* banner */}
|
|
|
|
{/* banner */}
|
|
|
|
<Image
|
|
|
|
<Image
|
|
|
|
width={712}
|
|
|
|
width={712}
|
|
|
@ -41,12 +41,12 @@ export default function JournalCard({
|
|
|
|
src={image}
|
|
|
|
src={image}
|
|
|
|
unoptimized
|
|
|
|
unoptimized
|
|
|
|
alt={`Vol${journalNo}`}
|
|
|
|
alt={`Vol${journalNo}`}
|
|
|
|
className={`absolute top-50% left-0 transform-translate-y-[-50%] w-full h-auto object-cover object-c ${scale && 'group-hover:transform-scale-103 transition-transform-300'}`}
|
|
|
|
className={`absolute bottom-0 ${scale && 'group-hover:transform-scale-103 transition-transform-300'}`}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
{/* 标题 */}
|
|
|
|
{/* 标题 */}
|
|
|
|
{!!title && (
|
|
|
|
{!!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-20px leading-34px">{title}</p>
|
|
|
|
<p className="absolute bottom-[23px] left-[23px] text-[#fff] text-20px leading-[34px]">{title}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
{children}
|
|
|
|
{children}
|
|
|
|