更新Company页面的UI为FUI风格
This commit is contained in:
@@ -128,7 +128,7 @@ const GlassSection: React.FC<GlassSectionProps> = ({ title, children, flex = 1 }
|
||||
bg={T.bgInset}
|
||||
borderRadius={T.radiusLG}
|
||||
border={`1px solid ${T.borderGlass}`}
|
||||
p={5}
|
||||
p={4}
|
||||
position="relative"
|
||||
transition={T.transitionFast}
|
||||
_hover={{
|
||||
@@ -176,12 +176,12 @@ const MetricRow: React.FC<MetricRowProps> = ({
|
||||
valueColor = T.textWhite,
|
||||
highlight = false,
|
||||
}) => (
|
||||
<HStack justify="space-between" fontSize="14px">
|
||||
<HStack justify="space-between" fontSize="13px">
|
||||
<Text color={T.textMuted}>{label}</Text>
|
||||
<Text
|
||||
color={valueColor}
|
||||
fontWeight={highlight ? '700' : '600'}
|
||||
fontSize={highlight ? '16px' : '14px'}
|
||||
fontSize={highlight ? '15px' : '13px'}
|
||||
textShadow={highlight ? `0 0 10px ${valueColor}40` : undefined}
|
||||
>
|
||||
{value}
|
||||
@@ -232,26 +232,26 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
<>
|
||||
<Box
|
||||
{...glassCardStyle.containerGold}
|
||||
p={8}
|
||||
p={6}
|
||||
>
|
||||
<GlowDecorations />
|
||||
|
||||
{/* 内容区域(在装饰层之上)*/}
|
||||
<VStack align="stretch" spacing={6} position="relative" zIndex={1}>
|
||||
<VStack align="stretch" spacing={4} position="relative" zIndex={1}>
|
||||
|
||||
{/* ========== 头部区域 ========== */}
|
||||
<Flex justify="space-between" align="center">
|
||||
{/* 左侧:股票名称 + 代码 + 行业 */}
|
||||
<HStack spacing={4} align="center">
|
||||
<Text
|
||||
fontSize="28px"
|
||||
fontSize="24px"
|
||||
fontWeight="800"
|
||||
color={T.textPrimary}
|
||||
textShadow={`0 0 20px ${T.gold}40`}
|
||||
>
|
||||
{quoteData.name}
|
||||
</Text>
|
||||
<Text fontSize="18px" color={T.textMuted} fontWeight="normal">
|
||||
<Text fontSize="16px" color={T.textMuted} fontWeight="normal">
|
||||
({quoteData.code})
|
||||
</Text>
|
||||
|
||||
@@ -314,9 +314,9 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
</Flex>
|
||||
|
||||
{/* ========== 价格区域 ========== */}
|
||||
<HStack align="baseline" spacing={4}>
|
||||
<HStack align="baseline" spacing={3}>
|
||||
<Text
|
||||
fontSize="52px"
|
||||
fontSize="42px"
|
||||
fontWeight="bold"
|
||||
color={priceColor}
|
||||
textShadow={priceGlow}
|
||||
@@ -327,10 +327,10 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
<Badge
|
||||
bg={priceBg}
|
||||
color={priceColor}
|
||||
fontSize="20px"
|
||||
fontSize="18px"
|
||||
fontWeight="bold"
|
||||
px={4}
|
||||
py={2}
|
||||
px={3}
|
||||
py={1.5}
|
||||
borderRadius={T.radiusMD}
|
||||
boxShadow={priceGlow}
|
||||
>
|
||||
@@ -370,10 +370,10 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
</HStack>
|
||||
|
||||
{/* ========== 数据区块(Bento Grid)========== */}
|
||||
<Flex gap={5} flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
|
||||
<Flex gap={4} flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
|
||||
{/* 关键指标 */}
|
||||
<GlassSection title="关键指标" flex={1}>
|
||||
<VStack align="stretch" spacing={2.5}>
|
||||
<VStack align="stretch" spacing={2}>
|
||||
<MetricRow
|
||||
label="市盈率 (PE)"
|
||||
value={quoteData.pe ? quoteData.pe.toFixed(2) : '-'}
|
||||
@@ -408,7 +408,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
|
||||
{/* 主力动态 */}
|
||||
<GlassSection title="主力动态" flex={1}>
|
||||
<VStack align="stretch" spacing={3}>
|
||||
<VStack align="stretch" spacing={2}>
|
||||
<MetricRow
|
||||
label="主力净流入"
|
||||
value={formatNetInflow(quoteData.mainNetInflow)}
|
||||
|
||||
Reference in New Issue
Block a user