feat: apply figma responsive home design
All checks were successful
Deploy to Frontend Servers / deploy (push) Successful in 49s

This commit is contained in:
TerryM
2026-05-17 19:38:43 +08:00
parent 5b67279734
commit 2c76039c44
13 changed files with 69 additions and 47 deletions

View File

@@ -5,14 +5,14 @@ import { assetUrl, postJSON } from "../api";
import { useI18n } from "../i18n";
import { useMemo } from "react";
import { formatDateYmd } from "../utils/format";
import { recommendationCoverFallbacks } from "./FigmaBanner";
import { officialRecommendationCoverFallbacks } from "./FigmaBanner";
function isPlaceholderAsset(path: string | undefined | null) {
return !path || path.includes("placeholder-cover");
}
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]";
"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]";
export function RecommendedCard({
r,
@@ -25,8 +25,8 @@ export function RecommendedCard({
const cover = useMemo(() => {
const original = r.coverImage || r.previewUrl;
if (isPlaceholderAsset(original)) {
return recommendationCoverFallbacks[
visualIndex % recommendationCoverFallbacks.length
return officialRecommendationCoverFallbacks[
visualIndex % officialRecommendationCoverFallbacks.length
];
}
return assetUrl(original);
@@ -105,8 +105,8 @@ export function ComingSoonRecommendedCard({
visualIndex?: number;
}) {
const cover =
recommendationCoverFallbacks[
visualIndex % recommendationCoverFallbacks.length
officialRecommendationCoverFallbacks[
visualIndex % officialRecommendationCoverFallbacks.length
];
return (