update ui

src/views/Community/components/HeroPanel.js

@@ -469,18 +469,18 @@ const ConceptFlowAnimation = () => {
   // 根据涨跌幅计算字体大小（涨跌幅越大，字体越大）
   const getFontSize = (changePct) => {
     const absChange = Math.abs(changePct);
-    if (absChange >= 10) return 'md';      // 超大涨跌
-    if (absChange >= 7) return 'sm';       // 大涨跌
-    if (absChange >= 5) return 'sm';       // 中涨跌
-    if (absChange >= 3) return 'xs';       // 小涨跌
-    return 'xs';                            // 微涨跌
+    if (absChange >= 10) return 'xl';      // 超大涨跌 - 20px
+    if (absChange >= 7) return 'lg';       // 大涨跌 - 18px
+    if (absChange >= 5) return 'md';       // 中涨跌 - 16px
+    if (absChange >= 3) return 'md';       // 小涨跌 - 16px
+    return 'sm';                            // 微涨跌 - 14px
   };
 
   return (
     <VStack spacing={3} h="200px" justify="center" overflow="hidden" position="relative" w="100%">
       {rows.map((row, rowIndex) => {
-        // 每行不同的速度：第一行25秒，第二行30秒，第三行35秒
-        const duration = 25 + rowIndex * 5;
+        // 每行不同的速度：第一行50秒，第二行60秒，第三行70秒（更慢）
+        const duration = 50 + rowIndex * 10;
 
         return (
           <Box
@@ -514,25 +514,15 @@ const ConceptFlowAnimation = () => {
             const isHovered = hoveredConcept === `${rowIndex}-${idx}`;
 
             const fontSize = getFontSize(changePct);
-            const borderWidth = fontSize === 'md' ? '3px' : '2px';
+            const isLargeFontSize = fontSize === 'xl' || fontSize === 'lg';
 
             return (
               <Box
                 key={`${rowIndex}-${idx}`}
-                px={4}
-                py={2}
-                borderRadius="full"
-                bg="whiteAlpha.200"
-                borderWidth={borderWidth}
-                borderColor={color}
-                color="white"
-                fontWeight={fontSize === 'md' ? 'extrabold' : 'bold'}
-                fontSize={fontSize}
-                whiteSpace="nowrap"
+                px={2}
                 cursor="pointer"
                 position="relative"
                 transition="all 0.3s ease"
-                boxShadow={`0 0 ${fontSize === 'md' ? '15px' : '10px'} ${color}${fontSize === 'md' ? '60' : '40'}`}
                 onMouseEnter={() => {
                   setIsPaused(true);
                   setHoveredConcept(`${rowIndex}-${idx}`);
@@ -543,14 +533,23 @@ const ConceptFlowAnimation = () => {
                 }}
                 onClick={() => handleConceptClick(concept.name)}
                 _hover={{
-                  transform: 'scale(1.15)',
-                  bg: 'whiteAlpha.300',
-                  boxShadow: `0 0 25px ${color}80`,
+                  transform: 'scale(1.2)',
                   zIndex: 100
                 }}
               >
                 {/* 概念名称 */}
-                <Text as="span" color={color}>
+                <Text
+                  as="span"
+                  color={color}
+                  fontSize={fontSize}
+                  fontWeight={isLargeFontSize ? 'extrabold' : 'bold'}
+                  textShadow={`0 0 ${isLargeFontSize ? '12px' : '8px'} ${color}80, 0 2px 4px rgba(0,0,0,0.5)`}
+                  whiteSpace="nowrap"
+                  transition="all 0.3s ease"
+                  _hover={{
+                    textShadow: `0 0 20px ${color}, 0 0 30px ${color}60, 0 2px 6px rgba(0,0,0,0.7)`
+                  }}
+                >
                   {concept.name}
                 </Text>
 
@@ -814,21 +813,8 @@ const HeroPanel = () => {
               <Box
                 w="100%"
                 flex="1"
-                bg="whiteAlpha.100"
-                borderRadius="xl"
-                borderWidth="1px"
-                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)"
-                p={3}
                 position="relative"
                 overflow="hidden"
-                transition="all 0.3s ease"
-                _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)"
-                }}
               >
                 <ConceptFlowAnimation />
               </Box>