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

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-05 15:26:45 +08:00
parent e85a6a14d1
commit b60c196f9e
2 changed files with 244 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
src/views/Concept/index.js
View File

@@ -132,6 +132,168 @@ const pulseAnimation = keyframes`
100% { transform: scale(1); }
`;
// K线流动动画 - 模拟股票走势
const klineFlowAnimation = keyframes`
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
`;
// 网格扫描动画
const gridScanAnimation = keyframes`
0% { opacity: 0.3; transform: translateY(0); }
50% { opacity: 0.6; transform: translateY(-20px); }
100% { opacity: 0.3; transform: translateY(0); }
`;
// 脉冲光点动画
const pulseGlowAnimation = keyframes`
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.2); }
`;
/**
* 金融数据流动背景组件 - 模拟K线走势
*/
const FinanceFlowBackground = () => (
<Box
position="absolute"
top={0}
left={0}
right={0}
bottom={0}
overflow="hidden"
pointerEvents="none"
zIndex={0}
>
{/* 深色渐变底层 */}
<Box
position="absolute"
top={0}
left={0}
right={0}
bottom={0}
bgGradient="linear(to-br, gray.900, #0f172a, gray.900)"
/>
{/* 网格线背景 */}
<Box
position="absolute"
top={0}
left={0}
right={0}
bottom={0}
opacity={0.08}
backgroundImage={`
linear-gradient(rgba(139, 92, 246, 0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(139, 92, 246, 0.3) 1px, transparent 1px)
`}
backgroundSize="60px 60px"
/>
{/* K线流动效果 - 多条线 */}
{[...Array(6)].map((_, i) => (
<Box
key={i}
position="absolute"
top={`${15 + i * 15}%`}
left={0}
right={0}
height="2px"
opacity={0.15 + (i % 3) * 0.05}
>
<Box
position="absolute"
width="200px"
height="100%"
bgGradient={i % 2 === 0
? "linear(to-r, transparent, rgba(239, 68, 68, 0.8), rgba(239, 68, 68, 0.4), transparent)"
: "linear(to-r, transparent, rgba(34, 197, 94, 0.8), rgba(34, 197, 94, 0.4), transparent)"
}
css={{
animation: `${klineFlowAnimation} ${8 + i * 2}s linear infinite`,
animationDelay: `${i * 1.5}s`,
}}
/>
</Box>
))}
{/* 垂直扫描线 */}
<Box
position="absolute"
top={0}
bottom={0}
width="1px"
left="20%"
bgGradient="linear(to-b, transparent, rgba(139, 92, 246, 0.5), transparent)"
css={{ animation: `${gridScanAnimation} 4s ease-in-out infinite` }}
/>
<Box
position="absolute"
top={0}
bottom={0}
width="1px"
left="50%"
bgGradient="linear(to-b, transparent, rgba(6, 182, 212, 0.5), transparent)"
css={{ animation: `${gridScanAnimation} 5s ease-in-out infinite 1s` }}
/>
<Box
position="absolute"
top={0}
bottom={0}
width="1px"
left="80%"
bgGradient="linear(to-b, transparent, rgba(168, 85, 247, 0.5), transparent)"
css={{ animation: `${gridScanAnimation} 6s ease-in-out infinite 2s` }}
/>
{/* 脉冲光点 */}
{[
{ top: '20%', left: '15%', color: 'rgba(239, 68, 68, 0.6)', delay: '0s' },
{ top: '40%', left: '75%', color: 'rgba(34, 197, 94, 0.6)', delay: '1s' },
{ top: '60%', left: '30%', color: 'rgba(139, 92, 246, 0.6)', delay: '2s' },
{ top: '80%', left: '60%', color: 'rgba(6, 182, 212, 0.6)', delay: '3s' },
{ top: '30%', left: '90%', color: 'rgba(239, 68, 68, 0.5)', delay: '0.5s' },
{ top: '70%', left: '10%', color: 'rgba(34, 197, 94, 0.5)', delay: '1.5s' },
].map((dot, i) => (
<Box
key={i}
position="absolute"
top={dot.top}
left={dot.left}
width="6px"
height="6px"
borderRadius="full"
bg={dot.color}
boxShadow={`0 0 20px ${dot.color}`}
css={{
animation: `${pulseGlowAnimation} 3s ease-in-out infinite`,
animationDelay: dot.delay,
}}
/>
))}
{/* 顶部渐变遮罩 */}
<Box
position="absolute"
top={0}
left={0}
right={0}
height="30%"
bgGradient="linear(to-b, rgba(15, 23, 42, 0.8), transparent)"
/>
{/* 底部渐变遮罩 */}
<Box
position="absolute"
bottom={0}
left={0}
right={0}
height="30%"
bgGradient="linear(to-t, rgba(15, 23, 42, 0.9), transparent)"
/>
</Box>
);
const ConceptCenter = () => {
const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();
@@ -1189,53 +1351,73 @@ const ConceptCenter = () => {
isDarkMode={true}
/>
{/* 快捷按钮 - 深色主题 */}
<ButtonGroup size="sm" variant="outline" flexWrap="wrap">
{/* 快捷按钮 - 深色主题，更有区分度 */}
<ButtonGroup size="sm" flexWrap="wrap" spacing={2}>
<Button
onClick={() => handleQuickDateSelect(0)}
borderColor="whiteAlpha.300"
bg="whiteAlpha.100"
color="white"
borderRadius="full"
border="1px solid"
borderColor="whiteAlpha.200"
px={4}
_hover={{
bg: 'whiteAlpha.100',
borderColor: 'purple.400',
bg: 'purple.500',
borderColor: 'purple.500',
boxShadow: '0 0 12px rgba(139, 92, 246, 0.4)',
}}
transition="all 0.2s"
>
今天
</Button>
<Button
onClick={() => handleQuickDateSelect(1)}
borderColor="whiteAlpha.300"
bg="whiteAlpha.100"
color="white"
borderRadius="full"
border="1px solid"
borderColor="whiteAlpha.200"
px={4}
_hover={{
bg: 'whiteAlpha.100',
borderColor: 'purple.400',
bg: 'purple.500',
borderColor: 'purple.500',
boxShadow: '0 0 12px rgba(139, 92, 246, 0.4)',
}}
transition="all 0.2s"
>
昨天
</Button>
<Button
onClick={() => handleQuickDateSelect(7)}
borderColor="whiteAlpha.300"
bg="whiteAlpha.100"
color="white"
borderRadius="full"
border="1px solid"
borderColor="whiteAlpha.200"
px={4}
_hover={{
bg: 'whiteAlpha.100',
borderColor: 'purple.400',
bg: 'purple.500',
borderColor: 'purple.500',
boxShadow: '0 0 12px rgba(139, 92, 246, 0.4)',
}}
transition="all 0.2s"
>
一周前
</Button>
<Button
onClick={() => handleQuickDateSelect(30)}
borderColor="whiteAlpha.300"
bg="whiteAlpha.100"
color="white"
borderRadius="full"
border="1px solid"
borderColor="whiteAlpha.200"
px={4}
_hover={{
bg: 'whiteAlpha.100',
borderColor: 'purple.400',
bg: 'purple.500',
borderColor: 'purple.500',
boxShadow: '0 0 12px rgba(139, 92, 246, 0.4)',
}}
transition="all 0.2s"
>
一月前
</Button>
@@ -1245,7 +1427,10 @@ const ConceptCenter = () => {
);
return (
<Box minH="100vh" bg="linear-gradient(to-b, gray.900, slate.900, gray.900)">
<Box minH="100vh" position="relative" overflow="hidden">
{/* 金融数据流动动画背景 */}
<FinanceFlowBackground />
{/* 导航栏已由 MainLayout 提供 */}
{/* Hero Section - 精简版 */}
@@ -1254,6 +1439,7 @@ const ConceptCenter = () => {
bgGradient="linear(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)"
color="white"
overflow="hidden"
zIndex={1}
>
{/* 科幻网格背景 */}
<Box
@@ -1457,7 +1643,7 @@ const ConceptCenter = () => {
</Box>
{/* 主内容区域 - 深色主题 */}
<Container maxW="container.xl" py={10}>
<Container maxW="container.xl" py={10} position="relative" zIndex={1}>
<Box mb={6}>
<DateSelector />
</Box>