JiaJun/playX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(goods): 调整商品列表和兑换弹窗的样式细节

Browse Source
This commit is contained in:
JiaJun
2026-04-21 15:00:17 +08:00
parent 236ae4b37e
commit 195cba9d6e
5 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/layout/index.tsx
View File

@@ -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">

16
src/features/goods/GoodsCategoryList.tsx
View File

@@ -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

2
src/features/goods/GoodsRedeemModal.tsx
View File

@@ -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}

8
src/index.css
View File

@@ -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 {

4
src/views/goods/index.tsx
View File

@@ -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