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