feat: k线图自适应
This commit is contained in:
@@ -161,8 +161,8 @@ const MiniKLineChart = React.memo(function MiniKLineChart({ stockCode, eventTime
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: 140,
|
width: '100%',
|
||||||
height: 40,
|
height: 30,
|
||||||
cursor: onClick ? 'pointer' : 'default'
|
cursor: onClick ? 'pointer' : 'default'
|
||||||
}}
|
}}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
|
|||||||
@@ -115,9 +115,11 @@ const StockListItem = ({
|
|||||||
transition="all 0.2s"
|
transition="all 0.2s"
|
||||||
>
|
>
|
||||||
<VStack align="stretch" spacing={3}>
|
<VStack align="stretch" spacing={3}>
|
||||||
{/* 顶部:股票代码 + 名称 + 操作按钮 */}
|
{/* 顶部:股票代码 + 名称 + 操作按钮(上下两行布局) */}
|
||||||
|
<VStack align="stretch" spacing={2}>
|
||||||
|
{/* 第一行:股票代码 + 涨跌幅 + 操作按钮 */}
|
||||||
<Flex justify="space-between" align="center">
|
<Flex justify="space-between" align="center">
|
||||||
{/* 左侧:代码 + 名称 */}
|
{/* 左侧:代码 + 涨跌幅 */}
|
||||||
<Flex align="baseline" gap={2}>
|
<Flex align="baseline" gap={2}>
|
||||||
<Text
|
<Text
|
||||||
fontSize="md"
|
fontSize="md"
|
||||||
@@ -129,9 +131,6 @@ const StockListItem = ({
|
|||||||
>
|
>
|
||||||
{stock.stock_code}
|
{stock.stock_code}
|
||||||
</Text>
|
</Text>
|
||||||
<Text fontSize="sm" color={nameColor}>
|
|
||||||
{stock.stock_name}
|
|
||||||
</Text>
|
|
||||||
<Text
|
<Text
|
||||||
fontSize="sm"
|
fontSize="sm"
|
||||||
fontWeight="semibold"
|
fontWeight="semibold"
|
||||||
@@ -161,12 +160,28 @@ const StockListItem = ({
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
handleViewDetail();
|
handleViewDetail();
|
||||||
}}
|
}}
|
||||||
|
display={{ base: 'inline-flex', lg: 'none' }}
|
||||||
>
|
>
|
||||||
查看
|
查看
|
||||||
</Button>
|
</Button>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|
||||||
|
{/* 第二行:公司名称(彩色高亮) */}
|
||||||
|
<Text
|
||||||
|
fontSize="sm"
|
||||||
|
fontWeight="medium"
|
||||||
|
color={codeColor}
|
||||||
|
bg={useColorModeValue('blue.50', 'blue.900')}
|
||||||
|
px={2}
|
||||||
|
py={0.5}
|
||||||
|
borderRadius="sm"
|
||||||
|
width="fit-content"
|
||||||
|
>
|
||||||
|
{stock.stock_name}
|
||||||
|
</Text>
|
||||||
|
</VStack>
|
||||||
|
|
||||||
{/* 分隔线 */}
|
{/* 分隔线 */}
|
||||||
<Box borderTop="1px solid" borderColor={dividerColor} />
|
<Box borderTop="1px solid" borderColor={dividerColor} />
|
||||||
|
|
||||||
@@ -209,7 +224,19 @@ const StockListItem = ({
|
|||||||
关联描述:
|
关联描述:
|
||||||
</Text>
|
</Text>
|
||||||
<Collapse in={isDescExpanded} startingHeight={40}>
|
<Collapse in={isDescExpanded} startingHeight={40}>
|
||||||
<Text fontSize="sm" color={nameColor} lineHeight="1.6">
|
<Text
|
||||||
|
fontSize="sm"
|
||||||
|
color={nameColor}
|
||||||
|
lineHeight="1.6"
|
||||||
|
cursor={needTruncate ? "pointer" : "default"}
|
||||||
|
onClick={(e) => {
|
||||||
|
if (needTruncate) {
|
||||||
|
e.stopPropagation();
|
||||||
|
setIsDescExpanded(!isDescExpanded);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
_hover={needTruncate ? { opacity: 0.8 } : {}}
|
||||||
|
>
|
||||||
{relationText}
|
{relationText}
|
||||||
</Text>
|
</Text>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
|
|||||||
@@ -165,8 +165,8 @@ const MiniTimelineChart = React.memo(function MiniTimelineChart({ stockCode, eve
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: 140,
|
width: '100%',
|
||||||
height: 40,
|
height: 30,
|
||||||
cursor: onClick ? 'pointer' : 'default'
|
cursor: onClick ? 'pointer' : 'default'
|
||||||
}}
|
}}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
|
|||||||
Reference in New Issue
Block a user