Compare commits

...

6 Commits

@ -1,6 +1,6 @@
import Image from 'next/image'; import Image from 'next/image';
import DownloadCard from '@/app/download/components/DownloadCard'; import DownloadCard from '@/app/(website)/download/components/DownloadCard';
import type { Metadata } from 'next'; import type { Metadata } from 'next';

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

@ -1,6 +1,6 @@
import { Avatar } from '@/components/'; import { Avatar } from '@/components/';
import { ContributorCardType } from '../app/about/page'; import { ContributorCardType } from '../app/(website)/about/page';
export default function ContributorCard({ nickName, avatar, contributorRole }: ContributorCardType) { export default function ContributorCard({ nickName, avatar, contributorRole }: ContributorCardType) {
return ( return (

@ -4,7 +4,6 @@ import { useShallow } from 'zustand/react/shallow';
import { HoverCard, HoverCardPortal, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'; import { HoverCard, HoverCardPortal, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
import styles from './index.module.css';
import UserCard from './UserCard'; import UserCard from './UserCard';
import { Avatar } from '@/components'; import { Avatar } from '@/components';
@ -28,7 +27,7 @@ export default function HeaderAvatar({ className }: { className?: string }) {
<HoverCardContent <HoverCardContent
sideOffset={12} sideOffset={12}
align="end" align="end"
className={`w-auto pt-[24px] pb-[18px] px-0 rounded-[12px] bg-[#fff] border-none overflow-hidden ${styles.userCard}`} className={`w-fit h-fit p-0 rounded-[12px] bg-[#fff] border-none overflow-hidden`}
> >
<UserCard /> <UserCard />
</HoverCardContent> </HoverCardContent>

@ -49,7 +49,7 @@ export default function UserCard({ className }: Props) {
}, [userInfo]); }, [userInfo]);
return ( return (
<div className={className}> <div className={`pt-[24px] pb-[18px] rounded-[12px] border-1px border-#e1e1e1 ${className}`}>
{/* 头像 & 昵称 & 个签 */} {/* 头像 & 昵称 & 个签 */}
<div className="flex flex-row items-center px-[27px]"> <div className="flex flex-row items-center px-[27px]">
<Avatar size={48} src={userInfo.avatar} className="h-[48px] w-[48px] cursor-pointer" alt="我" /> <Avatar size={48} src={userInfo.avatar} className="h-[48px] w-[48px] cursor-pointer" alt="我" />

@ -8,7 +8,7 @@
position: absolute; position: absolute;
left: calc(-50% - 0.7px); left: calc(-50% - 0.7px);
top: calc(-50% - 0.7px); top: calc(-50% - 0.7px);
border-radius: 18px; border-radius: 24px;
width: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间,增加 1.4px */ width: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间,增加 1.4px */
height: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间,增加 1.4px */ height: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间,增加 1.4px */
box-shadow: 0 0 0 0.7px #e1e1e1; /* 使用阴影模拟边框 */ box-shadow: 0 0 0 0.7px #e1e1e1; /* 使用阴影模拟边框 */

@ -2,14 +2,14 @@ import Image from 'next/image';
import styles from './index.module.css'; import styles from './index.module.css';
function VolNo({ text }: { text: string }) { function VolNo({ text, className }: { text: string; className?: string }) {
return ( return (
<div className="absolute top-[16px] left-[16px] w-[48px] h-[48px] pt-[8px] rounded-[2px] bg-[rgba(255,255,255,0.9)] z-2"> <div className={`w-48px h-48px pt-8px rounded-2px bg-#fff/90 z-2 ${className}`}>
<p className="w-full h-[15px] ml-[5px] text-[15px] font-normal leading-[15px] text-[rgba(0,0,0,0.9)] text-left"> <p className="w-full h-15px ml-5px text-15px font-normal leading-15px text-#000/90 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-[rgba(0,0,0,0.4)]">VOL</p> <p className="ml-6px text-9px leading-10px text-#000/40">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 text={journalNo} /> <VolNo className="absolute top-16px left-16px" 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 bottom-0 ${scale && 'group-hover:transform-scale-103 transition-transform-300'}`} 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'}`}
/> />
{/* 标题 */} {/* 标题 */}
{!!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}

@ -36,7 +36,7 @@ export default function SearchInput({ className, onInput, onFocus }: IProps) {
<div className={`relative w-208px h-38px ${className}`}> <div className={`relative w-208px h-38px ${className}`}>
<input <input
value={value} value={value}
className={`w-full h-full px-45px border-0.5px border-#e1e1e1 text-13px leading-38px text-#000/95 placeholder-#000/70 bg-#f2f3f7 rounded-47px ${(active || value) && `border-#000/95 bg-transparent`}`} className={`w-full h-full px-45px border-0.5px text-13px leading-38px text-#000/95 placeholder-#000/70 bg-#f2f3f7 rounded-47px ${active || value ? `border-#000/95 bg-transparent` : 'border-#e1e1e1'}`}
placeholder="输入期刊/歌曲名" placeholder="输入期刊/歌曲名"
onInput={(e: any) => handleInput(e.target.value)} onInput={(e: any) => handleInput(e.target.value)}
onFocus={handleFocus} onFocus={handleFocus}

Loading…
Cancel
Save