update(home page): styles

feature/artists
mackt 7 months ago
parent 86823dcb15
commit 34a5942419

@ -67,13 +67,13 @@ export default async function Journal({ params }: { params: { category?: string;
<Category list={categoryList} current={categoryInfo?.id ?? '0'} />
{/* header */}
<div className="flex flex-row items-center justify-between mt-38px">
<div className="text-17px leading-24px font-500 mb-3px">{categoryInfo?.nameCh ?? '全部'}</div>
<div className="flex flex-row items-center justify-between mt-38px mb-12px">
<div className="text-17px leading-24px font-500">{categoryInfo?.nameCh ?? '全部'}</div>
<ButtonFM />
</div>
{/* 期刊列表 */}
<div className="flex flex-col gap-42px mt-14px rgba(0,0,0,0.95)">
<div className="flex flex-col gap-42px text-[rgba(0,0,0,0.95)]">
{journalList.rows.map((item: JournalInfo) => (
<JournalItem key={item.id} {...item} />
))}
@ -91,7 +91,7 @@ export default async function Journal({ params }: { params: { category?: string;
</div>
{/* 热门推荐 */}
<div className="w-346px mt-203px">
<div className="w-346px mt-202px">
{!!recommendList?.length ? <JournalRecommendList list={recommendList} /> : <div />}
</div>
</main>

@ -21,7 +21,7 @@ export default function JournalItem({
{/* 摘要 */}
<Link href={`/vol/${journalNo}`}>
<p className="w-full mt-[15px] mb-[12px] text-[15px] leading-[24px] text-base cursor-pointer text-overflow-2">
<p className="w-full mt-[15px] mb-[12px] text-[15px] leading-[24px] font-500 text-base cursor-pointer text-overflow-2">
{summary}
</p>
</Link>

@ -6,7 +6,7 @@ export default function CoverCard({ title, img, no }: { title: string; img: stri
return (
<JournalCard image={img} journalNo={no} className="cursor-pointer">
<div className={`absolute bottom-0 w-full h-[126px] ${styles.title_background}`}>
<p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[20px] leading-[33.6px]">{title}</p>
<p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[20px] leading-[33.6px] font-500">{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" />
</JournalCard>

@ -14,7 +14,7 @@ export default function JournalRecommendCard({ title, image, userCollectCount }:
/>
</div>
<div className="flex flex-col justify-between h-full ml-[20px] py-[6px]">
<p className="w-[200px] text-[15px] leading-[21px] text-overflow cursor-pointer">{title}</p>
<p className="w-[200px] text-[15px] leading-[21px] font-500 text-overflow cursor-pointer">{title}</p>
<p className="text-[rgba(0,0,0,0.7)] text-[13px] leading-[18.2px] cursor-pointer">{`${userCollectCount}人收藏`}</p>
</div>
</div>

@ -6,11 +6,11 @@ interface Props {
list: JournalInfo[];
}
const JournalRecommendList = async ({ list }: Props) => {
export default function JournalRecommendList({ list }: Props) {
return (
<div className="flex flex-col">
{/* 分类 & 电台 */}
<div className="text-17px leading-17px"></div>
<div className="text-17px leading-24px font-500"></div>
{/* 期刊 list */}
<div className="flex flex-col gap-30px mt-12px">
{!!list?.length &&
@ -22,6 +22,4 @@ const JournalRecommendList = async ({ list }: Props) => {
</div>
</div>
);
};
export default JournalRecommendList;
}

@ -28,7 +28,7 @@ function isServerProps(props: PaginationItemProps): props is ServerProps {
// 通用样式
const commonClassName =
'w-[40px] h-[40px] text-[14px] text-center leading-[40px] rounded-[3px] text-[#000] hover-text-brand bg-[#F2F3F7]';
'w-[40px] h-[40px] rounded-[3px] text-[14px] text-center text-[#000] hover-text-brand leading-[40px] font-500 bg-[#F2F3F7]';
// 激活状态样式
const activeClassName = 'text-[#fff] bg-brand';

Loading…
Cancel
Save