fix: 调整相关概念卡片UI

This commit is contained in:
zdl
2025-11-27 17:22:49 +08:00
parent 60e9a40a1f
commit 589e1c20f9
2 changed files with 22 additions and 19 deletions

View File

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

View File

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