事件中心ui

src/views/Community/components/DynamicNewsDetail/StockListItem.js

@@ -125,13 +125,13 @@ const StockListItem = ({
       transition="all 0.2s"
     >
       {/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
-      <HStack spacing={3} align="stretch" flexWrap="wrap">
-        {/* 左侧：股票代码 + 名称 + 涨跌幅（垂直排列） - 收窄 */}
+      <HStack spacing={3} align="center" flexWrap="wrap">
+        {/* 左侧：股票代码 + 名称 + 涨跌幅（垂直排列） */}
         <VStack
           align="stretch"
           spacing={1}
-          minW="100px"
-          maxW="120px"
+          minW="110px"
+          maxW="130px"
           justify="center"
           flexShrink={0}
         >
@@ -190,12 +190,10 @@ const StockListItem = ({
         </VStack>
 
         {/* 分时图 - 响应式宽度 */}
-        <Box
-          minW="140px"
-          maxW="160px"
+        <VStack
+          minW="150px"
+          maxW="180px"
           flex="1"
-          maxH="50px"
-          h="auto"
           borderWidth="1px"
           borderColor={useColorModeValue('blue.100', 'blue.700')}
           borderRadius="md"
@@ -207,38 +205,36 @@ const StockListItem = ({
           }}
           cursor="pointer"
           flexShrink={1}
-          alignSelf="center"
-          overflow="hidden"
+          align="stretch"
+          spacing={1}
           _hover={{
             borderColor: useColorModeValue('blue.300', 'blue.500'),
-            boxShadow: 'sm'
+            boxShadow: 'md',
+            transform: 'translateY(-1px)'
           }}
           transition="all 0.2s"
         >
           <Text
             fontSize="xs"
             color={useColorModeValue('blue.700', 'blue.200')}
-            mb={1}
             fontWeight="semibold"
             whiteSpace="nowrap"
           >
             📈 分时
           </Text>
-          <Box overflow="hidden">
+          <Box h="50px" flex="1">
             <MiniTimelineChart
               stockCode={stock.stock_code}
               eventTime={eventTime}
             />
           </Box>
-        </Box>
+        </VStack>
 
         {/* K线图 - 响应式宽度 */}
-        <Box
-          minW="140px"
-          maxW="160px"
+        <VStack
+          minW="150px"
+          maxW="180px"
           flex="1"
-          maxH="50px"
-          h="auto"
           borderWidth="1px"
           borderColor={useColorModeValue('purple.100', 'purple.700')}
           borderRadius="md"
@@ -250,30 +246,30 @@ const StockListItem = ({
           }}
           cursor="pointer"
           flexShrink={1}
-          alignSelf="center"
-          overflow="hidden"
+          align="stretch"
+          spacing={1}
           _hover={{
             borderColor: useColorModeValue('purple.300', 'purple.500'),
-            boxShadow: 'sm'
+            boxShadow: 'md',
+            transform: 'translateY(-1px)'
           }}
           transition="all 0.2s"
         >
           <Text
             fontSize="xs"
             color={useColorModeValue('purple.700', 'purple.200')}
-            mb={1}
             fontWeight="semibold"
             whiteSpace="nowrap"
           >
             📊 日线
           </Text>
-          <Box overflow="hidden">
+          <Box h="50px" flex="1">
             <MiniKLineChart
               stockCode={stock.stock_code}
               eventTime={eventTime}
             />
           </Box>
-        </Box>
+        </VStack>
 
         {/* 关联描述 - 升级和降级处理 */}
         {stock.relation_desc && (