update pay ui

src/views/StockOverview/index.js

@@ -26,7 +26,6 @@ import {
   Flex,
   Spacer,
   Icon,
-  useColorModeValue,
   useToast,
   Spinner,
   Center,
@@ -69,7 +68,7 @@ const tradingDaysSet = new Set(tradingDays);
 const StockOverview = () => {
   const navigate = useNavigate();
   const toast = useToast();
-  const colorMode = 'light'; // 固定为 light 模式
+  const colorMode = 'dark'; // 固定为 dark 深色模式
   const heatmapRef = useRef(null);
   const heatmapChart = useRef(null);
 
@@ -104,17 +103,17 @@ const StockOverview = () => {
   const [isStockModalOpen, setIsStockModalOpen] = useState(false);
   const [selectedConcept, setSelectedConcept] = useState(null);
 
-  // 专业的颜色主题
-  const bgColor = useColorModeValue('white', '#0a0a0a');
-  const cardBg = useColorModeValue('white', '#1a1a1a');
-  const borderColor = useColorModeValue('gray.200', '#333333');
-  const hoverBg = useColorModeValue('gray.50', '#2a2a2a');
-  const searchBg = useColorModeValue('white', '#1a1a1a');
-  const textColor = useColorModeValue('gray.800', 'white');
-  const subTextColor = useColorModeValue('gray.600', 'gray.400');
-  const goldColor = useColorModeValue('#FFD700', '#FFC107');
-  const accentColor = useColorModeValue('purple.600', goldColor);
-  const heroBg = useColorModeValue('linear(to-br, purple.600, pink.500)', 'linear(to-br, #0a0a0a, #1a1a1a)');
+  // 深色主题配色 - 参考概念中心
+  const bgColor = '#0a0a0f'; // 深色背景
+  const cardBg = 'rgba(255, 255, 255, 0.03)'; // 玻璃态卡片背景
+  const borderColor = 'rgba(255, 255, 255, 0.08)'; // 边框
+  const hoverBg = 'rgba(255, 255, 255, 0.06)'; // 悬停背景
+  const searchBg = 'rgba(255, 255, 255, 0.05)'; // 搜索框背景
+  const textColor = 'rgba(255, 255, 255, 0.95)'; // 主文字
+  const subTextColor = 'rgba(255, 255, 255, 0.6)'; // 次要文字
+  const goldColor = '#8b5cf6'; // 使用紫色作为强调色
+  const accentColor = '#8b5cf6'; // 紫色强调
+  const heroBg = 'linear(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)'; // 深色极光背景
 
   // 打开个股列表弹窗
   const handleViewStocks = useCallback((e, concept) => {
@@ -575,10 +574,29 @@ const StockOverview = () => {
   );
 
   return (
-    <Box minH="100vh" bg={bgColor}>
-      {/* 导航栏已由 MainLayout 提供 */}
-
-
+    <Box minH="100vh" bg={bgColor} position="relative" overflow="hidden">
+      {/* 全局极光背景 */}
+      <Box
+        position="fixed"
+        inset={0}
+        bgGradient="radial(ellipse at 20% 0%, rgba(139, 92, 246, 0.15) 0%, transparent 50%)"
+        pointerEvents="none"
+        zIndex={0}
+      />
+      <Box
+        position="fixed"
+        inset={0}
+        bgGradient="radial(ellipse at 80% 100%, rgba(59, 130, 246, 0.1) 0%, transparent 50%)"
+        pointerEvents="none"
+        zIndex={0}
+      />
+      <Box
+        position="fixed"
+        inset={0}
+        bgGradient="radial(ellipse at 50% 50%, rgba(236, 72, 153, 0.05) 0%, transparent 70%)"
+        pointerEvents="none"
+        zIndex={0}
+      />
 
       {/* Hero Section */}
       <Box
@@ -588,7 +606,8 @@ const StockOverview = () => {
         overflow="visible"
         pt={{ base: 20, md: 24 }}
         pb={{ base: 16, md: 20 }}
-        borderBottom={colorMode === 'dark' ? `2px solid ${goldColor}` : 'none'}
+        borderBottom={`1px solid rgba(139, 92, 246, 0.3)`}
+        zIndex={1}
       >
         {/* 背景装饰 */}
         <Box
@@ -597,10 +616,10 @@ const StockOverview = () => {
           right="-10%"
           width="40%"
           height="120%"
-          bg={colorMode === 'dark' ? `${goldColor}10` : 'whiteAlpha.100'}
+          bg={`${goldColor}15`}
           transform="rotate(12deg)"
           borderRadius="full"
-          filter="blur(40px)"
+          filter="blur(60px)"
         />
         
         <Container maxW="container.xl" position="relative">
@@ -814,7 +833,7 @@ const StockOverview = () => {
       </Box>
 
       {/* 主内容区 */}
-      <Container maxW="container.xl" py={10}>
+      <Container maxW="container.xl" py={10} position="relative" zIndex={1}>
         {/* 日期选择器 */}
         <Box mb={6}>
           <Flex align="center" gap={4} flexWrap="wrap">
@@ -848,11 +867,18 @@ const StockOverview = () => {
           {selectedDate ? (
             <HotspotOverview selectedDate={selectedDate} />
           ) : (
-            <Card bg={cardBg} borderWidth="1px" borderColor={borderColor}>
+            <Card
+              bg={cardBg}
+              backdropFilter="blur(20px)"
+              borderWidth="1px"
+              borderColor={borderColor}
+              borderRadius="24px"
+              boxShadow="0 8px 32px rgba(0, 0, 0, 0.3)"
+            >
               <CardBody>
                 <Center h="400px">
                   <VStack spacing={4}>
-                    <Spinner size="xl" color="purple.500" thickness="4px" />
+                    <Spinner size="xl" color="#8b5cf6" thickness="4px" />
                     <Text color={subTextColor}>加载热点概览数据...</Text>
                   </VStack>
                 </Center>