fix: 调整相关概念卡片UI
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user