事件中心UI优化

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

@@ -126,13 +126,14 @@ const StockListItem = ({
     >
       {/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
       <HStack spacing={3} align="stretch">
-        {/* 左侧：股票名称 + 涨跌幅（垂直排列） */}
+        {/* 左侧：股票名称 + 涨跌幅（垂直排列） - 收窄 */}
         <VStack
           align="stretch"
           spacing={1}
-          minW="140px"
-          maxW="160px"
+          minW="100px"
+          maxW="120px"
           justify="center"
+          flexShrink={0}
         >
           <Tooltip
             label="点击查看股票详情"
@@ -143,7 +144,7 @@ const StockListItem = ({
             fontSize="xs"
           >
             <Text
-              fontSize="md"
+              fontSize="sm"
               fontWeight="bold"
               color={codeColor}
               noOfLines={1}
@@ -154,9 +155,9 @@ const StockListItem = ({
               {stock.stock_name}
             </Text>
           </Tooltip>
-          <HStack spacing={2} align="center">
+          <HStack spacing={1} align="center">
             <Text
-              fontSize="xl"
+              fontSize="lg"
               fontWeight="bold"
               color={getChangeColor(change)}
             >
@@ -176,9 +177,9 @@ const StockListItem = ({
           </HStack>
         </VStack>
 
-        {/* 分时图 */}
+        {/* 分时图 - 固定宽度 */}
         <Box
-          w="180px"
+          w="160px"
           borderWidth="1px"
           borderColor={useColorModeValue('blue.100', 'blue.700')}
           borderRadius="md"
@@ -189,6 +190,7 @@ const StockListItem = ({
             setIsModalOpen(true);
           }}
           cursor="pointer"
+          flexShrink={0}
           _hover={{
             borderColor: useColorModeValue('blue.300', 'blue.500'),
             boxShadow: 'sm'
@@ -209,9 +211,9 @@ const StockListItem = ({
           />
         </Box>
 
-        {/* K线图 */}
+        {/* K线图 - 固定宽度 */}
         <Box
-          w="180px"
+          w="160px"
           borderWidth="1px"
           borderColor={useColorModeValue('purple.100', 'purple.700')}
           borderRadius="md"
@@ -222,6 +224,7 @@ const StockListItem = ({
             setIsModalOpen(true);
           }}
           cursor="pointer"
+          flexShrink={0}
           _hover={{
             borderColor: useColorModeValue('purple.300', 'purple.500'),
             boxShadow: 'sm'
@@ -242,7 +245,7 @@ const StockListItem = ({
           />
         </Box>
 
-        {/* 关联描述（单行显示，点击展开） */}
+        {/* 关联描述（单行显示，点击展开）- 占据更多空间 */}
         {relationText && relationText !== '--' && (
           <Tooltip
             label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
@@ -269,10 +272,8 @@ const StockListItem = ({
               }}
               transition="background 0.2s"
             >
-              <Text fontSize="xs" color={descColor} fontWeight="semibold" mb={1}>
-                关联描述
-              </Text>
-              <Collapse in={isDescExpanded} startingHeight={20}>
+              {/* 去掉"关联描述"标题 */}
+              <Collapse in={isDescExpanded} startingHeight={40}>
                 <Text
                   fontSize="sm"
                   color={nameColor}