fix: 分时图UI调整
This commit is contained in:
@@ -130,7 +130,7 @@ const StockListItem = ({
|
|||||||
{/* 单行紧凑布局:名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
|
{/* 单行紧凑布局:名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
|
||||||
<HStack spacing={2} align="center" flexWrap="wrap">
|
<HStack spacing={2} align="center" flexWrap="wrap">
|
||||||
{/* 左侧:股票信息区 */}
|
{/* 左侧:股票信息区 */}
|
||||||
<HStack spacing={2} minW="360px" maxW="380px" flexShrink={0}>
|
<HStack spacing={2} flexShrink={0}>
|
||||||
{/* 股票代码 + 名称 + 涨跌幅 */}
|
{/* 股票代码 + 名称 + 涨跌幅 */}
|
||||||
<VStack
|
<VStack
|
||||||
align="stretch"
|
align="stretch"
|
||||||
@@ -194,24 +194,24 @@ const StockListItem = ({
|
|||||||
</HStack>
|
</HStack>
|
||||||
</VStack>
|
</VStack>
|
||||||
|
|
||||||
{/* 分时图 - 更紧凑 */}
|
{/* 分时图 - 自适应 */}
|
||||||
<VStack
|
<VStack
|
||||||
w="115px"
|
flex={1}
|
||||||
|
minW="80px"
|
||||||
|
maxW="150px"
|
||||||
borderWidth="1px"
|
borderWidth="1px"
|
||||||
borderColor="rgba(59, 130, 246, 0.3)"
|
borderColor="rgba(59, 130, 246, 0.3)"
|
||||||
borderRadius="md"
|
borderRadius="md"
|
||||||
px={1.5}
|
px={2}
|
||||||
py={1}
|
py={1.5}
|
||||||
bg="rgba(59, 130, 246, 0.1)"
|
bg="rgba(59, 130, 246, 0.1)"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
setIsTimelineModalOpen(true);
|
setIsTimelineModalOpen(true);
|
||||||
}}
|
}}
|
||||||
cursor="pointer"
|
cursor="pointer"
|
||||||
flexShrink={0}
|
|
||||||
align="stretch"
|
align="stretch"
|
||||||
spacing={0}
|
spacing={0}
|
||||||
h="fit-content"
|
|
||||||
_hover={{
|
_hover={{
|
||||||
borderColor: '#3B82F6',
|
borderColor: '#3B82F6',
|
||||||
boxShadow: '0 0 10px rgba(59, 130, 246, 0.3)',
|
boxShadow: '0 0 10px rgba(59, 130, 246, 0.3)',
|
||||||
@@ -228,7 +228,7 @@ const StockListItem = ({
|
|||||||
>
|
>
|
||||||
📈 分时
|
📈 分时
|
||||||
</Text>
|
</Text>
|
||||||
<Box h="32px">
|
<Box h="28px">
|
||||||
<MiniTimelineChart
|
<MiniTimelineChart
|
||||||
stockCode={stock.stock_code}
|
stockCode={stock.stock_code}
|
||||||
eventTime={eventTime}
|
eventTime={eventTime}
|
||||||
@@ -236,24 +236,24 @@ const StockListItem = ({
|
|||||||
</Box>
|
</Box>
|
||||||
</VStack>
|
</VStack>
|
||||||
|
|
||||||
{/* K线图 - 更紧凑 */}
|
{/* K线图 - 自适应 */}
|
||||||
<VStack
|
<VStack
|
||||||
w="115px"
|
flex={1}
|
||||||
|
minW="80px"
|
||||||
|
maxW="150px"
|
||||||
borderWidth="1px"
|
borderWidth="1px"
|
||||||
borderColor="rgba(168, 85, 247, 0.3)"
|
borderColor="rgba(168, 85, 247, 0.3)"
|
||||||
borderRadius="md"
|
borderRadius="md"
|
||||||
px={1.5}
|
px={2}
|
||||||
py={1}
|
py={1.5}
|
||||||
bg="rgba(168, 85, 247, 0.1)"
|
bg="rgba(168, 85, 247, 0.1)"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
setIsKLineModalOpen(true);
|
setIsKLineModalOpen(true);
|
||||||
}}
|
}}
|
||||||
cursor="pointer"
|
cursor="pointer"
|
||||||
flexShrink={0}
|
|
||||||
align="stretch"
|
align="stretch"
|
||||||
spacing={0}
|
spacing={0}
|
||||||
h="fit-content"
|
|
||||||
_hover={{
|
_hover={{
|
||||||
borderColor: '#A855F7',
|
borderColor: '#A855F7',
|
||||||
boxShadow: '0 0 10px rgba(168, 85, 247, 0.3)',
|
boxShadow: '0 0 10px rgba(168, 85, 247, 0.3)',
|
||||||
@@ -270,7 +270,7 @@ const StockListItem = ({
|
|||||||
>
|
>
|
||||||
📊 日线
|
📊 日线
|
||||||
</Text>
|
</Text>
|
||||||
<Box h="32px">
|
<Box h="28px">
|
||||||
<MiniKLineChart
|
<MiniKLineChart
|
||||||
stockCode={stock.stock_code}
|
stockCode={stock.stock_code}
|
||||||
eventTime={eventTime}
|
eventTime={eventTime}
|
||||||
|
|||||||
Reference in New Issue
Block a user