vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 首页整体尺寸缩小约 67%

Browse Source 
- useHomeResponsive: 标题尺寸 4xl→2xl，正文 xl→md
- HomePage: VStack/SimpleGrid 间距缩小
- HeroHeader: spacing/padding 缩小，maxW 调整
- FeaturedFeatureCard: 图标、标题、按钮尺寸缩小
- FeatureCard: 卡片高度 180→120px，整体元素尺寸缩小

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-04 17:35:43 +08:00
parent ae42024ec0
commit 6cf92b6851
5 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/hooks/useHomeResponsive.ts
View File

@@ -18,21 +18,21 @@ export const useHomeResponsive = (): ResponsiveConfig => {
}); });
const headingSize = useBreakpointValue({ const headingSize = useBreakpointValue({
base: 'xl', base: 'lg',
md: '3xl', md: 'xl',
lg: '4xl' lg: '2xl'
}); });
const headingLetterSpacing = useBreakpointValue({ const headingLetterSpacing = useBreakpointValue({
base: '-1px', base: '-0.5px',
md: '-1.5px', md: '-1px',
lg: '-2px' lg: '-1.5px'
}); });
const heroTextSize = useBreakpointValue({ const heroTextSize = useBreakpointValue({
base: 'md', base: 'xs',
md: 'lg', md: 'sm',
lg: 'xl' lg: 'md'
}); });
const containerPx = useBreakpointValue({ const containerPx = useBreakpointValue({

8
src/views/Home/HomePage.tsx
View File

@@ -91,7 +91,7 @@ const HomePage: React.FC = () => {
<Container maxW="7xl" position="relative" zIndex={30} px={containerPx}> <Container maxW="7xl" position="relative" zIndex={30} px={containerPx}>
<VStack <VStack
spacing={{ base: 8, md: 12, lg: 16 }} spacing={{ base: 5, md: 8, lg: 10 }}
align="stretch" align="stretch"
minH={heroHeight} minH={heroHeight}
justify="center" justify="center"
@@ -104,8 +104,8 @@ const HomePage: React.FC = () => {
/> />
{/* 核心功能面板 */} {/* 核心功能面板 */}
<Box pb={{ base: 8, md: 12 }}> <Box pb={{ base: 5, md: 8 }}>
<VStack spacing={{ base: 6, md: 8 }}> <VStack spacing={{ base: 4, md: 5 }}>
{/* 特色功能卡片 - 新闻中心 */} {/* 特色功能卡片 - 新闻中心 */}
<FeaturedFeatureCard <FeaturedFeatureCard
feature={featuredFeature} feature={featuredFeature}
@@ -115,7 +115,7 @@ const HomePage: React.FC = () => {
{/* 其他功能卡片 */} {/* 其他功能卡片 */}
<SimpleGrid <SimpleGrid
columns={{ base: 1, md: 2, lg: 3 }} columns={{ base: 1, md: 2, lg: 3 }}
spacing={{ base: 4, md: 5, lg: 6 }} spacing={{ base: 2, md: 3, lg: 4 }}
w="100%" w="100%"
> >
{regularFeatures.map((feature) => ( {regularFeatures.map((feature) => (

32
src/views/Home/components/FeatureCard.tsx
View File

@@ -34,51 +34,51 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
backdropFilter="blur(10px)" backdropFilter="blur(10px)"
border="1px solid" border="1px solid"
borderColor="whiteAlpha.200" borderColor="whiteAlpha.200"
borderRadius={{ base: 'xl', md: '2xl' }} borderRadius={{ base: 'lg', md: 'xl' }}
transition="all 0.3s ease" transition="all 0.3s ease"
_hover={{ _hover={{
bg: 'whiteAlpha.200', bg: 'whiteAlpha.200',
borderColor: `${feature.color}.400`, borderColor: `${feature.color}.400`,
transform: 'translateY(-4px)', transform: 'translateY(-3px)',
shadow: '2xl' shadow: 'xl'
}} }}
_active={{ _active={{
bg: 'whiteAlpha.200', bg: 'whiteAlpha.200',
borderColor: `${feature.color}.400`, borderColor: `${feature.color}.400`,
transform: 'translateY(-2px)' transform: 'translateY(-1px)'
}} }}
onClick={() => onClick(feature)} onClick={() => onClick(feature)}
minH={{ base: 'auto', md: '180px' }} minH={{ base: 'auto', md: '120px' }}
cursor="pointer" cursor="pointer"
> >
<CardBody p={{ base: 5, md: 6 }}> <CardBody p={{ base: 3, md: 4 }}>
<VStack spacing={{ base: 3, md: 4 }} align="start" h="100%"> <VStack spacing={{ base: 2, md: 2.5 }} align="start" h="100%">
<HStack> <HStack>
<Box <Box
p={{ base: 2, md: 3 }} p={{ base: 1.5, md: 2 }}
borderRadius="lg" borderRadius="md"
bg={`${feature.color}.50`} bg={`${feature.color}.50`}
border="1px solid" border="1px solid"
borderColor={`${feature.color}.200`} borderColor={`${feature.color}.200`}
> >
<Text fontSize={{ base: 'xl', md: '2xl' }}>{feature.icon}</Text> <Text fontSize={{ base: 'md', md: 'lg' }}>{feature.icon}</Text>
</Box> </Box>
<Badge <Badge
colorScheme={feature.color} colorScheme={feature.color}
variant="solid" variant="solid"
fontSize={{ base: 'xs', md: 'sm' }} fontSize={{ base: '2xs', md: 'xs' }}
> >
{feature.badge} {feature.badge}
</Badge> </Badge>
</HStack> </HStack>
<VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}> <VStack align="start" spacing={{ base: 0.5, md: 1 }} flex={1}>
<Heading size={{ base: 'md', md: 'lg' }} color="white"> <Heading size={{ base: 'sm', md: 'md' }} color="white">
{feature.title} {feature.title}
</Heading> </Heading>
<Text <Text
color="whiteAlpha.800" color="whiteAlpha.800"
fontSize={{ base: 'xs', md: 'sm' }} fontSize={{ base: '2xs', md: 'xs' }}
lineHeight="tall" lineHeight="tall"
> >
{feature.description} {feature.description}
@@ -87,11 +87,11 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
<Button <Button
colorScheme={feature.color} colorScheme={feature.color}
size={{ base: 'md', md: 'sm' }} size={{ base: 'sm', md: 'xs' }}
variant="outline" variant="outline"
alignSelf="flex-end" alignSelf="flex-end"
w={{ base: '100%', md: 'auto' }} w={{ base: '100%', md: 'auto' }}
minH="44px" minH="32px"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onClick(feature); onClick(feature);

28
src/views/Home/components/FeaturedFeatureCard.tsx
View File

@@ -34,7 +34,7 @@ export const FeaturedFeatureCard: React.FC<FeaturedFeatureCardProps> = ({
bg="transparent" bg="transparent"
border="2px solid" border="2px solid"
borderColor="yellow.400" borderColor="yellow.400"
borderRadius={{ base: '2xl', md: '3xl' }} borderRadius={{ base: 'xl', md: '2xl' }}
overflow="hidden" overflow="hidden"
position="relative" position="relative"
shadow="2xl" shadow="2xl"
@@ -50,35 +50,35 @@ export const FeaturedFeatureCard: React.FC<FeaturedFeatureCardProps> = ({
zIndex: 0 zIndex: 0
}} }}
> >
<CardBody p={{ base: 6, md: 8 }} position="relative" zIndex={1}> <CardBody p={{ base: 4, md: 5 }} position="relative" zIndex={1}>
<Flex <Flex
direction={{ base: 'column', md: 'row' }} direction={{ base: 'column', md: 'row' }}
align={{ base: 'stretch', md: 'center' }} align={{ base: 'stretch', md: 'center' }}
justify={{ base: 'flex-start', md: 'space-between' }} justify={{ base: 'flex-start', md: 'space-between' }}
gap={{ base: 4, md: 6 }} gap={{ base: 3, md: 4 }}
> >
<Flex align="center" gap={{ base: 4, md: 6 }} flex={1}> <Flex align="center" gap={{ base: 3, md: 4 }} flex={1}>
<Box <Box
p={{ base: 3, md: 4 }} p={{ base: 2, md: 2.5 }}
borderRadius={{ base: 'lg', md: 'xl' }} borderRadius={{ base: 'md', md: 'lg' }}
bg="yellow.400" bg="yellow.400"
color="black" color="black"
> >
<Text fontSize={{ base: '2xl', md: '3xl' }}>{feature.icon}</Text> <Text fontSize={{ base: 'xl', md: '2xl' }}>{feature.icon}</Text>
</Box> </Box>
<VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}> <VStack align="start" spacing={{ base: 0.5, md: 1 }} flex={1}>
<HStack> <HStack>
<Heading size={{ base: 'lg', md: 'xl' }} color="white"> <Heading size={{ base: 'md', md: 'lg' }} color="white">
{feature.title} {feature.title}
</Heading> </Heading>
<Badge colorScheme="yellow" variant="solid" fontSize={{ base: 'xs', md: 'sm' }}> <Badge colorScheme="yellow" variant="solid" fontSize={{ base: '2xs', md: 'xs' }}>
{feature.badge} {feature.badge}
</Badge> </Badge>
</HStack> </HStack>
<Text <Text
color="whiteAlpha.800" color="whiteAlpha.800"
fontSize={{ base: 'md', md: 'lg' }} fontSize={{ base: 'xs', md: 'sm' }}
maxW={{ md: 'md' }} maxW={{ md: 'sm' }}
lineHeight="tall" lineHeight="tall"
> >
{feature.description} {feature.description}
@@ -87,12 +87,12 @@ export const FeaturedFeatureCard: React.FC<FeaturedFeatureCardProps> = ({
</Flex> </Flex>
<Button <Button
colorScheme="yellow" colorScheme="yellow"
size={{ base: 'md', md: 'lg' }} size={{ base: 'sm', md: 'md' }}
borderRadius="full" borderRadius="full"
fontWeight="bold" fontWeight="bold"
w={{ base: '100%', md: 'auto' }} w={{ base: '100%', md: 'auto' }}
onClick={() => onClick(feature)} onClick={() => onClick(feature)}
minH="44px" minH="36px"
flexShrink={0} flexShrink={0}
> >
进入功能 → 进入功能 →

8
src/views/Home/components/HeroHeader.tsx
View File

@@ -21,9 +21,9 @@ export const HeroHeader: React.FC<HeroHeaderProps> = ({
}) => { }) => {
return ( return (
<VStack <VStack
spacing={{ base: 4, md: 5, lg: 6 }} spacing={{ base: 2, md: 3, lg: 4 }}
textAlign="center" textAlign="center"
pt={{ base: 4, md: 6, lg: 8 }} pt={{ base: 2, md: 4, lg: 5 }}
> >
<Heading <Heading
size={headingSize} size={headingSize}
@@ -37,9 +37,9 @@ export const HeroHeader: React.FC<HeroHeaderProps> = ({
<Text <Text
fontSize={heroTextSize} fontSize={heroTextSize}
color="whiteAlpha.800" color="whiteAlpha.800"
maxW={{ base: '100%', md: '2xl', lg: '3xl' }} maxW={{ base: '100%', md: 'xl', lg: '2xl' }}
lineHeight="tall" lineHeight="tall"
px={{ base: 4, md: 0 }} px={{ base: 2, md: 0 }}
> >
专业投资研究工具,助您把握市场机遇 专业投资研究工具,助您把握市场机遇
</Text> </Text>