style(StockQuoteCard): 优化布局和样式
- 数据区块改为三列布局:估值指标 | 市值股本 | 主力动态 - 流通市值、发行总股本、52周波动 放在同一列 - 区块标题高亮显示(金色 + 发光效果) - 注释掉公司信息模块(成立日期、注册资本、所在地等) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -147,12 +147,13 @@ const GlassSection: React.FC<GlassSectionProps> = ({ title, children, flex = 1 }
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<Text
|
<Text
|
||||||
fontSize="13px"
|
fontSize="14px"
|
||||||
fontWeight="600"
|
fontWeight="700"
|
||||||
color={T.textSecondary}
|
color={T.gold}
|
||||||
mb={3}
|
mb={3}
|
||||||
textTransform="uppercase"
|
textTransform="uppercase"
|
||||||
letterSpacing="0.1em"
|
letterSpacing="0.1em"
|
||||||
|
textShadow={`0 0 12px ${T.gold}60`}
|
||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
</Text>
|
</Text>
|
||||||
@@ -369,10 +370,10 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
|
|
||||||
{/* ========== 数据区块(Bento Grid)========== */}
|
{/* ========== 数据区块(三列布局)========== */}
|
||||||
<Flex gap={4} flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
|
<Flex gap={4} flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
|
||||||
{/* 关键指标 */}
|
{/* 第一列:估值指标 */}
|
||||||
<GlassSection title="关键指标" flex={1}>
|
<GlassSection title="估值指标" flex={1}>
|
||||||
<VStack align="stretch" spacing={2}>
|
<VStack align="stretch" spacing={2}>
|
||||||
<MetricRow
|
<MetricRow
|
||||||
label="市盈率 (PE)"
|
label="市盈率 (PE)"
|
||||||
@@ -380,6 +381,21 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
valueColor={T.cyan}
|
valueColor={T.cyan}
|
||||||
highlight
|
highlight
|
||||||
/>
|
/>
|
||||||
|
<MetricRow
|
||||||
|
label="流通股本"
|
||||||
|
value={quoteData.floatShares ? `${quoteData.floatShares}亿股` : '-'}
|
||||||
|
/>
|
||||||
|
<MetricRow
|
||||||
|
label="换手率"
|
||||||
|
value={quoteData.turnoverRate !== undefined ? `${quoteData.turnoverRate.toFixed(2)}%` : '-'}
|
||||||
|
valueColor={quoteData.turnoverRate && quoteData.turnoverRate > 5 ? T.orange : T.textWhite}
|
||||||
|
/>
|
||||||
|
</VStack>
|
||||||
|
</GlassSection>
|
||||||
|
|
||||||
|
{/* 第二列:市值股本 */}
|
||||||
|
<GlassSection title="市值股本" flex={1}>
|
||||||
|
<VStack align="stretch" spacing={2}>
|
||||||
<MetricRow
|
<MetricRow
|
||||||
label="流通市值"
|
label="流通市值"
|
||||||
value={quoteData.marketCap || '-'}
|
value={quoteData.marketCap || '-'}
|
||||||
@@ -390,15 +406,6 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
label="发行总股本"
|
label="发行总股本"
|
||||||
value={quoteData.totalShares ? `${quoteData.totalShares}亿股` : '-'}
|
value={quoteData.totalShares ? `${quoteData.totalShares}亿股` : '-'}
|
||||||
/>
|
/>
|
||||||
<MetricRow
|
|
||||||
label="流通股本"
|
|
||||||
value={quoteData.floatShares ? `${quoteData.floatShares}亿股` : '-'}
|
|
||||||
/>
|
|
||||||
<MetricRow
|
|
||||||
label="换手率"
|
|
||||||
value={quoteData.turnoverRate !== undefined ? `${quoteData.turnoverRate.toFixed(2)}%` : '-'}
|
|
||||||
valueColor={quoteData.turnoverRate && quoteData.turnoverRate > 5 ? T.orange : T.textWhite}
|
|
||||||
/>
|
|
||||||
<MetricRow
|
<MetricRow
|
||||||
label="52周波动"
|
label="52周波动"
|
||||||
value={`${formatPrice(quoteData.week52Low)} - ${formatPrice(quoteData.week52High)}`}
|
value={`${formatPrice(quoteData.week52Low)} - ${formatPrice(quoteData.week52High)}`}
|
||||||
@@ -406,7 +413,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
</VStack>
|
</VStack>
|
||||||
</GlassSection>
|
</GlassSection>
|
||||||
|
|
||||||
{/* 主力动态 */}
|
{/* 第三列:主力动态 */}
|
||||||
<GlassSection title="主力动态" flex={1}>
|
<GlassSection title="主力动态" flex={1}>
|
||||||
<VStack align="stretch" spacing={2}>
|
<VStack align="stretch" spacing={2}>
|
||||||
<MetricRow
|
<MetricRow
|
||||||
@@ -450,17 +457,15 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
</GlassSection>
|
</GlassSection>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|
||||||
{/* ========== 公司信息 ========== */}
|
{/* ========== 公司信息(已注释)========== */}
|
||||||
{basicInfo && (
|
{/* {basicInfo && (
|
||||||
<>
|
<>
|
||||||
{/* 分隔线 */}
|
|
||||||
<Box
|
<Box
|
||||||
h="1px"
|
h="1px"
|
||||||
bg={`linear-gradient(90deg, transparent, ${T.gold}30, transparent)`}
|
bg={`linear-gradient(90deg, transparent, ${T.gold}30, transparent)`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Flex gap={8} flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
|
<Flex gap={8} flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
|
||||||
{/* 公司属性 */}
|
|
||||||
<HStack spacing={6} flex={1} flexWrap="wrap" fontSize="14px">
|
<HStack spacing={6} flex={1} flexWrap="wrap" fontSize="14px">
|
||||||
<HStack spacing={2}>
|
<HStack spacing={2}>
|
||||||
<Icon as={Calendar} color={T.textMuted} boxSize={4} />
|
<Icon as={Calendar} color={T.textMuted} boxSize={4} />
|
||||||
@@ -501,7 +506,6 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
</HStack>
|
</HStack>
|
||||||
</HStack>
|
</HStack>
|
||||||
|
|
||||||
{/* 公司简介 */}
|
|
||||||
<Box
|
<Box
|
||||||
flex={2}
|
flex={2}
|
||||||
borderLeftWidth="1px"
|
borderLeftWidth="1px"
|
||||||
@@ -518,7 +522,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
</Box>
|
</Box>
|
||||||
</Flex>
|
</Flex>
|
||||||
</>
|
</>
|
||||||
)}
|
)} */}
|
||||||
</VStack>
|
</VStack>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user