From 589e1c20f97ad62a28e6035f057003b43289693d Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 27 Nov 2025 17:22:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E6=A6=82=E5=BF=B5=E5=8D=A1=E7=89=87UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DynamicNewsDetail/CompactStockItem.js     | 23 +++++++++++--------
 .../SimpleConceptCard.js                      | 18 +++++++--------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsDetail/CompactStockItem.js b/src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
index 2eb1ea34..b7c35204 100644
--- a/src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
+++ b/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"
diff --git a/src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/SimpleConceptCard.js b/src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/SimpleConceptCard.js
index 212269d0..f89a9d3a 100644
--- a/src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/SimpleConceptCard.js
+++ b/src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/SimpleConceptCard.js
@@ -37,16 +37,16 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
   return (
     <VStack
       align="stretch"
-      spacing={2}
+      spacing={1}
       bg={cardBg}
       borderWidth="1px"
       borderColor={borderColor}
       borderRadius="md"
-      px={4}
-      py={2}
+      px={2}
+      py={1}
       cursor="pointer"
       transition="all 0.2s"
-      minW="200px"
+      minW="100px"
       _hover={{
         transform: 'translateY(-1px)',
         boxShadow: 'md',
@@ -68,17 +68,17 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
       </Text>
 
       {/* 第二行：相关度 + 涨跌幅 */}
-      <Flex justify="space-between" align="center" gap={2} flexWrap="wrap">
+      <Flex justify="space-between" align="center" gap={1} flexWrap="wrap">
         {/* 相关度标签 */}
         <Box
           bg={relevanceColors.bg}
           color={relevanceColors.color}
-          px={2}
+          px={1.5}
           py={0.5}
           borderRadius="sm"
           flexShrink={0}
         >
-          <Text fontSize="xs" fontWeight="medium" whiteSpace="nowrap">
+          <Text fontSize="10px" fontWeight="medium" whiteSpace="nowrap">
             相关度: {relevanceScore}%
           </Text>
         </Box>
@@ -87,8 +87,8 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
         {changePct !== null && (
           <Badge
             colorScheme={changeColor}
-            fontSize="xs"
-            px={2}
+            fontSize="10px"
+            px={1.5}
             py={0.5}
             flexShrink={0}
           >