terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: polish figma mobile home and nav

Browse Source
This commit is contained in:
TerryM
2026-05-28 15:31:45 +08:00
parent e65c473369
commit 0e98428f64
17 changed files with 246 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/RecommendedCard.tsx
View File

@@ -16,7 +16,7 @@ function isPlaceholderAsset(path: string | undefined | null) {
}
const CARD_CLASS =
"group flex w-[232px] shrink-0 flex-col overflow-hidden rounded-xl border border-ark-line bg-ark-panel transition hover:border-ark-gold/55 max-[439px]:w-[232px] min-[440px]:w-[230px] sm:w-[240px] lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
"group flex w-[208px] shrink-0 flex-col overflow-hidden rounded-xl border border-transparent bg-[#1D1E23] transition hover:border-ark-gold/55 md:w-[240px] md:border-ark-line md:bg-ark-panel lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
type RecommendedResource = Resource & {
downloadPostId?: string;
@@ -52,7 +52,7 @@ export function RecommendedCard({
<article className={CARD_CLASS}>
<Link
to={`/resource/${r.id}`}
className="relative block aspect-[246.4/138.6] overflow-hidden bg-black"
className="relative block h-[108px] overflow-hidden bg-black md:aspect-[246.4/138.6] md:h-auto"
>
{cover ? (
<img
@@ -70,14 +70,14 @@ export function RecommendedCard({
</span>
) : null}
</Link>
<div className="flex min-h-[121px] flex-1 flex-col p-4 pt-3">
<div className="flex min-h-[131px] flex-1 flex-col p-4 pt-3 md:min-h-[121px]">
<Link
to={`/resource/${r.id}`}
className="text-base font-bold leading-snug text-white line-clamp-2 hover:text-ark-gold2"
className="text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 hover:text-ark-gold2 md:text-base md:font-bold md:leading-snug"
>
{r.title}
</Link>
<div className="mt-auto flex items-center justify-between gap-2 pt-4 text-xs text-ark-muted">
<div className="mt-auto flex items-center justify-between gap-2 pt-4 text-[12px] leading-[17.38px] text-ark-muted">
<div className="min-w-0 truncate">
<span className="text-neutral-400">{r.categoryName}</span>
<span className="mx-1.5 text-ark-line">·</span>
@@ -144,7 +144,7 @@ export function ComingSoonRecommendedCard({
className={`${CARD_CLASS} cursor-default opacity-95`}
aria-label="即将到来"
>
<div className="relative block aspect-[246.4/138.6] overflow-hidden bg-black">
<div className="relative block h-[108px] overflow-hidden bg-black md:aspect-[246.4/138.6] md:h-auto">
<img
src={cover}
alt=""
@@ -155,8 +155,8 @@ export function ComingSoonRecommendedCard({
即将到来
</span>
</div>
<div className="flex min-h-[121px] flex-1 flex-col p-4 pt-3">
<div className="text-base font-bold leading-snug text-white line-clamp-2">
<div className="flex min-h-[131px] flex-1 flex-col p-4 pt-3 md:min-h-[121px]">
<div className="text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 md:text-base md:font-bold md:leading-snug">
即将到来
</div>
<div className="mt-auto pt-4 text-xs text-ark-muted">