From 195cba9d6e2ee4fe4871e0feee875af0f0c88c3c Mon Sep 17 00:00:00 2001
From: JiaJun <2394389886@qq.com>
Date: Tue, 21 Apr 2026 15:00:17 +0800
Subject: [PATCH] =?UTF-8?q?style(goods):=20=E8=B0=83=E6=95=B4=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E5=88=97=E8=A1=A8=E5=92=8C=E5=85=91=E6=8D=A2=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E7=9A=84=E6=A0=B7=E5=BC=8F=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/index.tsx          |  2 +-
 src/features/goods/GoodsCategoryList.tsx | 16 ++++++++--------
 src/features/goods/GoodsRedeemModal.tsx  |  2 +-
 src/index.css                            |  8 ++++++++
 src/views/goods/index.tsx                |  4 ++--
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index 2c29cb9..698ddf1 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -2,7 +2,7 @@ import type { PageLayoutProps } from '@/types'
 
 function PageLayout({
     children,
-    contentClassName = 'mx-auto flex min-h-screen w-full max-w-[1180px] flex-col px-4 pb-8 sm:px-6 lg:px-8',
+    contentClassName = 'mx-auto flex min-h-screen w-full max-w-[1220px] flex-col px-4 pb-8 sm:px-6 lg:px-8',
 }: PageLayoutProps) {
     return (
         <main className="min-h-screen w-full overflow-x-hidden bg-[url('/home-figma-frame.png')] bg-cover bg-center bg-no-repeat text-white">
diff --git a/src/features/goods/GoodsCategoryList.tsx b/src/features/goods/GoodsCategoryList.tsx
index 2526bb2..be20c67 100644
--- a/src/features/goods/GoodsCategoryList.tsx
+++ b/src/features/goods/GoodsCategoryList.tsx
@@ -27,7 +27,7 @@ function GoodsImage({
     const showFallback = !imageUrl || hasError
 
     return (
-        <div className="relative w-full overflow-hidden rounded-t-[10px] bg-white/6 aspect-[3/2] min-h-[144px] max-h-[196px] sm:min-h-[156px] sm:max-h-[208px]">
+        <div className="relative w-full overflow-hidden rounded-t-[14px] bg-white/6 aspect-[3/2] min-h-[144px] max-h-[196px] sm:min-h-[156px] sm:max-h-[208px]">
             {showFallback ? (
                 <div className="absolute inset-0 flex flex-col items-center justify-center bg-[radial-gradient(circle_at_top,rgba(250,106,0,0.18),transparent_58%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] px-[12px] text-center">
                     <div className="h-[30px] w-[30px] rounded-[10px] border border-white/10 bg-white/6"></div>
@@ -39,7 +39,7 @@ function GoodsImage({
                 <img
                     src={imageUrl}
                     alt=""
-                    className={`h-full w-full object-cover ${showFallback ? 'hidden' : 'block'}`}
+                    className={`h-full w-full object-contain ${showFallback ? 'hidden' : 'block'}`}
                     onError={() => setHasError(true)}
                 />
             ) : null}
@@ -82,11 +82,11 @@ export function GoodsCategoryList({
                                     </div>
                                 ) : null}
                             </div>
-                            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+                            <div className="grid grid-cols-1 justify-items-center gap-3 md:grid-cols-2 md:gap-4 md:justify-items-stretch lg:grid-cols-4 lg:gap-5">
                                 {Array.from({length: 4}).map((_, index) => (
                                     <div
                                         key={`${categoryId}-${index}`}
-                                        className="liquid-glass-bg flex min-h-[296px] w-full flex-col items-stretch justify-start overflow-hidden sm:min-h-[312px]"
+                                        className="liquid-glass-bg flex min-h-[296px] w-full max-w-[420px] flex-col items-stretch justify-start overflow-hidden rounded-[14px] sm:min-h-[312px] md:max-w-none"
                                     >
                                         <div className="aspect-[3/2] min-h-[144px] max-h-[196px] w-full bg-white/6 sm:min-h-[156px] sm:max-h-[208px]"></div>
                                         <div className="flex flex-1 flex-col items-start justify-between gap-[14px] p-[14px] sm:p-[16px]">
@@ -144,19 +144,19 @@ export function GoodsCategoryList({
                                 </MotionButton>
                             ) : null}
                         </div>
-                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+                        <div className="grid grid-cols-1 justify-items-center gap-3 md:grid-cols-2 md:gap-4 md:justify-items-stretch lg:grid-cols-4 lg:gap-5">
                             {category.items.map((product) => (
                                 <div
                                     key={product.id}
-                                    className="liquid-glass-bg pc-hover-float flex min-h-[296px] w-full flex-col items-stretch justify-start overflow-hidden sm:min-h-[312px]"
+                                    className="liquid-glass-bg pc-hover-float flex min-h-[296px] w-full max-w-[420px] flex-col items-stretch justify-start overflow-hidden rounded-[14px] sm:min-h-[312px] md:max-w-none"
                                 >
                                     <GoodsImage imageUrl={product.imageUrl}/>
                                     <div
                                         className="flex flex-1 flex-col items-start justify-between gap-[14px] p-[14px] sm:p-[16px]"
                                     >
                                         <div className="w-full space-y-[4px]">
-                                            <div className="text-[16px] font-medium text-white">{product.title}</div>
-                                            <div className="text-[13px] text-white/52">{product.subtitle}</div>
+                                            <div className="line-clamp-1 text-[16px] font-medium text-white">{product.title}</div>
+                                            <div className="min-h-[2.5rem] line-clamp-2 text-[13px] leading-[1.25rem] text-white/52">{product.subtitle}</div>
                                         </div>
                                         <div className="text-[16px] font-semibold text-[#FA6A00]">{product.scoreValue} {t('common.points')}</div>
                                         <Button
diff --git a/src/features/goods/GoodsRedeemModal.tsx b/src/features/goods/GoodsRedeemModal.tsx
index 955d1b6..c112ae4 100644
--- a/src/features/goods/GoodsRedeemModal.tsx
+++ b/src/features/goods/GoodsRedeemModal.tsx
@@ -72,7 +72,7 @@ function SelectedProductImage({
                 <img
                     src={imageUrl}
                     alt={alt}
-                    className={`h-full w-full object-cover ${showFallback ? 'hidden' : 'block'}`}
+                    className={`h-full w-full object-contain ${showFallback ? 'hidden' : 'block'}`}
                     onError={() => setHasError(true)}
                 />
             ) : null}
diff --git a/src/index.css b/src/index.css
index c94bb9a..d41ed1b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,13 @@
 @import "tailwindcss";
 
+@theme {
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 62.5rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
+}
+
 html,
 body,
 #root {
diff --git a/src/views/goods/index.tsx b/src/views/goods/index.tsx
index 4d8295f..18f0c88 100644
--- a/src/views/goods/index.tsx
+++ b/src/views/goods/index.tsx
@@ -24,7 +24,7 @@ function GoodsPage() {
     const pageTitle = t(HOME_CATEGORY_META_MAP[selectedType].nameKey)
 
     return (
-        <PageLayout contentClassName="mx-auto flex min-h-screen w-full max-w-[1180px] flex-col px-4 pb-8 sm:px-6 lg:px-8">
+        <PageLayout contentClassName="mx-auto flex min-h-screen w-full max-w-[1220px] flex-col px-4 pb-8 sm:px-6 lg:px-8">
             <Link
                 to="/"
                 className="mt-[12px] flex h-[44px] items-center justify-between rounded-[12px] bg-[#08070E]/72 px-[14px] text-[#F56E10] transition-colors hover:bg-[#0D0A14]/80 focus-visible:ring-2 focus-visible:ring-[#FE9F00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070E] sm:mt-[16px]"
@@ -39,7 +39,7 @@ function GoodsPage() {
                 <div className="w-[52px]"></div>
             </Link>
 
-            <div className="mx-auto w-full max-w-[1120px] pt-[18px] pb-[24px]">
+            <div className="mx-auto w-full max-w-[1160px] pt-[18px] pb-[24px]">
                 <div className="h-px bg-white/16"></div>
                 <div className="mt-[14px]">
                     <GoodsCategoryList