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
|
||||
fontSize="13px"
|
||||
fontWeight="600"
|
||||
color={T.textSecondary}
|
||||
fontSize="14px"
|
||||
fontWeight="700"
|
||||
color={T.gold}
|
||||
mb={3}
|
||||
textTransform="uppercase"
|
||||
letterSpacing="0.1em"
|
||||
textShadow={`0 0 12px ${T.gold}60`}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
@@ -369,10 +370,10 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{/* ========== 数据区块(Bento Grid)========== */}
|
||||
{/* ========== 数据区块(三列布局)========== */}
|
||||
<Flex gap={4} flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
|
||||
{/* 关键指标 */}
|
||||
<GlassSection title="关键指标" flex={1}>
|
||||
{/* 第一列:估值指标 */}
|
||||
<GlassSection title="估值指标" flex={1}>
|
||||
<VStack align="stretch" spacing={2}>
|
||||
<MetricRow
|
||||
label="市盈率 (PE)"
|
||||
@@ -380,6 +381,21 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
valueColor={T.cyan}
|
||||
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
|
||||
label="流通市值"
|
||||
value={quoteData.marketCap || '-'}
|
||||
@@ -390,15 +406,6 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
label="发行总股本"
|
||||
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
|
||||
label="52周波动"
|
||||
value={`${formatPrice(quoteData.week52Low)} - ${formatPrice(quoteData.week52High)}`}
|
||||
@@ -406,7 +413,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
</VStack>
|
||||
</GlassSection>
|
||||
|
||||
{/* 主力动态 */}
|
||||
{/* 第三列:主力动态 */}
|
||||
<GlassSection title="主力动态" flex={1}>
|
||||
<VStack align="stretch" spacing={2}>
|
||||
<MetricRow
|
||||
@@ -450,17 +457,15 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
</GlassSection>
|
||||
</Flex>
|
||||
|
||||
{/* ========== 公司信息 ========== */}
|
||||
{basicInfo && (
|
||||
{/* ========== 公司信息(已注释)========== */}
|
||||
{/* {basicInfo && (
|
||||
<>
|
||||
{/* 分隔线 */}
|
||||
<Box
|
||||
h="1px"
|
||||
bg={`linear-gradient(90deg, transparent, ${T.gold}30, transparent)`}
|
||||
/>
|
||||
|
||||
<Flex gap={8} flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
|
||||
{/* 公司属性 */}
|
||||
<HStack spacing={6} flex={1} flexWrap="wrap" fontSize="14px">
|
||||
<HStack spacing={2}>
|
||||
<Icon as={Calendar} color={T.textMuted} boxSize={4} />
|
||||
@@ -501,7 +506,6 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
{/* 公司简介 */}
|
||||
<Box
|
||||
flex={2}
|
||||
borderLeftWidth="1px"
|
||||
@@ -518,7 +522,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
</Box>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
)} */}
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user