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

feat: 首页UI调整

Browse Source
This commit is contained in:
zdl
2025-10-21 15:43:59 +08:00
parent 98653f042b
commit 955e0db740
1 changed files with 160 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
src/views/Home/HomePage.js
View File

@@ -1,19 +1,20 @@
// src/views/Home/HomePage.js - 专业投资分析平台 // src/views/Home/HomePage.js - 专业投资分析平台
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { import {
Box, Box,
Container, Container,
Heading, Heading,
Text, Text,
Card, Card,
CardBody, CardBody,
Badge, Badge,
Button, Button,
Flex, Flex,
VStack, VStack,
HStack, HStack,
SimpleGrid, SimpleGrid,
Link Link,
useBreakpointValue
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useAuth } from '../../contexts/AuthContext'; import { useAuth } from '../../contexts/AuthContext';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@@ -26,6 +27,15 @@ export default function HomePage() {
const navigate = useNavigate(); const navigate = useNavigate();
const [imageLoaded, setImageLoaded] = React.useState(false); const [imageLoaded, setImageLoaded] = React.useState(false);
// 响应式配置
const heroHeight = useBreakpointValue({ base: '60vh', md: '80vh', lg: '100vh' });
const headingSize = useBreakpointValue({ base: 'xl', md: '3xl', lg: '4xl' });
const headingLetterSpacing = useBreakpointValue({ base: '-1px', md: '-1.5px', lg: '-2px' });
const heroTextSize = useBreakpointValue({ base: 'md', md: 'lg', lg: 'xl' });
const containerPx = useBreakpointValue({ base: 10, md: 10, lg: 10 });
const showDecorations = useBreakpointValue({ base: false, md: true });
const isMobile = useBreakpointValue({ base: true, md: false });
// 保留原有的调试信息 // 保留原有的调试信息
useEffect(() => { useEffect(() => {
logger.debug('HomePage', 'AuthContext状态', { logger.debug('HomePage', 'AuthContext状态', {
@@ -128,7 +138,7 @@ export default function HomePage() {
{/* Hero Section - 深色科技风格 */} {/* Hero Section - 深色科技风格 */}
<Box <Box
position="relative" position="relative"
minH="100vh" minH={heroHeight}
bg="linear-gradient(135deg, #0E0C15 0%, #15131D 50%, #252134 100%)" bg="linear-gradient(135deg, #0E0C15 0%, #15131D 50%, #252134 100%)"
overflow="hidden" overflow="hidden"
> >
@@ -164,59 +174,63 @@ export default function HomePage() {
/> />
</Box> </Box>
{/* 装饰性几何图形 */} {/* 装饰性几何图形 - 移动端隐藏 */}
<Box {showDecorations && (
position="absolute" <>
top="20%" <Box
left="10%" position="absolute"
w="200px" top="20%"
h="200px" left="10%"
borderRadius="50%" w={{ base: '100px', md: '150px', lg: '200px' }}
bg="rgba(255, 215, 0, 0.1)" h={{ base: '100px', md: '150px', lg: '200px' }}
filter="blur(80px)" borderRadius="50%"
className="float-animation" bg="rgba(255, 215, 0, 0.1)"
/> filter="blur(80px)"
<Box className="float-animation"
position="absolute" />
bottom="30%" <Box
right="20%" position="absolute"
w="150px" bottom="30%"
h="150px" right="20%"
borderRadius="50%" w={{ base: '80px', md: '120px', lg: '150px' }}
bg="rgba(138, 43, 226, 0.1)" h={{ base: '80px', md: '120px', lg: '150px' }}
filter="blur(60px)" borderRadius="50%"
className="float-animation-reverse" bg="rgba(138, 43, 226, 0.1)"
/> filter="blur(60px)"
className="float-animation-reverse"
/>
</>
)}
<Container maxW="7xl" position="relative" zIndex={2}> <Container maxW="7xl" position="relative" zIndex={2} px={containerPx}>
<VStack spacing={16} align="stretch" minH="100vh" justify="center"> <VStack spacing={{ base: 8, md: 12, lg: 16 }} align="stretch" minH={heroHeight} justify="center">
{/* 主标题区域 */} {/* 主标题区域 */}
<VStack spacing={6} textAlign="center" pt={8}> <VStack spacing={{ base: 4, md: 5, lg: 6 }} textAlign="center" pt={{ base: 4, md: 6, lg: 8 }}>
<Heading <Heading
size="4xl" size={headingSize}
color="white" color="white"
fontWeight="900" fontWeight="900"
letterSpacing="-2px" letterSpacing={headingLetterSpacing}
lineHeight="shorter" lineHeight="shorter"
> >
智能投资分析平台 智能投资分析平台
</Heading> </Heading>
<Text fontSize="xl" color="whiteAlpha.800" maxW="3xl" lineHeight="tall"> <Text fontSize={heroTextSize} color="whiteAlpha.800" maxW={{ base: '100%', md: '2xl', lg: '3xl' }} lineHeight="tall" px={{ base: 4, md: 0 }}>
专业投资研究工具，助您把握市场机遇 专业投资研究工具，助您把握市场机遇
</Text> </Text>
</VStack> </VStack>
{/* 核心功能面板 */} {/* 核心功能面板 */}
<Box> <Box pb={{ base: 8, md: 12 }}>
<VStack spacing={8}> <VStack spacing={{ base: 6, md: 8 }}>
{/* 新闻催化分析 - 突出显示 */} {/* 新闻催化分析 - 突出显示 */}
<Card <Card
bg="transparent" bg="transparent"
border="2px solid" border="2px solid"
borderColor="yellow.400" borderColor="yellow.400"
borderRadius="3xl" borderRadius={{ base: '2xl', md: '3xl' }}
overflow="hidden" overflow="hidden"
position="relative" position="relative"
shadow="2xl" shadow="2xl"
@@ -232,46 +246,85 @@ export default function HomePage() {
zIndex: 0 zIndex: 0
}} }}
> >
<CardBody p={8} position="relative" zIndex={1}> <CardBody p={{ base: 6, md: 8 }} position="relative" zIndex={1}>
<Flex align="center" justify="space-between"> {isMobile ? (
<HStack spacing={6}> /* 移动端：垂直布局 */
<Box <VStack spacing={4} align="stretch">
p={4} <HStack spacing={4}>
borderRadius="xl" <Box
bg="yellow.400" p={3}
color="black" borderRadius="lg"
> bg="yellow.400"
<Text fontSize="3xl">{coreFeatures[0].icon}</Text> color="black"
</Box> >
<VStack align="start" spacing={2}> <Text fontSize="2xl">{coreFeatures[0].icon}</Text>
<HStack> </Box>
<Heading size="xl" color="white"> <VStack align="start" spacing={1} flex={1}>
<Heading size="lg" color="white">
{coreFeatures[0].title} {coreFeatures[0].title}
</Heading> </Heading>
<Badge colorScheme="yellow" variant="solid" fontSize="sm"> <Badge colorScheme="yellow" variant="solid" fontSize="xs">
{coreFeatures[0].badge} {coreFeatures[0].badge}
</Badge> </Badge>
</HStack> </VStack>
<Text color="whiteAlpha.800" fontSize="lg" maxW="md"> </HStack>
{coreFeatures[0].description} <Text color="whiteAlpha.800" fontSize="md" lineHeight="tall">
</Text> {coreFeatures[0].description}
</VStack> </Text>
</HStack> <Button
<Button colorScheme="yellow"
colorScheme="yellow" size="md"
size="lg" borderRadius="full"
borderRadius="full" fontWeight="bold"
fontWeight="bold" w="100%"
onClick={() => handleProductClick(coreFeatures[0].url)} onClick={() => handleProductClick(coreFeatures[0].url)}
> minH="44px"
进入功能 → >
</Button> 进入功能 →
</Flex> </Button>
</VStack>
) : (
/* 桌面端：横向布局 */
<Flex align="center" justify="space-between">
<HStack spacing={6}>
<Box
p={4}
borderRadius="xl"
bg="yellow.400"
color="black"
>
<Text fontSize="3xl">{coreFeatures[0].icon}</Text>
</Box>
<VStack align="start" spacing={2}>
<HStack>
<Heading size="xl" color="white">
{coreFeatures[0].title}
</Heading>
<Badge colorScheme="yellow" variant="solid" fontSize="sm">
{coreFeatures[0].badge}
</Badge>
</HStack>
<Text color="whiteAlpha.800" fontSize="lg" maxW="md">
{coreFeatures[0].description}
</Text>
</VStack>
</HStack>
<Button
colorScheme="yellow"
size="lg"
borderRadius="full"
fontWeight="bold"
onClick={() => handleProductClick(coreFeatures[0].url)}
>
进入功能 →
</Button>
</Flex>
)}
</CardBody> </CardBody>
</Card> </Card>
{/* 其他5个功能 */} {/* 其他5个功能 */}
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6} w="100%"> <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={{ base: 4, md: 5, lg: 6 }} w="100%">
{coreFeatures.slice(1).map((feature) => ( {coreFeatures.slice(1).map((feature) => (
<Card <Card
key={feature.id} key={feature.id}
@@ -279,7 +332,7 @@ export default function HomePage() {
backdropFilter="blur(10px)" backdropFilter="blur(10px)"
border="1px solid" border="1px solid"
borderColor="whiteAlpha.200" borderColor="whiteAlpha.200"
borderRadius="2xl" borderRadius={{ base: 'xl', md: '2xl' }}
cursor="pointer" cursor="pointer"
transition="all 0.3s ease" transition="all 0.3s ease"
_hover={{ _hover={{
@@ -288,41 +341,51 @@ export default function HomePage() {
transform: 'translateY(-4px)', transform: 'translateY(-4px)',
shadow: '2xl' shadow: '2xl'
}} }}
_active={{
bg: 'whiteAlpha.200',
borderColor: `${feature.color}.400`,
transform: 'translateY(-2px)'
}}
onClick={() => handleProductClick(feature.url)} onClick={() => handleProductClick(feature.url)}
minH="180px" minH={{ base: 'auto', md: '180px' }}
> >
<CardBody p={6}> <CardBody p={{ base: 5, md: 6 }}>
<VStack spacing={4} align="start" h="100%"> <VStack spacing={{ base: 3, md: 4 }} align="start" h="100%">
<HStack> <HStack>
<Box <Box
p={3} p={{ base: 2, md: 3 }}
borderRadius="lg" borderRadius="lg"
bg={`${feature.color}.50`} bg={`${feature.color}.50`}
border="1px solid" border="1px solid"
borderColor={`${feature.color}.200`} borderColor={`${feature.color}.200`}
> >
<Text fontSize="2xl">{feature.icon}</Text> <Text fontSize={{ base: 'xl', md: '2xl' }}>{feature.icon}</Text>
</Box> </Box>
<Badge colorScheme={feature.color} variant="solid"> <Badge colorScheme={feature.color} variant="solid" fontSize={{ base: 'xs', md: 'sm' }}>
{feature.badge} {feature.badge}
</Badge> </Badge>
</HStack> </HStack>
<VStack align="start" spacing={2} flex={1}> <VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
<Heading size="lg" color="white"> <Heading size={{ base: 'md', md: 'lg' }} color="white">
{feature.title} {feature.title}
</Heading> </Heading>
<Text color="whiteAlpha.800" fontSize="sm" lineHeight="tall"> <Text color="whiteAlpha.800" fontSize={{ base: 'xs', md: 'sm' }} lineHeight="tall">
{feature.description} {feature.description}
</Text> </Text>
</VStack> </VStack>
<Button <Button
colorScheme={feature.color} colorScheme={feature.color}
size="sm" size={{ base: 'md', md: 'sm' }}
variant="outline" variant="outline"
alignSelf="flex-end" alignSelf="flex-end"
onClick={() => handleProductClick(feature.url)} w={{ base: '100%', md: 'auto' }}
minH="44px"
onClick={(e) => {
e.stopPropagation();
handleProductClick(feature.url);
}}
> >
使用 使用
</Button> </Button>
@@ -338,17 +401,17 @@ export default function HomePage() {
</Box> </Box>
{/* 底部区域 */} {/* 底部区域 */}
<Box <Box
bg="linear-gradient(135deg, #0E0C15 0%, #15131D 100%)" bg="linear-gradient(135deg, #0E0C15 0%, #15131D 100%)"
py={12} py={{ base: 8, md: 12 }}
position="relative" position="relative"
> >
<Container maxW="7xl" position="relative" zIndex={1}> <Container maxW="7xl" position="relative" zIndex={1} px={containerPx}>
<VStack spacing={6} textAlign="center"> <VStack spacing={{ base: 4, md: 6 }} textAlign="center">
<Text color="whiteAlpha.600" fontSize="sm"> <Text color="whiteAlpha.600" fontSize={{ base: 'xs', md: 'sm' }}>
© 2024 价值前沿. 保留所有权利. © 2024 价值前沿. 保留所有权利.
</Text> </Text>
<HStack spacing={4} fontSize="xs" color="whiteAlpha.500"> <HStack spacing={{ base: 2, md: 4 }} fontSize="xs" color="whiteAlpha.500" flexWrap="wrap" justify="center">
<Link <Link
href="https://beian.mps.gov.cn/#/query/webSearch?code=11010802046286" href="https://beian.mps.gov.cn/#/query/webSearch?code=11010802046286"
isExternal isExternal