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

style: Dashboard Center 页面 H5 响应式适配

Browse Source
This commit is contained in:
zdl
2025-12-05 14:42:37 +08:00
parent 302acbafe3
commit c9801014c7
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/Dashboard/Center.js
View File

@@ -273,18 +273,18 @@ export default function CenterDashboard() {
} }
return ( return (
<Box bg={sectionBg} minH="100vh"> <Box bg={sectionBg} minH="100vh" overflowX="hidden">
<Box px={{ base: 4, md: 8 }} py={6} maxW="1400px" mx="auto"> <Box px={{ base: 3, md: 8 }} py={{ base: 4, md: 6 }} maxW="1400px" mx="auto">
{/* 主要内容区域 */} {/* 主要内容区域 */}
<Grid templateColumns={{ base: '1fr', md: '1fr 1fr', lg: 'repeat(3, 1fr)' }} gap={6} mb={8}> <Grid templateColumns={{ base: '1fr', lg: 'repeat(3, 1fr)' }} gap={6} mb={8}>
{/* 左列：自选股票 */} {/* 左列：自选股票 */}
<VStack spacing={6} align="stretch"> <VStack spacing={6} align="stretch" minW={0}>
<Card bg={cardBg} shadow="md" height="600px" display="flex" flexDirection="column"> <Card bg={cardBg} shadow="md" maxW="100%" height={{ base: 'auto', md: '600px' }} minH={{ base: '300px', md: '600px' }} display="flex" flexDirection="column">
<CardHeader pb={4}> <CardHeader pb={{ base: 2, md: 4 }}>
<Flex justify="space-between" align="center"> <Flex justify="space-between" align="center">
<HStack> <HStack>
<Icon as={FiBarChart2} color="blue.500" boxSize={5} /> <Icon as={FiBarChart2} color="blue.500" boxSize={{ base: 4, md: 5 }} />
<Heading size="md">自选股票</Heading> <Heading size={{ base: 'sm', md: 'md' }}>自选股票</Heading>
<Badge colorScheme="blue" variant="subtle"> <Badge colorScheme="blue" variant="subtle">
{watchlist.length} {watchlist.length}
</Badge> </Badge>
@@ -388,14 +388,14 @@ export default function CenterDashboard() {
</VStack> </VStack>
{/* 中列：关注事件 */} {/* 中列：关注事件 */}
<VStack spacing={6} align="stretch"> <VStack spacing={6} align="stretch" minW={0}>
{/* 关注事件 */} {/* 关注事件 */}
<Card bg={cardBg} shadow="md" height="600px" display="flex" flexDirection="column"> <Card bg={cardBg} shadow="md" maxW="100%" height={{ base: 'auto', md: '600px' }} minH={{ base: '300px', md: '600px' }} display="flex" flexDirection="column">
<CardHeader pb={4}> <CardHeader pb={{ base: 2, md: 4 }}>
<Flex justify="space-between" align="center"> <Flex justify="space-between" align="center">
<HStack> <HStack>
<Icon as={FiStar} color="yellow.500" boxSize={5} /> <Icon as={FiStar} color="yellow.500" boxSize={{ base: 4, md: 5 }} />
<Heading size="md">关注事件</Heading> <Heading size={{ base: 'sm', md: 'md' }}>关注事件</Heading>
<Badge colorScheme="yellow" variant="subtle"> <Badge colorScheme="yellow" variant="subtle">
{followingEvents.length} {followingEvents.length}
</Badge> </Badge>
@@ -525,14 +525,14 @@ export default function CenterDashboard() {
</VStack> </VStack>
{/* 右列：我的评论 */} {/* 右列：我的评论 */}
<VStack spacing={6} align="stretch"> <VStack spacing={6} align="stretch" minW={0}>
{/* 我的评论 */} {/* 我的评论 */}
<Card bg={cardBg} shadow="md" height="600px" display="flex" flexDirection="column"> <Card bg={cardBg} shadow="md" maxW="100%" height={{ base: 'auto', md: '600px' }} minH={{ base: '300px', md: '600px' }} display="flex" flexDirection="column">
<CardHeader pb={4}> <CardHeader pb={{ base: 2, md: 4 }}>
<Flex justify="space-between" align="center"> <Flex justify="space-between" align="center">
<HStack> <HStack>
<Icon as={FiMessageSquare} color="purple.500" boxSize={5} /> <Icon as={FiMessageSquare} color="purple.500" boxSize={{ base: 4, md: 5 }} />
<Heading size="md">我的评论</Heading> <Heading size={{ base: 'sm', md: 'md' }}>我的评论</Heading>
<Badge colorScheme="purple" variant="subtle"> <Badge colorScheme="purple" variant="subtle">
{eventComments.length} {eventComments.length}
</Badge> </Badge>