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

update ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-13 18:08:02 +08:00
parent 716b4ba3bd
commit 2edeeec497
3 changed files with 422 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/Community/components/DynamicNewsCard.js
View File

@@ -390,6 +390,13 @@ const [currentMode, setCurrentMode] = useState('vertical');
mb={4}
position="relative"
zIndex={1}
animation="fadeInUp 0.8s ease-out 0.2s both"
sx={{
'@keyframes fadeInUp': {
'0%': { opacity: 0, transform: 'translateY(30px)' },
'100%': { opacity: 1, transform: 'translateY(0)' }
}
}}
>
{/* 标题和搜索部分 - 可滚动区域 */}
<CardHeader

435
src/views/Community/components/HeroPanel.js
View File

@@ -608,20 +608,52 @@ const ConceptFlowAnimation = () => {
*/
const FeatureIcon = ({ icon, title, description }) => {
return (
<HStack spacing={3} align="start">
<HStack
spacing={3}
align="start"
transition="all 0.3s ease"
cursor="pointer"
_hover={{
transform: 'translateX(8px)'
}}
>
<Box
p={2}
borderRadius="lg"
bg="whiteAlpha.200"
color="gold"
position="relative"
overflow="hidden"
transition="all 0.3s ease"
_hover={{
bg: "whiteAlpha.300",
boxShadow: "0 0 20px rgba(255, 215, 0, 0.4)"
}}
_before={{
content: '""',
position: 'absolute',
top: '-50%',
left: '-50%',
width: '200%',
height: '200%',
background: 'linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.3), transparent)',
transform: 'rotate(45deg)',
animation: 'iconShine 3s ease-in-out infinite'
}}
sx={{
'@keyframes iconShine': {
'0%': { transform: 'translateX(-100%) translateY(-100%) rotate(45deg)' },
'100%': { transform: 'translateX(100%) translateY(100%) rotate(45deg)' }
}
}}
>
<Icon as={icon} boxSize={5} />
<Icon as={icon} boxSize={5} position="relative" zIndex={1} />
</Box>
<VStack align="start" spacing={0}>
<Text fontSize="sm" fontWeight="bold" color="white">
<Text fontSize="sm" fontWeight="bold" color="white" letterSpacing="wide">
{title}
</Text>
<Text fontSize="xs" color="whiteAlpha.700">
<Text fontSize="xs" color="whiteAlpha.800">
{description}
</Text>
</VStack>
@@ -633,106 +665,301 @@ const FeatureIcon = ({ icon, title, description }) => {
* 顶部说明面板主组件
*/
const HeroPanel = () => {
const gradientBg = 'linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%)';
const gradientBg = 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #1a1a2e 75%, #0a0a0a 100%)';
const cardBorder = '1px solid';
const borderColor = useColorModeValue('rgba(255, 215, 0, 0.3)', 'rgba(255, 215, 0, 0.2)');
const borderColor = useColorModeValue('rgba(255, 215, 0, 0.4)', 'rgba(255, 215, 0, 0.3)');
return (
<Card
bg={gradientBg}
borderColor={borderColor}
borderWidth={cardBorder}
boxShadow="0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.1) inset"
boxShadow="0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 215, 0, 0.15) inset, 0 0 80px rgba(255, 215, 0, 0.05)"
mb={6}
overflow="hidden"
position="relative"
transition="all 0.3s ease"
transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)"
_hover={{
boxShadow: "0 16px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 215, 0, 0.2) inset",
transform: "translateY(-2px)"
boxShadow: "0 24px 80px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 215, 0, 0.3) inset, 0 0 120px rgba(255, 215, 0, 0.1)",
transform: "translateY(-4px) scale(1.005)",
borderColor: "rgba(255, 215, 0, 0.5)"
}}
>
{/* 装饰性背景图案 - 多层叠加 */}
{/* 动态网格背景 */}
<Box
position="absolute"
top="-30%"
right="-15%"
top={0}
left={0}
right={0}
bottom={0}
opacity={0.03}
pointerEvents="none"
bgImage="linear-gradient(rgba(255, 215, 0, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 215, 0, 0.3) 1px, transparent 1px)"
bgSize="50px 50px"
animation="gridMove 20s linear infinite"
sx={{
'@keyframes gridMove': {
'0%': { backgroundPosition: '0 0' },
'100%': { backgroundPosition: '50px 50px' }
}
}}
/>
{/* 扫描线效果 */}
<Box
position="absolute"
top={0}
left={0}
right={0}
height="2px"
bgGradient="linear(to-r, transparent, rgba(255, 215, 0, 0.8), transparent)"
pointerEvents="none"
animation="scanLine 3s ease-in-out infinite"
sx={{
'@keyframes scanLine': {
'0%': { transform: 'translateY(0)', opacity: 0 },
'50%': { opacity: 1 },
'100%': { transform: 'translateY(400px)', opacity: 0 }
}
}}
/>
{/* 装饰性光晕 - 多层动态叠加 */}
<Box
position="absolute"
top="-40%"
right="-20%"
width="700px"
height="700px"
borderRadius="full"
bg="radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.12) 30%, transparent 70%)"
pointerEvents="none"
filter="blur(50px)"
animation="floatGlow1 8s ease-in-out infinite"
sx={{
'@keyframes floatGlow1': {
'0%, 100%': { transform: 'translate(0, 0) scale(1)' },
'50%': { transform: 'translate(-30px, 20px) scale(1.1)' }
}
}}
/>
<Box
position="absolute"
bottom="-30%"
left="-15%"
width="500px"
height="500px"
borderRadius="full"
bg="radial-gradient(circle, rgba(236, 0, 0, 0.15) 0%, rgba(255, 77, 79, 0.08) 40%, transparent 70%)"
pointerEvents="none"
filter="blur(60px)"
animation="floatGlow2 10s ease-in-out infinite"
sx={{
'@keyframes floatGlow2': {
'0%, 100%': { transform: 'translate(0, 0) scale(1)' },
'50%': { transform: 'translate(40px, -30px) scale(1.15)' }
}
}}
/>
<Box
position="absolute"
top="40%"
left="30%"
width="600px"
height="600px"
borderRadius="full"
bg="radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.08) 40%, transparent 70%)"
bg="radial-gradient(circle, rgba(0, 218, 60, 0.08) 0%, transparent 60%)"
pointerEvents="none"
filter="blur(40px)"
filter="blur(70px)"
animation="floatGlow3 12s ease-in-out infinite"
sx={{
'@keyframes floatGlow3': {
'0%, 100%': { transform: 'translate(0, 0) scale(1)' },
'50%': { transform: 'translate(-50px, 40px) scale(1.2)' }
}
}}
/>
{/* 四角光点装饰 */}
<Box
position="absolute"
bottom="-20%"
left="-10%"
width="400px"
height="400px"
top="20px"
left="20px"
width="4px"
height="4px"
borderRadius="full"
bg="radial-gradient(circle, rgba(236, 0, 0, 0.08) 0%, transparent 60%)"
pointerEvents="none"
filter="blur(50px)"
bg="#FFD700"
boxShadow="0 0 20px #FFD700"
animation="cornerPulse 2s ease-in-out infinite"
sx={{
'@keyframes cornerPulse': {
'0%, 100%': { opacity: 0.3, transform: 'scale(1)' },
'50%': { opacity: 1, transform: 'scale(1.5)' }
}
}}
/>
<Box
position="absolute"
top="50%"
left="50%"
transform="translate(-50%, -50%)"
width="80%"
height="80%"
bg="radial-gradient(circle, rgba(255, 215, 0, 0.02) 0%, transparent 60%)"
pointerEvents="none"
filter="blur(60px)"
top="20px"
right="20px"
width="4px"
height="4px"
borderRadius="full"
bg="#FFD700"
boxShadow="0 0 20px #FFD700"
animation="cornerPulse 2s ease-in-out infinite 0.5s"
sx={{
'@keyframes cornerPulse': {
'0%, 100%': { opacity: 0.3, transform: 'scale(1)' },
'50%': { opacity: 1, transform: 'scale(1.5)' }
}
}}
/>
<Box
position="absolute"
bottom="20px"
left="20px"
width="4px"
height="4px"
borderRadius="full"
bg="#FFD700"
boxShadow="0 0 20px #FFD700"
animation="cornerPulse 2s ease-in-out infinite 1s"
sx={{
'@keyframes cornerPulse': {
'0%, 100%': { opacity: 0.3, transform: 'scale(1)' },
'50%': { opacity: 1, transform: 'scale(1.5)' }
}
}}
/>
<Box
position="absolute"
bottom="20px"
right="20px"
width="4px"
height="4px"
borderRadius="full"
bg="#FFD700"
boxShadow="0 0 20px #FFD700"
animation="cornerPulse 2s ease-in-out infinite 1.5s"
sx={{
'@keyframes cornerPulse': {
'0%, 100%': { opacity: 0.3, transform: 'scale(1)' },
'50%': { opacity: 1, transform: 'scale(1.5)' }
}
}}
/>
<CardBody p={6}>
<SimpleGrid columns={{ base: 1, lg: 3 }} spacing={6}>
{/* 左侧：产品介绍 */}
<Box>
<Box
animation="fadeInLeft 0.8s ease-out"
sx={{
'@keyframes fadeInLeft': {
'0%': { opacity: 0, transform: 'translateX(-30px)' },
'100%': { opacity: 1, transform: 'translateX(0)' }
}
}}
>
<VStack align="start" spacing={4}>
<Heading size="lg" color="white" fontWeight="extrabold">
<Text
bgGradient="linear(to-r, #FFD700, #FFA500)"
bgGradient="linear(to-r, #FFD700, #FFA500, #FFD700)"
bgClip="text"
backgroundSize="200% 100%"
animation="shimmer 3s linear infinite"
sx={{
'@keyframes shimmer': {
'0%': { backgroundPosition: '-200% 0' },
'100%': { backgroundPosition: '200% 0' }
}
}}
>
价值前沿
</Text>
</Heading>
<Text fontSize="sm" color="whiteAlpha.800" lineHeight="1.8">
<Text fontSize="sm" color="whiteAlpha.900" lineHeight="1.8" fontWeight="medium">
实时捕捉市场动态，智能分析投资机会。
<br />
整合多维数据源，为您提供专业的投资决策支持。
</Text>
<VStack spacing={3} align="stretch" w="100%">
<VStack spacing={3} align="stretch" w="100%" mt={2}>
<Box
animation="fadeInUp 0.8s ease-out 0.2s both"
sx={{
'@keyframes fadeInUp': {
'0%': { opacity: 0, transform: 'translateY(20px)' },
'100%': { opacity: 1, transform: 'translateY(0)' }
}
}}
>
<FeatureIcon
icon={Activity}
title="实时监控"
description="7×24小时追踪市场动态"
/>
</Box>
<Box
animation="fadeInUp 0.8s ease-out 0.4s both"
sx={{
'@keyframes fadeInUp': {
'0%': { opacity: 0, transform: 'translateY(20px)' },
'100%': { opacity: 1, transform: 'translateY(0)' }
}
}}
>
<FeatureIcon
icon={TrendingUp}
title="智能分析"
description="AI驱动的概念板块分析"
/>
</Box>
<Box
animation="fadeInUp 0.8s ease-out 0.6s both"
sx={{
'@keyframes fadeInUp': {
'0%': { opacity: 0, transform: 'translateY(20px)' },
'100%': { opacity: 1, transform: 'translateY(0)' }
}
}}
>
<FeatureIcon
icon={Globe}
title="全面覆盖"
description="A股全市场深度数据"
/>
</Box>
<Box
animation="fadeInUp 0.8s ease-out 0.8s both"
sx={{
'@keyframes fadeInUp': {
'0%': { opacity: 0, transform: 'translateY(20px)' },
'100%': { opacity: 1, transform: 'translateY(0)' }
}
}}
>
<FeatureIcon
icon={Zap}
title="极速响应"
description="毫秒级数据更新推送"
/>
</Box>
</VStack>
</VStack>
</Box>
{/* 中间：沪深指数K线图 */}
<Box>
<Box
animation="fadeInScale 0.8s ease-out 0.3s both"
sx={{
'@keyframes fadeInScale': {
'0%': { opacity: 0, transform: 'scale(0.95)' },
'100%': { opacity: 1, transform: 'scale(1)' }
}
}}
>
<VStack spacing={4} h="100%">
<Box
w="100%"
@@ -743,12 +970,27 @@ const HeroPanel = () => {
borderColor="whiteAlpha.200"
backdropFilter="blur(10px)"
boxShadow="0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
transition="all 0.3s ease"
transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
position="relative"
overflow="hidden"
_hover={{
bg: "whiteAlpha.150",
borderColor: "whiteAlpha.300",
boxShadow: "0 6px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
transform: "translateY(-1px)"
borderColor: "rgba(236, 0, 0, 0.4)",
boxShadow: "0 8px 32px rgba(236, 0, 0, 0.3), 0 0 0 1px rgba(236, 0, 0, 0.2) inset, inset 0 1px 0 rgba(255, 255, 255, 0.1)",
transform: "translateY(-4px) scale(1.02)"
}}
_before={{
content: '""',
position: 'absolute',
top: 0,
left: '-100%',
width: '100%',
height: '100%',
background: 'linear-gradient(90deg, transparent, rgba(236, 0, 0, 0.1), transparent)',
transition: 'left 0.5s ease'
}}
_hover_before={{
left: '100%'
}}
>
<MiniIndexChart indexCode="000001" indexName="上证指数" />
@@ -762,12 +1004,27 @@ const HeroPanel = () => {
borderColor="whiteAlpha.200"
backdropFilter="blur(10px)"
boxShadow="0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
transition="all 0.3s ease"
transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
position="relative"
overflow="hidden"
_hover={{
bg: "whiteAlpha.150",
borderColor: "whiteAlpha.300",
boxShadow: "0 6px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
transform: "translateY(-1px)"
borderColor: "rgba(0, 218, 60, 0.4)",
boxShadow: "0 8px 32px rgba(0, 218, 60, 0.3), 0 0 0 1px rgba(0, 218, 60, 0.2) inset, inset 0 1px 0 rgba(255, 255, 255, 0.1)",
transform: "translateY(-4px) scale(1.02)"
}}
_before={{
content: '""',
position: 'absolute',
top: 0,
left: '-100%',
width: '100%',
height: '100%',
background: 'linear-gradient(90deg, transparent, rgba(0, 218, 60, 0.1), transparent)',
transition: 'left 0.5s ease'
}}
_hover_before={{
left: '100%'
}}
>
<MiniIndexChart indexCode="399001" indexName="深证成指" />
@@ -776,7 +1033,15 @@ const HeroPanel = () => {
</Box>
{/* 右侧：热门概念词云图 */}
<Box>
<Box
animation="fadeInRight 0.8s ease-out 0.5s both"
sx={{
'@keyframes fadeInRight': {
'0%': { opacity: 0, transform: 'translateX(30px)' },
'100%': { opacity: 1, transform: 'translateX(0)' }
}
}}
>
<VStack align="start" spacing={3} h="100%">
<HStack
spacing={2}
@@ -785,6 +1050,30 @@ const HeroPanel = () => {
bg="whiteAlpha.50"
w="full"
justify="space-between"
position="relative"
overflow="hidden"
transition="all 0.3s ease"
_hover={{
bg: "whiteAlpha.100",
boxShadow: "0 0 20px rgba(255, 165, 0, 0.3)"
}}
_before={{
content: '""',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'linear-gradient(90deg, transparent, rgba(255, 165, 0, 0.1), transparent)',
animation: 'headerShimmer 3s ease-in-out infinite',
pointerEvents: 'none'
}}
sx={{
'@keyframes headerShimmer': {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(100%)' }
}
}}
>
<HStack spacing={2}>
<Text
@@ -792,6 +1081,14 @@ const HeroPanel = () => {
fontWeight="extrabold"
bgGradient="linear(to-r, #FFD700, #FFA500, #FF4500)"
bgClip="text"
backgroundSize="200% 100%"
animation="gradientFlow 3s ease infinite"
sx={{
'@keyframes gradientFlow': {
'0%, 100%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' }
}
}}
>
🔥 热门概念
</Text>
@@ -802,8 +1099,31 @@ const HeroPanel = () => {
h="6px"
borderRadius="full"
bg="orange.400"
animation="pulse 2s infinite"
boxShadow="0 0 6px rgba(251, 146, 60, 0.8)"
animation="liveIndicator 1.5s ease-in-out infinite"
boxShadow="0 0 10px rgba(251, 146, 60, 0.8)"
position="relative"
_after={{
content: '""',
position: 'absolute',
top: '-3px',
left: '-3px',
right: '-3px',
bottom: '-3px',
borderRadius: 'full',
border: '2px solid',
borderColor: 'orange.400',
animation: 'ripple 1.5s ease-out infinite'
}}
sx={{
'@keyframes liveIndicator': {
'0%, 100%': { opacity: 1, transform: 'scale(1)' },
'50%': { opacity: 0.6, transform: 'scale(1.2)' }
},
'@keyframes ripple': {
'0%': { transform: 'scale(1)', opacity: 0.8 },
'100%': { transform: 'scale(2.5)', opacity: 0 }
}
}}
/>
<Text fontSize="xs" color="orange.400" fontWeight="medium">
实时更新
@@ -815,10 +1135,31 @@ const HeroPanel = () => {
flex="1"
position="relative"
overflow="hidden"
borderRadius="lg"
bg="whiteAlpha.50"
p={2}
transition="all 0.3s ease"
_hover={{
bg: "whiteAlpha.100",
boxShadow: "0 0 30px rgba(255, 215, 0, 0.2)"
}}
>
<ConceptFlowAnimation />
</Box>
<HStack spacing={2} fontSize="xs" color="whiteAlpha.600" w="100%" justify="center">
<HStack
spacing={2}
fontSize="xs"
color="whiteAlpha.600"
w="100%"
justify="center"
animation="fadeIn 1s ease-out 1s both"
sx={{
'@keyframes fadeIn': {
'0%': { opacity: 0 },
'100%': { opacity: 1 }
}
}}
>
<Text>🌊 概念流动展示</Text>
<Text>•</Text>
<Text>🎨 颜色表示涨跌幅</Text>

7
src/views/Community/components/HotEventsSection.js
View File

@@ -44,6 +44,13 @@ const HotEventsSection = ({ events, onEventClick }) => {
borderColor={useColorModeValue('gray.200', 'gray.700')}
position="relative"
zIndex={1}
animation="fadeInUp 0.8s ease-out 0.4s both"
sx={{
'@keyframes fadeInUp': {
'0%': { opacity: 0, transform: 'translateY(30px)' },
'100%': { opacity: 1, transform: 'translateY(0)' }
}
}}
>
<CardHeader pb={3} display="flex" justifyContent="space-between" alignItems="flex-start">
<Box>