fix: 调整相关概念卡片UI

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

@@ -2,13 +2,15 @@
 // 精简模式股票卡片组件（浮动卡片样式）
 
 import React from 'react';
+import { useSelector } from 'react-redux';
 import {
   Box,
   Text,
   Tooltip,
   useColorModeValue,
 } from '@chakra-ui/react';
-import { getChangeColor, getChangeBackgroundGradient, getChangeBorderColor } from '../../../../utils/colorUtils';
+import { selectIsMobile } from '@store/slices/deviceSlice';
+import { getChangeColor, getChangeBackgroundGradient, getChangeBorderColor } from '@utils/colorUtils';
 
 /**
  * 精简模式股票卡片组件
@@ -17,6 +19,7 @@ import { getChangeColor, getChangeBackgroundGradient, getChangeBorderColor } fro
  * @param {Object} props.quote - 股票行情数据（可选）
  */
 const CompactStockItem = ({ stock, quote = null }) => {
+  const isMobile = useSelector(selectIsMobile);
   const nameColor = useColorModeValue('gray.700', 'gray.300');
 
   const handleViewDetail = () => {
@@ -45,10 +48,10 @@ const CompactStockItem = ({ stock, quote = null }) => {
     >
       <Box
         bgGradient={getChangeBackgroundGradient(change)}
-        borderWidth="3px"
+        borderWidth="1px"
         borderColor={getChangeBorderColor(change)}
-        borderRadius="2xl"
-        p={4}
+        borderRadius="xl"
+        p={2}
         onClick={handleViewDetail}
         cursor="pointer"
         boxShadow="lg"
@@ -69,14 +72,14 @@ const CompactStockItem = ({ stock, quote = null }) => {
         }}
         transition="all 0.3s ease-in-out"
         display="inline-block"
-        minW="150px"
+        minW="100px"
       >
         {/* 股票代码 */}
         <Text
-          fontSize="md"
+          fontSize={isMobile ? "sm" : "md"}
           fontWeight="bold"
           color={getChangeColor(change)}
-          mb={2}
+          mb={isMobile ? 1 : 2}
           textAlign="center"
         >
           {stock.stock_code}
@@ -84,7 +87,7 @@ const CompactStockItem = ({ stock, quote = null }) => {
 
         {/* 涨跌幅 - 超大号显示 */}
         <Text
-          fontSize="3xl"
+          fontSize={isMobile ? "xl" : "3xl"}
           fontWeight="black"
           color={getChangeColor(change)}
           textAlign="center"
@@ -96,9 +99,9 @@ const CompactStockItem = ({ stock, quote = null }) => {
 
         {/* 股票名称（小字） */}
         <Text
-          fontSize="xs"
+          fontSize={isMobile ? "2xs" : "xs"}
           color={nameColor}
-          mt={2}
+          mt={isMobile ? 1 : 2}
           textAlign="center"
           noOfLines={1}
           fontWeight="medium"