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